• Like
Datatable Y Column
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
273
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Datatable y Column Aurelio Martín Obando Távara Proyectos II [email_address]
  • 2. Datatable
    • 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.
    • Rendering the header
      • 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.
  • 3. Datatable
    • 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.
    • Close out the &quot;thead&quot; element.
    • Rendering the footer
      • 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.
  • 4. Datatable
    • Rendering the table body
      • 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.
    • 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.
  • 5. Column
    • Renders a UIComponent that represents a single column of data within a parent UIData component.
  • 6. Uso de Datatable y Column
    • En su forma más básica:
    • < h:dataTable id = &quot;tblGrupos“ width = &quot;100%&quot;
    • cellpadding = &quot;0&quot; cellspacing = &quot;0&quot; border = &quot;1&quot; var = &quot;grupo&quot; value = &quot;#{GrupoController.grupos}&quot; >
    • < h:column >
    • < f:facet name = &quot;header&quot; >< h:outputText value = “Cabecera&quot; /></ f:facet >
    • </ h:column >
    • </ h:dataTable >
  • 7. Ejemplo de Uso