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

Datatable Y Column

on

  • 445 views

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.

Statistics

Views

Total Views
445
Views on SlideShare
445
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Datatable Y Column Datatable Y Column Presentation Transcript

  • Datatable y Column Aurelio Martín Obando Távara Proyectos II [email_address]
  • 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.
  • 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.
  • 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.
  • Column
    • Renders a UIComponent that represents a single column of data within a parent UIData component.
  • 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 >
  • Ejemplo de Uso