Skip to main content

Ajax jMaki new Stylized JSP wizards

Posted by ludo on November 7, 2006 at 7:32 PM EST



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

Related Topics >>
Blog Links >>