Mailing-List: contact dev-help@myfaces.apache.org; run by ezmlm
Precedence: bulk
Reply-To: "MyFaces Development" <dev@myfaces.apache.org>
Received-SPF: pass (nike.apache.org: local policy)
Subject: [Trinidad] Selecting a row in tr:table with mouse click
	(rowSelection="singleClick")
From: Martin Koci <Martin.Koci@aura.cz>
To: MyFaces Development <dev@myfaces.apache.org>
Content-Type: text/plain; charset=UTF-8
Date: Fri, 31 Aug 2007 21:16:33 +0200
Message-Id: <1188587793.11508.30.camel@markoc.aura>
Mime-Version: 1.0
Content-Transfer-Encoding: 8bit

Hello,

currently tr:table supports selection of one row with attribute
rowSelection="simple". 

For better user experience we want to select a row with clicking on
table row. 

To achieve this I did four minor changes in trinidad code base:

1) support "singleClick" in decoding phase
2) render a hidden field for storing index of clicked row
3) render a onclick for each TR in HTML output
4) add a JS function to Core.js


ad 1) in TableRenderer.decodeSelection(FacesContext, UIComponent):

// added singleClick condition, TableSelectOneRenderer will be used
// for decoding
if ("single".equals(selection) || "singleClick".equals(selection))
_selectOne.decode(context, treeTable);


ad 2) TableRenderer.encodeAll(FacesContext, RenderingContext,
UIComponent, FacesBean):

// If rowSelection is singleClick we render a hidden field
// for storing TR rowIndex
 if
("singleClick".equals(component.getAttributes().get(CoreTable.ROW_SELECTION_KEY.getName())))
      {
      // Id is the same as rowSelection="single" uses	  
      String id = tContext.getTableId() + ":selected";
      rw.startElement("input", null);
      rw.writeAttribute("type", "hidden", null);
      rw.writeAttribute("id", id, null);
      rw.writeAttribute("name", id, null);
      rw.endElement("input");
}


ad 3) DesktopTableRenderer._renderTableRows(FacesContext,
RenderingContext, TableRenderingContext, UIComponent)

// for rowSelection="singleClick" render a onclick on each TR element
if("singleClick".equals(component.getAttributes().get(CoreTable.ROW_SELECTION_KEY.getName()))) {
final String hiddenFieldId=  tContext.getTableId() + ":selected";
writer.writeAttribute("onclick", "onListClick(this,'" + hiddenFieldId
+"')", null);
}

ad 4) and finally in Core.js
function onListClick(rowEl, hiddenId) {
   var jumpValue = rowEl.rowIndex;
   var hiddenField =  document.getElementById(hiddenId);

   hiddenField.value = jumpValue;
   return true;
}


TBD:
-- indicating selected row with a nice CSS style
-- support autoSubmit to deliver SelectionEvent immediately


Any ideas, preferences?

Regards,


Martin Kočí