Ludovic Champenois's Blog: Ajax jMaki new Stylized JSP wizards

Posted by ludo on November 07, 2006 at 04:32 PM | Comments (0)

Bonjour, comment Java?

Ajax jMaki plugin (https://ajax.dev.java.net) for NetBeans is evolving rapidly. Now, a new set of JSP wizards is available to create JSP files following well defined CSS styles. After installing this add-on plugin, you'll have access to the jMaki palette for easy Drag and Drop of Ajax components from dojo library, yahoo toolkit, google, etc as seen in this visual gallery, and the new wizard called "Stylized JSP (jMaki)" on a regular web application project:

screen 1

The wizard creates a JSP file, and allows you to pick and choose a CSS layout from the jMaki repository. The current possible CSS layouts to pick from are:

Standard
Standard with footer
Standard with right sidebar
Right sidebar
Centered
3 columns

This is the initial list, and Greg Murray is already working on extending it.

screen 2

See below the generated JSP which is using the "Standard with right sidebar" layout. Notice the different areas for "Side Bar Content Here" ,"Right Side Bar Content Here", and "Main Content Pane". This is typically areas where you want to Drag and Drop jMaki components from the jMaki palette. For example, the side bar area is a good candidate to display a Tree (dojo or yahoo) or an accordion.

Test.jsp

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3  
 4 <link rel="stylesheet" href="jmaki-standard-right-sidebar.css" type="text/css"></link>
 5  
 6 <html>
 7  <head>
 8  <title>Page Title</title>
 9 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
10 </head>
11 <body>
12  <div class="outerBorder">
13 
14 <div class="header">
15  <div class="banner">Application Name</div>
16 
17  <div class="subheader">
18  <div>
19  <a href="mailto:feedback@youraddress">Feedback</a> |
20  <a href="#">Site Map</a> |
21  <a href="#">Home</a>
22  </div>
23  </div> <!-- subheader -->
24  </div> <!-- header -->
25 
26 
27  <div class="main">
28  <div class="leftSidebar">
29 
30 Side Bar Content Here
31 
32  </div> <!-- leftSidebar -->
33 
34  <div class="rightSidebar">
35 
36 Right Side Bar Content Here
37 
38  </div> <!-- rightSidebar --> 
39 
40  <div class="content">
41 
42 Main Content Pane
43 
44  </div> <!-- content -->
45 
46  </div> <!-- main -->
47 
48  </div> <!-- outerborder -->
49  </body>
50 </html>

And here is the result of this empty JSP page. You do not need to become a CSS expert to produce a good looking page anymore:

Side Bar Content Here

Right Side Bar Content Here

Main Content Pane

I hope you'll find this wizard useful...Try to imagine your productivity if you could visualize in real time the rendered page inside NetBeans itself. This would be a new entry in my blog very soon since I am investigating the JDIC embedded browser in NetBeans...Apple Mac version coming soon.

Ludo

Bookmark blog post:

del.icio.us

Digg

DZone

Furl

Comments

Comments are listed in date ascending order (oldest first) | Post Comment

Powered by
Movable Type 3.01D

java.net RSS Feeds