---

Web Page Designer for Netbeans - Proposal

Modification History:

• Feb 1, 2008 - Winston Prakash

Related Documents

• Web Page Designer Concept Overview (pdf )
• Web Page Designer Design Concepts (pdf )

Introduction

Currently in Netbeans, the scope of Web page designing is limited to JSP based JSF web pages created by Visual JSF framework. The main goal of proposed Web Page Designer (WPD) is to expand the scope of page designing to web pages created by other frameworks and plain HTML. VWPD will define the scope of page designing based on the mime type (.html, .xhtml, .jsp, .php, .rhtml, .xml (facelet) etc) of a particular web page, irrespective of the type of the project where it resides or framework which created it. Framework support need to take care of project wide framework related artifacts. VWPD will not dictate the scope of frameworks. However, the underlying framework that created the web page might provide hooks to add necessary artifacts transparently to the project from page designer, so that user need not have to manually add them. Similarly, VWPD would provide hooks to the framework for rich design experience while designing the page.

Notations Used

• Page - A web page being designed such as such as HTML, JSP, JSF, facelet etc.
• Page definition Language (PDL) - Laguage that used to create the page XHTML, XML, JSP, PhP etc.
• Page Items - The items that compose the final pages. It could be simple HTML elements, JSF components, JavaScript code, JSP scriplets or PhP code blocks. Usually page items appears in the palette which can be dragged and dropped on to a web page being designed.

Invoking Page Designer

It will not be mandatory for user to add the visual JSF framework (which currently is a limited form of JSF) to design a page in a web application. After creating the web application, user simply clicks on a particular page (.html, .jsp, .xml (facelet) or .php) to invoke the corresponding page designer, if page design support is available for that page. User will get option to enable and disable page design of supported pages via global IDE option. If page design is supported and enabled, then in the editor user will get additional view to design the web page along with view to edit the page in text mode. If page design is disabled, then only text based editing view will be presented to the user.

WPD could support designing of a page outside of a project context, at least in a degraded fashion. For example, a HTML file could be designed after opening it using File -> open.

Web Page Designer Views

• Document window: Displays the document user working on in tabbed windows. Multi-tab editor allows the user to edit the page in text mode or design mode or preview mode. Design view is the near-WYSIWYG editing surface. Source view is the editor for the page that displays the markup. The contents of both design and text view will be kept in-sync.
• The preview windows displays the preview of the page being edited. The preview should support debugging JavaScript and AJAX transactions where ever possible.

Note: If embedded server (say Glassfish V3) is available, the preview could be near equivalent of deployed application. But if the PDL support binding, then the bindings may not be resolved.

• Split view displays both Design view and Source view for the document at the same time.
• Formatting Toolbar: One of the main task of styling the content (typed text) is applying the correct CSS style to them. However, doing so with the style editor is a tedious process. VWPD should provide a tool bar that would help to apply these CSS styles to the selected text with single mouse click.

• Palette: Provides page items such as components, composite code (e.g PhP code) or clips. User can drag and add these page items to the designer. The palette will show page items applicable to the page being designed. Depending on the PDL of the page, multiple type of page items may appear in the palette. Ex. A JSP page allows both HTML and JSF component. So, both the items would appear in the palette. The palette should not show page items not supported by the PDL. For example if a JSP page is designed, then facelet components should not appear in the palette.

Note: In visual JSF web, the components shown in the text edit mode, the palette contents varied depending on if the page is a visual JSF page or a regular. In Web Page Designer this would not be a case. The same palette should be available for both cases when user is in text edit mode.

• Outline: This view provides an outline view of the page being edited. User has the option to rearrange, delete, rename, copy and paste several of the items in the out line view, which we be immediately reflected in the designer as well as in the text editor. The selected item will be kept in-sync between the outline view and design view.
• Properties Window: Displays the properties of a particular page item selected in the outline or the designer. The properties (or attributes) of the selected item will be displayed in the property sheet. Modifying any of the property value will result in redisplay of the item in the designer and the corresponding source getting added to the text view.
• CSS Customization Window: Display the style of the currently selected page item or the class set to it. User has the option to modify the style in this window, which will be reflected in the displayed page item. Corresponding CSS properties will be persisted to the CSS file if the ID selector is set else to the style attribute. Manage Styles and Apply Styles tab in this customization window would help to control the CSS styles of the Web Page, simplifying the tedious task of styling the page with CSS.

