IceFaces

JavaServerFaces

Dialog mit Parametern

sample.xhtml

<h:form>
  <h:commandButton id="dialog" value="dialog" onclick="myDialog([4711, 'wow!']);" />
</h:form>

<ace:dialog id="dialog" header="A sample dialog overview example"
   widgetVar="sampleDialog" closable="true" modal="true"
   draggable="false" showEffect="clip" hideEffect="fade" width="400">

 <h:form id="dialog_form">
   <h:panelGrid columns="2" width="100%">
    <h:outputText value="Wert 1:" />
    <h:outputText id="val1"	value="?" />
					
    <h:outputText value="Wert 2:" />
    <h:outputText id="val2"	value="?" />
   </h:panelGrid>
 </h:form>
</ace:dialog>

myice.js

function excText(id, val){
  var obj = document.getElementById(id);
  if (! obj){
    alert("Nicht gefunden: " + id);
  } else {
    //alert("Gefunden: " + id + " Text: " + obj.innerHTML);
    obj.innerHTML = val;
  }
  return obj;
}
function myDialog(args){
  for (var ii = 1; ii <= args.length; ii++){
    obj = excText("dialog_form:val" + ii, args[ii-1]);
  }
  sampleDialog.show();
}

Zuschaltbare Details in einer Tabelle

myice.js

function replaceValue(node, args){
 var content = node.innerHTML;
 if (content){
  var ix = content.indexOf("!{");
  if (ix >= 0) {
   for (var ii = 1; ii <= args.length; ii++){
    content = content.replace("!{" + ii + "}", args[ii - 1]);
   }
   node.innerHTML = content;
  }
 }
 var elem = node.firstChild;
 while (elem){
  replaceValue(elem, args);
  elem = elem.nextSibling;
 }
 while(node){
  node = node.nextSibling;
  if (node)
   replaceValue(node, args);
 }
}

function buildNewRow(row, child){
 //alert(dumpNode(row, 0));
 var rc = row.cloneNode(false);
 var colCount = row.childNodes.length;
 var col = row.childNodes[0].cloneNode(false);
 if (child)
  col.appendChild(child);
 col.colSpan = colCount;
 rc.appendChild(col);
 return rc;
}

function buildEmptyRow(row){
 var rc = buildNewRow(row, "");
 return rc;
}
function buildDetails(id, args){
 var root = document.getElementById(id);
 if (! root){
  alert("Not found: " + id);
 } else {
  root = root.cloneNode(true);
  replaceValue(root, args); 
 }
 return root;
}
function addRow(child, args){
 var prevRow = child;
 do{
  prevRow = prevRow.parentNode;
 } while(prevRow.tagName != "TR");
 
 if (prevRow){
  var content = buildDetails('rowDetail', args);
  var node = buildNewRow(prevRow, content);
  
  var next = prevRow.nextSibling;
  if (! next)
   prevRow.parentNode.appendChild(node);
  else if (next.childNodes.length > 1)
    prevRow.parentNode.insertBefore(node, next);
 }
}

login.xhtml

  <h:form id="beantab">
   <ace:dataTable id="usrTable" value="#{sessionBean.users}" var="usr">
    <ace:column id="id" headerText="ID" sortBy="#{usr.id}"
     filterBy="#{usr.id}" filterMatchMode="contains">
     <h:outputText id="idCell" value="#{usr.id}" />
    </ace:column>
    <ace:column id="uname" headerText="Username"
     sortBy="#{usr.username}" filterBy="#{usr.username}"
     filterMatchMode="contains">
     <h:outputText id="unameCell" value="#{usr.username}" />
    </ace:column>
    <ace:column headerText="Details">
     <h:commandButton value="..."
      onclick="addRow(this, [#{usr.id}, '#{usr.username}', '#{usr.name}']);" />
    </ace:column>
   </ace:dataTable>

   <div id="rowDetail" style="display: xnone">
    <h:panelGrid columns="2" width="100%">
     <h:outputText value="Id:" />
     <h:outputText value="!{1}" />

     <h:outputText value="Username:" />
     <h:outputText value="!{2}" />

     <h:outputText value="Name:" />
     <h:outputText value="!{3}" />
    </h:panelGrid>

   </div>
  </h:form>