Aviarc Studio and the Widget Framework - Aviarc - Bringing urgency to the delivery of business innovation

Aviarc Studio and the Widget Framework

Aviarc™ application source code is written in standard Unicode XML text documents. Aviarc defines XML schemas to which the source must adhere, and within this source developers can embed Java (or JavaScript) as required. All source code can be read via your favourite text editor, and all XML documents can be read using your favourite XML parser.

Application logic flows are described using a workflow language that allows complex application logic to be written in a high-level language. If it is necessary for particularly complex application logic, or to support legacy modules, developers can add Java code.

Screen visualisation software allows for WYSIWYG building of application screens quickly - as quick as prototyping. The resulting screens are immediately useable in Aviarc applications.

Applications can be developed purely through a web-interface or in the developers favourite editor – be it an IDE such as Eclipse or a simple text editor like Notepad. As Aviarc applications are developed in XML, backup through tools such as CVS can be used without any special steps needed.

The Aviarc&trade Studio

The Aviarc Studio is itself an Aviarc application, one that assists with creating other Aviarc applications and is used through a web browser. The studio is comprised of three major elements:

• The Project Builder is the main tool in Aviarc Studio. It assists in the creation and management of projects for Aviarc applications. It is the central key of Rapid Application Development with Aviarc and gives you a high-level, design perspective on your application and on the flow of events and information in your web application.
• The Screen Builder is a graphical tool to rapidly develop screens and forms that will be shown to the user by your Aviarc application
• The Component Builder allows direct editing access to other elements of Aviarc applications that do not have associated builders.

The Widget framework

The individual elements of an Aviarc screen are termed 'widgets'.  A typical Aviarc screen is composed of many widgets, each corresponding to at least one xml element in the source file of the screen.   Some widgets also function as containers for other widgets. Aviarc ships with a range of widgets from very simple ones like the 'button' widget that the user can click on, to more complex widgets like the 'record-table' widget that displays a list of data rows.

Each widget in the system is an isolated entity that defines the following information:

1. The syntax of the widget.  This allows for compile time checking of screen files.
2. Documentation for the widget.   Developer documentation can be generated from this.
3. Code that renders this widget into the user's browser.
4. The JavaScript class that represents the widget in the client’s browser

All widgets make extensive use of CSS classes to define their visual appearance in the browser.   By writing new themes, or altering existing ones, a widget can be tailored to fit the required look and feel for an application.

The client-side representation of the widgets in the browser form a powerful model for implementing user interface functionality.  Each widget is represented by a JavaScript object that stores all the information about the widget instance such as the xml attribute values, and any child widgets it contains.  These JavaScript objects also have methods and properties that allow the screen author to manipulate the widget's state in client side code.  For example, it is possible to show or hide a widget in the browser by calling the appropriate method.

Responding to user interface events forms an important part of this system.  Widgets define a set of events that occur in response to user interaction, or underlying data changes.  For example, the 'button' widget has an 'on-click' event that is fired whenever the user clicks on the button in the browser.  The screen author can add JavaScript code to the screen file that will be executed in response to a widget event. It is possible using this method to implement complex rules such as disabling a button until all required input fields have been filled, or performing an Ajax query that returns results when a search value has been entered.

 

Custom widgets

One of the most powerful features of the Aviarc display system is the ability for application developers to write their own widgets to augment the range already present in Aviarc.  The ability to write a widget that encapsulates application-specific behaviour means that an application can be developed quicker and be easier to maintain.  Custom built widgets define all the same information as the default Aviarc widgets, so that syntax checking, developer documentation, and rich client-side functionality are available.

When authoring a new widget, there are a number of ways to describe the way that a widget is rendered in the browser.  These include:

• Writing an XSLT template
• Writing a Java class.  This allows the author access to all the current state of the Aviarc application, and information from the engine (eg application variables).  In addition, a Java class can make use of any existing business-specific libraries, or add its own complex business logic.
• Writing a composite widget.  This feature allows a widget to be composed from other available widgets.  For example, a widget may be made up of a 'text-static' widget, a 'text-edit' widget, and a 'button' widget.   These widgets will appear on the screen wherever the composite widget is used.    This powerful mechanism allows the application developer to abstract common widget patterns, such as menus or sidebars, that appear many times in the application, and place all the required code into a single widget.   The ability to create widgets in this way promotes re-use and makes development and maintenance quicker and cheaper.

Each widget, in addition to being rendered into html that is displayed to the user, is represented by a JavaScript class in the browser.  Aviarc has a comprehensive client-side API that the widgets can interact with to perform such tasks as retrieving or altering the values in a dataset, communicating with other widgets on the screen, or performing Ajax requests to the server to retrieve information.  Any custom-built application widget may also provide a JavaScript class that can interact with the client side framework in the same way.

To make the most of the modular and extensible nature of the Aviarc widget system in order to reduce development time, application designers should identify the need for custom widgets as early as possible in the application build process.  Custom widgets can be written by experienced members of the development team, and then used throughout the application by the rest of the application developers.

Further enhancements to the Studio

Aviarc v2.3 and later include a major revision to the Screen Builder, designed to facilitate rapid prototyping and development of Aviarc applications.  The new Screen Builder features the following innovative features:

• Real-time editing of screens.   The new Builder is available while an application is running, allowing the developer to edit the screen without leaving or restarting the application.  A keyboard shortcut loads the Screen Builder to edit the current screen, and when changes have been saved, the developer can return to the running application where the screen will immediately reflect any changes made.
• The new Screen Builder user interface has been designed and built to be fast and easy to use.  The canvas now occupies the entire browser window space, and floating windows provide the development tools which can be hidden when not in use.  The rendering model has been designed so that only the required parts of the screen are re-rendered when changes are made, making the new Builder performance extremely fast and efficient. In addition, context menus, multi select and drag, drag resizing, multi attribute editing and enhanced drag-and-drop functionality are just some of the usability features incorporated in the new Builder.
• WYSIWYG.  Generally, the new Builder replicates the look of the running Aviarc application as closely as possibly.  Widgets render in the same way that they do within the application, and the current application theme is used in the builder so that the developer can see exactly how the end application screens are going to look.
• Full support for custom widgets.   Custom application widgets are given a default rendering by the Builder so that their attributes can be manipulated without the addition of extra code. Also, custom widgets have all the same capabilities in the Builder as the engine widgets so developers can provide extra code to their widgets to render the widget in the Builder as well as utilizing the Builders drag and drop and child element selection ability.
• Access to the current datasets.  When accessed from a running application, the Builder is able to show the developer the contents of all the datasets currently in scope.  Planned expansion will provide tools that use this information to generate screen code, for example automatically creating a record-table based on the dataset fields. The Builder provides the first step towards an integrated development environment for Aviarc applications that the developer can use to quickly turn requirements and user feedback into applications.

The upcoming roadmap for the Builder includes:

• Further usability features, enhancements and productivity tools.
• Ability for developers to add dummy data to screens so that prototypes can be built that demonstrate simulated client data.
• Addition of the ability for the Screen Builder to create and link new screens so that whole prototypes can be built without having to write the plumbing code.