Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Layout Area shows you how page would looks, allows to add, remove, move, select and reorder widgets. Mostly widgets never show realtime data — data which can be retrieved by page's logic. But Charts tries run logic to load real data to let you configure plots.

Image Modified

Add Widget dialog

...

  • Basic — all standart widgets like label, charts and all other (read more at Widgets tour).
  • Default — is a library of smart widgets. For now contains only PointDisplay.


Image Modified

If user have other libraries, they would be listed in tabs too. Read more at Using Smart Widgets and libraries.

...

  • resize edges and corners,
  • toolbar with Duplicate and Remove buttons, and drag holder (dotted area).


Image Modified

Usually w. editor looks like dashed rectangle around widget. When selected it displays resize controls and toolbar.

...

At top of panel is property search field. It's useful when you work with charts and grids — they have a lot of properties. Below search field is widget card. It contains widget name and logic representation: if you have used widget in logic, you see link with block name, otherwise you have button to abb widget block in Logic Editor.

Image Modified

Everything below is properties. For your comfort properties are divided by groups. Every widget has next groups:

...

Some style properties and other ones are complex: instead of one value they have set of nested properties. It has preview display, which opens nested properties by click.

Image Modified

If you take a look at Gauge widget, you will see it has zones property, which is a list of complex values. That editor has buttons to add value, remove it, and property rows are collapsible as other complex properties.

Image Modified

Actions on property

...

By clicking on "Styles" tab you can switch Properties panel on Styles panel. It allows you manage page's styles.

Image Modified

Page style is not something you can apply to page itself. It just styles by their own. But you can choose widget (like label, button, image) and apply style in classes property. That way you can share one style between many widgets, and you don't have to copy style properties between widgets.

...

Outline helps with two tasks: reorder widgets and navigate through nesting. It's more helpful when you have fullbleed widgets and other absolute positioned ones, which overlaps and it's hard to select exactly widget you need.

Image Modified

Top toolbar contains buttons:

...

  • filter — to filter widgets by name, case-sensivity,
  • select children — selects first child for selected pane.

Image Modified

Drag and drop in Outline

...

D&D actions behave different with empty and filled panes. When you drag widget over empty pane drop result depends on where is mouse cursor. Drop over left half of pane inserts widget after pane. Drop over right half — adds widget to pane.

Image Modified

Pane with one or more widget hasn't such behavior. You just choose before which widget to insert.

Image Modified

3. The Logic Editor

This is the second editor you will often use. On that screen you will program page to do work to load data, change queries, alter data display and so on. Logic editor has dark theme and simpler interface to compare with Gui Editor.

Image Modified

Logic Editor is a simple IDE for flow-based programming. Yes, to make widgets work you write a program here. It makes editing a bit harder to understand, but it gives you rich possibilities in developing page in return. Something like that you could see in Niagara Ax Workbench and in Sedona Framework.

...

Logic program consist of blocks and connections. Each block has ports. You set block parameters at inports, and it returns some result at outport. To pass data between blocks you connect outport of one block with inport of another. Also, you can set inport value directly.

Image Modified

In that example first block Temp points loads some data, which goes from outport grid to inport grid of second block Point 1 . The second block processes data and fires new out value on port record. Last block Get curVal gets new value and can process data too.

That's all you need to understand terms of that section. To learn more about how to develop pages read further articles.

3.2 Logic Editor Toolbar

Image Modified

Top toolbar contains same state buttons like in Gui Editor (like save, import, undo), but there is few new buttons:

...

That function moves all nodes to form readable and compact layout of blocks depends on connections. It uses KIELER's automatic layout algorithms. To get understand just take a look at result.

Image Modified

Image Modified


Algorithms split blocks by its bonds, split not connected blocks on rows. Each row starts from same x position.

...

To do that you need to connect blocks together. Select blocks you need to connect.

Image RemovedImage Added

And click Mass Link button. In a wizard choose direction "one to many", because we have one source block Equip and many points. And choose Equip as source block in list below.

Image Modified


On next screen choose source outport, this is record in our case, and context for targets. And click apply.

Image Modified

And result will be like that.

Image Modified

It was more faster and easier than draw each connection. Imagine you have 15 blocks to connect instead of 4 blocks here.

...

That's easy: just select all that blocks and click button "Switch selected" and toy get selected connections only. All you need to do after that — press "delete" button on keyboard.


Image Modified

Duplicate wizard

...

You can open the dialog with button on the toolbar or with shortcuts Ctrl+Shift+d on Windows or ⌘⇧D on Mac OS, select at least one block before.

Image Modified

First line allows you to set count of new duplicates.

...

Second option — free space. It that case new blocks would be at bottom of all logic graph, and keep same relative positions to each other:

Image Modified

Fourth parameter is "Keep labels same". If it unchecked new blocks take names like originals have, but take or increase number on the end. "Add" becomes "Add2", "Add2" becomes "Add3". If parameter is checked new blocks keep same name as original.

...

This is a nice feature when you need to duplicate few connected blocks. Take a look at next example: I have loaded a grid with points and need extract some ones. I have already done work for one point and need to repeat that.

Image Modified

I need to select Point 1 and Get curVal blocks, open duplicate dialog and choose "Copy external connections". And I have it. All I need now is to change index inport value for new points blocks.

Image Modified


That way you don't need Mass Link feature, which could take more actions to get job done.

...

You can add block with Add Block dialog. To open it click red circle "plus" button, click "add" button at toolbar or press Ctrl+A (⌘A) on keyboard.

Image Modified


Dialog has few tabs, which contain different items. Tabs except two first contains usual blocks to build logic, grouped by category. It is regular collections of blocks. First two tabs contains different kind of blocks and they both can be empty. Let's overview all the tabs:

...

To move block just drag where you need it. To drag few blocks select it and drag selection box, picking it by any free point.

Image Modified


While you have selected blocks you still can drag one block.

...

All copied blocks pasted beside original ones. When you paste same blocks few times, each new copy would be shifted to right-down direction.


Image Modified

Other option to make copy is context menu, where is copy and paste commands.

Image Modified

Currently you can't copy blocks between two pages or between browsers.

...

To create connection press mouse button on block's port and start drag. A white line will appear. Drag line to another block and release mouse button over desired port. Connection is created.


Image Modified

Other way to create connection is

...

Call block's context menu, click with right mouse button over block (but not over connection or port, they have different menu). Around menu you see ports: inports at the left, and outports at right.


Image Modified

Click on desired port (menu will go away) and point mouse to desired target port of other block. While you move mouse connection is stick to it like you drag it. Click on target port and connection is created.

...

You can also delete one connection from it's context menu.

Image Modified

3.4 Properties panel

...

When inport have initial value, you can see it in text field, and see little caption beside block:

Image Modified

Set initial

To set initial value click inport's text field and type text. Text values can be long, so there is big text field to edit:

Image Modified

Other inports use special dialogs to set value. To open it click [...] button and choose "open editor" in dropdown.

...

Widget's block doesn't have initials, inports here just shows widget's properties, and when you edit inports you change properties. As you can see block hasn't any visible initials:

Image Modified

3.5 Shortcuts

...