Related Topics: RIA Developer's Journal, AJAX World RIA Conference

RIA & Ajax: Article

Real-World AJAX Book Preview: Runtime File Description

Real-World AJAX Book Preview: Runtime File Description

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Runtime File Description
The runtime file contains JackBe code that represents the JackBe form content. When this form is parsed on the client, the NQ Suite's core will process it and convert it into HTML code that the browser can understand.

Displaying the Form in a Browser
To display the form in a browser, we must use a wrapper for the JackBe runtime form. In this example we use a JSP as a wrapper although any presentation technology can be used such as PHP, ASP, ASPX, CGI, etc. Listing 16.2 shows an example of what the wrapper should look like.

Listing 16.2

1: <jsp:include page="../jackbe/jsp/gc.jsp"/>
2: <script>
3: LJF("formLogin");
4: formLogin();
5: </script>

In Listing 16.2, Line 1 includes the gc.jsp file that will download the NQ Suite's core. Line 3 uses the API LJF function that loads a JackBe form called "formLogin" and puts it in the client's cache.

Line 4 calls the form's constructor, which will start the process of parsing the JackBe code into valid HTML. All this is done on the client side, saving precious bandwidth resources.

To display the form in the browser, simply call the jsp file in the address bar of the browser. For example: http://serverName:port/contextName/jsp/myform.jsp.

AJAX Bank - Building an Application with JackBe
The AJAX Bank application is an example of an AJAX-based consumer banking application. It demonstrates some of the features available when creating applications with the NQ Suite framework.

Composite Views
The AJAX Bank application incorporates composite views, a set of multiple views within a main view.

The NQ Suite framework lets you build composite views to generate pages containing display components that can be combined in a variety of ways. This approach provides modularity and reusability, as well as improved maintainability. Figure 16.8 shows the AJAX Bank composite views.

Creating the Helpful Information Drag-and-Drop
The drag-and-drop functionality of the AJAX Bank home page lets the user drag a menu item from the Helpful Information Menu into the empty section in the middle of the page. When the draggable menu item is released in this section, the appropriate screen will be displayed.

Menu Items can be deleted from the document by dragging them into the wastebasket icon. This particular part of the AJAX Bank screen was created using the following parts:

DropTarget
The DropTarget is actually a DIV. The NQ Suite framework Drag-and-Drop API allows a DIV and other containers to obtain DropTarget properties. A DropTarget is an object that can react to a draggable object being dropped within its borders.

Setting the DIV as a DropTarget is as simple as setting its DropTarget property to true and giving it a DropTarget instance name. See Figure 16.10.

Menu Container
The Menu DIV is a composite object. It was created using a DIV, an image, a label, and a draggable object. JackBuilder easily inserts simple or composite elements into containers at development time as well as at runtime.

Draggable Object
The draggable component is in itself a parameterizable component. This component is very simple and was created using a DIV and an anchor element. By containing the anchor element within a draggable DIV, the anchor, or any other non-draggable element can become draggable.

The next step was to parameterize the properties of this component that will change between every instance. In this case only the label property changes (Market Overview, Customer Service, etc.).

To parameterize properties in JackBuilder, just add a number to the left box of the desired property.

Finally, to make the object draggable, we set the DIV's draggable property to true and gave it a draggable object name.

Waste Basket
The Waste Basket DropTarget is an image whose DropTarget-enabled property is set to true. We called this instance wasteBskt.

The wasteBskt DropTarget instance's observer was programmed to detect when a draggable object was dropped within its borders. When this event happened, we use the NQ Suite API's RMV remove function to remove the draggable object from the document hierarchy. This function will remove an element along with all of its children (if any). Since the anchor was the DIV's child, it was removed as well.

Functionality
As mentioned earlier, when the user drops a menu item in the DropTarget, the corresponding screen will be displayed in the DropTarget DIV.

This is done by using the API's IJF function on the onDrop event of the DropTarget. The IJF function lets you insert a JackBe form or screen into any container at runtime without repainting the screen.

This valuable function makes applications highly responsive, effective, intuitive, and user-friendly.

Account Activity Screen
The Account Activity screen uses the NQ Suite's JBTable, DataModel, Pager, and Slider objects. Patterns used:

  1. MVC
  2. Observer/Observable
Participants and Responsibilities JBTable
This object is the view part of the MVC pattern. It displays the content of the DataModel object. By using the observer pattern, this view will reflect any changes to the DataModel to which it subscribes itself.

The JBTable object comes packaged with an extensive API. Some of its features are:

  • Click and movement listening events
  • Read/write or read-only cells
  • Drag-and-drop columns at runtime
  • Resizable columns at runtime
  • Hide/display of columns
  • Dynamic setting of background color by cell
DataModel
This object is the model part of the MVC pattern. Its responsibilities are to hold data in the form of a bidimensional array. By using the observable pattern, it is responsible for broadcasting any changes to its data to any registered observer.

The DataModel object comes packaged with a robust API. Some of its features are:

  • Supports five different types of DataModels
  • Ability to sort by column
  • Ability to filter data
  • Event to detect data changes
  • Data getter methods for:
    - Complete set of rows
    - Row
    - Cell
Pager
The pager object is the fast and easy way to page a JBTable or other view. To use the Pager, you simply need to know the instance name of the object to be paged. The JBTable will let the Pager know how many rows it has and how many rows per page. With this information, the Pager will automatically create the number of pages needed for the grid.

