Step 3. Complete Definition of Toolbar Menu Item Weblet
WAM105 - Create Your Own Weblet
In this step you will complete the coding of the toolbar menu item weblet. You will add code to:
- Define weblet parameters
- Define elements of the anchor tag (for example, IMG ALT) as XSL variables
- Complete JavaScript for HREF to set reentry field value and call wam / WebRoutine
- Condition the <A> HREF and IMG tags based on a $hide_if variable
- Add weblet parameter tooltips.
1. Switch to the iii_toolbar_menuitem or open it in the editor if necessary. Select the XSL tab.
2. Immediately following the <xsl:template name="iii_toolbar_menuitem"> tag, paste in the following code to define the weblet parameters. Review the comments for each parameter to see where it will be used.
<!-- Used to set the Menu Text on the toolbar image -->
<xsl:param name="menu_text" wd:type="std:mtxt_variable" select="'Caption'" />
<!-- Used to set the image use for the toolbar Icon -->
<xsl:param name="menu_image" wd:type="std:html_img_relative"
select="'/icons/normal/16/folder_16.png'" />
<!-- Used to set the ALT tag on the toolbar IMG tag -->
<xsl:param name="tooltip_text" wd:type="std:mtxt_variable"
select="'Caption'" />
<!-- Used to set the Rentry Field Name when the toolbar Icon is clicked -->
<xsl:param name="reentryfield"
wd:type="std:field_name_in[wam=$on_click_wamname][webrtn=$on_click_wrname]"
select="'STDRENTRY'" wd:tip_id="" />
<!-- Used to set the Rentry Field Value when the toolbar Icon is clicked-->
<xsl:param name="reentryvalue" select="'M'" wd:tip_id="" />
<!-- Used to set the Menu Text on the toolbar image -->
<xsl:param name="hide_if" wd:type="std:boolean" select="false()"
wd:tip_id="" />
<!-- Used to specify the WAMNAME to call when toolbar Icon is clicked -->
<!-- It will default to the current WAM if no value is specified -->
<xsl:param name="on_click_wamname" wd:type="std:wam"
select="/lxml:data/lxml:context/lxml:webapplication" wd:tip="" />
<!-- Used to specify the WebRoutine to call when toolbar Icon is clicked -->
<xsl:param name="on_click_wrname"
wd:type="std:webroutine[wam=$on_click_wamname]" wd:tip="" />
This block of code defines the parameters that can be passed into the template when the toolbar menu item template is called, in a similar way to calling a subroutine. Once defined these become the properties that can be set in the Design view for a web page that uses this weblet.
For example: a parameter, named menu_text, has a default value of 'Caption'. In the completed anchor tag code following, note that the variable $menu_text is used as the caption text below the toolbar item image.
3. Save your changes.
4. You will now complete the code for the <A> anchor tag. Copy the following code and paste it to replace the skeleton code for the <A> tag, which you placed there earlier.
<a href="javascript:InsertHidden(document.LANSA,'{$reentryfield}','{$reentryvalue}');HandleEvent('{$on_click_wamname}','{$on_click_wrname}');">
<img alt="{$tooltip_text}" src="/images/{$menu_image}" border="0" />
<br />
<span class="std_menuitem">
<xsl:value-of select="$menu_text" />
</span>
</a>
Note the following points about these changes:
- The value for the alt tag has been replaced with a variable $tooltip_text
- The value for image file name in the src tag has been replaced with a variable $menu_image
- The menu text inside the span tag is now generated by an <xsl:value-of which outputs the value of variable $menu_text
- The href for the A tag has been defined with JavaScript code that passes $reentryfield and $reentryvalue variables to the InsertHidden function
- The href code also runs the HandleEvent function passing $on_click_wamname and $on_click_wrname variables.
5. Save your changes
6. In this step you will add xsl code to condition the anchor tag, based on the $hide_if parameter.
Note: The <xsl:if> element must have an </xsl:if> end tag. The <xsl:if> must surround the entire <A HREF . . . .> tag. Add the highlighted code only:
<xsl:if test="not($hide_if)">
<a href="javascript: . . . . .
</a>
</xsl:if>
Hint: The XSL editor autocomplete function will generate the </xsl:if> when you complete the beginning tag. Move this to the required position after the </a> tag.
The variable $hide_if is a Boolean, with a default value of 'false' as shown in the parameter definitions.
7. In this step you will add Weblet Parameter tooltips by copying in the following code, following the </wd:definition> end tag.
<wd:template name="iii_toolbar_menuitem">
<wd:description icon="icons/userdefn.ico">
<wd:name lang="ENG">iii Toolbar Menu Item</wd:name>
</wd:description>
<wd:param name="menu_text">
<wd:tip lang="ENG">Menu Text to display below the image on the toolbar menu item</wd:tip>
</wd:param>
<wd:param name="menu_image">
<wd:tip lang="ENG">Image to display on the toolbar menu item</wd:tip>
</wd:param>
<wd:param name="tooltip_text">
<wd:tip lang="ENG">Tooltip text to display on the toolbar menu item</wd:tip>
</wd:param>
</wd:template>
Correct <the wd:template name="iii_toolbar_menuitem"> replacing iii with your initials.
Note:- Tags such as <wd:template name="iii_toolbar_menu_item"> have a namespace of wd. They are LANSA defined weblet design tags, defined by the standard that is referenced at the top of the weblet XSL. See: xmlns:wd=http://www.lansa.com/2002/XSL/Weblet-Design.
- Standard XSL tags have a namespace of xsl, for example, <xsl:if…….>
- The <wd:template . . . . .</wd:template> code is used by the Design view to define the icon and description used in the list of weblets, and the tooltip text for the weblet parameters.
8. Look towards the top of your toolbar XSL to find the statement:
<xsl:import href="std_types.xsl" />
Add the following line:
<xsl:import href="std_keys.xsl" />
The std_keys XSL defines xsl:key's such as "field-caption" and "field-value" that are used during transformation to extract data from the Data XML output via the WebRoutine.
9. Save your changes to the Toolbar Menu Item weblet.