Design

This chapter covers the following topics.

• Technology

  Web UI is based on the HTML5, CSS and JavaScript technologies. To run a web app, any modern browser can be used such as Chrome, Firefox, Edge, Opera or Safari. Read here about how the different components work together and what needs to be prepared for that.

• Absolute design

• Responsive design

• Structure of a visualisation

  In EASY UI Designer, a project is hierarchical in structure. The AppShell is the frame that holds everything together. It contains pages, which again have containers and controls as child elements. Here, you will learn more about the various components of a graphical user interface.

• Layout

  In the EASY UI Designer, three layout types are offered for the main "AppShell.html view: FixClassical, FixTop and Responsive. This chapter describes the layout types of a visualization project.

• Controls

  A control is the smallest UI element such as a button, a text input or output control, a list, an image, etc. The properties set the control’s appearance and functionality.

• Triggers und Actions

  Learn more about triggers and actions, what they are used for and which triggers and actions are available.

• State collections

  A state collection is a collection of assignments between a property value (color, image or text) and a numeric value. State collections allow to switch colors, images or texts in a control depending on the variable value.

• How-tos

  The development of a Web UI project includes specific tasks such as creating pages, views and dialogs or enabling navigation to a page. The following guides will help you with these tasks.

• Examples

  The following guides show you what you can use the controls for and how to do it step by step.