Developing Webtop Applications
An overview of core elements when creating a Webtop
Every Webtop is a specific compiled instance that includes a set of OpenLaszlo-based applications, each running independently of one another and in its own window. The webtop itself is an OpenLaszlo application that includes a dock, window manager, skin, and applications. The included Webtop applications are developed using OpenLaszlo, which means they reflect the rich, fluid nature of the platform itself.
Creating a webtop begins with a main.lzx file that contains the LZX tag and references the webtop's stylesheet, the libraries to include (framework and specific dock manager and window manager), and the applications that will run in the webtop.
The following main.lzx is an example of a webtop:
<canvas bgcolor="0x898989" proxied="false" width="100%" height="100%"
title="Webtop dock appmenu example">
<debug x="302" y="546" width="400" height="200"/>
<!-- framework: always include this first -->
<include href="../../framework"/>
<!-- URL for the webtop web application -->
<attribute name="serviceapi" value="/webtop" type="string"/>
<attribute name="secureauth" value="false" type="boolean"/>
<!-- Include default dock and window managers, plus default dockview -->
<include href="../../components/default.lzx" />
<!-- include the skin gloss:gold for application elements -->
<include href="../../skin/application-gloss-gold.lzx"/>
<!-- include applications specific to this example -->
<application name="exampleApp" title="Example App" >
<command name="new" key="['Ctl','N']" onselect="parent.createWindow()"/>
<method name="createWindow"><![CDATA[
new standardwindow( canvas, {app:this, width:600, height:250, title:"New Window", appname:this.name } );
]]>
</method>
</application>
<standardwindow appname="exampleApp" title="Example App Window" width="200" height="300" />
</canvas>
As the example illustrates, the main.lzx, like any OpenLaszlo application, starts with the familiar OpenLaszlo tag and its corresponding end tag, </canvas>.
Following the tag are references to the Webtop framework library, and the desired skin for branding of the Webtop. Following the references to the framework and skin is the list of applications to be instantiated. In our example, a simple window will be compiled into the webtop. After the declaration of the applications to be included are optional application-specific tags that control the initial state of the webtop applications at startup time. The developer can specify which windows are initially open and how they are positioned.
What is an Application?
Webtop Application
A Webtop application, as described above, is a set of OpenLaszlo classes that use the designated framework and APIs. An application may define zero or more windows as part of its user interface. It may also access zero or more data services either directly or through the Webtop server.
The Webtop server supports a plug-in architecture as an extensibility mechanism for incorporating new data services. Data is routed between the Webtop client and server through the client-side Data Manager and the server-side Dispatcher. The Data Manager provides Webtop applications with the ability to multiplex multiple data requests into a single server-side request to minimize bandwidth usage and network latency. Upon receiving a request from the Data Manager, the Dispatcher unbundles the multiplexed request and routes the individual requests to the appropriate application or data service.
The following sample code is an example of a very simple client-side webtop application.
<!-- include applications specific to this example -->
<application name="exampleApp" title="Example App" >
<command name="new" key="['Ctl','N']" onselect="parent.createWindow()"/>
<method name="createWindow"><![CDATA[
new standardwindow( canvas, {app:this, width:600, height:250, title:"New Window", appname:this.name } );
]]>
</method>
</application>
As the example illustrates, a webtop application is simply an OpenLaszlo instance of the "application" class. In the example, an application named "Notepad" is being defined. The application defines two methods: "new" for creating a new note and "edit" for editing an existing note. It defines a specific "command" which if deployed with the app menu dock will cause a menu item to appear under the application menu in the dock.
What is a Skin?
Skinning allows a Webtop developer to modify the “look” via CSS and custom LZX code. It also allows the modification of some behaviors via CSS and choosing or extending dock and windowing classes.
Appearance
The screen below illustrates the default Webtop skin, called “gloss,” which offers multicolored windows.
Webtop with the default gloss skin
By modifying the CSS style, a developer may specify the color scheme for each application or a single color scheme for all applications. Icons for the Laszlo-built applications were designed so that they may overlay any particular color choice - choice - thus avoiding the need to recreate the assets to match your skin.Designers may create new window skins by supplying a new set of resources. For example, the window in Simple Window Dock Manager section below uses the identical window class as the windows in Figure above, but a different CSS references alternate resources creating a very different look for the windows.
________________
Defining Windows in Webtop
Laszlo Webtop includes a standard window definition that has controls for maximize, minimize (send to dock), close, and resize. Note that the title bar is draggable. Windows may define optional “footer buttons” for application-specific behaviors.
Developers may define a new window class that offers different controls, defines alternate user interaction, or appears with a different form. New window classes simply subclass a base window class and automatically participate with the window manager and dock.
________________
Using Window Managers
Laszlo Webtop is designed for pluggable window managers. The current release ships with a standard layered window manager, which supports overlapping windows. Additional window managers are planned for future releases, which will support alternate space management techniques for the end user.
________________
Dock Design and Behavior
Developers can also define their own dock look and behavior. A dock view and one or more dock item classes define the look of the dock. Any LZX view can be identified as the dock view. Therefore developers have the flexibility to make the dock look any way they want, position it anywhere on the screen, or make it behave differently, whether it be additional behaviors such as expanding and scrolling, or adding buttons, menus or dynamic information. Windows declare an associate dock item class, which is simply the visual representation of the window when it appears in the dock. For example, in Figure below, there are three dock items: Contacts, Photos, Notepad. Each is represented as an icon and title but could easily be a graphic. In addition, developers may choose to have consistent or unique dock items.
Sample Dock showing Laszlo Contacts, Photos and Notepad
A dock manager defines the behavior of the dock. Laszlo Webtop offers two dock managers and, of course, developers can write their own.________________
Simple Window Dock Manager
Each window is represented as a dock item arranged horizontally in a row on the dock. Dock items appear on the dock only when windows are minimized and disappear when windows are displayed.
Simple Window Dock Manager________________
Application Menu Dock Manager
Each application is represented with an icon and title on the dock. Each window is represented as a dock item that appears in a menu associated with the window’s application. Application menus may also contain commands specified by the application. This dock is designed to manage the complexity of having multiple applications that each have multiple windows.
Application Menu Dock Manager
Service Orchestration
The Laszlo Webtop framework offers data services that optimize client-server interaction, allowing developers to develop modular applications while reducing server load and creating a high-performance end-user experience.
Webtop client-server data transport
One key performance optimization for OpenLaszlo-based Ajax applications is to simply reduce the number of round-trips between client and server. The Webtop client dataprovider and datasets allow applications to batch unrelated requests, multiplexing multiple client requests over a single HTTP request. For example, different applications require dynamic information to display the initial state of the application. Separate Webtop applications can each define a request for dynamic application state that would be sent along with the login request. The Webtop Dispatcher (on the server side) dispatches the application requests to the appropriate service, collects all of the responses, and then sends them in one response back to the client. The client data manager then distributes the responses to multiple applications - resulting in reduced bandwidth and increased performance.
Data Paging/Large Datasets
The data paging model is supported via the pagingdataset, an extension of a standard OpenLaszlo dataset, that instinctively handles very large datasets by automatically fetching on-demand and maintaining an in-memory cache. To implement data paging for specific server data, a developer would implement a service that simply generates XML with a pending list of nodes, where the root node defines two specific attributes: pagesize and offset. The client will specify the page of data needed to fulfill user actions. A subset of the following operations may be implemented, if the client application does not surface UI elements for the full functionality:- Basic Paging: As the user scrolls a large list, the UI will automatically fetch new data by requesting a specific "page" of data from the server by offset and pagesize.
- Filter: This action can specify a subset for a query by using a condition
- Sort: Services return query results in a default sort order, but clients can request alternate sort orders
Authentication / Single Sign-on
The Webtop framework provides the facility for users of a specific instance of webtop to login and authenticate themselves. The choice of whether to require users to authenticate is the webtop developer's decision.
Laszlo Webtop can support single sign-on (SSO) so that users only need a single identity and password combination. When logging in, a user only needs to login once to gain access to the multiple applications. The Webtop framework also includes "remember me" functionality that allows a user to login once and have the Webtop remember him/her the next time he/she uses it.
Each Webtop application may have its own authentication mechanism, which may integrate with an external SSO server or authenticate via any custom mechanism using the Webtop SSO APIs.
