Chapter 4. Editors

In previous chapters you had possibility to read about Graphical Editor for JSF and Struts configuration files, Graphical Editor for Tiles Files, Graphical Editor for Struts Validation Files. All these editors have OpenOn and Content Assist features, they are described more detail in this chapter. In addition you get to know a Visual Page Editor for combined visual and source editing of Web pages and many other editors for different types of files.

4.1. Editors Features

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 project file (jsp, xhtml, xml, css, etc...) you are working on.

4.1.1. OpenOn

OpenOn let's you easily navigate through your project without using the Package Explorer view (project tree). With OpenOn, you can simply click on a reference to another file and that file will be opened.

OpenOn is available for the following files:

4.1.1.1. XML Files

Press and hold down the Ctrl key. As you move the mouse cursor over different file references in the file, they display an underline. When you have the mouse cursor over the name of the file you want to open, click and the file will open in its own editor. In this example the managed bean NameBean will open.

NameBean Managed Bean

Figure 4.1. NameBean Managed Bean


This is the result of using OpenOn.

NameBean Java Class

Figure 4.2. NameBean Java Class


You can also try OpenOn with defined attributes.

OpenOn With Defined Attributes

Figure 4.3. OpenOn With Defined Attributes


You can also open any JSP pages.

JSP Page OpenOn

Figure 4.4. JSP Page OpenOn


4.1.1.2. JSP Pages

OpenOn is also very useful in JSP pages. It will allow you to quickly jump to the reference instead of having to hunt around in the project structure.

You can easily open the imported property files.

OpenOn With Imported Property Files

Figure 4.5. OpenOn With Imported Property Files


Use OpenOn to open a CSS file used with a JSP page:

OpenOn With CSS File

Figure 4.6. OpenOn With CSS File


Open managed beans:

OpenOn With Managed Beans

Figure 4.7. OpenOn With Managed Beans


For JSP files in a JSF project, you can also easily open the navigation rules by applying OpenOn to the JSF tag for the navigation outcome:

OpenOn With JSF Tag

Figure 4.8. OpenOn With JSF Tag


4.1.2. Content Assist

Content assist is available when working with

4.1.2.1. JSF Project Files

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

  • Content Assist for XML, JSP and JSF configuration files

  • Content Assist based on project data

  • Content Assist with graphical JSF editor

4.1.2.1.1. Content Assist for XML, JSP and JSF configuration files

At any point when working with any XML, JSP and JSF configuration files Content Assist is available to help you. Simply type Ctrl-Space to see what is available.

Content Assist for JSF configuration file:

Content Assist in JSF Configuration File

Figure 4.9. Content Assist in JSF Configuration File


Content Assist for JSF JSP file:

Content Assist in JSP File

Figure 4.10. Content Assist in JSP File


Content Assist for other JSF XML project files (web.xml shown):

Content Assist in web.xml File

Figure 4.11. Content Assist in web.xml File


4.1.2.1.2. Content Assist Based on Project Data

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:

  • Values from Property files

  • "Managed beans" attributes and methods

  • Navigation Rule Outcomes

  • JSF variables (context, request etc...)

The first screenshot 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.

Inserting Message

Figure 4.12. Inserting Message


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).

Attributes List

Figure 4.13. Attributes List


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

Code Assist

Figure 4.14. Code Assist


4.1.2.1.3. Content Assist within Tree JSF Editor

JBoss Developer Studio also provides Content Assist when working within the Tree JSF configuration editor. Just click Ctrl-Space.

Content Assist in Tree JSF Configuration Editor

Figure 4.15. Content Assist in Tree JSF Configuration Editor


4.1.2.2. Struts Project Files

Content Assist features are available when you work with Struts projects.

4.1.2.2.1. Content Assist for Struts Configuration File

Content Assist helps you in Struts Configuration file.

Struts Content Assist

Figure 4.16. Struts Content Assist


4.1.2.2.2. Content Assist for Struts JSP File

Using Code Assist in Struts JSP file is shown below.

Struts JSP Content Assist

Figure 4.17. Struts JSP Content Assist


4.1.2.3. JSP Pages

4.1.2.3.1. Content Assist for JSF Tags

JBDS provides full code completion for JSF tags:

JSF Tags Content Assist

Figure 4.18. JSF Tags Content Assist


When the tag is selected the required attributes, if there any, are already inserted and the cursor is located to the first attribute. As this point you can ask for attribute proposals.

Attributes Content Assist

Figure 4.19. Attributes Content Assist


4.1.2.3.2. Content Assist for JSTL Tags
JSTL Tags Content Assist

Figure 4.20. JSTL Tags Content Assist


4.1.2.3.3. Content Assist for HTML Tags

