Page Layout Templates

Modification History:

• Sep 25, 2007 - Winston Prakash

Introduction

The idea behind this proposal is to provide functionality for the users to select a Page Layout while creating web pages (HTML, JSP, PHP, Ruby etc). Currently users create a web page (say HTML) using New -> Html. This creates the "boring" empty page with no page layouts. It is up to the users to create their page layouts. Users tend to create Page Layout using external tools like Dream Weaver and import them in to Netbeans. It would be nice if Netbeans could provide some predefined page layouts for the users to select when they create their web pages.

Page Layout Templates

These predefined page layouts templates should follow pure Netbeans Template mechanism. They should be available in the New Web Page Wizard for the Page authors to start with a predefined page layout, such as Head, Footer, Navigation Bar etc, based on Web Patterns . Also the Page Layout Templates could provide "themed" Page Layouts such as

• Personal Web Site Page
• Recreational Web Site Page
• Sports Web Site page
• Small Business Website page
• Personal Blog Website page
• ...

Creating Page from page Layout Templates

This task should be exactly similar to the current way of creating a Web Page (Ex. New -> JSP). If Page Layout Templates are available (See implementation details, page for details on how to make Page Layouts available to the IDE), then the Template Wizard would provide an additional Panel for the user to select a page Layout for the page being designed. Once the Page Layout is selected te Wizard continues and creates the Web Page from that template.

Presenting the available Page Layout Templates

IDE might bundle some of the Page Layout templates. However, there should be ability for users to provide their own. Providing them must be via Standard mechanism, such as Plugin and XML Layer. Once the plugin is installed the templates are available to the Web project via the Default File System. Project collects the available templates and presents it to the user as a list.

Page Layout

Specify the Page Layout Template in the layer file

The predefined page templates would be specified in the XML layer file as

<filesystem>
  <folder name="Templates">
    <folder name="PageLayout">
      <file name="PageLayout1.jsp" url="/com/sample/pagelayouts/resources/PageLayout1.jsp.template">
        <attr name="SystemFileSystem.localizingBundle" 
              stringvalue="com.sample.pagelayouts.Bundle"/>
        <attr name="name" stringvalue="PageLayout1" />
        <attr name="icon" urlvalue="nbresloc:/com/sample/pagelayouts/resources/                                                 PageLayout1-icon.jpg" />
       <attr name="preview" urlvalue="nbresloc:/com/sample/pagelayouts/resources/
                                                   PageLayout1-preview.jpg" />
       <attr name="resources" urlvalue="nbresloc:/com/sample/pagelayouts/resources/
                                                   PageLayout1-resources.zip" />
       <attr name="position" intvalue="10000"/>
       <attr name="description" stringvalue="PageLayout1_Desciption"/>
       <attr name="javax.script.ScriptEngine" stringvalue="freemarker"/>
     </file>
   </folder> <!-- Page Templates -->
  </folder> <!-- Templates -->
</filesystem>

• icon - defines the icon shown in the list
• preview - defines the preview image shown on the right side
• description - defines the description of the layout shown in the bottom right
• resources - defines that zip file that includes CSS files, images etc associated with Template

Custom Page Layout creation Panel

Woodstock Components team has proposed additional tab to the "Select Page Layout" wizard panel. The idea is to allow the user to quickly create a custom layout apart from selecting a predefined.

Predefined Themed Page Layout

Custom Page Layout Creation

Artifacts added to the project while creating a page using Page Layout template

The following artifacts may be added to the project when a web page is created from a page layout

• Web page itself after substituting all the fremmarker tokens
• Resources specified via "resources attribute. The resources contents are usually
  • CSS file that defines the layout styles
  • Images used as backgrounds etc
• Localized files if the Page templates has localizable contents (may be added to the resources zip)
• Web page specific additional files (for example Visual Web Page template might include additional template for associated Java File)

Beyond Simple Page Layout Templates

Since several varieties of user defined Page Layouts can be added to the IDE via plugins, Categories of templates can be presented as a dropdown list. When a category is selected, then the List will be populated with list of available Page Templates for that Category.

Importing Page Layouts created via external tools like DreamWeaver

Roumen Stobl has an interesting wish for the page layout as he puts in his blog. His wish is the ability to import Page Layouts created in external tool.

Including his wish, we should continue to look in to the following three areas

• Ability to design a Page Layout in Netbeans itself and save it as predefined Page Layout for future use.
• Ability to import Page Layouts designed in external tools and save it as predefined Page Layout for future use.
• Ability to add predefined Page Layout to a web project as Template and create pages from that template. Modifying the template should reflect uniformly in all the pages created from that template.

Related articles

• Web Page Authoring from Woodstock Component team
• Creating a CSS Based Fixed Page Layout
• How to create Netbeans Web Page Layout Plugin

Attachments

pagelayout-custom.png		24712 bytes
pagelayout-themes.png		107369 bytes