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.
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.
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.
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
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
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.