JBoss.orgCommunity Documentation

Chapter 3. Editors

3.1. Editors Features
3.1.1. OpenOn
3.1.2. Content Assist
3.1.3. Synchronized Source and Visual Editing
3.2. Visual Page Editor
3.2.1. Visual/Source View
3.2.2. Pages Styling
3.2.3. Visual Templates for Unknown Tags
3.2.4. Export/Import of the Templates for Unknown Tags
3.2.5. VPE Toolbar
3.2.6. Page Preview
3.2.7. Error Messages
3.2.8. Support for Custom Facelets Components
3.2.9. Setup notes for Linux
3.3. More Editors
3.3.1. Graphical Properties Editor
3.3.2. Graphical TLD Editor
3.3.3. Graphical Web Application File (web.xml) Editor
3.3.4. CSS Editor
3.3.5. JavaScript Editor
3.3.6. XSD Editor
3.3.7. Support for XML Schema

In the JSF Tools Reference Guide and Struts Tools Reference Guide you may have read about the Graphical Editors for JSF and Struts configuration files, Tiles Files, and Struts Validation Files. All these editors have Section 3.1.1, “OpenOn” and Section 3.1.2, “Content Assist” features, which are described in more details in this document. In addition this document will cover the Section 3.2, “Visual Page Editor”, which provides combined visual and source editing of Web pages, as well as many Section 3.3, “More Editors” for different types of files.

JBoss Developer Studio has powerful editor features that help you easily navigate within your application and make use of content and code assist no matter what type of project file (.jsp, .xhtml, .xml, .css etc.) you are working on.

The mentioned features are the following:

OpenOn lets you easily link directly from one resource to another in your project without using the Package Explorer view (project tree). With OpenOn, you can simply use F3 or Ctrl+Click on a reference to another file and the file will be opened.

OpenOn is available for:

Content assist is available when working with:

Notice that code completion for EL variables has icons illustrating what they are from. The most of this icons are described in the table below.




The ranking and sorting are available in EL code completions.

As you can see, together with proposals content assist also provides descriptions of selected tags or attributes.


When working with JSF project in JBoss Developer Studio, you can use various Content Assist features while developing:

JBoss Developer Studio takes Content Assist to the next level. Studio will constantly scan your project and you will be able to insert code into the JSP page from your project that includes:

The figure below shows how to insert message from a Properties files. You simply put the cursor inside the "value" attribute and press Ctrl-Space. JBoss Developer Studio will scan your project and show a list of possible values to insert.


In the following screenshot we are inserting a "Managed bean" attribute value. Again, by simply clicking Ctrl-Space, JBoss Developer Studio will show a list of all possible values that you can insert.

Once you select a Managed bean, it will show you a list of all available attributes for the selected Managed bean (userBean).


Code Assist based on project data will also prompt you for navigation rules that exist in your JSF configuration file.


Code Assist can also provide you with access to the beans located in jar archives.


Moreover Code Assist is able to define Resource Bundles on template pages and gives the proposals on the client page.


Here is what you need to do to add project based code assist to a custom component added in JBoss Developer Studio 2.X:

Follow these steps to set what is available for code assist:

<AttributeType ...>
       <proposal type="jsfVariables"/>
</AttributeType>
<AttributeType ...>
       <proposal type="bundleProperty"/>
</AttributeType>
<AttributeType ...>
       <proposal type="beanProperty"/>
</AttributeType>
<AttributeType ...>
       <proposal type="beanProperty">
          <param name="type" value="java.lang.Boolean"/>
       </proposal>
</AttributeType>
<AttributeType ...>
       <proposal type="beanMethodBySignature">
          <param name="paramType" value="javax.faces.context.FacesContext"/>
          <param name="paramType" value="javax.faces.component.UIComponent"/>
          <param name="paramType" value="java.lang.Object"/>
          <param name="returnType" value="void"/>
       </proposal>
</AttributeType>

From JBoss Developer Studio 3.0.0.M1 you should not do any of the steps described before, as dynamic code assist to custom components is added automatically.

If you open projects that were created in older studio versions you may see the following message:


It shows that some features of content assist including this one probably will not work. To fix this problem and turn off the message box execute the following steps:

  • Right click the project in Package Explorer.

  • Select ConfigureAdd JSF Capabilities from the context menu.

  • Configure your project using Add JSF Capabilities wizard and press Finish

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 such as JSF, Struts, JSP, HTML and more. Double-click on a file in the Package Explorer view to open it in the Visual Editor, or just drag-and-drop it into perspective (the drag-and-drop feature can be also applied to JSP, XHTML or HTML files created locally).