Slider
The slider object is a fast and easy way to select a range of values. The slider can be created with one or two knobs. Its graphical interface can be easily modified to suit your application's needs. The slider object's API features:

  • Ability to detect left or right knob movement
  • Dynamic setting and getting of knob values
  • Disabling or enabling knobs
  • Getters for range of values

Figure 16.5 shows how the Observer/Observable pattern is applied in the NQ Suite framework.

Creating the Screen

Slider
The slider component was added along with two labels that will register the left and right knob values as the knobs are moved.

JBTable
The JBTable object was added to the form. We set the grid's properties. To set this instance of the JBTable as the DataModel's observer, we used the Name property in the DataModel section of the properties palette.

The DataModel type was set as sortingFilter since we need the sorting and filtering capabilities.

The ColumnsWizard property was used to set the number of columns and their properties.

Pager
The pager object was added after the JBTable object. To bind the pager to the table, the pager's viewName property was set to point to the JBTable instance name.

Functionality
When the Account Activity menu item is clicked, the PM function is triggered to send a request to the server for the data. This data is added to the DataModel using the API add method.

As the data is added to the DataModel object, the JBTable immediately displays it. The Pager object is also updated to reflect the number of pages of the DataModel.

The subtotal and ending balance figures are calculated and displayed.

Filtering Functionality
To filter the Date column by a specific date, select the desired date from the Date column combo.

To filter the Date column by a range of dates, use the slider object. Select a range by moving the left and right sliders.

To filter the Amount column by a range of amounts, select the desired range from the Amount column combo.

To filter the Type column by a specific type, select the type from the Type column combo.

To filter by the Description column, type the string to search for in the Filter By Description input box.

In this application all filters are accumulative. That is to say that any additional applied filters will be applied to the filtered data, producing a new filtered DataModel, which is immediately reflected in the JBTable.

Data Binding
When the Account Activity screen is called, a request is made to the server for the data needed to populate it. Since the data is in XML format, we use the PM(pacemaker) API function.

The PM function is a wrapper for JackBe's XMLHttpRequest. This object also gives developers the ability to create "channels." This truly makes asynchronous calls to the server, each one of them sent by a different channel.

Using JackBe's Pacemaker object, any HTTP resource can be accessed. This object accepts any type of data in the server's response.

We could have easily gotten a Java object, PHP code, or data from IIS. The NQ Suite is agnostic to any Web or application server as well as any data source.

Conclusion
We hope you've seen how JackBe's visual IDE, JackBuilder, simplifies the task of creating an enterprise-class RIA such as the online banking example featured in this chapter. While there are clearly many approaches to developing AJAX RIAs, the use of a comprehensive and highly integrated development and runtime environment such as JackBe's NQ Suite means that the developer is freed from many of the tedious details such as ensuring cross-browser support and worrying about the performance, scalability, and security of the final application. Because JackBe offers both visual and programmatic approaches to development (via its JBML markup language and API), it's easy to integrate new RIA functionality into existing applications and server-side components without a major rip-and-replace of the whole application.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By John Crupi

John Crupi is Vice President and Engineering System Architect at Greenwave Systems, where he guides development on the edge-based visual analytics and real-time pattern discovery environment AXON Predict. He has over 25 years of experience executing enterprise systems and advanced visual analytics solutions. He was Chief Technology Officer at Predixion Software prior to its acquisition by Greenwave, and led development of the Predixion RIOT IoT analytics platform. He also served as CTO at real-time operational intelligence startup JackBe (acquired by German software behemoth Software AG) and as CTO of the Sun Microsystems SOA Practice, where he was recognized as a Sun Distinguished Engineer.

Mr. Crupi is co-author of the highly regarded Java reference Core J2EE Patterns: Best Practices and Design Strategies (Prentice Hall) and co-author of 13 patents on advanced analytics and pattern-based system design. He’s contributed to numerous industry journals and publications, served on the international advisory board for Sys-Con’s ‘AJAX & RIA Journal,’ and has specialized in advanced real-time patterns and analytics for IoT for the past 10 years. He earned his BS in Mechanical Engineering at University of Maryland College Park, and his MS in Engineering Administration with a sub-focus in Artificial Intelligence from The George Washington University in Washington, D.C.

John is a three-time "Washingtonian TECH TITAN” award recipient from Washingtonian Magazine for leadership recognition within the Washington Technology Community.

More Stories By Dan Malks

Dan Malks is Vice President of Application Platform Development at JackBe. He was a contributor to SYS-CON's best-selling 'Real-World AJAX' blockbuster (Chapter 16: Business RIAs: Creating the 'AJAX Bank' Application).

More Stories By Luis Derechin

Luis Derechin is the CEO of JackBe and is also a co-founder. Leader of JackBe both for daily operations and for long-term strategy, he has a noted history of founding companies that become both leaders in their categories and recognized successes. JackBe is Luis Derechin's third start-up?the previous two having been D'Hogar, a retail company that earned the loyalty of more than 500,000 customers, and AviMed, an online software provider for more than 17,000 healthcare professionals. He studied Business at Instituto Tecnologico Autonomo de Mexico and engineering at the University of California, San Diego.

Comments (0)

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.