Screenshots showing before and after clicking on the linkButton

The test consists of a table with 5 linkButtons in it, each of which maintain their inline style in a row specific manner. When the link is clicked, the inline style is changed. The inline style is changed on the span which has the id xxx_span. This is necessary to get the style to not be overridden by other style rules.

The update sent in this case is:

<?xml version='1.0' encoding='UTF-8'?>
<partial-response>
<changes>
<update id="usingTheValueExpressionForm:calTable:0:_t9_span"><![CDATA[<span class="yui-button yui-link-button" id="usingTheValueExpressionForm:calTable:0:_t9_span" style="text-decoration: line-through;"><span class="first-child"><a onclick="return ice.component.linkButton.clickHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );" onkeydown="return ice.component.linkButton.keyDownHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );"></a>

</span></span>]]>
</update>
<update id="javax.faces.ViewState"><![CDATA[1082959432022557316:2376052174934832377]]></update>

</changes>
</partial-response>

Through alerts and logging, I see that the initialize function in javascript is not called on this component again, and I think that means the YUI elements are removed from the page and the above <span> structure replaces it. As can be seen from the screenshot above, the label on the link button is replaced with an empty string, and this is in keeping with the thought that the bound YUI component is replaced with the HTML equivalent of <span> <span><a>*</a></span></span>

Where * represents an empty string.

Adding the style to the javascript itself in an effort to cause the javascript to be reexecuted also fails. The update sent to the client consists of:

<?xml version='1.0' encoding='UTF-8'?>
<partial-response>
<changes>
<update id="usingTheValueExpressionForm:calTable:0:_t9_span"><![CDATA[<span class="yui-button yui-link-button" id="usingTheValueExpressionForm:calTable:0:_t9_span" style="text-decoration: underline;"><span class="first-child">
<a onclick="return ice.component.linkButton.clickHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );" onkeydown="return ice.component.linkButton.keyDownHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );"></a></span></span>]]>
</update>
<update id="_t9_script"><![CDATA[<span id="_t9_script"><script>ice.component.linkButton.updateProperties('usingTheValueExpressionForm:calTable:0:_t9',

,

);
</script>
</span>]]></update>
<update id="javax.faces.ViewState"><![CDATA[-1962529559664138106:2692136651730273617]]></update>
</changes></partial-response>

In this case, the update does include the sibling script span, but the initialize method again fails to execute, with similar results.

Initial page source:

<div class="ice-linkbutton" id="usingTheValueExpressionForm:calTable:0:_t9">
<span class="yui-button yui-link-button" id="usingTheValueExpressionForm:calTable:0:_t9_span" style="text-decoration: underline;">
<span class="first-child">
<a onclick="return ice.component.linkButton.clickHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );" onkeydown="return ice.component.linkButton.keyDownHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );"/>
</span>
</span>
<span id="_t9_script">
<script>ice.component.linkButton.updateProperties('usingTheValueExpressionForm:calTable:0:_t9',

,

);</script>
</span>
</div>

After JavaScript initialization:

<div class="ice-linkbutton" id="usingTheValueExpressionForm:calTable:0:_t9">
<span class="yui-button yui-link-button" id="usingTheValueExpressionForm:calTable:0:_t9_span" style="text-decoration: blink;">
<span class="first-child" role="link" aria-labelledby="ValueExpression style" aria-describedby="JSF action event source">
<a onclick="return ice.component.linkButton.clickHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );" onkeydown="return ice.component.linkButton.keyDownHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );" tabindex="0" id="usingTheValueExpressionForm:calTable:0:_t9_span-button">ValueExpression style</a>
</span>
</span>
<span id="_t9_script">
<script>ice.component.linkButton.updateProperties('usingTheValueExpressionForm:calTable:0:_t9',

,

);</script>
</span>
</div>

Updates from clicking on the button:

<partial-response>
<changes>
<update id="usingTheValueExpressionForm:calTable:0:_t9_span"><![CDATA[
<span class="yui-button yui-link-button" id="usingTheValueExpressionForm:calTable:0:_t9_span" style="text-decoration: underline;">
<span class="first-child">
<a onclick="return ice.component.linkButton.clickHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );" onkeydown="return ice.component.linkButton.keyDownHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );"/>
</span>
</span>
]]></update>
<update id="javax.faces.ViewState"><![CDATA[8843399075223559913:-5980998028922626448]]></update>
</changes>
</partial-response>

Resulting in:

<div class="ice-linkbutton" id="usingTheValueExpressionForm:calTable:0:_t9">
<span class="yui-button yui-link-button" id="usingTheValueExpressionForm:calTable:0:_t9_span" style="text-decoration: blink;">
<span class="first-child">
<a onclick="return ice.component.linkButton.clickHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );" onkeydown="return ice.component.linkButton.keyDownHandler(event, 'usingTheValueExpressionForm:calTable:0:_t9' );"/>
</span>
</span>
<span id="_t9_script">
<script>ice.component.linkButton.updateProperties('usingTheValueExpressionForm:calTable:0:_t9',

,

);</script>
</span>
</div>

In this particular case, we can see that updateProperties is not called – only the span is replaced with initial values.

In terms of difference from the initial page source, it appears that YUI is doing the following:

changing style "underline" to "blink"
adding role="link" aria-labelledby="ValueExpression style" aria-describedby="JSF action event source" to first-child span
adding tabindex="0" id="usingTheValueExpressionForm:calTable:0:_t9_span-button">ValueExpression style</a> to the anchor

"underline" to "blink" above appears to be from capturing the output in different stages of the application. The root cause of the problem is the anchor tag being initialized to an empty tag.

FYI, #3 in http://jira.icefaces.org/browse/ICE-5833 seems to overlap this issue somewhat.

The general approach taken follows the points below:

1) Can this property be changed and should we expect the change to be reflected dynamically?
An example of this is the linkButton tables in /ace-test/UIDataTest.jsf where the link has an action listener that changes the
inline style attribute of the link. The style is defined on one of the spans making up the link and not the outer div containing the structure and the script. Hence, only the inner spans are included in an update.

2) Are these properties tied to the HTML that YUI uses as markers for inserting its own elements as opposed
to those properties that are set on the YUI component via jsProps or consumed privately via jsfProps? If so, changing
them will cause a DOM update to those HTML elements which will cause them to be replaced in the DOM in the client
which will replace the YUI modified elements with our updated, but plain elements.

3) A hashCode of these missing properties should be constructed and inserted into the jsfProps hashmap. For the linkbutton, the following properties are required:

StringBuilder sb = new StringBuilder();
sb.append( linkButton.getValue() ).
append(linkButton.getHref()).
append(linkButton.getHrefLang()).
append(linkButton.getStyleClass()).
append(linkButton.getStyle()).
append(linkButton.getTarget());

Then insert the hashCode into the map:

JSONBuilder jBuild = JSONBuilder.create().
beginMap().
entry("singleSubmit", linkButton.isSingleSubmit()).
entry("doAction", doAction).
entry("hashCode", sb.toString().hashCode()). <-------------- here
entry("ariaEnabled", EnvUtils.isAriaEnabled(facesContext));

Then change the updateProperties method in the component's javascript file so that if the hashCode changes, the context is released, which will cause initialize() to be called. This change is common to all components and is shown here.

updateProperties:function(clientId, jsProps, jsfProps, events) {

var context = ice.component.getJSContext(clientId);
if (context && context.isAttached()) {
var prevJSFProps = context.getJSFProps();
if (prevJSFProps.hashCode != jsfProps.hashCode)

}
ice.component.updateProperties(clientId, jsProps, jsfProps, events, this);
},

Since this is common to all components, when time permits, we can modify the code in component.js to do this.

For progress, I have:

LinkButton supports the above dynamic properties.

CheckBox supports dynamic style and styleClass.

slider supports dynamic style and styleClass

TabSet doesn't require changes since the style and styleClass attributes are written to the outer div which contains the script. Changing these properties reinitializes the component completely.

Changes have been made to pushButton, but for some reason, the updateProperties script doesn't run when the component is modified in this way.

All the components handle this issue with the exception of pushButton, which is indicated in ICE-6418