As a new JSF 2.0 specification has been released, support of new features is now implemented in the Visual Page Editor. The JSF 2.0 tags like <h:body>, <h:head>, <h:outputscript>, <h:outputstyle> are supported in the editor as well as the composite components and expression language resource handling. (See the following link on how to use composite components and following blog post on how to handle EL resources).

The current VPE version has three tabs: Visual/Source, Source and Preview. To switch between the views you can use tabs at the bottom of the VPE or the shortcut keys Ctrl + PageUp and Ctrl + PageDown .


Using the Visual/Source view you can edit your pages in the Source and Visual modes simultaneously, with instant synchronization between them:


The view is designed in the form of a split pane with toggle buttons for quickly moving between Source, Visual or Source/Visual modes, as shown on the figure above.

One more way to toggle between the various states of the split pane is using the shortcuts Shift + F6 for maximizing/restoring the Source part and Shift + Alt + F6 for maximizing or restoring the Visual part.

Tip:

When editing large documents hiding the Visual part will speed up the editing.

It should be pointed out that, no matter what mode you are working in, you get a full integration with the Properties and Outline views:


The Outline view displays a specific outline of a structured file that is currently open in the editor area, and lists its structural elements. Right-clicking on these elements will open additional options that allow other specific elements to be added in their appropriate positions.

The Properties view shows the property names and their values for a selected item. The values are editable just select any value and click on the button that will appear to choose a new value. The key combination Ctrl+Z will return the previous value, while Ctrl+Y will return the new value again. The Properties view has additional options and can be set up to display categories and advanced properties.

It's also possible to use the Chapter 4, JBoss Tools Palette to insert any tag from the list of tag libraries to the page you are editing with just a click or drag-and-drop.


You can insert a tag or component from the palette into either the Source or the Visual part by displaying the context menu and selecting Insert around, Insert before, Insert after or Replace With, pointing to From Palette, picking the type of the tag and finally choosing the tag you want to insert.

The image below illustrates how you can insert a tag into the Source part.


And this is how a tag is inserted using a context menu in the Visual part.


The Visual Page Editor also displays custom tags correctly if they are configured properly. The picture below shows an example how the custom tags "pagination" and "echo" will be displayed in VPE.


The listings of the custom tag implementations will help to demonstrate how VPE works.

  • echo.xhtml:

    <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets">
    	<span class="message">#{msg}</span>
    </ui:composition>
    
  • paginator.xhtml:

                            <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:f="http://java.sun.com/jsf/core">
    <ui:component>
    <!-- h:inputHidden id="currentPage" replace, because if on page two fields,
    two elements with equal id has been used, but should be used only one -->
    	<h:panelGrid style="margin-right:auto;margin-left:auto;" columns="4">
    		<h:commandButton value="&lt;&lt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=0" >
    		</h:commandButton>
    		<h:commandButton value="&lt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=#{user.currentPage-user.rowsPerPage}">
    		</h:commandButton>
    		<h:commandButton value="&gt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=#{user.currentPage+user.rowsPerPage}">
    		</h:commandButton>
    		<h:commandButton value="&gt;&gt;" type="submit" 
    		onclick="document.getElementById('currentPage').value=#{user.numberOfItems - user.rowsPerPage}">
    		</h:commandButton>
    	</h:panelGrid>
    	<h:inputHidden id="currentPage" value=""/>
    </ui:component>
    </html>
    

If your custom tags aren't configured correctly your Visual mode will look like this:


Most web pages use the cascading style sheets (CSS) to control the way they look. With Visual Page Editor you can easily stylize your pages. In this section we are going to introduce you to a powerful mechanism that VPE provides for a complete control over pages styling. More helpful information on work with CSS files can be found in Chapter 5, CSS Editing Perspective

The pages you are working with in VPE can use external stylesheets. VPE allows you to create new style classes in existing stylesheets and/or edit them as well. For these purposes Edit Style Class Dialog is provided.

Select the element for which you need to create or edit style class and press button next to styleClass field in Properties view.


It'll pick up the Edit Style Class Dialog which looks like on the figure below:


Choose a style class from the variants provided and click on the Ok button to apply the changes.

To open a CSS dialog based on the active CSS file click on in the top panel or use hot-keys (Shift+Ctrl+C).

