1 / 8

Individual Cell Coloring – in a JSF dataTable Control

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”.

deacon-holcomb
Download Presentation

Individual Cell Coloring – in a JSF dataTable Control

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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”.

  2. 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.

  3. 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.

  4. 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)

  5. 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 

  6. 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

  7. 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

  8. 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

More Related