Previous
Project jMaki
This chapter describes Project jMaki and how to create web applications using jMaki.
Introduction to Project jMaki
Project jMaki is a lightweight framework for creating web 2.0 applications using built-in templates, a model for creating and using Ajax-enabled widgets, and a set of services to tie the widgets together and enable them to communicate with external services.
The jMaki widgets are wrapped so that they can be used in a variety of server environments, including as JavaServer Pages tags , as JavaServer Faces components, within a Phobos application, or with PHP. Using jMaki Widgets in a Phobos Application details how to use jMaki widgets in a Phobos application. This chapter focuses on using jMaki in a JSP application. See Using jMaki Widgets as JavaServer Faces Components for information on how to use jMaki widgets in a JavaServer Faces application.
Project jMaki provides a set of pre-wrapped, popular, third-party widgets from Dojo, script.acu.lous and other vendors. If jMaki doesn't already have the widget you need, you can still wrap a third-party widget yourself or create your own jMaki widget from scratch. The latest version of this tutorial does not explain how to wrap or create your own jMaki widget. See the documentation at the Project jMaki site on java.net for information on how to wrap or create a jMaki widget.
In addition to the set of widgets, jMaki also provides:
A way to easily customize a widget, such as set the value of its attributes and load your own data into the widget
Mechanisms for responding to widget events, getting widgets to interact, and allowing widgets access to external services.
A NetBeans IDE 5.5.1 module that enables you to quickly and easily create web applications with jMaki.
What is a jMaki Widget?
A typical jMaki widget consists of the following resources:
component.js: contains the JavaScript code used to wrap the widget, handles user-initiated events generated by the widget, and interacts with the Ajax mechanism.
component.htm: An HTML file that the rendering mechanism will use as a template to render the widgets to the client.
component.css: A CSS stylesheet that controls the appearance of the widget, such as the style of fonts it might use. This file is optional.
widget.json: A JavaScript file in JSON format that describes the usage of the widget's attributes and the format of data that it accepts. This file is used by the NetBeans module to help you customize a widget.
Some widgets might require some additional code to work properly. For example, all the Dojo widgets require the code from the Dojo toolkit that implements the widgets. In addition, some widgets might need extra service files that implement functionality besides that required to implement the Ajax mechanism.
What Does a jMaki Application Look Like?
To use one or more jMaki widgets in an application, you need to include the widget components described in the previous section as well as some additional resources:
jmaki.js: Contains the JavaScript utilities that manage loading jMaki widgets on the client.
config.json: Contains configuration information for third party libraries including the location, application keys, and global styles associated with a specific library that a widget might use.
glue.js: Used to “glue” widgets together. Developers can use this file to register and define widget event listeners, to publish events to a topic, and to provide the means for a widget to subscribe to a topic.
ajax-wrapper-comp.jar: Contains the server runtime code that renders the template code and resource links using information in the config.json file.
A jMaki application that includes a Dojo fisheye widget has the basic structure shown in the following figure, which illustrates where the various required resources fit into the application. As shown in Figure 3-1, the libs folder contains the third-party Dojo widget implementation code. NOT ANY MORE
Figure 3-1 Structure of a jMaki Application
When you create a new application using the NetBeans IDE 5.5.1 module for jMaki, the NetBeans IDE automatically includes all the required resources in your application. The next section gives more detail on the NetBeans IDE 5.5.1 module.
Creating a jMaki Web Application
The NetBeans IDE 5.5.1 offers a module through its Update Center that allows you to quickly and easily create jMaki applications. See Sun Web Developer Pack R2 Plug-In Module for the NetBeans IDE for instructions on how to obtain and install this module.
The NetBeans IDE 5.5.1 jMaki module makes it easy to drag and drop jMaki widgets onto JSP pages and to customize the widgets. When you create a page using the module, you have a choice of templates to use for the page. You can read about the templates and see what they look like by visiting the jMaki Layouts page.
Figure 3-2 shows a screen from the New Web Application wizard, which you start by selecting New Project from the File menu and choosing Web Application from the New Project wizard.
Figure 3-2 The New Web Application Wizard
As shown in the preceding figure, to create a jMaki web application, you need to select the jMaki Ajax framework and select a template for the first page of your application.
Once you've created your page, it's easy to drag a widget from the jMaki palette included with the module onto the page. Figure 3-3 shows how you can drag and drop a widget from the jMaki palette onto a JSP page.
Figure 3-3 Dragging and Dropping a Widget onto a Page
See Developing a Web Application Using Project jMaki for more details on how to use the module to create a jMaki application.
If you prefer not to use the IDE, you can start with the blank application included in the Sun Web Developer Pack. This application, called jmaki-core, is located in the swdp.home/jmaki/samples directory. It includes all the jMaki resources, but you need to manually copy over the widget code that you need from the swdp.home/shared/resources directory. This tutorial covers developing jMaki applications using the NetBeans modules rather than the blank application.