< Previous Article Next Article >

What is a Rich Display?

Rich Displays simplify UI development.

When it comes to building Web applications, being productive and getting something functional out the door quickly is very important!

But what often slows us down is having to code HTML markup manually. As application developers, we want to be thinking in terms of higher-level components, such as Panels, Grids, Tabs, and Menus, rather than DIV's and SPAN's.

Rich Displays enable you to configure screens or components in a way that you'd think about naturally, rather than having to use low level markup.

Each screen you build is comprised of friendly widgets with easy-to-configure properties. You can build your own widgets, but the simplest way to get started would be to use the many Rich Display widgets that already exist.

How are Rich Displays built?

While you can code a Rich Display manually, the easy way to build a Rich Display is to use NodeRun’s free Visual Designer Tool.

Screenshot

When using the Visual Designer, you will configure screens in a point-and-click, drag-and-drop manner.

The designer is meant to be intuitive. In fact, even end-users who are not developers can use the tool and participate in the design process.

To create a new Rich Display, select New => Rich Display in the NodeRun IDE:

Screenshot

How are Rich Displays stored?

A Rich Display is stored in a JSON file, which tracks all screens, widgets on the screens, and the properties for each widget.

For example, you can save your design to a file named app.json.

Screenshot

Each JSON file can have multiple application screens that are defined.

How are Rich Displays used?

You can refer to Rich Displays directly from your application code. You would usually reference both the JSON file name and the screen you're working with.

A Rich Display screen can represent a full application interface or just a small component within your application.

You can use Rich Displays in stateful application development, where the server controls the flow of the application.

Stateful Example:

pjs.defineDisplay("display", "app.json");
display.myScreen.execute({ data });

You can also use Rich Displays in client-side frameworks like React or Vue by simply including the appropriate component with the necessary props.

React Example:

<RichDisplay path="public/app.json" screen="dataEntryForm" data={this.state} />

Vue Example:

<rich-display path="public/app.json" screen="dataEntryForm" :data="this.formData">
</rich-display>

Questions?

Have questions about this topic? Ask for help on our NodeRun Discussion Forum.

< Previous Article Next Article >