Welcome!

Eclipse Authors: Pat Romanski, Elizabeth White, Liz McMillan, David H Deans, JP Morgenthal

Related Topics: Eclipse, Adobe Flex

Eclipse: Article

A Runtime Integration Approach to Application Development

Plug-in Integrator Pattern

Figure 2 shows the basic components of the application. The UI of the application is simple, with a list/tree in the left panel to show different objects to be edited/viewed. On the right there is the editor/viewer container that is implemented using the Plug-in Integrator Pattern. The figure also shows component plug-ins to the container as tabs in the top. To view the object data as a graph, the view can be added statically to the container or loaded by the configurator, but depending on the requirements, View2 (the raw data view) and View3(Stats View) are added at a later time to augment the application functionality. View3 also needs to propagate a message to the View1, asking it to graph the new stats rather than just the data in object-1.

In this application different views for an object type are injected to the container at runtime and the existing components are used to provide new functionality as and when necessary by integrating plug-ins at runtime.   

 

The XML configuration file for the above application is shown in Annexure-2. 
 
The “containerConfiguration” element shows the basic container configuration with attributes for the container’s class and plug-in interface definitions. It also shows the plug-in components added to the container as child element “pluginComponent”.

As per the current application, the application ships with one plug-in component and the other two are injected to the container at a later time. Refer to Figure 3 for details.

In this application the container implements the Plug-in Integrator Pattern and hence there is only one component deployed to the container when it’s first shipped. In Figure 3 the first deployed XML is shown in bold face. Afterward the two other component views are added to the container and their definition gets added to the configuration accordingly as shown in Figure 3. For an application implementing this pattern, new views and functionality can be added dynamically without any need for compiling the application. In the next section we will see how these plug-in components can be integrated together to provide elegant user-friendly functionality.


To deploy an individual component to the container, it’s first required to implement the plug-in interface being exposed by the container. In the present case its mx.core.IUIComponent, so any Flex UI component can be plugged into the present container. Let’s consider the case of View3 and see how it has plugged into the container, initialized and hooked on to the View1 for graphing support during runtime, without changing any line of code or recompiling. The basic code listing for View3 is shown below.

<mx:Canvas>
<mx:Script>
<![CDATA[
public function initStatData(series:ArrayCollection,length:int):void
{//logic to come up with stats data from passed in ones
}
public function raiseGraphEvent():void{
  //raise the GRAPH EVT here
  dispatchEvent(new GrapphEvent("draw",dataProvider));
}
]]>
</mx:Script>
<mx:DataGrid >
  <mx:dataProvider>
    <mx:ArrayCollection id="dataProvider" />
  </mx:dataProvider>
  <mx:columns>
  <mx:DataGridColumn headerText="Sum" dataField="col1"/>
    …..
  </mx:columns>
</mx:DataGrid>
<mx:Label text="Stats for:Object"/>
<mx:Button label="GraphIt" click="raiseGraphEvent()"/>
</mx:Canvas>
 
The component shown above is pretty simple. It shows the basic mathematical operations on each row of the data series being represented by object-1. The function initStatData(..) is responsible for initializing the component, whereas the raiseGraphEvent() function raises an event having the new mathematical data series as the new data to draw a graph.

 <pluginComponent id="333345678" name="View3">
    <property name="label">
        <value><![CDATA[Stats View]]></value>
    </property>
    <moduleURL>/an/external/module/url-view3</moduleURL>
    <initParam type="funcHookup" bindToContainerProperty="editingObject">
        <selfFunction name="initStatsData">
            <arg name="param1">
               <objectRef srcObject="editingObject">
                    <evaluate expr="dataSeries"/>
               </objectRef>
            </arg>
            <arg name="param2">
               <objectRef srcObject="editingObject">
                <evaluate expr="dataSeries.processLength"/>
               </objectRef>
            </arg>                           
        </selfFunction>
    </initParam>               
</pluginComponent>

The listing above shows the configuration for the View3 plug-in component. The moduleURL is the location of the external module that contains the component plug-in. The component is initialized using the function hookup, calling the function “initStatData” with correct parameters being evaluated from the container’s editing object. As this component just raises an event of type GraphEvent and doesn't listen to any event by itself, there is no msgMap element required in the configuration. But this event will be tied in the View1 msgMap so that when this event is raised as a result of the “GraphIt” button click, the View1 can be refreshed with the graph drawing the mathematical result series. Let’s see the msgMap configuration of View1 to see how is that accomplished.

The msgMap configuration of View1 shows that it’s mapping View3 (referenced using the pluginCompid) GraphEvent with id “draw” to map to a handler for an event called “SomeEvent”.

<msgMap id="123456789" handler="event">
<srcExtentionPoint>
        <srcMsg id="draw" pluginCompid="333345678" type="somepkg::GraphEvent"/>
    </srcExtentionPoint>
    <destHandler>
        <destMsg id="graphIt" type="some.pkg::SomeEvent">
            <object clazz="some.pkg::SomeEvent">
                <property name="any">
                    <objectRef srcObject="srcEvent">
                        <evaluate expr="an.exp.to.get.req.data"/>
                    </objectRef>
                </property>
            </object>
        </destMsg>
    </destHandler>
