CAF.Request and CAF.Updater sample project

, ,
1

I’ve read the documentation on how to use these JavaScript APIs but I not sure how to apply them to in a CAF project. I’m thinking that I would have to implement a non-BasePortletPageBean managed bean, because its response object would generate a CAF page content. I would like to produce a javascript fragment that CAF render page can handle.

Below is a simple response from an async command:

 
----------fragment-start----------<script type="text/javascript"></script><div id="jsfwmp7565:defaultForm:blockRefresh"><div id="jsfwmp7565:defaultForm:staticRow14" class="caf-row" style="overflow:hidden;zoom:1;padding-top:15px;"><div id="jsfwmp7565:defaultForm:staticCell223" class="caf-cell caf-float-start" style="width:24.9%;background-color:#CCCCCC; height:50px; width:250px;"><div id="jsfwmp7565:defaultForm:blockPanel10"><div id="jsfwmp7565:defaultForm:staticRow72" class="caf-row" style="overflow:hidden;zoom:1;width:100%;padding-top:10px;"><div id="jsfwmp7565:defaultForm:staticCell72" class="caf-cell caf-float-start caf-align-end" style="width:13.9%;padding-right:20px;"><label id="jsfwmp7565:defaultForm:PCCNcontLbl"><span class="caf-label-text">Program</span><span class="caf-label-separator">:</span></label></div><div id="jsfwmp7565:defaultForm:staticCell152" class="caf-cell caf-float-start" style="width:75.9%;">LSINKE USAF Program #1</div></div><div id="jsfwmp7565:defaultForm:staticRow72131" class="caf-row" style="overflow:hidden;zoom:1;width:100%;"><div id="jsfwmp7565:defaultForm:staticCell72131" class="caf-cell caf-float-start caf-align-end" style="width:13.9%;padding-right:20px;"><label id="jsfwmp7565:defaultForm:htmlOutputLabel72131"><span class="caf-label-text">Date</span><span class="caf-label-separator">:</span></label></div><div id="jsfwmp7565:defaultForm:staticCell152131" class="caf-cell caf-float-start caf-align-start" style="width:73.9%;">10/14/2013</div></div></div></div></div>
<table id="jsfwmp7565:defaultForm:asyncTable" class="caf-table" caf:filterable="client" width="100%">
<thead>
<tr id="jsfwmp7565:defaultForm:asyncTable:__row__template" style="display:none;"><td></td><td></td><td></td><td></td></tr>
<tr id="jsfwmp7565:defaultForm:asyncTable:__headers" class="portlet-section-header"><th id="jsfwmp7565:defaultForm:asyncTable:htmlTableColumn1" scope="col"><script type="text/javascript">Event.waitUntilLoaded(function(){CAF.Table.writePagerInputs('jsfwmp7565:defaultForm:asyncTable',0,10);});</script><a href="javascript:CAF.model('jsfwmp7565:defaultForm:asyncTable').go(0,-1,'htmlTableColumn1+');" class="caf-sortable">PCCN</a></th><th id="jsfwmp7565:defaultForm:asyncTable:htmlTableColumn2" scope="col"><a href="javascript:CAF.model('jsfwmp7565:defaultForm:asyncTable').go(0,-1,'htmlTableColumn2+');" class="caf-sortable">PCC</a></th><th id="jsfwmp7565:defaultForm:asyncTable:htmlTableColumn4" scope="col"><a href="javascript:CAF.model('jsfwmp7565:defaultForm:asyncTable').go(0,-1,'htmlTableColumn4+');" class="caf-sortable">PRIMARY</a></th><th id="jsfwmp7565:defaultForm:asyncTable:htmlTableColumn3" scope="col"><a href="javascript:CAF.model('jsfwmp7565:defaultForm:asyncTable').go(0,-1,'htmlTableColumn3+');" class="caf-sortable">SCC</a></th></tr>
</thead>
<tfoot>
<tr class="portlet-section-footer"><th colspan="4"><div id="jsfwmp7565:defaultForm:asyncTable:prevNext" style="overflow:hidden;zoom:1;"><a id="jsfwmp7565:defaultForm:asyncTable:prevNext__prev" class="caf-float-start" style="display:block;white-space:nowrap;visibility:hidden;">&laquo; Previous</a><a id="jsfwmp7565:defaultForm:asyncTable:prevNext__next" class="caf-float-end" style="display:block;white-space:nowrap;visibility:hidden;">Next &raquo;</a><div id="jsfwmp7565:defaultForm:asyncTable:blockPanel" style="text-align:center;"><span id="jsfwmp7565:defaultForm:asyncTable:dataTotal" caf:model="CAF.DataTotal.Model"><span id="jsfwmp7565:defaultForm:asyncTable:dataTotal__primary">1 - 3 of 3</span><span id="jsfwmp7565:defaultForm:asyncTable:dataTotal__jump" style="display:none;"><label id="jsfwmp7565:defaultForm:asyncTable:dataTotal__jump__label" for="jsfwmp7565:defaultForm:asyncTable:dataTotal__jump__input">Items Per Page:</label> <input id="jsfwmp7565:defaultForm:asyncTable:dataTotal__jump__input" class="input2" onkeypress="return CAF.model('jsfwmp7565:defaultForm:asyncTable:dataTotal').keypress(event);" /><button id="jsfwmp7565:defaultForm:asyncTable:dataTotal__jump__btn" type="button" onclick="return CAF.model('jsfwmp7565:defaultForm:asyncTable:dataTotal').jump();">Go</button></span><script type="text/javascript">Object.extend($('jsfwmp7565:defaultForm:asyncTable:dataTotal'),{link:'javascript:CAF.model(\'jsfwmp7565:defaultForm:asyncTable\').go(@firstRow@,@pageSize@);','for':'jsfwmp7565:defaultForm:asyncTable'});</script></span><script>CAF.DataTotal.registerAddRemoveListener('jsfwmp7565:defaultForm:asyncTable','jsfwmp7565:defaultForm:asyncTable:dataTotal','{0} - {1} of {2}','Empty','{0} of {2}','Beyond End of Data','{0} - {1} of {1}+');Event.waitUntilLoaded(function(){var m=$('jsfwmp7565:defaultForm:asyncTable'); if (m) m.rowCount=3;});</script></div></div><script>CAF.PrevNext.registerPagingListener('jsfwmp7565:defaultForm:asyncTable','jsfwmp7565:defaultForm:asyncTable:prevNext',false);</script></th></tr>
</tfoot>
<tbody>
<tr id="jsfwmp7565:defaultForm:asyncTable:__row81" class="portlet-section-body caf-primary-row"><td>PRIMAR</td><td>ABC</td><td>Y</td><td>VWXYZ</td></tr>
<tr id="jsfwmp7565:defaultForm:asyncTable:__row82" class="portlet-section-alternate caf-primary-row"><td>NOTPRI</td><td>ABD</td><td>N</td><td>UWXYZ</td></tr>
<tr id="jsfwmp7565:defaultForm:asyncTable:__row83" class="portlet-section-body caf-primary-row"><td>THIRD</td><td>ABE</td><td>N</td><td>TWXYZ</td></tr>
</tbody>
</table>
<script type="text/javascript">Object.extend($('jsfwmp7565:defaultForm:asyncTable'),{first:0, pageSize:10, rowCount:3, rowSelectedCount:0, rowClasses:'portlet-section-body,portlet-section-alternate', selectedRowClass:'portlet-section-selected', async:true, refresh:'jsfwmp7565:defaultForm:asyncTable', clientSideCache:false, bufferMin:0, bufferMax:0, bufferChunk:0, flashOnChange:true, progressDelay:0, progressMsg:'', progressFlashOnComplete:false});CAF.model('jsfwmp7565:defaultForm:asyncTable').onload();</script></div><script type="text/javascript">if(typeof(CAF)!='undefined')Event.waitUntilLoaded(function(){CAF.Messages.clearAll('jsfwmp7565');CAF.Messages.add([],'jsfwmp7565');});</script><script type="text/javascript">if(typeof(CAF)!='undefined')CAF.Command.injectJSFState('jsfwmp7565','\074input type=\"hidden\" name=\"javax.faces.ViewState\" id=\"javax.faces.ViewState\" value=\"com.webmethods.caf.faces.application.CAFStateManager$TreeStructure@fc28c88\" autocomplete=\"off\" />');</script>----------fragment-end----------

Below is an ajax response from Core JavaServers Faces edition 3:


<?xml version="1.0" encoding="utf-8"?>
<partial-response>
<changes>
<update id="j_idt18:nameError">
<![CDATA[<span id="j_idt18:nameError" style="color: red">
Name cannot contain underscores
</span>]]>
</update>
<update id="javax.faces.ViewState">
<![CDATA[-4047143760309857992:5238789135448605596]]>
</update>
</changes>
</partial-response>

But its unclear in figure out what type of managed bean to implement and how to construct the proper response, I was considering a FacesPortlet class. Then I thought about how would I expose or register it in the web.xml file.

If anyone used CAF.Request and CAF.Updater successfully, can you post an example project?

2

CAF has it’s own format for a partial page refresh that was developed before the JSF 2.x specification defined the standard response format. Eventually, CAF will probably switch to the standard format, but it hasn’t been done yet.

I would recommend just using an ‘Async Hidden Command’ control in your view to refresh or update something so you don’t have to worry about the details.

Your script can raise the hidden command to do the work.

For example:

// get the client side model of the hidden command control
var m = CAF.model("#{caf:cid('hiddenCommandIdHere')}");
// run the command and refresh the configured control
m.raise();