Personalización básica > User Interface Customization > Presenting Information in the UI > Creating Custom Graphical Representations > Reference
  
Reference
This section contains details on the three out-of-the-box graphical representations. The information in this section is provided as background details on how the three out-of-the-box graphical representations (Traffic Light, Progress Bar, and Percent Complete) are configured and implemented. This information can be valuable when creating your own custom graphical representation.
The diagram below is a partial representation of how these classes have been extended to implement the OOTB graphical representations.
Traffic Light
Solution Elements
The code specific to the Traffic Light representation includes:
Element
Type
Description
MultiStateIconComponent
Java Class
This is the abstract parent class used for creating custom Multi State Icon graphical representations. This abstract class extends AbstractGraphicalComponent.
TrafficLightComponent
Java Class
This is the class that defines and supports the out of the box graphical representation of “Traffic Light.” It is a subclass of AbstractMultiStateIconComponent and defines a four-state enumeration allowing administrators to configure an attribute to display as a red, yellow or green traffic light, or the fourth state of blank.
This component leverages the existing IconComponent, which in turn utilizes the jsca.columns.imageRenderer JS renderer to actually render the multiple icons of the traffic light.
The TrafficLightComponent is an example of a Multi-State Icon Component. It implements a 4-state enumeration where one of the states simply displays a blank. This is a good example to look at when implementing a custom subclass of MultiStateIconComponent (which is explained in Procedure – Supporting Graphical Attributes in a Non-Configurable Table).
This component resides in the “com.ptc.core.components.rendering.guicomponents.TrafficLightComponent” class.
Progress Bar
Solution Elements
The code specific to the Progress Bar representation includes:
Element
Type
Description
ProgressBarComponent
Java Class
This class defines and supports the out of the box graphical representation of “Progress Bar.” It is a subclass of AbstractGraphicalComponent. Unlike the traffic light, this component does not leverage an existing component, so it also defines a new JavaScript renderer (called PTC.progressBar.renderer).
progressBarRenderer.jsfrag
JS Class
This class defines the JavaScript renderer for the progress bar, converting the JSON containing the progress meta-data into the corresponding HTML (with an appropriate tooltip).
Percent Complete
Solution Elements
Element
Type
Description
PercentCompleteComponent
Java Class
This is the class that defines and supports the out of the box graphical representation of “Percent Complete.” It is a subclass of ProgressBarComponent. Because this graphical representation leverages the ProgressBarComponent, it also utilizes the PTC.progressBar.renderer JS renderer.
Additional Resources
Related Package/Class Javadoc
• AbstractGraphicalComponent
• GraphicalAttributeDataUtility
• GraphicalAttRepresentationHandler
• GraphicalComponent
• MultiStateIconComponent
• MultiStateIconEnum
• PercentCompleteComponent
• ProgressBarComponent
• TrafficLightComponent
Parent topic 
Creating Custom Graphical Representations