PageDesigner Introduction Sybase, Inc.

Features WYSIWYG web page editor for HTML/CSS/JSP/JSF pages Full HTML4.0, CSS2 support Design, Source and preview pages Customizable properties page Customizable palette Resource Drag & Drop processing Extensions for new taglib support

The editor

Framework WTP JSF Support HTML/CSS PageDesigner SSE MyFaces Support 3 rd Party Taglib Support

Basic architecture 1. CSS Layer This layer mainly handles CSS specification. It handles how controls are displayed on the canvas, and how they are displayed. 2. HTML Layer This layer is relatively simple. It handles how to map HTML components to corresponding CSS components. 3. Tag Convert Layer This layer handles how to convert JSP/JSF customized tags to HTML tags. So later the HTML layer and CSS layer can use to render the tags on screen. 4. Edit Layer This layer integrates with the GEF framework and Webtools SSE framework. To support graphical editing.

Basic classes diagram

Extensions Design time render Items in palette Properties view –Quick edit pane –Category & cell editor Edit policies Items in pop-up menu Drag and drop processor