Undo/Redo action will undo or redo of the last user action and the result may be visible in all the views (design, outline & property sheet).

Rich Design support

Where as the above user interaction provides a minimalistic page design support, page designer could provide rich design support such as

• Customization dialogs for page items, invoked via right clicking on a selected item in the design view or the outline. Customizer helps to change values of several properties.
• Rich custom property editor, invoked from property editor to customize a single property
• Binding Customization dialog if underlying framework and page items supports binding.
• Drag and drop binding of services such as Data Sources, W/S etc, if page items supports binding.

Binding of data to page items:

Server Side Binding may not be possible to simple XHTML file. For binding we need PDL such as JSP/JSF, Facelet or PhP

Possible Binding Scenarios

• Data source
• Simple Properties
• Java Collections (POJOs)
• Expressions
• Methods.

In order to provide above Rich Design Support, the page items must implement Design Time API. All bundled page items must implement Design Time API for user interaction.

Supporting Third party page items

VWPD must support third party page items out of the box, with or with out design time API implementation. If the page items does not implement the Design Time API, then the page editor must support the page items with milimastic design environment.

Third party page items could be imported as a complib if bundled with designtime and runtime jars. Additionaly user can simply point to a jar containing the page items and if recognized, they should be imported and available via palette for consuming in the page designer.

The component manager should be unified with palette manager in the tools menu. Palette manager should provide hooks to import either a complib or plain jars containing the page items. For example to import the jMaki AJAX components, user would bring up the Palette manager and point to the JMaki jar. The page items would appear in the Palette while designing pages that could support AJAX developemnt such as XHTML.

If any jars are to be added to the project, as a side effect of adding a page items to the it should be done transparent to the user, but performance should not be compromised.

Rich Page Design Support:

Many a time it is impossible to say why a particular CSS style behaves than expected. User may not note subtle mistakes in the CSS properties. Visual Aids comes handy. VWPD must support such visual aids in par with other web designers such as dream weaver.

For example applying a background coloring to div and with proper "Box Layout" shading user can easily identify the mistake in the CSS style properties

Importing Existing pages

Ability to import existing pages (HTML, JSF or JSP/jsf). Users should be able to instantly design the pages without need for any conversion to some restricted model. If any of the section or components could not be understood, then try to depict it as placeholder and construct the layout as pleasing as possible.

Provide tool to reformat the legacy HTML to XHTML for ease of maintenance.

Support for designing the website architecture

• Select and create a Web Application from some starter kits (Ex. Perosnal, Small business, e-business, forums, blogs etc). Set of starter pages are created from the starter kit. User could then design these page
• Select a Page template and construct conceptual structure of the website with complete page flow and then create the website pages with a single click.

Defining Uniform Web Site Look using Page Layout Template

This is done by providing supporting for Layout template creation. Then create web pages from these templates. The web pages created from these templates should be dynamically modified when user edits and save the templates. The templated area in the created web pages should not be allowed to be edited.

Integrated CSS support for page layout design

Support to easily incorporate CSS in to the project with CSS layout abilities, such as layout guide lines and to customize CSS layout templates for the project. CSS support includes

* Easy CSS management for full fledged CSS manipulation * CSS layout visualization for complex page layouts with nested schemes. * Specialized task panes and toolbars for page layout and page formatting. * Visual guidelines for Sub Section (non editable template region and editable user defined region) and layout boundaries. * Support for Fixed and Liquid layouts.

Support for AJAX and DHTML development

Out of the box support for predefined page items for well known AJAX applications sucg as Google Map, Google Calendat, Yahoo UI, jMaki and client-script libraries that incorporate JavaScript and DHTML technologies such as DOJO Widget library.

Support for Image slicing

Image Slicing allows to create mouse rollovers, make portions of the image clickable, and strike a nice balance between file size and image quality. Here is an example

Copy and paste Clip board

Allow copy a portion of Web page from the internet and paste on to the designer. This should allow the user to paste the content as just text or HTML itself.

Predefined Web Page types

Include templates for pre-defined pages types templates, which gives user a jump start to create special type of web application. Some Example are

• Article Page
• Blog Page
• Case Study
• Contact Page
• Event Calendar
• Forum
• Guest Book
• Help Page
• Homepage
• Newsletter
• Product Page
• Tutorial

iPhone Web development support

Out of the box iPhone development support with predefined page templates and page items, javascript suitable to be displayed in the iPhone environment.

Concept Overview diagram

Attachments