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:
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
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.
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.
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:
- 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).
- 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).
- 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).
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:
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):
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.
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).
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:
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).
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:
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.
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).
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).
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;
<table cellspacing=0 cellpadding=2>
<td width=270 valign="top" nowrap>
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:
In this section, we can write a tag description in HTML format. For example, for the <mytable> tag, we have created the following description:
<br><code>CSS and table specific attributes</code>
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).
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.
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.
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):
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:
- Navigate through the Palette until you see the tag that will be inserted.
- Click on this tag as you click on any button.
- 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.
- 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.
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!
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 :