</msgMap>

As in View3 the event raised was a different type ”GraphEvent”; it is needed to map that event to “SomeEvent” before propagating so that the handler function can handle it accordingly. It’s also possible to map the View3 GraphEvent to directly map to a handler in the View1 handler function; this can be achieved via the following msgMap configuration setting of View1.

 <msgMap id="123456789" handler="function">
<srcExtentionPoint>
        <srcMsg id="draw" pluginCompid="333345678" type="somepkg::GraphEvent"/>
    </srcExtentionPoint>
    <destHandler>
        <destHandlerFunc name="graphIthandlerFunc">
            <arg name="param1">
                <object clazz="some.pkg::SomeEvent">
                    <property name="any">
                       <objectRef srcObject="srcEvent">
                        <evaluate expr="an.exp.to.get.req.data"/>
                       </objectRef>
                    </property>
                </object>                       
            </arg>                   
        </destHandlerFunc>
    </destHandler>
</msgMap>

To come up with the msgMap setting, it’s required to go through the API documentation of both the components (View1 and View3). The configuration setting it just an easy way to integrate the functionality exposed by both components to come up with new features. The above example just shows the flexibility of the system when the Plug-in Integrator Pattern is used and the configuration is loaded externally and can be built and maintained with ease.

The concept of “initParam” to initialize a component based on a container variable to execute any component function to initialize state provides an efficient and easy way to glue components as plug-ins to the container. Also the msgMap to map any message or function callback from a source component to a message or function handler in the destination component provides the ultimate flexibility and integration points to build enterprise-ready products just by assembling already released and tested components at runtime.

This article is just an overview of the concepts being used in the Plug-in Integrator Pattern. The implementation of the pattern is already being done in Flex but needs some dedicated papers in that subject to explain.

Conclusion
The Plug-in Integrator Pattern discussed here is good for big projects being executed by enterprises where there are several groups working on separate projects of their own, but it becomes a breeze to integrate components from these already-released and tested projects to build new applications. It also provides a new dimension to Flex programming where the components being written once can be integrated in different projects without any change, thus promoting the “write once, deploy anywhere” concept. This pattern can readily be used in other platforms and programming languages to build flexible robust systems in no time. It also differs from the methodology used in already successful plug-in projects such as Eclipse and Firefox where the plug-ins are build on compile-time dependencies; this approach provides a way to build a plug-in based application with runtime aggregation.

More Stories By Indroniel Deb Roy

Indroniel Deb Roy works as an UI Architect for BlueCoat Systems.He has more than 10 years of development experience in the fields of J2EE and Web Application development. In his past he worked in developing web applications for Oracle, Novell, Packeteer, Knova etc. He has a passion for innovation and works with various Web2.0 & J2EE technologies and recently started on Smart Phone & IPhone Development.

More Stories By Alex Nhu

Alex Nhu works as a manager, UI Development at Packeteer Inc. He has more than 11 years of work experience designing and architecting complex server-side J2EE and XML applications. He loves developing Web applications with Flex now after getting a taste of developing UI using other RIA platforms.

Comments (1)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
Contextual Analytics of various threat data provides a deeper understanding of a given threat and enables identification of unknown threat vectors. In his session at @ThingsExpo, David Dufour, Head of Security Architecture, IoT, Webroot, Inc., discussed how through the use of Big Data analytics and deep data correlation across different threat types, it is possible to gain a better understanding of where, how and to what level of danger a malicious actor poses to an organization, and to determin...
The hierarchical architecture that distributes "compute" within the network specially at the edge can enable new services by harnessing emerging technologies. But Edge-Compute comes at increased cost that needs to be managed and potentially augmented by creative architecture solutions as there will always a catching-up with the capacity demands. Processing power in smartphones has enhanced YoY and there is increasingly spare compute capacity that can be potentially pooled. Uber has successfully ...
The deluge of IoT sensor data collected from connected devices and the powerful AI required to make that data actionable are giving rise to a hybrid ecosystem in which cloud, on-prem and edge processes become interweaved. Attendees will learn how emerging composable infrastructure solutions deliver the adaptive architecture needed to manage this new data reality. Machine learning algorithms can better anticipate data storms and automate resources to support surges, including fully scalable GPU-c...
We are seeing a major migration of enterprises applications to the cloud. As cloud and business use of real time applications accelerate, legacy networks are no longer able to architecturally support cloud adoption and deliver the performance and security required by highly distributed enterprises. These outdated solutions have become more costly and complicated to implement, install, manage, and maintain.SD-WAN offers unlimited capabilities for accessing the benefits of the cloud and Internet. ...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...
Machine learning has taken residence at our cities' cores and now we can finally have "smart cities." Cities are a collection of buildings made to provide the structure and safety necessary for people to function, create and survive. Buildings are a pool of ever-changing performance data from large automated systems such as heating and cooling to the people that live and work within them. Through machine learning, buildings can optimize performance, reduce costs, and improve occupant comfort by ...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.