JBoss Tools Palette

Exclusive offer: get 50% off this eBook here
JBoss Tools 3 Developers Guide

JBoss Tools 3 Developers Guide — Save 50%

Develop JSF, Struts, Seam, Hibernate, jBPM, ESB, web services, and portal applications faster than ever using JBoss Tools for Eclipse and the JBoss Application Server

$23.99    $12.00
by Anghel Leonard | April 2009 | JBoss Java Open Source Web Development

In this article by Anghel Leonard, we will discuss the JBoss Tools Palette, which is a very useful tool designed especially for speeding up the development of JSP, JSF, HTML, XHTML or any other text file that contains tags. In principle, JBoss Tools Palette is a collection of common tags, exposed through a flexible and easy-to-use interface.

By default, JBoss Tools Palette is available in the Web Development perspective that can be displayed from the Window menu by selecting the Open Perspective | Other option. In the following screenshot, you can see the default look of this palette:

JBoss Tools Palette

Let's dissect this palette to see how it makes our life easier!

JBoss Tools Palette Toolbar

Note that on the top right corner of the palette, we have a toolbar made of three buttons (as shown in the following screenshot). They are (from left to right):

  • Palette Editor
  • Show/Hide
  • Import

JBoss Tools Palette

Each of these buttons accomplishes different tasks for offering a high level of flexibility and customizability. Next, we will focus our attention on each one of these buttons.

Palette Editor

Clicking on the Palette Editor icon will display the Palette Editor window (as shown in the following screenshot), which contains groups and subgroups of tags that are currently supported. Also, from this window you can create new groups, subgroups, icons, and of course, tags—as you will see in a few moments.

JBoss Tools Palette

As you can see, this window contains two panels: one for listing groups of tag libraries (left side) and another that displays details about the selected tag and allows us to modify the default values (extreme right). Modifying a tag is a very simple operation that can be done like this:

  1. Select from the left panel the tag that you want to modify (for example, the <div> tag from the HTML | Block subgroup, as shown in the previous screenshot).
  2. In the right panel, click on the row from the value column that corresponds to the property that you want to modify (the name column).
  3. Make the desirable modification(s) and click the OK button for confirming it (them).

Creating a set of icons

The Icons node from the left panel allows you to create sets of icons and import new icons for your tags. To start, you have to right-click on this node and select the Create | Create Set option from the contextual menu (as shown in the following screenshot).

JBoss Tools Palette

This action will open the Add Icon Set window where you have to specify a name for this new set. Once you're done with the naming, click on the Finish button (as shown in the following screenshot). For example, we have created a set named eHTMLi:

JBoss Tools Palette

Importing an icon

You can import a new icon in any set of icons by right-clicking on the corresponding set and selecting the Create | Import Icon option from the contextual menu (as shown in the following screenshot):

JBoss Tools Palette

This action will open the Add Icon window, where you have to specify a name and a path for your icon, and then click on the Finish button (as shown in the following screenshot). Note that the image of the icon should be in GIF format.

JBoss Tools Palette

Creating a group of tag libraries

As you can see, the JBoss Tools Palette has a consistent default set of groups of tag libraries, like HTML, JSF, JSTL, Struts, XHTML, etc. If these groups are insufficient, then you can create new ones by right-clicking on the Palette node and selecting the Create | Create Group option from the contextual menu (as shown in the following screenshot).

JBoss Tools Palette

This action will open the Create Group window, where you have to specify a name for the new group, and then click on Finish. For example, we have created a group named mygroup:

JBoss Tools Palette

Note that you can delete (only groups created by the user) or edit groups (any group) by selecting the Delete or Edit options from the contextual menu that appears when you right-click on the chosen group.

Creating a tag library

Now that we have created a group, it's time to create a library (or a subgroup). To do this, you have to right-click on the new group and select the Create Group option from the contextual menu (as shown in the following screenshot).

JBoss Tools Palette

This action will open the Add Palette Group window, where you have to specify a name and an icon for this library, and then click on the Finish button (as shown in the following screenshot). As an example, we have created a library named eHTML with an icon that we had imported in the Importing an icon section discussed earlier in this article:

JBoss Tools Palette

Note that you can delete a tag library (only tag libraries created by the user) by selecting the Delete option from the contextual menu that appears when you right-click on the chosen library.

JBoss Tools 3 Developers Guide Develop JSF, Struts, Seam, Hibernate, jBPM, ESB, web services, and portal applications faster than ever using JBoss Tools for Eclipse and the JBoss Application Server
Published: April 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Creating a new tag

After you have created a tag library, it is time to place your first tag in it. To do this, you have to right-click on the tag library and select the Create | Create Macro option from the contextual menu (as shown in the following screenshot).

JBoss Tools Palette

This action will open the Add Palette Macro window, where you can configure the new tag. In this window, you have to specify:

  • The tag Name (mandatory)—it is displayed in Tools Palette
  • An Icon (optional)
  • Start Text of the tag (optional)
  • End Text of the tag (optional)
  • Automatically Reformat Tag Body (mandatory).

JBoss Tools Palette

For example, let's create a tag for representing the following HTML code, which is a scrollable HTML table with a single column. We have named the tag <mytable>:

<div style="overflow: auto; width: 270px; height:375px; padding:0px;
margin: 0px">
<table cellspacing=0 cellpadding=2>
<col width=270>
<tr>
<td width=270 valign="top" nowrap>
</td>
</tr>
</table>
</div>

