Developing a Web App that Uses a jMaki Widget
Suppose you want to implement the Editor widget into a JSP page, and use it for sending emails. Of course, the editor will be used for writing formatting email text. For space reasons, this article will present only what is essential for the this current section: how to insert an existing widget into an application.
- Open NeBeans and select File—>New Project option. In the New Project window, select Web from the Categories section and Web Application option from the Projects section. After that, just click Next. In the New Web Application window, complete the following fields:
- ProjectName: Enter the project name
MyProjectWithWidget
- Project Location: Enter the project location
C:/My_jMakiProject. If the specified folder does not exist, NetBeans will create it for you.
- Press Next.
- Check the jMaki AJAX Framework box (shown in Figure 6), then select Standard from the CSS Layout section. Click Finish. NetBeans will now automatically configure the project.
Figure 6. Checking the Framework: The jMaki AJAX framework.
- The right of your screen should show the jMaki Palette. If it's not there, go to the Window menu on the main NetBeans toolbar and select the Palette. Your project should look something like Figure 7.
Figure 7. The Palette: Your project should look something like this.
- Expand the jMaki Dojo section from the jMaki Palette to reveal the Editor widget as a button. Drag this over to the JSP Page Content section (after the Main Content Area section) as shown in Figure 8. This is just a simple JSP
taglib that should't be a problem; if you're reading this article, you're probably familiar with taglibs scopes in JSP pages.
Figure 8. The Editor widget: Drag the Editor widget to the JSP Page Content section.
- Run the project again. The only hiccup here is that the widget you've inserted into your project is not very useful; it doesn't allow you to capture the text in the editor.
- To capture the text in the editor:
- Insert an
id attribute for the editor, like this:
<a:ajax id="jMakiEditor" name="dojo.editor" value="Edit me." />
- Write a JavaScript function that extracts the inserted text into an alert box—something like this:
<script type="text/javascript">
function getTextEditor()
{
var text = jmaki.attributes.get('jMakiEditor').getValue();
alert("INSERTED TEXT::" + text);
}
</script>
- Now, call the following function from a simple HTML link:
<a href="javascript:getTextEditor()">ShoshowEditorContentsw Inserted Text</a>
Now you have an index.jsp source similar with the editor.jsp page from the jMaki demo application. The getTextEditor function from above is similar to the showEditorContents function from the editor.jsp.
- Click the Show Inserted Text link, and you should see a JavaScript alert cassette. This cassette should contain the text inserted into the editor provided by the Editor widget. It's now a simple matter to use this inserted text for your application scopes (for example, to pass it to a servlet).
Figure 9 shows this simple functional project in a capture directly from browser.
Figure 9. The Editor widget: Drag the Editor widget to the JSP Page Content section.
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
