Red Hat Developer Studio comes with a visual page editor. You can use the visual page editor to develop an application using any technology: JSF, Struts, JSP, HTML and others.
Split screen design with instant synchronization between source and visual views:
You can also switch to pure Visual design:
Or work in just Source view:
No matter what view you select, you get full integration with Properties and Outline views:
Use the graphical toolbar to add inline styling to any tag.
With just a click or drag-and-drop insert any tags from the palette on to the page you are editing.
There are three buttons on the visual page editor left side:
Preferences
Quick access to Visual page editor preferences.
Refresh
Refresh displaying information.
Page Design Options
This dialog let's you set resources which are usually only resolved in runtime. To set a stylesheet, click Add (for CSS File Path section) and add your stylesheet. It works when CSS is defined on your page in the following way:
Code:
<link rel="stylesheet" type="text/css" href="{requestContextPath}/style.css"/>
This will work fine in runtime, but the visual page editor doesn't know what requestContextPath in design time is.
The next section (URI), let's you add URI taglibs if you are using includes so that the editor knows where to find the tag libraries.
The first two sections let you define actual runtime folders. Here is an example.
Let's say you have the following project structure:
WebContent/
pages/
img/
a.gif
header.jsp
main.jsp
header.jsp content:
My Header
<img src="img/a.gif"/>
main.jsp:
<jsp:include page="pages/header.jsp" />
When you open main.jsp in visual page editor, it will not be able to resolve the image from the header, however, it will work fine in runtime. To fix this in design time, click the Page Design Options button and set Actual Run-Time Relative Folder to > project < WebContent\pages and you will see the image appear.
Show/Hide Selection bar
Use the "Tag" button on the lower left side to activate the selection bar. By clicking on the component in Visual view you can see the tags tree.
You may have to make some adjustments to get the Visual Page Editor working smoothly when using Red Hat Developer Studio on a Linux system. Below we discuss what this means for different versions of Linux.
You don't need to do anything, the visual page editor should work without any additional changes.
Sun's JDK should be installed (tested with j2sdk-1_4_2_08)
Copy libstdc++.so.5.0.7 into /usr/lib. You can get the file here.
Type cd /usr/lib
Type ln -s libstdc++.so.5.0.7 libstdc++.so.5
Close the Online Help view that displays the Red Hat Developer Studio Guide
Close Eclipse
Restart Eclipse and open the Visual Page Editor
You might also want to set MOZILLA_FIVE_HOME variable to point to Mozilla that comes with Red Hat Developer Studio when you start Eclipse. Create a script and when you launch Eclipse, set the following:
export MOZILLA_FIVE_HOME=<h:PanelGrid>/com.exadel.vpe.mozilla.gtk_version/os/linux/x86
If you have another Mozilla installation, it will be intact as the path will be set only when you are launching Eclipse.
When working in Red Hat Developer Studio JSP editor you are constantly provided with feedback and contextual error checking as you type.
- Template definition for design-time representation of custom tags (pdf)
Note:
The templates files are now saved in <RedHatDeveloperStudio>\eclipse\plugins\com.exadel.vpe_1.1.1\plugin.xml. The PDF files show the old location.
- Steps to Create Plug-in (pdf)
- How to use create(..) method (pdf)
- API
- Download examples. The examples.zip file contains two applications. The first application transforms the JSP source tag into visual tag (HTML). This application is an Eclipse plug-in. Import as an Eclipse project. The second application is a Web applications which uses the custom component (project with JSF Nature).
Please send us an email to support@exadel.com if you have questions about this feature.
Red Hat Developer Studio comes with JSP design-time preview features. When designing JSP pages you can easily preview how they will look during runtime. You can even attach your stylesheet to the preview.
JSP preview is available for:
Struts Pages
JSF Pages
The preview features are available through Visual Page Editor.