For this, we fill up the Add Palette Macro as seen in the previous screenshot.

Note that you can delete a tag (only tags created by the user) by selecting the Delete option from the contextual menu that appears when you right-click on the chosen tag.

As you can see in the previous screenshot, there is no section for describing your tag definition, syntax, attributes, etc. For that you can click on the tag name and modify the description row from the right panel of the Palette Editor or you can right-click on the tag name and select the Edit option from the contextual menu. This will open the Edit window that contains a Description section as you can see in the following screenshot:

JBoss Tools Palette

In this section, we can write a tag description in HTML format. For example, for the <mytable> tag, we have created the following description:

<html>
<table width="300">
<tr>
<td>
<font color="OLIVE">
<b>Name:</b>
</font>
<code>
<br>Scrollable table
</code><br>
<font color="OLIVE">
<b>Syntax:</b>
</font>
<code><br>&lt;div...&gt;&lt;table...&gt;<br>
&lt;/table&gt;&lt;/div&gt;</code><br>
<font color="OLIVE"><b>Atributes:</b></font>
<br><code>CSS and table specific attributes</code>
</td>
</tr>
</table>
</html>

Now, closing the Palette Editor by clicking the OK button will automatically add the new group, the tag library, and the tag into the JBoss Tools Palette as shown in the following figure (note the description that appears on mouse over).

JBoss Tools Palette

Show/Hide

As the name suggests, this feature allows us to customize the number of groups displayed in the palette. By default, the palette shows only five groups, but we can add or remove groups by clicking on this button, which displays the window as shown in the following screenshot.

JBoss Tools Palette

In this window, select the groups and/or tag libraries that you want to see in the palette and deselect the ones that you want to remove from the palette.

Importing third-party tag libraries

A great facility of JBoss Tools Palette is the ability to import third party tag libraries. This can be done using the Import button, which opens the Import Tags from TLD file window as shown in the following screenshot.

JBoss Tools Palette

Now, it is mandatory to set the TLD file, and a name for the new tag library. Optionally, we can specify a default prefix, a library URI, and a group that will host the tag library (this can be an existing group or a new one). For example, in the following screenshot you can see how we have imported the sql.tld library into a JSF project (for now, all you can do is imagine this case, but keeping this in mind will help you while creating real projects):

JBoss Tools Palette

Using tags in text files

In this section, we will discuss inserting tags from the Palette into our text files. This is a very simple task that consists of the following steps:

  1. Navigate through the Palette until you see the tag that will be inserted.
  2. Click on this tag as you click on any button.
  3. If the tag has attributes, then you will see the Insert Tag window that allows you to customize the values of these attributes (the following screenshot represents the Insert Tag window for the <table> tag that can be found in HTML group, Table tag library). Note that if the selected tag doesn't have any attributes to be set, then this step will be skipped and the tag will be inserted into your page.

    JBoss Tools Palette

  4. After you have set the values of the attributes, simply click the Finish button. This action will automatically insert the chosen tag into your page. For example, in the following screenshot you can see the effect of inserting the <mytable> tag, created in the Create a new tag section, into an empty HTML page.

    JBoss Tools Palette

You should have an empty project named test. Expand the test | WebContent node, right-click on it, and select New | Other option. In the New window, expand Web node and select HTML leaf. Type example (without the .html extension) in the File name field and click on the Finish button. Now, you have the shown example.html page and you can try to add our tag to it. Also, you can play with other tags to get used to them!

Summary

In this article, you have learnt how to use and customize the JBoss Tools Palette for speeding up the development process of different kinds of pages, like JSP, HTML, XHTML, etc. This will be an important skill to possess when you develop projects that contain many such pages.

 

If you have read this article you may be interested to view :

 

JBoss Tools 3 Developers Guide Develop JSF, Struts, Seam, Hibernate, jBPM, ESB, web services, and portal applications faster than ever using JBoss Tools for Eclipse and the JBoss Application Server
Published: April 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Anghel Leonard

Anghel Leonard is a senior Java developer with more than 13 years of experience in Java SE, Java EE, and related frameworks. He has written and published more than 50 articles about Java technologies and more than 500 tips and tricks for many programming dedicated websites. In addition, he wrote two books about XML and Java (one for beginners and one for advanced developers) for Albastra, a Romanian publisher, three books for Packt: Jboss Tools 3 Developer Guide, JSF 2.0 Cookbook, and JSF 2.0 Cookbook LITE, and two books for APress: Pro Java 7 NIO 2 and Pro Hibernate and MongoDB. Currently, he's developing web applications using the latest Java technologies on the market (EJB 3.0, CDI, Spring, JSF, Struts, Hibernate, and so on). For the past two years, he has focused on developing rich Internet applications for geographic information systems.

Books From Packt

JBoss Portal Server Development
JBoss Portal Server Development

JBoss Drools Business Rules
JBoss Drools Business Rules

Learning jQuery 1.3
Learning jQuery 1.3

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

Java EE 5 Development with NetBeans 6
Java EE 5 Development with NetBeans 6

Django 1.0 Website Development
Django 1.0 Website Development

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Practical Plone 3: A Beginner's Guide to Building Powerful Websites
Practical Plone 3: A Beginner's Guide to Building Powerful Websites

 

 

 

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
5
W
p
9
K
u
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software