Your SlideShare is downloading. ×
0
Datatable Y Column
Datatable Y Column
Datatable Y Column
Datatable Y Column
Datatable Y Column
Datatable Y Column
Datatable Y Column
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Datatable Y Column

286

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.

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

×