Adding Support For A Web Framework
This document takes you through the basics of how to add support for a web framework.
This tutorial focuses on on how to add support by installing a web framework plugin using the NetBeans Update Center.
After you have installed the plugin you will be able to select the framework in the New Project wizard when you create a web project.
The new web project is created with the files necessary for that framework. your jsp page.
In this tutorial we will demonstrate how to add a framework by installing the jMaki NetBeans plugin to add support for the jMaki framework to the IDE.
The jMaki framework provides a model for building Ajax-enabled web applications using standards-based technologies.
The jMaki plugin adds a number of default widgets which you can drag and drop from the Palette into your jsp page.
After we install the jMaki plugin we will create a new web project. We will add the jMaki framework to the project when we create the project.
We will use the jMaki List widget to add a text box element to a web page that allows you to create and remove items from a list in a web page
without refreshing the page.
You can learn more about jMaki from the jMaki site.
The Sun Web Developer Pack provides tutorials and sample projects
to help you learn more about developing web applications using the jMaki framework, in addition to other Ajax and scripting
technologies. Some NetBeans plugins are included when you download the Pack.
Though this tutorial focuses on installing the jMaki plugin, the steps are basically the same if you want to install other
NetBeans plugins to add support for other web frameworks.
Web Framework Support in NetBeans IDE
The easiest way to add support for a particular web framework is by installing a NetBeans plugin using the Update Center.
Though this tutorial will show how to add support for the jMaki Ajax Framework, NetBeans plugins are available for many
web frameworks, and the number of plugins available is constantly growing.
Many of the available plugins can be downloaded from the NetBeans Plugin Portal.
Some of the NetBeans plugins available include the following:
If no plugin is available for your framework, you can still add support by creating a library for that framework in the IDE
and then adding that library to your project. For an example on how to create a library to add support for a framework in the IDE,
see Using Hibernate with the Java Persistence API
Setting Up the Environment
Before you begin, you need to install the following software on your computer:
For this tutorial you need to register a local instance of Sun Java System Application Server with the IDE.
You must also have an internet connection to download the plugin and access the Ajax Update Center.
Alternatively, you can download the jMaki Ajax Framework plugin from the jMaki downloads area
and follow the steps for installing the plugin manually under Installing the Ajax Update Center Plugin.
Installing the jMaki Plugins
In this tutorial we will add support for the jMaki Ajax Framework to NetBeans IDE by installing the following plugins available from the jMaki site.
The plugins are available from the jMaki downloads area.
- Ajax Update Center for NetBeans plugin. This plugin adds the Ajax Update Center to the list of available update centers in the Update Center wizard.
After the plugin is installed, you can use the Update Center to check the web for the most recent jMaki builds.
- org-netbeans-modules-sun-jmaki.nbm plugin. This plugin adds support for the jMaki Ajax Framework to the IDE.
After the plugin is installed, the jMaki Ajax Framework is available as one of the web framework options in the New Project wizard.
To illustrate how to use the Update Center to add a plugin, we will perform the following steps.
- Download and install the Ajax Update Center plugin manually
- Contact the Ajax Update Center and add jMaki Ajax Framework support
Alternatively, you can skip the first step and add support for the jMaki Ajax Framework directly.
To do this, download the org-netbeans-modules-sun-jmaki.nbm plugin from the jMaki downloads area
and then follow the steps for installing a manually downloaded module as described under Installing the Ajax Update Center Plugin.
Installing the Ajax Update Center Plugin
In this exercise we download and manually install the Ajax Update Center plugin.
This plugin adds the Ajax Update Center to the Update Center.
After the plugin is installed, you can use the Update Center wizard to install the jMaki Ajax Framework plugin and check for the most recent builds of the jMaki plugin for NetBeans.
- Open the jMaki downloads area in your browser.
- Download the Ajax Update Center for NetBeans plugin and save the module (org-netbeans-modules-sun-ajax-updatecenter.nbm) to your local system.
- In the IDE, choose Tools > Update Center to open the Update Center wizard.
- Choose "Install Manually Downloaded Modules (.nbm Files)" and click Next.
- Add the module org-netbeans-modules-sun-ajax-updatecenter.nbm and click Next.
- Click Next in the page displaying the modules to install and accept the license agreement.
- Click Next after the wizard downloads the local nbm file and checks the signature.
- Select the module from the list of modules to install and click Finish.
You can now open the Update Center wizard again and check that the AJAX Update Center was added to the list of Update Centers.
You can now use the Update Center to download the most recent build of the jMaki plugin for NetBeans.
Adding Support for jMaki Ajax Framework
In this exercise we will add support for the jMaki Ajax Framework
by using the Update Center wizard to connect to the Ajax Update Center and then download and install the necessary plugins.
After the plugin is installed, the jMaki Ajax Framework is available as one of the web framework options in the New Project wizard.
If you select the framework when you create a web project, the project is created with the jMaki project file structure and default files.
- Choose Tools > Update Center to open the Update Center wizard.
- Ensure that the AJAX Update Center is selected and click Next.
The IDE connects to the AJAX Update Center to check for the most recent plugins available.
- Select the jMaki folder in the list of available updates and click Add.
When you click Add, the jMaki Ajax Support module is added to the list of modules to install.
The JavaScript Editor and CSSCompletion modules are also added. These modules are helpful when editing files in your project.
Click Next and accept the license agreement.
- Click Next after the wizard downloads the modules and checks the signature.
- Select the modules from the list of modules to install and click Finish.
When you click Finish, you need to restart the IDE to finish installing the modules and add the functionality to the IDE.
Creating the jMaki Ajax Web Application
In this exercise we create a web application.
When we create the application, we select the jMaki Ajax Framework in the New Project wizard.
We then test that everythign is working by adding some simple functionality.
In this case, we add the jMaki List widget to the index.jsp page.
Creating the jMaki Web Application Project
In this exercise we create a new web application and add the jMaki Ajax Framework to the application.
- Choose File > New Project. Select Web Application project under the Web category and click Next.
- Type MyAjaxListApp for the Project Name and specify a location for the project.
- Select the Sun Java System Application Server for the Server and click Next.
- In the Frameworks panel, choose jMaki Ajax Framework.
The jMaki Ajax Framework option was added when you installed the plugin.
You can see that you can also choose from any of the default CSS layouts to use in your web application.
- Choose the No CSS Style layout and click Finish.
When you click Finish the IDE creates the web application and opens index.jsp in the Source Editor.
The IDE creates the web application and the resources necessary to use the jMaki framework in your application.
Adding the jMaki List Widget
In this exercise we drag the jMaki List widget from the Palette into index.jsp.
- Open index.jsp in the Source Editor.
- Locate the List widget under the jMaki Widgets node in the Palette and drag the widget into the Source Editor below
the <h1> tag.
The IDE adds the following code to your page:
<a:widget name="jmaki.list" />
Save your changes
- Right-click the project node in the Projects window and choose Run Project.
When you run the project, the application is deployed to the server and the default page
opens in your web browser.
To test if your jMaki Ajax web application is working correctly and creates a list for you, type in some text in the text field and click Add to List.
The list item appears below the text box. Repeat a few more times to add additional items to the list.
If you want to remove an item from the list, click the list item you want to remove.
The item is removed from the list.
Next Steps
Now that you have successfully installed and tested the jMaki framework in the IDE, you can explore the other features offered by the framework.
The Sun Web Developer Pack provides tutorials and sample projects
to help you learn more about developing web applications using the jMaki framework.
For more information about using other web frameworks in NetBeans IDE, see the following resources:
To send comments and suggestions, get support, and keep informed on the latest
developments on the NetBeans IDE Java EE development features, join
the nbj2ee mailing list.
