Can we dig deeper into the UX view?


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

Component Description
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.

  • Iron Elements: This type represents the core elements that don’t express a specific visual design style or language.
  • Paper Elements: This type expresses the material design language by Google. Examples include <paper-material>, <paper-input>, and <paper-button>.
  • Other Elements: Other types like Gold, Neon, and Platinum elements represent ecommerce, animation, offline, push, and additional functions.

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.

20160109a

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.

20160109b

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.

20160109c

Continue reading →

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s