A “How To” article on working with Web templates in JDeveloper 10g
- Introduction
- Getting Started—Building a Web Template
- Archiving Web Templates as J2EE War Files
- Future Web Templating Support in JDeveloper 10.1.3 Production
- Summary
Introduction
Although JDeveloper 10g Production (10.1.2) and 10.1.3 preview have yet to offer their 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 that could become complete Web pages or just portions of Web pages that 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, and so forth.
- Custom images—These are the images which are presented in the Web page content. Examples include banner images, menu button images, and so on.
- 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 that 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 you 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, you’ll create an HTML table that will consist of four 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
Click here for a larger image.
- 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.
Click here for a larger image.
For this example, you’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, you’ll create an “images” subdirectory and save it there.
Click here for a larger image.
- Name the directory “images” and click OK.
From now on, you’ll save all of your images to this directory.
- After dragging and dropping all of the images needed for this template, you are almost done with your basic ACME page template.
Click here for a larger image.
- You now have a Web page design associated with some images, but now you also want to associate a CSS look and feel for this template. You could use one of JDeveloper’s provided CSS stylesheets that are already accessible on the Component Palette, but instead, you should review how to integrate an external CSS file onto JDeveloper Component Palette.
To start with, open up a windows explorer to the filesystem location of your 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 that can quickly auto-configure commonly used external tools for use in JDeveloper. (Tools->External Tools…)
- In Windows explorer, you can create a “css” subdirectory as a peer to the “images” directory. In the new css directory, you’ll drop in a new, custom CSS stylesheet, “acme.css.”
Click here for a larger image.
- Now, all you we have to do is add this new ACME stylesheet to JDeveloper Component Palette so you 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), you can “Add (a) Component” directly to the page, but in the 10.1.3 Preview, you can only add the new CSS entry by using the Palette Properties dialog. (This is a known issue and will be fixed for the production version of 10.1.3)
- In the Palette Properties dialog, change the “Page Type:” to “CSS.” You then will 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 here for a larger image.
- 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 also will display the new look and feel.
Click here for a larger image.
- Now that you’ve associated a CSS-based look and feel for this template, you’ll now save this specific HTML design into a JDeveloper Code Snippet on the Component Palette, so you 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.
Click here for a larger image.
- 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, you now can 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 here for a larger image.
- 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 its non-escaped format.
- As the new table is inserted into the page, the images also will appear because they reside in the local /images subdirectory.
Click here for a larger image.
- Because the snippet only contained the table content, and not the head, you 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.
Click here for a larger image.
- 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.