Datatable Y Column

430 views
348 views

Published on

La presente diapositiva les introduce a los componentes interativos DataTable y Column, la cuales se encuentran contenidas en la etiqueta <h:> de JavaServer Faces.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
430
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Datatable Y Column

  1. 1. Datatable y Column Aurelio Martín Obando Távara Proyectos II [email_address]
  2. 2. Datatable <ul><li>Renders an HTML &quot;table&quot; element compliant with the HTML 401 specification. Render the &quot;caption&quot; facet, if present, inside a &quot;caption&quot; element immediately below the &quot;table&quot; element. If the &quot;captionClass&quot; attribute is specified, render its value as the value of the &quot;class&quot; attribute on the &quot;caption&quot; element. If the &quot;captionStyle&quot; attribute is specified, render its value as the value of the &quot;style&quot; attribute on the &quot;caption&quot; element. </li></ul><ul><li>Rendering the header </li></ul><ul><ul><li>If the UIData component has a &quot;header&quot; facet, or any of the child UIColumn components has a &quot;header&quot; facet, render a &quot;thead&quot; element. If the UIData component has a &quot;header&quot; facet, encode its contents inside of &quot;tr&quot; and &quot;th&quot; elements, respectively. Output the value of the &quot;headerClass&quot; attribute of the UIData component, if present, as the value of the &quot;class&quot; attribute on the &quot;th&quot;. Output the number of child UIColumn components of the UIData component as the value of the &quot;colspan&quot; attribute on the &quot;th&quot;. Output &quot;colgroup&quot; as the value of the &quot;scope&quot; attribute on the &quot;th&quot; element. </li></ul></ul>
  3. 3. Datatable <ul><li>If any of the child UIColumn components has a &quot;header&quot; facet render a &quot;tr&quot; element. For each UIColumn that actually has a &quot;header&quot; facet, render it inside of a &quot;th&quot; element. Columns that don't have a &quot;header&quot; facet cause an empty &quot;th&quot; element to be rendered. Output the value of the &quot;headerClass&quot; attribute of the UIColumn component, if present, as the value of the &quot;class&quot; attribute on the &quot;th&quot;. If the &quot;headerClass&quot; attribute of the UIColumn component is not present, output the value of the &quot;headerClass&quot; attribute of the UIData component, if present, as the value of the &quot;class&quot; attribute on the &quot;th&quot;. Output &quot;col&quot; as the value of the &quot;scope&quot; attribute on the &quot;th&quot; element. </li></ul><ul><li>Close out the &quot;thead&quot; element. </li></ul><ul><li>Rendering the footer </li></ul><ul><ul><li>Follow the same process as for the header, except replace &quot;header&quot; with &quot;footer&quot;, &quot;th&quot; with &quot;td&quot;, &quot;thead&quot; with &quot;tfoot&quot;, and &quot;headerClass&quot; with &quot;footerClass&quot;. Do not render any &quot;scope&quot; attribute for the footer. </li></ul></ul>
  4. 4. Datatable <ul><li>Rendering the table body </li></ul><ul><ul><li>Render a &quot;tbody&quot; element. Keep track of the result of the &quot;rows&quot; property on the UIData component. Keep track of the number of rows we have rendered so far. Iterate through the rows. Set the &quot;rowIndex&quot; property of the UIData component to be correct as we iterate through the rows. Stop rendering children and close out the &quot;tbody&quot; element if the &quot;rowAvailable&quot; property of the UIData returned false. Output a &quot;tr&quot; element. Output the value of the &quot;rowClasses&quot; per the attribute description below. For each UIColumn child, output a &quot;td&quot; element, attaching the value of the &quot;columnClasses&quot; attribute of the UIData component per the attribute description below. Recursively encode each child of each UIColumn child. Close out the &quot;td&quot; element. When done with the row, close out the &quot;tr&quot; element. When done with all the rows, close out the &quot;tbody&quot; element. </li></ul></ul><ul><li>When done rendering all the rows, set the &quot;rowIndex&quot; property of the UIData to -1, and close out the &quot;table&quot; element. </li></ul>
  5. 5. Column <ul><li>Renders a UIComponent that represents a single column of data within a parent UIData component. </li></ul>
  6. 6. Uso de Datatable y Column <ul><li>En su forma más básica: </li></ul><ul><li>< h:dataTable id = &quot;tblGrupos“ width = &quot;100%&quot; </li></ul><ul><li> cellpadding = &quot;0&quot; cellspacing = &quot;0&quot; border = &quot;1&quot; var = &quot;grupo&quot; value = &quot;#{GrupoController.grupos}&quot; > </li></ul><ul><li>< h:column > </li></ul><ul><li>< f:facet name = &quot;header&quot; >< h:outputText value = “Cabecera&quot; /></ f:facet > </li></ul><ul><li></ h:column > </li></ul><ul><li></ h:dataTable > </li></ul>
  7. 7. Ejemplo de Uso

×