4.2. Visual Page Editor

JBoss Developer Studio comes with a powerful and customizable Visual Page Editor (VPE). You can use the Visual Page Editor to develop an application using any technology: JSF, Struts, JSP, HTML and others.

Current VPE version has four tabs: Visual/Source, Visual, Source and Preview.

Split screen design with instant synchronization between source and visual views:

Visual/Source View

Figure 4.30. Visual/Source View


You can also switch to pure Visual design:

Visual View

Figure 4.31. Visual View


Or work just in Source view. Note that selection bar is now available not only in Visual mode but also in Source one:

Source View

Figure 4.32. Source View


No matter what view you select, you get full integration with Properties and Outline views:

Properties And Outline Views

Figure 4.33. Properties And Outline Views


Preview mode is read-only, it only shows how the page will look like in a browser.

Preview Mode

Figure 4.34. Preview Mode


Use the graphical toolbar to add inline styling to any tag.

Graphical Toolbar

Figure 4.35. Graphical Toolbar


With just a click or drag-and-drop insert any tags from the palette on to the page you are editing.

Inserting Tags From Palette

Figure 4.36. Inserting Tags From Palette