Class: DataTransferClient

DataTransferClient (Beta)

The DataTransfer client acts as an API to share data between components via a user action such as drag and drop. As an example consider a user wanting to share a chart inside a chat. The DataTransfer Client can also make use of the Linker Client to share data between linked windows.

A component that shares data needs to publish the data types it can share by calling setEmitters. The Finsemble Window Manager automatically adds a draggable share icon to any component that calls setEmitters.

Similarly a component that can receive data needs to publish that using addReceivers. Since it is possible to have multiple components on a page receiving the data, you can add multiple receivers for the same dataType.

The Window Manager attempts to turn any component that calls addReceivers into a drop zone. However, this doesn't always work well, especially with complex components. You can designate your own drop zones by mapping your drop event handler to FSBL.DataTransferClient.drop.

Here is a tutorial on using the DataTransfer Client.

Members

openLinkerDataByDefault

Default: true

Set this to false to disable handling of linked data

SHARE_METHOD

This constant object contains all the share methods. You can use it in a receive handler to handle different share methods. Current share methods are

* SHARE_METHOD.DROP
* SHARE_METHOD.SPAWN
* SHARE_METHOD.LINKER
Example
// Ignore data unless it was dropped
function shareHandler(err, response) {
	if(response.shareMethod != FSBL.Clients.DataTransferClient.SHARE_METHOD.DROP) {
		return;
	}
	// Handle dropped data below:
}

Methods

addReceivers
()

clients/dataTransferClient.js, line 138

addReceivers adds receivers for the data that can be received by the component.

Name Type Description
params.receivers object

This is a list of objects, each containing a type and a handler function to call with the data once received. The receiver can take a regular expression as its type to provide the ability to receive multiple data types. Each type can have multiple handlers so you can use the same type multiple times in your call.

Example
DataTransferClient.addReceivers({
	receivers: [
		{
			type: "symbol",
		 	handler: changeSymbol
		}, {
			type: "chartiq.chart",
			handler: openChart
		}
	])
DataTransferClient.addReceivers({
	receivers: [
		{
			type: /.*/,
	 		handler: getEverythingAComponentCanEmit
		}
	])

dragStart
(event)

clients/dataTransferClient.js, line 297

This is a drag event handler for an element that can be dragged to share the data. The window manager uses this internally when the share icon is dragged. This can be attached to any element that needs to be draggable.

Name Type Description
event event

drop
(event)

clients/dataTransferClient.js, line 353

This is a drop event handler that can be attached to any element that you want to be a drop zone for the DataTransfer Client. It automatically requests data for all the data elements that are common between the receiver and the emitter.

Name Type Description
event event

getComponentsThatCanReceiveType
(params, cb)

clients/dataTransferClient.js, line 448

This gets a list of components that can receive a specific type. It looks in the config for each componentType for an advertiseReceivers property.

Name Type Description
params object
Name Type Description
type string optional
cb function optional

callback to be invoked with the list of component types

Examples
"Advanced Chart": {
		...
		"component": {
			"advertiseReceivers": ["chartiq.chart", "symbol"]
		},
		...
DataTransferClient.getComponentsThatCanReceiveType ({ type: "chartiq.chart"}, callback)
	

openSharedData
(params)

clients/dataTransferClient.js, line 480

This will either open a component with the shared data or publish the shared data using the linker client if the window is linked

Name Type Description
params object
Name Type Description
data object optional
publishOnly object optional

if the component is linked, this will only publish the data, not force open a window if it does not exist

setEmitters
()

clients/dataTransferClient.js, line 91

setEmitters sets all the data that can be shared by the component.

Name Type Description
params.emitters object

This is a list of objects which contain a dataType and a function to get the data.

Example
DataTransferClient.setEmitters({
	emitters: [
		{
			type: "symbol",
			data: getSymbol
		},
		{
			type: "chartiq.chart",
			data: getChart
		}
	]
})