Content assist for HTML tags has the same mechanism as for JSF tags:

HTML Tags Content Assist

Figure 4.21. HTML Tags Content Assist


You can use as well attributes proposals for HTML tags:

HTML Tags Content Assist

Figure 4.22. HTML Tags Content Assist


4.1.2.3.4. Content Assist for JavaScript Tags
JavaScript Tags Content Assist

Figure 4.23. JavaScript Tags Content Assist


4.1.2.4. Rich Faces components

JBDS indeed provides code completion for Rich Faces framework components. All you have to do is to install Rich Faces libraries into your project. See here how to install.

Content Assist for Rich Faces Components

Figure 4.24. Content Assist for Rich Faces Components


  • To insert a Rich Faces component on a page expand JBoss Rich Faces group on the palette

  • Click on some component

  • Put the needed attributes in the Insert Tag dialog and click Finish button

    Insert Tag

    Figure 4.25. Insert Tag


The Rich Faces tag will be inserted on your page displayed in source and visual modes:

Rich Faces Component

Figure 4.26. Rich Faces Component


4.1.2.5. Adding dynamic code assist to custom components that were added to JBoss Tools Palette

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

  1. Create a new xml file in <JBDS_home>studio/eclipse/plugins/org.jboss.tools.common.kb_***/schemas/tld/. For example call it JeniaFaces.xml. The file should be written according to <JBDS_home>/studio/eclipse/plugins/org.jboss.tools.common.kb/kb.jar/org/jboss/tools/common/kb/kb-schema_1.0.dtd

Here is how you set what is available for code assist:

  • Adds code assist for JSF pre-defined objects, such as value= "#{param}" :


<AttributeType ...>
       <proposal type="jsfVariables"/>
</AttributeType>
  • Adds bundle resource (property file) code assist:


<AttributeType ...>
       <proposal type="bundleProperty"/>
</AttributeType>
  • Adds managed bean property code assist:


<AttributeType ...>
       <proposal type="beanProperty"/>
</AttributeType>
  • Adds managed bean property but with a specified type:


<AttributeType ...>
       <proposal type="beanProperty">
          <param name="type" value="java.lang.Boolean"/>
       </proposal>
</AttributeType>
  • Adds managed bean method with a signature:


<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>
  1. Add information on your xml file in <JBDS_home>/studio/eclipse/plugins/org.jboss.common.kb_***/plugin.xml



         <tld
            jsf="true"
            name="Jenia Faces"
            schema-location="schemas/tld/myJSF.xml"
            uri="http://www.jenia.org/jsf/dataTools"/>
    
  1. Restart Eclipse. You should now have code assist for the component.

4.1.3. Synchronized Source and Visual Editing

JBoss Developer Studio offers the flexibility to edit any files in either source or extra visual modes at the same time.

The project is yours and so is the source. JBoss Developer Studio provides you many different graphical editors to speed your application development. At the same time, you always have full control over all project source files. Any changes you make in the source view, will immediately appear in the graphical view.

The JSF configuration file editor has three views: Diagram, Tree and Source. All views are synchronized, you can edit the file in any view.

Three Views are Synchronized

Figure 4.27. Three Views are Synchronized


The same applies to all other JBoss Developer Studio editors.

Web XML editor is shown. Web XML editor has a graphical view (Tree) and source (Source).

Two Views are Synchronized

Figure 4.28. Two Views are Synchronized


JBoss Developer Studio TLD file editor shown in Tree view. At any point you can edit the source by going switching to Source view.

Two Views are Synchronized

Figure 4.29. Two Views are Synchronized


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


4.2.1. Advanced Settings

There are three buttons on the Visual Page Editor left side:

Visual Page Editor Buttons

Figure 4.37. Visual Page Editor Buttons


  • Preferences

Provides quick access to Visual Page Editor preferences.

Visual Page Editor Preferences Window

Figure 4.38. Visual Page Editor Preferences Window


  • Refresh

Refresh displaying information with this button.

  • Page Design Options

This button leads to page design options.

Page Design Options

Figure 4.39. 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="#{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.

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.

  • Hide Selection bar

By clicking on the component in Visual view or selecting a code snippet in Source mode you can see the tags tree. If you want to hide the selection bar, use the "Hide Selection Bar" button on the lower right side.

Selection Bar

Figure 4.40. Selection Bar


4.2.2. Setup notes for Linux

4.2.2.1. How to Start the Visual Page Editor under Linux

Linux users may need to do the following to get the Visual 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.

  • To install this package on Fedora Core or Red Hat Enterprise Linux run the following command:

    yum install compat-libstdc++-33.i386
  • On any other rpm based distributions download libstdc++.so.5 and run the following command:

    rpm -Uvh compat-libstdc++-33.i386
  • On Debian based distributives run the following command:

    apt-get install compat-libstdc++-33.i386

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.

