http://www.developer.com/

Back to article

Easy Web Templates with Oracle JDeveloper 10g


June 17, 2005

A "How To" article 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 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.

  1. In JDeveloper, create a new empty project: AcmeWebApp.



  2. 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.

  3. 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.


  4. 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.

  5. As you drag the image, JDeveloper will prompt you, asking you to copy the image under your document root. Click "Yes."



  6. Before saving the image, you'll create an "images" subdirectory and save it there.


    Click here for a larger image.


  7. Name the directory "images" and click OK.

    From now on, you'll save all of your images to this directory.

  8. 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.


  9. 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...)


  10. 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.


  11. 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)
  12. 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.
  13. 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.


  14. Click "OK" twice and your new ACME CSS will be on the Palette page.



  15. 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.


  16. 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.


  17. On the Component Palette, select the "Code Snippets" page and right-click "Add Component..."



  18. 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.



  19. 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.


  20. Click "Finish" to immediately generate a blank page.
  21. 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.



  22. 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.


  23. 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.


  24. 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, you have configured both JDeveloper and a single project to have a specific look and feel; however, in the future you will want to create new Web applications that also have this look and feel. Instead of manually creating the subdirectories, CSS, and images content for each new Web application, you can use JDeveloper J2EE Web Archive (WAR) deployment feature to save an entire Web application as a template that you then can derive new projects from in the future.

  1. 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 you 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.



  2. Accept the default options for the WAR deployment profile and click "OK."



    Click here for a larger image.


  3. Now, deploy the application as a 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
  4. To use your new Acme Application Template, you'll create a new project from the deployed WAR file.
    (File->New...->General->Projects->Project from WAR File).


    Click here for a larger image.


  5. Name the new app "NewAcmeApp."



    Click here for a larger image.


  6. In step 2, you 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.



    Click here for a larger image.


  7. When the wizard completes, you'll have a new J2EE Web application based on the ACME Web application "template" that you created earlier. You'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 you were to move this WAR file to another JDeveloper instance, you would have to re-create the Component Palette customizations for the CSS entry and the ACME page snippet, but this easily done because the custom CSS and ACME page snippet content is now archived within the WAR file.


    Click here for a larger image.


    Also, because the ACME Web application template is archived in a standard J2EE WAR file, it also can be migrated to any other J2EE compliant Application Server or Tool for further use.

Future Web Templating Support in JDeveloper 10.1.3 Production

It should be noted that although this How To shows how it is possible to build Web templates using a combination of existing features in JDeveloper 10.1.3 Preview and the existing production version of JDeveloper 10.1.2, the "official" Web templating support will be available in the next version of JDeveloper 10.1.3 Production (10g release 2) that is due out in the second half of 2005. In addition to the current features of both the 10.1.3 Preview and 10.1.2 production mentioned in this article, the upcoming production version of 10.1.3 will have dedicated Web templating features that will allow users to easily design and work with multiple types of Web templates including HTML, JSP, and even JavaServer Faces templates.

Summary

This How-To article has hopefully provided useful tips on how to build and work with J2EE Web application design templates even before the official Web templating support is available in the next JDeveloper version. As you may have noticed, JDeveloper has many useful development features that often can be used for multiple purposes such as the case in the J2EE War deployment feature for Web templates. As JDeveloper continues to transform itself from a traditional Java development environment into more of a Web development environment, you'll be seeing more and more Web-centric development features. Feel free to offer your feedback in the JDeveloper OTN Forum on how JDeveloper can continue evolving better Web development features geared to the Web developer audience as opposed to the traditional Java developer.

About the Author

Chris Schalk is a Principal Product Manager and Java Evangelist for Oracle's application server and development tools division. Chris primary expertise is Web application development he and is responsible for defining the Web development experience for Oracle JDeveloper. Prior to product management, Chris held positions in both software development and technical marketing at Oracle. Before Joining Oracle, he worked at IBM as a software developer. Chris holds a Bachelor's of Science in Applied Mathematics with a specialization in Computer Science from the University of California at Los Angeles.

Chris has written numerous samples and articles for various publications including Javapro and Oracle Magazine and is currently co-authoring JavaServer Faces—The Complete Reference through McGraw-Hill-Osborne. Chris also maintains a popular Blog on J2EE Web development at http://www.jroller.com/page/cschalk.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date