Details
-
Type:
Improvement
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 2.0-Alpha2
-
Component/s: ICE-Components
-
Labels:None
-
Environment:ICEfaces 2.0, Sparkle component platform
-
Affects:Documentation (User Guide, Ref. Guide, etc.)
Description
This may require adding APIs to support the req. of the components in terms of timing of execution of the JS, including detection of whether the component has changed. At a minimum, the rendering of the embedded SPAN tag + JS tag should be factored into a utility method.
Issue Links
- duplicates
-
ICE-4418
JavaScript injection functionality
-
- Closed
-
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
Introduced ScriptWriter utility class to eliminate component renderer boiler plate code when writing script code to be evaluated on the client.
There are two ways to write (and eventually evaluate) JS code.
Calling ScriptWriter.insertScript(FacesContext , UIComponent, String) allows the component renderer to write the script markup and code in one method call. This method is useful when the JS code complexity is low. For example:
public void encodeEnd(FacesContext context, UIComponent component) throws IOException
{ .... .... ScriptWriter.insertScript(context, component, "ice.component.calendar.init();"); .... }The other method of writing the JS code allows writing the code gradually by streaming it directly through the response writer. This method can be used when the complexity of JS code is higher. For example:
public void encodeBegin(FacesContext facesContext, UIComponent uiComponent) throws IOException {
....
ScriptWriter writer = ScriptWriter.insertScript(facesContext, uiComponent);
writer.startScript();
writer.write("ice.yui3.slider.updateProperties('");
writer.write(clientId);
writer.write("', ");
//pass through YUI slider properties
writer.write("
);");
writer.endScript();
}
Need to move this into the Sparkle platform (out of the std. bridge) as a new utility API. Please review and complete the move.
This is the pattern of HTML elements for the commandLink component.
<div id="clientId" >
<span id="clientId" + "_span" class="yui-button yui-link-button" >
<span id="clientId" + "_s2" class="first-child" >
<a id="cliendId" + "_anchor" actionListener="..." href="..." etc>
</span>
</span>
<span id="clientId" + "_js">
<script ...>
yadda
</script>
</span>
</div>
The first two spans are necessary for the YUI toolkit to find and replace our stuff. The third span is useful to wrap the script with id so it can be replaced independent of the component.