Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "VIATRA2/Model based development of AJAX user interfaces"

(The implementation)
(The implementation)
Line 11: Line 11:
 
The user interfaces' platform independent models (UiPIM) are the input models of the development technique. These models can be created by the domain specific editor of the framework (ViatraDSM). In the present case, the platform specific models (PSM) are the instances of the web metamodels (e.g., HTML, JavaScript), located under the web entity in the model space.
 
The user interfaces' platform independent models (UiPIM) are the input models of the development technique. These models can be created by the domain specific editor of the framework (ViatraDSM). In the present case, the platform specific models (PSM) are the instances of the web metamodels (e.g., HTML, JavaScript), located under the web entity in the model space.
  
The first transformation, called <tt>ajaxPSMPages</tt>, iterates through the PIM and creates the platform specific ones. The Fig. 1 shows the rule transforming the platform independent selectionList into the <tt>select</tt> model element, which represents the <tt>SELECT</tt> tag of the HTML specification.
+
The first transformation, called <tt>ajaxPSMPages</tt>, iterates through the PIM and creates the platform specific ones. The Fig. 1 shows the rule transforming the platform independent <tt>selectionList</tt> into the <tt>select</tt> model element, which represents the <tt>SELECT</tt> tag of the HTML specification.
  
 
[[Image:webapp_psm.png | frame | center | Fig. 1: ajaxPSMPages: the rule creating the select model element]]
 
[[Image:webapp_psm.png | frame | center | Fig. 1: ajaxPSMPages: the rule creating the select model element]]

Revision as of 15:52, 15 June 2008

Description of the example

The model-driven development is a new direction in information technology. The Object Management Group (OMG) has a proposal for this idea, called the Model-Driven Architecture (MDA). It suggests that the development of softwares should be done by platform independent models (PIM) which have to be transformed to platform specific models (PSM) and finally, we should generate the code of the application by these platform dependent models.

At the same time, other new trend is that enterprise applications are more and more often designed for web-based user interface because of its wide accessibility. Compared to fat client applications, it presents new challenges like the limited set of widgets and the slow response of server-side event handling. In general, we resolve this problem with the use of JavaScript-based client-side event handling, which is executed in the local browser. Among these solutions, the most popular is AJAX (Asynchronous JavaScript And XML) which communicates with the server via XML-based messages.

In the VIATRA2 framework, we implemented a development technique which provides the automatic code generation of AJAX applications' user interfaces by the use of a platform independent model, which is able to describe native and web-based user interfaces, too. After preparing the platform dependent metamodel of the AJAX environment, we implemented the transformations creating the platform specific models from the platform independent ones. Finally, we also worked out the code generating transformations which iterate through these platform specific models.

The implementation

The user interfaces' platform independent models (UiPIM) are the input models of the development technique. These models can be created by the domain specific editor of the framework (ViatraDSM). In the present case, the platform specific models (PSM) are the instances of the web metamodels (e.g., HTML, JavaScript), located under the web entity in the model space.

The first transformation, called ajaxPSMPages, iterates through the PIM and creates the platform specific ones. The Fig. 1 shows the rule transforming the platform independent selectionList into the select model element, which represents the SELECT tag of the HTML specification.

Fig. 1: ajaxPSMPages: the rule creating the select model element


Following the idea of the model-driven development, the code of the HTML pages is generated from these platform specific models. A rule of the ajaxCODEPages transformation, which prints the SELECT tag, can be seen on the Fig. 2.

Fig. 2: ajaxCODEPages: the rule printing the SELECT tag

The attached source code

TODO

Back to the top