To create a new CSS class for the file click on the Add CSS Class button, write its name in the field appeared and click on the Ok button:


Then you can configure style settings switching between the tabs: Text/Font, Background, Boxes, Property Sheet. The list of already existing classes with names beginning with the symbols printed will be displayed on standard "Ctrl+Space" key combination. To add existing styling to the chosen element just point to the necessary one. Each time you select any class it is displayed in the Preview tab. Click on the Apply button will apply the changes without closing the window.


The Edited properties tab gives a preview of the properties which are set for the existing style class. You can easily modify them with the help of this wizard.


If the style class isn't chosen, the tab doesn't show any properties.


The Preview tab is for observing the content of the chosen CSS file. This tab is hidden if no CSS file is chosen.


At the top of the CSS Class Dialog you can see a preview box which visualizes the result. To edit the preview you should double click in the box. To leave the focus, use Ctrl + Tab.


The dialog for creating a new CSS class, which is called from New > Other... > JBoss Tools Web > CSS Class, looks this way:


Click on the Browse button to open a dialog to select the CSS file to create a CSS class for:


Choose the necessary CSS file and click on the Ok button.

The Visual Page Editor toolbar includes the next buttons:


The Page Design Options button ( ) leads to a window which helps you specify necessary references of the resources. It is represented by a window with 4 tabs. The first one, Actual Run-Time folders, is used to replace absolute and relative path values when generating a preview:


The second tab, Included CSS files , is used to add CSS files to be linked by Visual Page Editor when generating a preview:


The third one, Included tag libs, can be used to add Taglibs that can be used by the editor for getting appropriate templates to generate a preview:


And finally, the Substituted El expressions tab is used to add El expressions that will be substituted by the editor when generating a preview:


The first two tabs of the window let you define actual runtime folders. The example below will help you understand how this can be done.

Suppose you have the following project structure:

WebContent/
  pages/
    img/
       a.gif
    header.jsp
  main.jsp
  

The content of the header.jsp is:

My Header
<img src="img/a.gif"/>

and main.jsp content is:

<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 'projectName > WebContent > pages' and you will see the image appeared.

Let' consider an example for other tabs. For instance, the definition of your CSS on the page is the next:

<link rel="stylesheet" type="text/css"  
    href="#{facesContext.externalContext.requestContextPath}/style.css"/>

This will work fine in runtime, but the Visual Page Editor doesn't know what requestContextPath in design time is. In order to see the necessary styles applied in design time your should add a path to your stylesheet in the CSS File Path section.

The next URI section lets you add URI taglibs so that the editor knows where to find the tag libraries.

And the last Substituted EL expressions section is provided to specify the values for specific EL variables. It can be useful for a preview generation.

As an example look at the figure below:


Here both in Source and Visual modes you see the EL expression #{user.name}. When you switch to Preview view, you'll also see this expression. Now press Page Design Options button and set the value for the "user.name" as World.


As a result in Visual mode and Preview view the word World is displayed.


Visual Page Editor (starting from 3.0.0.M3 version of JBoss Tools) supports custom Facelets tag libraries both declared in the web.xml file (for details, see Creating a component) and packed into the JAR file.

Tip:

In case of Facelets tag library packed in .jar, remember to put *.taglib.xml in right place: [filename].jar/META-INF/*.taglib.xml

Visual Page Editor recognizes the tags from the custom Facelets tag library and correctly renders them both in source and visual view of the editor.


While editing an XHTML file that uses a custom Facelets components you can always make use of the following editor's features:

Linux users who are going to use earlier versions of JBoss Tools then 3.1.0.M4 may need to do the following to get the Visual Page Editor to work correctly on their machines.

The Visual Page Editor requires the library libstdc++.so.5. This library is contained in the compat-libstdc++-33.i386 package.

In case you have the library installed and you still have issue with starting the Visual Page Editor then close all browser views/editors and leave one visual page editor open and restart eclipse. This should force a load of the right XULRunner viewer.

If it doesn't help and you use Fedora Core Linux and Eclipse Version: 3.4.1,the issue can be produced because libswt-xulrunner-gtk-3449.so file doesn't present in eclipse-swt-3.4.1-5.fc10.x86_64.rpm/eclipse/plugins/org.eclipse.swt.gtk.linux.x86_64_3.4.1.v3449c.jar.To add this file to eclipse you should:

Besides Visual Page Editor JBDS is supplied with a huge range of various editors for different file types: properties, TLD, web.xml, tiles and so on.