Untitled Document
Tag Rendering
One of the cool features that is coming in the JSP/HTML Visual Editort (VE) is the tag rendering. The Visual Editor (VE) provides two possible modes in which tag's are rendered. Take a look at the following example (logon.jsp from from struts example)
Here is the jsp code which is of interest to us.
<html:form action="/logon" focus="username" onsubmit="return validateLogonForm(this);">
<table border="0" width="100%">
<tr>
<th align="right">
<bean:message key="prompt.username"/>:
</th>
<td align="left">
<html:text property="username" size="16" maxlength="18"/>
</td>
</tr>
<tr>
<th align="right">
<bean:message key="prompt.password" bundle="alternate"/>:
</th>
<td align="left">
<html:password property="password" size="16" maxlength="18" redisplay="false"/>
</td>
</tr>
<tr>
<td align="right">
<html:submit value="Submit"/>
</td>
<td align="left">
<html:reset/>
</td>
</tr>
</table>
</html:form>
This page has a html:form tag with a table inside it. The table has bean:message, html:text, html:password, html:submit and html:reset tags.
The pictures shows the default tag rendering behavior for struts html tags in VE. The VE tries to execute the tags in design time and shows the generated output (ie.,html) from the tags that appear in the page. In the example, the html:text tag is shown as a html text field, html:submit is shown as html submit button and html:reset is shown as html reset button. The default behavior of executing the struts tags is controlled in the Manager Libraries dialog (see below for more info).
Disabling Tag Execution
If you don't want the VE to execute the struts tags, you can do the following:
Go to Tools->Manager Libraries
click on 'JSP Tag Libraries' tab, you will see all the tag libraries known to JDeveloper. Select the 'html' prefix (ie,. struts html tag lib) and unselect 'Execute Tag in JSP Visual Editor' option on the right bottom of the window. Press OK.
Now, in the VE's toolbar, press the Refresh Page icon (on the far left side). Take a look at the diagram and see how the same tags are rendered now in design time.
When the tags are not executed, each tag is represented by a tag icon and the tag name. If there is a white square area next to the tag name, then user can place the cursor and type or drag and drop tags from componenet pallette on to that white square area.
Tag Folding
People who have used IntelliJ are familiar with the code folding feature, whereby you can fold/unfold a method. The visual editor takes this feature to a new level. You can easily fold and unfold a tag in the visual editor.
If a tag has children, then there is a - (ie., minus) icon before the tag icon. In this example, you can see the minus icon appear for the html:form tag. You can press on the - icon to fold all the children inside the html:form. In the folded state, all you see is the + (plus) icon, followed by the tag icon and tag name. All the children of html:form are collapsed. The following pictures shows the html:form in folded state.
You can press the + (plus) icon and unfold the html:form tag. All the children reappear in the VE. Pretty cool ha!
Note: If the tag execution fails, the VE will revert back to the icon+name way of rendering the tag.
Tip: Even after enabling the execute tag option, if you still see tag icon and tag name (instead of the generated output), the tag execution might be failing. Go to Tools->Preference->JSP and HTML Visual Editor preference page and select 'Show Design Time Messages in Log' and press OK. Then select View->Log to show the log window. With this setup, hit refresh icon again. If any of the tag execution is throwing exception, the exception trace is shown in the log window.
Selecting/Editing Tag
Clicking on the tag icon or tag name or the generated html output will select the tag and its properties will show up in the Inspector.
You can right click on the tag icon or tag name or generated html output and select 'Edit Tag...' from the context menu. This will bring up the Tag Editor dialog, where you can change the attributes of the tag.
Hope this article is useful to you!
Stay tuned for more...
2:05:54 PM 
|
