A (Blog only) "Exclusive" How To document on working with Web templates in JDeveloper 10g.
Introduction
Although JDeveloper 10g Production (10.1.2) and 10.1.3 preview have yet to offer official Web application templating support out of the box, Web developers needn't wait for JDev's final template support in order to be productive with certain basic "templating" capabilities already included in both JDeveloper 10g Production and 10.1.3 Preview.
This How To document shows how to build Web templates in JDeveloper 10g consisting of HTML content, images, as well as Cascading StyleSheets (CSS). This document also shows how to create J2EE Web application templates as WAR files for later use in JDeveloper or other Tools and Application Servers.
Getting Started - Building a Web Template
In a simple manner, Web templates can be defined as::
- Web page content - This is HTML or JSP content which could become complete Web pages or just portions of Web pages which contain often repeated Web content such as an HTML table containing an overall page layout, or portions of content such as menu bars, tab bars etc.
- Custom images - These are the images which are presented in the Web page content. Examples include banner images, menu button images, etc.
- Cascading StylesSheets - These provide an overall look and feel to your Web application by associating a specific visual appearance to global tags such as <H2> or to individual tags via a class attribute.
So creating a re-usable set of templates is simply a matter of saving these types of content into a reusable form and making them available for use again in JDeveloper multiple times. This can be accomplished using several existing features in both JDeveloper 10g Production (10.1.2) as well as JDeveloper 10.1.3 Preview.
The first step to building your Web template(s) is to start with a basic design. Create a new empty project in any Workspace and begin designing your Web content such as a page or collection of pages so it can be used later as a template(s).
For this How To, let's build a basic Web page template which will serve as the base page for a fictitious corporate Web application: The ACME Corporation.
- In JDeveloper, create a new empty project: AcmeWebApp.
- Then create a new JSP or HTML page. You can name it anything: "ACMEPage_temp". (File->New..->Web-Tier->HTML->HTML Page).
In step 2 of 2 (HTML Options) you can further specify the visual attributes of the page, but for this example we will leave it as is and click Finish.
- As the new page opens in the visual designer, you can then create your overall design of the page template. For this example we'll create an HTML table which will consist of 4 main table cells:
- A top cell for a banner image
- A left navigation cell for future navigation content
- A footer cell for our future footer content
- A main cell for the body of the actual page content.
- Assuming you now have images (or other HTML content) for the top, left and bottom cells, you can drag and drop them from either your desktop or Windows explorer into their respective cells.
For this example we'll drag a banner, leftnav and footer image on the template.
- As you drag the image, JDeveloper will prompt you asking you to copy the image under your document root. Click "Yes".
- Before saving the image, we'll create an "images" subdirectory and save it there.
- Name the directory "images" and click OK.
From now on we'll save all of our images to this directory.
- After dragging and dropping all of the images needed for this template we are almost done with our basic ACME page template.
- We now have a Web page design associated with some images, but now we also want to associate a CSS look and feel for this template. We could use one of JDeveloper's provided CSS stylesheets which are already accessible on the Component Palette, but instead let's review how to integrate an external CSS file onto JDeveloper's Component Palette.
To start with, let's open up a windows explorer to the filesystem location of our new Web template. You'll notice that I can invoke the Windows Explorer directly from the JDeveloper Navigator.
Note: JDeveloper 10.1.3 comes with a nifty feature which can quickly auto-configure commonly used external tools for use in JDeveloper. (Tools->External Tools...)
- In Windows explorer we can create a "css" subdirectory as a peer to the "images" directory. In the new css directory will drop in a new, custom CSS stylesheet, "acme.css".
- Now all we have to do is add this new ACME stylesheet to JDeveloper's Component Palette so we can use it later on. On the "CSS" Component Palette page, right-click and select "Palette Properties".
Note: In JDeveloper 10g production (10.1.2) we can "Add (a) Component" directly to the page, but in the 10.1.3 Preview, we can only add the new CSS entry by using the Palette Properties dialog.
(This is a known issue and is logged as bug: 4000422 )
- In the Palette Properties dialog, change the "Page Type:" to "CSS". You will then see all of the Components currently on the CSS palette page.
- Click on the "Add" button and enter the following:
- Location: (Browse to your location of your custom CSS. This should be in your new /css sub-directory.
- Name: ACME (Or whatever you want to call it.)
- Click "OK" twice and your new ACME CSS will be on the Palette page.
- Now you can drag and drop this onto your pages and it will update the HTML header with the new CSS link. The visual designer will also display the new look and feel.
- Now that we've associated a CSS based look and feel for this template, we'll now save this specific HTML design into a JDeveloper Code Snippet on the Component Palette, so we can easily generate new pages with this same design in the future.
In the AMCEPage_temp.html page, copy the HTML table contents to the clipboard: (Ctrl-C).
Note: Don't copy the <body> or <head> content, just the HTML table.
- On the Component Palette, select the "Code Snippets" page and right-click "Add Component...".
- In the new Snippet dialog, add the Name: "ACME Page" and paste (Ctrl-V) the HTML table design into the Code Snippet: text field.
Click "OK" to add the snippet to the Component Palette.
- At this point can now create multiple new JSP or HTML pages based on this ACME page look and feel. To see how, create a new JSP page. (File->New...->Web-Tier->JSP->JSP) and name it "newacme.jsp".
- Click "Finish" to immediately generate a blank page.
- Insert the "ACME Page" code snippet into the page by dragging and dropping the snippet onto the blank page from the "Code Snippets" palette page.
Before pasting the snippet into the page, a confirmation dialog will appear. Click "Yes" to proceed. This will allow you to insert the HTML markup in it's non-escaped format.
- As the new table is inserted into the page, the images will also appear since they reside in the local /images subdirectory.
- Since the snippet only contained the table content, and not the head, we have to apply the "ACME" look defined in the ACME css file. Select the "CSS" Component Palette page and drag and drop the ACME CSS onto the page. You'll notice the new look and feel in the "Main Content.." cell. You can also see the new CSS link in the Structure Pane.
- At this point you can continue building more ACME pages with a consistent look and feel. However to re-use this content in a different Web application, follow the instructions below.
Archiving Web Templates as J2EE War Files
In the previous steps, we have configured both JDeveloper and a single project to have a specific look and feel, however in the future we will want to create new Web applications which also have this look and feel. Instead of manually creating subdirectories CSS and images content for each new Web application, we can use JDeveloper's J2EE Web Archive (WAR) deployment feature to save an entire Web application as a template which we can then derive new projects from in the future.
- To archive this ACME Web application, locate the /WEB-INF/web.xml file, right-click and select "Create WAR Deployment Profile...".
Note: This web.xml file exists because we created a JSP. In general, a web.xml will be generated whenever a J2EE Web-tier component such as a Servlet or JSP is created.
- Accept the default options for the WAR deployment profile and click "OK".
- Now deploy the application as WAR file to the local filesystem.
This will place an archived version of the Web application in a WAR file in the local file system. You'll see where it has been deployed to in the Console:
- "Wrote WAR file to ....TemplateFunACMEWebAppdeployacmewebapp.war
Elapsed time for deployment: 5 seconds
---- Deployment finished. ---- Jan 18, 2005 6:32:28 PM
- To use our new Acme Application Template, we'll create a new project from the deployed WAR file.
(File->New...->General->Projects->Project from WAR File).
- We'll name the new app "NewAcmeApp".
- On step 2, we specify the location of the recently deployed WAR file, but keep the default location for the "Root Directory for Web Module:".
When finished, the wizard will unarchive and copy the contents of the WAR file into the new project's location.
- When the wizard completes, we'll have a new J2EE Web application based on the ACME Web application "template" that we created earlier. We'll also be able to create new "ACME Pages" with the same look and feel using the CSS and images that were archived into the template application!
Important Note: If we were to move this WAR file to another JDeveloper instance, we would have to re-create the Component Palette customizations for the CSS entry and the ACME page snippet, but this easily done since the custom CSS and ACME page snippet content is now archived within the WAR file.
Also, since the ACME Web application template is archived in a standard J2EE WAR file, it can also be migrated to any other J2EE compliant Application Server or Tool for further use.
Summary
This How To has hopefully provided useful tips on how to build and work with J2EE Web application design templates even before the full Templating support is available in the next JDeveloper revision. If you feel Web application Templating is a "must have" in the near future, and have specific requirements for its usage, feel free to offer your feedback here my Blog or in the JDeveloper OTN Forums. Let us know your thoughts on how we can deliver a truly superior Templating experience in our next version of JDeveloper!
10:05:25 AM 
|
|
