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

RIA & Ajax: Article

Real-World AJAX Book Preview: JackBe Visual UI Builder (JackBuilder)

Real-World AJAX Book Preview: JackBe Visual UI Builder (JackBuilder)

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.

JackBe Visual UI Builder (JackBuilder)
JackBe was the first company to provide a WYSIWYG visual GUI development tool for developing AJAX applications, releasing version 1.0 of JackBuilder in 2003.

JackBuilder is written completely in JavaScript code. In fact, since it is itself a JackBe AJAX application, it exemplifies the power and the type of applications that can be created with the NQ Suite framework.

JackBuilder's WYSIWYG capability dramatically simplifies the AJAX application UI layout, design, and programming, reducing the skill level required to build advanced AJAX applications. The result is that AJAX applications can be developed quickly and inexpensively, without compromising quality or sophistication.

Figure 16.3 shows the different elements that make up JackBuilder. Each element is discussed below.

Session and Mode Information

Menu Bar
The menu bar contains commands that provide access to several tools. It also supports access key shortcuts.

Toolbar
The toolbar contains the most common actions to access commands and workspace properties quickly.

Mode Display
The mode display advises the developer of the current mode setting. The mode has the following settings:

  • Strict: JackBuilder will check HTML syntax for the current form. This mode will guarantee cross-browser applications.
  • Loose: JackBuilder won't check HTML syntax for the current form. Containers can be created without their corresponding closing tags, and will accept the placement of objects anywhere in the canvas regardless of syntax or form.
Session Info
The session info section displays the user name and active project. The user name refers to the login under which the current user logged into JackBuilder.

Toolset Group Selector
The Object Gallery toolbox contains a list of out-of-the-box standard HTML controls as well as JackBeenhanced HTML controls that can be placed on JackBe Forms. They are sorted into three groups:

  • Components: This toolset contains standard DHTML controls plus the Calendar, Combo, Menu, and Toolbar, NQ Suite-enhanced HTML controls.
  • Containers: This toolset contains standard DHTML containers plus the Tabbed Pane and Close Tab, NQ Suite-enhanced HTML controls.
  • Advanced Objects: This toolset contains NQ Suite-enhanced HTML controls. Some of the controls are the AxisChart, JBTable, Struts Error, and Slider.
Properties Palette
The Properties Palette contains the most used properties for the control that has the current focus. This palette is composed of three major parts:
  • Object Selector: The object selector is located in the Properties Palette. This combo contains a list of all the objects created by the developer. It's an easy way of selecting objects, especially those that are hidden or in bottom layers.
  • Properties List: The properties list displays the properties of the element that has the focus.
  • Property Description: The property description lists a small concise description of the property that contains the focus.
Canvas
The canvas is the active workspace. When you double-click a control, it is added to the canvas. Controls can only be dragged within the canvas borders.

Form Tab Selector
JackBuilder can have any number of forms open simultaneously. The form tab selector is used to set focus to forms.

JBML JackBe Markup Language
The second programming scheme that NQ Suite provides is the JackBe Markup Language (JBML), an XML-based language for the specification of projects and forms. JBML files hold the information relevant to a project and the forms it includes. An XML dialect is used to represent the information because it is easily interpreted by developers, tools, and programs.

JBML allows developers already familiar with JackBe's AJAX offerings to develop applications with or without JackBuilder.

Tool Chain
JackBe's development tool chain includes using JackBuilder to create the JBML file and subsequently passing the JBML to the JBML compiler. JackBuilder, being the primary tool (though not the only one) for project and form manipulation, is also the main producer of JBML files. When forms are saved, JackBuilder generates JBML and sends JBML to the server, at which point the compiler generates optimized DHTML and JavaScript for browser rendering.

Since JBML is based on an XML Schema, developers can create JBML from any IDE or XML editor.

JBML code can also be created dynamically by an application (using any programming language) and passed to the JBML compiler at runtime.

Resource Bundles
Resource bundles contain locale-specific objects. One can write program code that is largely independent of the user's locale isolating most, if not all, of the locale-specific information in the resource bundles.

The main advantages in using JackBe Resource Bundles are:

  • Easily localized, or translated applications
  • The option to handle multiple locales
  • Easy modification for future support of more locales
Building an Application with JackBuilder
In this section we will see the details of constructing a login screen with JackBuilder. This screen will contain an input text, input password, image, and submit button.

Creating the Screen in JackBuilder
The first step is to create a new JackBe Form as shown in Figure 16.4, which will create a new canvas.

The next step is to create the elements that comprise the login screen.

To add an object, we double-click on the desired element from the Object Gallery palette shown in Figure 16.5.

For this screen, we added the following elements:

  • Body
  • Form
  • Image
  • Input Text
  • Input Password
  • Button
The next step is to set the properties for each element. We changed the image src property and path, the input text and password labels, the button's label and width, and called the login() function on the onclick event.

Figure 16.6 shows the form with the property changes.

Saving the JackBe Form
When the form is saved, there are two things that happen. JackBuilder creates a JBML file and the JBML compiler creates a runtime version ready to be passed to the browser.

Listing 16.1 shows the JBML code for the Login Screen.

Listing 16.1 Login form JBML code

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
2: <jbml xsi:schemaLocation="http://www.jackbe.com/2005/JBMLSchema ../xsd/jbml-base.xsd"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.jackbe.com/2005/
JBMLSchema">
3:    <jbform author="jorgec" description="Login Form" name="formLogin"
usesPrefix="false">
4:      <body imagePath="jackbeImages" imageType="gif" id="i1">
5:        <form id="i3" name="i3" method="GET" strutsEnabled="false"
usesPacemaker="false" validateRequired="false">
6:          <image draggable="false" imageName="keys" imageType="gif"
imagePath="imgAlias0" id="i5" dropTarget="false"/>
7:          <inputtext validationName="any" left="80" top="100" label="User:"
size="20" name="i6" disabled="false" readonly="false" required="false" id="i6"/>
8:          <inputpassword disabled="false" readonly="false" required="false"
label="Pass:" name="i7" id="i7" size="20" validationName="any" left="80" top="140"/>
9:          <button imageType="gif" imagePath="jackbeImages" left="111" top="179"
name="i8" width="100" description="Button" label="Login" id="i8" onclick="login();"
actionType="button"/>
10:        </form>
11:      </body>
12:    </jbform>
13:</jbml>

JBML Code Description
Line 3 declares a new form with the <jbform> tag.

Lines 4-11 declare the elements that comprise the form (body, form, input, image, and button elements) along with their properties.

Since JackBuilder uses JBML files as the form representation data, any changes to the JBML are reflected in the form.

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.