4.2.3. JSP syntax validation

When working in JBoss Tools JSP editor you are constantly provided with feedback and contextual error checking as you type.

4.2.4. JSP Page Preview

JBoss 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 with Visual Page Editor.

4.3. More Editors

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.

4.3.1. Graphical Properties Editor

The Properties editor allows you to work in two different modes and also supports unicode characters.

To create a new properties file, in the Package Explorer view, select New > Properties File from the right-click context menu on the folder where you want to create the file.

Selecting Properties File

Figure 4.41. Selecting Properties File


You can edit the file using a table-oriented "Properties" viewer:

"Properties" Viewer

Figure 4.42. "Properties" Viewer


You can also use a Source viewer for editing the file:

Source Viewer

Figure 4.43. Source Viewer


4.3.2. Graphical TLD Editor

The TLD editor comes with same features you will find in all other JBoss Developer Studio editors:

  • Graphical and source edit modes

  • Validation and error checking

4.3.2.1. Tree view

Tree View

Figure 4.44. Tree View


4.3.2.2. Source view

You can easily switch from Tree to Source by selecting the Source tab at the bottom of the editor.

Source View

Figure 4.45. Source View


You can easily add a new tag:

Adding a New Tag

Figure 4.46. Adding a New Tag


You can also easily add a new attribute to an existing tag:

Adding a New Attribute

Figure 4.47. Adding a New Attribute


Content assist is available when editing the file using the Source viewer:

Content Assist

Figure 4.48. Content Assist


In the Source viewer, if at any point a tag is incorrect or incomplete, an error will be indicated next to the line and also in the Problems view below.

Error Reporting

Figure 4.49. Error Reporting


4.3.3. Graphical Web Application File (web.xml) Editor

The Web Application File editor comes with the same features you will find in all other JBoss Developer Studio editors:

  • Graphical and source edit modes

  • Validation and error checking

4.3.3.1. Tree View

Tree View

Figure 4.50. Tree View


You can add any new elements right in the Tree viewer:

Adding New Elements

Figure 4.51. Adding New Elements


4.3.3.2. Source View

Switch to the Source viewer to edit the web.xml file by hand at any time:

Source View

Figure 4.52. Source View


4.3.3.3. Content Assist

Content assist is available in the Source viewer. Simply click CTRL-Space anywhere in the file.

Content Assist

Figure 4.53. Content Assist


4.3.3.4. Errors Checking and Validation

If errors occur anywhere in the file, small red dots will appear next to the lines where the errors occurred. Also, note that the file is marked by a small x in the Package Explorer view.

Errors Reporting

Figure 4.54. Errors Reporting


4.3.4. CSS Editor

The CSS editor comes with the same features you will find in all other JBoss Developer Studio editors.

  • Content assist

  • Validation and error checking

With the CSS (Cascading Style Sheet) editor, you can take advantage of code prompting:

CSS Editor

Figure 4.55. CSS Editor


And you can also use the Properties view next to the editor to edit existing stylesheet declaration properties:

Properties View

Figure 4.56. Properties View


4.3.5. JavaScript Editor

The JavaScript editor includes a Preview viewer and a Source viewer. In the Source viewer, you can use code assist:

JavaScript Editor

Figure 4.57. JavaScript Editor


You can also use the Source viewer with the Outline view to navigate around the file:

Source Viewer

Figure 4.58. Source Viewer


4.3.6. XSD Editor

JBoss Developer Studio comes with an XSD Editor for XML Schema files. This editor comes from the Web Tools Project (WTP) (see WTP Getting Started).

To create a new XSD file, right-click a folder in the Package Explorer view, select New > Other... from the context menu and then select XML > XML Schema in the dialog box.

Creating New XSD file

Figure 4.59. Creating New XSD file


The XSD Editor includes two viewers for working on the file, a Design viewer and a Source viewer:

Source Viewer

Figure 4.60. Source Viewer


In the Design viewer, you can drill down on an element by double-clicking on it:

Design Viewer

Figure 4.61. Design Viewer


Various edit options are available when you right-click an element in the diagram:

Edit Options

Figure 4.62. Edit Options


You can also use the Properties view to edit a selected element:

Properties View

Figure 4.63. Properties View


You can also use a Source viewer for the file. In this viewer, along with direct editing of the source code, you can also edit the file by using the Properties view on the right:

Source Viewer

Figure 4.64. Source Viewer


4.3.7. Support for XML Schema

JBoss Developer Studio fully supports XML files based on schemas as well as DTDs:

XML File

Figure 4.65. XML File