Default demo installed with FrameworX Update 1c.
Download the Demo Solution here: Demo.dbsln |
- Solution Name: Demo v10
- Software Version: v10 Update 1c
- Keywords: UNS, Unified Namespace, Responsive UI, TagProviders, Layouts, Mobile, HTTPS
On this page:
Summary
Technical Information
This Demo showcases, among others, the following features:
- Create a local UNS, with tags and templates.
- Map an external TagProvider (MQTT in this case) for dynamic assets.
- Organize the displays for Desktop, Tablet and Mobile sharing the displays.
- Manage the display navigation according the selected asset and User context.
- Integrate Dashboard pages with Canvas (process diagram pages) with a fully responsive User experience.
- Create an Area display that automatically will expand to show all Lines found in that area (UNS children).
- Create a display using Reference Tags, to map automatically to the selected Local Tag.
- Create a display using Asset() syntax, to map automatically to a dynamic external asset.
- Allow connections from Windows Native Graphics (WPF), HTTP and HTTPS from the same server.
- Leveraging Execution Profiles to allow same application to run from the Cloud Server and locally with the proper settings.
- Use of client side Tags and Scripts for advanced UI. In this case managing SolarPanel and Production assets, and simplifying the UI development.
- Use of Server side scripts for data calculations (in this case, simulation, similar concept applies to analytics).
Organizing Displays Layouts
A good start for solutions that will deploy User Interfaces ir to organize the main layouts.
The Layout used on startup is defined in Displays-ClientSettings, and for this solution, we named it "Startup"
We defined the Startup Layout with a Header, a left side Menu, and the main contents area.
The Header Edit was set to Stretch, so it will use the entire width of the display, and the left Menu is position underneath it with a resized enabled. Those settings are in top of the DisplaysLayouts configuration at the Panels configuration:
Then we defined which pages will be used for the Header, menu and initial pages. The Layout features is able to automatically recognize if the client is opening in a Portrait or Landscape mobile device. That allows to customize the page used in each context. If the customization is left empty, the display in the PAGE column will be used.
if you want to prevent the use of that panel, add the character "_" in the cell. In this solution, we used that to avoid having a left Menu when opening for Portrait Mobile.
The starting a RichClient, SmartClient a WebPage in a desktop computer, the "Page" column is used.
When a client opens a web connection to the server, the replacements will be applied according it a Mobile (portrait mode) or a Mobile Landscape (Tablet or Pad).
Only one layout can define the initial page for Desktop, Tablets and Mobile, windows native or HTML5. There is no need to create one layout to each type of device. In this Demo, we created the additional 3 layouts, Desktop, Pad, and Mobile, just allow the desktop to emulate other devices, and for didactical reasons. |
In this section: