Re-use the Nexaweb Way

Re-use of code snippets, objects and UI screens speeds up the development of applications and makes them easier to maintain. This article describes different approaches for reuse in Nexaweb.

XInclude

xInclude, based on the xInclude specification, enables developers to create a reusable segment of XML to include within a larger document (similar to using JSP includes). Using xInclude allows you to maintain an individual, centrally maintained XML segment that is referenced in multiple places rather than maintaining the same segment separately everywhere it’s used.

Below is an example of xInclude usage in a Nexaweb Application:

statecombo.xal --- XML to include in multiple XAL files.

<xal>
    <label text="States"/>
    <comboBox id="statesCombo">
        <listBox>
            <listItem text="Alabama" abv="AL"/>
            ...
        </listBox>
    </comboBox >
</xal>

index.xal --- An XAL Page that includes the statecombo.xal file.

 <xal>
    <rootPane>
        <verticalBoxPane/>
        <!--  include the statecombo box of the page. -->
        <xi:include xmlns:xi=http://openxal.org/core/xinclude" 
          src="statecombo.xal"/>
    </rootPane>
</xal>

When the client parses the index.xal page, it requests the statecombo.xal page asynchronously. This may mean the page is rendered before the include is finished being retrieved. In the example above the label and combobox specified in the statecombo.xal page will be added to the window when it is displayed.

Stylesheets

Nexaweb uses XML stylesheets to reuse component styles across an application.  The concept is similar to CSS, but with a few other advantages. 

stylesheet.xss --- Stylesheet containing style information for an application.

<styleSheet>
    <style applyTo=".loginButton">
        <normal backgroundColor="red" image="login.gif" 
         text="Login" onCommand="login.jsp"/>
        <disable text="Validation Error"/>
    </style>
    <style applyTo="window">
        <normal titlebackgroundColor="#windowGradient"/>
    </style>
</styleSheet>

One advantage of XML stylesheets is that they can define styles that are applied and removed as components move in and out of states.  In the example above the .loginButton style defines the text, background color, image and an action handler for a login button.  The style also defines a disable style that will cause a button with this style to display Validation Error when in the disable state. If the button is enabled, the text will be replaced with the text defined by the normal state (Login).

anyoldpage.xal - defines a login button inside a window.

<xal> <window> <button class="loginButton"/> </window> </xal>

 See the developer guide for more - Stylesheets

Plug-ins

Nexaweb Platform 4.x supports a Client plug-in architecture that allows you to extend the functionality of the Nexaweb Client with your own tags, attributes and XML syntax. This extensible architecture gives you the flexibility to use third-party products and custom UI components to meet business requirements.

The Nexaweb Client plug-in architecture supports UI widgets as well as logical operations, layout managers, communications or messaging libraries, or any other custom logic.

One typical use case involves using advanced charting capabilities. Although the Nexaweb Clients come with some built in charting ability, it may not sufficiently meet advanced charting requirements. Using the plug-in architecture, you can integrate a 3rd-party chart component, define your own XML tags, and format to display that chart. For example:

<window>
    <borderPane/>
    <label text="A custom chart" borderPosition="north" />
    <!-- a specialized chart created via the plug-in architecture -->
    <financialChart title="Dow Jones by year" 
        borderPosition="center" onSelect="myPage.jsp>
        <xAxis start="1950" end="2005"/>
        <yAxis start="0" y="5000"/>
        <pointData points="1900,2000,2020 ... "/>
    </financialChart>
</window>

 See the developer guide for more - Plug-ins

Technical Overview

At the most basic level, a plug-in is a class that extends com.nexaweb.client.tags.AbstractTagImpl and listens for changes on XML elements. These changes come in the form of com.nexaweb.xml.events.StructureChangeEvent and com.nexaweb.xml.events.AttributeChangeEvent. These classes are called tag-handlers, as each tag name has its own handling class. These classes are also referred to as bridge classes, because they form a bridge between XML and implementation classes, referred to as peers.

Packaging Plug-Ins

Plug-ins consist of three sets of resources: tag-mapping files, the tag-handler classes and the peer classes.

Tag-handling classes and peer classes follow the same deployment rules as Managed Client Objects (MCOs). Tag-mapping files are considered standard files. You may find it easier to combine your tag-mapping files and classes into a JAR file.  If you do this, you must change the nexweb-client.xml classpath to include this JAR, and change the tag-mapping location to use the "classpath://" specifier.

Macros

Nexaweb macros provide an easy way to encapsulate simple event-handling declarative markup language that can manipulate UI. Macros use xUpdate syntax to modify the UI presentation similar to a standard xUpdate page.  After the client parses a macro, it stores it and the macro can be called from code using:

samplepage.xal -- Create a table and create a button that when pressed, calls a macro to delete all the rows from the table.

<xal>
    <macro:macro xmlns:macro="http://openxal.org/core/macro" 
        name="clearTableMacro">
        <xm:modifications xmlns:xm=http://openxal.org/core/xmodify>
            <xm:remove-element select="id(''myTable'')/row" />
        </xm:modifications>
    </macro:macro>
    <rootPane>
        <verticalBoxPane />
        <button text="Clear Table"
            onCommand="macro://clearTableMacro.execute()" />
        <table width="300" height="300" id="myTable">
            <column>
                <header text="Name" />
            </column>
            <column>
                <header text="Phone Number" />
            </column>
            <row>
                <cell text="Brett Farve" />
                <cell text="555.333.4456" />
            </row>
            <row>
                <cell text="Gary Kobiak" />
                <cell text="555.888.4456" />
            </row>
        </table>
    </rootPane>
</xal> 

 See the developer guide for more - Macros

Wrapping it up:

With many different options for re-use, Nexaweb offers the UI designer, business logic developer and server-side engineer ways to simplify code and increase maintainability. You can also use other OOP and J2EE patterns in conjunction with Nexaweb functionality to help you create a well designed application.

By Bob Buffone