[Admin: This content comes from the original mobile-friendly PDF.]
Implementing UX: Can we dig deeper into the UX view?
Sure! As I mentioned earlier, the view is used to “render the interfaces or forms”. After your models are in place, this is where you can design your views in whatever way you require to satisfy your business scenarios. Even better, you’re free to design any number of views for each model.
Each view is made up of one or more HTML files. In turn, each HTML file can be made up of the following components:
- TRIRIGA components.
- Custom components.
- Polymer elements.
- Traditional elements.
Before we peek at a few screenshots, here are some deeper descriptions.
|TRIRIGA Components||You can add Polymer-based components provided by TRIRIGA to assemble all of the necessary data and metadata, or enable field-level interactions or information, in a rendered view. These TRIRIGA components include a TRIRIGA graphic and TRIRIGA search field.
Example tags include <triplat-ds>, <triplat-graphic>, <triplat-search-input>, and <triblock-open-page>.
To access the full list of TRIRIGA components and their related documentation, enter the following URL address: http:// [hostname:port] [/context_path] /p/web/doc, where [hostname:port] and [/context_path] are the specific values for your TRIRIGA environment. For example, just add /p/web/doc: http:// localhost:9080/dev/p/web/doc
|Custom Components||You can add Polymer-based components customized by yourself to enable field-level interactions or information in a rendered view. These components might include a custom search field or custom people card view.
Example tags might include <custom-search-input>, <my-paper-button>, and <jay-ux-people-card>.
|Polymer Elements||Not only can you add components provided by TRIRIGA or customized by yourself, you can also add elements provided by the Polymer library to provide field-level interactions or information in a rendered view. These Polymer elements include a check box, data field, number field, search field, and text field.
If you have any questions about Polymer, its concepts, or its elements, feel free to check out the Polymer website at www.polymer-project.org.
|Traditional Elements||You can also add traditional HTML elements such as containers, headings, or paragraphs. In addition, you can apply CSS styles to these traditional HTML elements as well as TRIRIGA elements and Polymer elements.
Example tags include <div>, <h1>, and <p>.
Next, here’s an example of a blank view metadata form, where you define your view and add its HTML files. Later, we’ll learn to add HTML files.
Here’s an example of a blank model-and-view metadata form, where you tie your view to a model, and define your view type. More about this later.
Finally, here’s an example of a blank application metadata form, where you define your application, app type, and app (source) name, such as a model-and-view. Why will UX use an “extra” metadata layer to connect the model-and-view to the application? Flexibility. This extra layer allows the application to pull data from either a UX or non-UX source if needed.