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
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.
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).
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:
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.
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.
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 chapter:
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.
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; 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:
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><div...><table...><br> </table></div></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).
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.
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 in the following chapters, where we will create real projects):
