Download
1 / 8
80 likes | 183 Vues
This learning module outlines the process of changing the color of specific cells within a JSF dataTable using EGL. Highlighting these cells can effectively draw user attention to important values. It covers step-by-step implementation, from creating a JSP web page to configuring the JSFHandler and customizing SQL records. You'll learn how to create two panel-groups in each cell, applying different colors, and managing the visibility of these panels based on logic. This tutorial will navigate through JavaServer Faces (JSF) and Enhanced Faces Components to achieve dynamic UI improvements.
E N D
Individual Cell Coloring – in a JSF dataTable Control You may need to programmatically (using EGL) change the color of a specific cell in a dataTable, in order to draw the user’s attention to a value. This learning module shows you “how to”.
JSF dataTable Row Actions – Programmatically Changing a Cell Color in a dataTable Another common requirement is to programmatically (that is, within your EGL JSFHandler) color a given cell of a dataTable, for the purpose of drawing the user’s attention to it. • Let’s see how to implement this with EGL and JSF.
Programmatically Changing a Cell Color in a dataTable – 1 of 6 • Create a new, .JSP web page, named: allcustomers5.jsp • Edit the JSFHandler and Copy/Paste the code in the Notes section of this slide – Save your changes, and read the comments. Notes: • Essentially, in this technique you will create two panel-groups inside the column (cell) with a different colored HTML table in each. You will duplicate the JSF output field in each panel, and then hide/show the appropriate panel as per your logic requirements. • So, after reading the database, you will iterate over the rows returned to the dynamic array and value the vis1/vis2 boolean fields (which are used to render the JSF panel groups) appropriately • You will have to customize the SQLRecord (or BasicRecord) and add Persistent=no fields.
Programmatically Changing a Cell Color in a dataTable – 2 of 6 • From Page Designer/Page Data – drag the customers array on to the page. • Output (read/only) fields – although that is just for this workshop, you could just as well have selected input fields • But, don’t select the vis1 or vis2 boolean fields • Select and delete the {Phone} field (not the column, just the field)
Programmatically Changing a Cell Color in a dataTable – 3 of 6 • From the Palette • Drag a Panel – Group Box (type: JSP) into the PHONE column • Select (set focus to) the Panel – Group Box, and from HTML Tags, double-click: Table • 1 row/1 column • 100% Table width • 0 pixel Border width
Programmatically Changing a Cell Color in a dataTable – 4 of 6 • From Enhanced Faces Components, drag an Output field into the table (inside the Panel – Group) • From Page Data, select PHONE and drag & drop on top of the new Output field • Repeat the above series of steps to create another Panel – Group (type: JSP) with another HTML table and new Output field bound (also) to PHONE
Programmatically Changing a Cell Color in a dataTable – 5 of 6 • Select the HTML table, and from Properties, specify: • Height: 100% • Color (some custom color) • Select the other HTML table, and repeat, giving it a different color
Programmatically Changing a Cell Color in a dataTable – 6 of 6 (For each of the JSP Panel Groups) • Select the component • From Properties/All Attributes • Specify the rendered value as: • Compute • From Page Data • From the customers array, select either vis1 or vis2 • Run the page on the server
