View source for Stardust/Enhancing and Embedding Stardust/Browser Modeler/Change Protocol

=Change Protocol=

The Browser Modeler uses a specific protocol to submit changes in the JavaScript objects in the client via REST to the server. 

Hereby, every change e.g.

* creation and deletion of an element,
* a change on a shape's geometry (position, size),
* a change of properties of an element

is immediately submitted to the server via REST. Hereby, only the changed data themselves and information on which objects are changed are submitted - not all data of all changed objects.

After this, the change is processed on the server. Processing the change may cause other changes depending on the server-side, e.g. changing the type of a data may cause data mappings using this data to become invalid. These server-side changes are calculated and send back to the initiating client and possibly other clients registered for the same modeling session and connected via Web Socketsto receive push of changes.

Changes received on the client are dispatched to listeners for these changes, usually the Modeler Outline, Process Diagrams, Properties Pages.

Usually, programmers especially those just creating Extensions to Lightdust Extension Points do not have to think about the above. Service functions are provided by base classes of Views, Properties Pages and Diagram Elements to deal with the protocol. The main tasks for these programmers are 

* submitting well-defined changes and
* reacting on updates of elements in the resspective components (Modeler Outline, Views, Properties Pages and Diagram Elements).

E.g for submitting changes in a Properties Page <code>TestPropertiesPage</code> for Activities you may define

<source lang="javascript">
	function ActivityTestPropertiesPage(propertiesPanel) {
		var propertiesPage = m_propertiesPage.createPropertiesPage(
				propertiesPanel, "testPropertiesPage", m_i18nUtils.getProperty("modeler.propertyPages.testPropertiesPage.title"),
				"../../images/icons/test-properties-page.png");

		m_utils.inheritFields(this, propertiesPage);
		m_utils.inheritMethods(ActivityDisplayPropertiesPage.prototype,
				propertiesPage);

</source>

and just invoke the method <code>submitChanges()</code>

<source lang="javascript">
this.nameInput = jQuery("#testPropertiesPage #nameInput");

this.nameInput.change({page: this}, function(event){
   event.data.page.submitChanges({modelElement : {name: event.data.page.nameInput}});
})
</source>

Note, that we need to apply the change to the Model Element because the Element the Activity Properties Page is dealing with is the Activity Symbol and <code>modelElement</code> is the Activity of that symbol.

==Direct Submission of Changes==

To directly submit changes you may invoke

<source lang="javascript">
   m_commandsController.submitCommand(m_command
					.createUpdateModelElementCommand(model.id, element.getElementUuid(), changes));};
</source>

whereby <code>model</code> is the Model you are working on, <code>element</code> the Model or Diagram Element and <code>changes</code> a JavaScript object only containing the changes to be submitted.