In this chapter I'll introduce you a smartwidgets and how it can help you with page creating.

Smartwidget's idea

Smartwidget is a widget with brain, in other words — it's a page module, part of page. It has visual part and logic part, but can be used as simple widget in your pages. Smartwidget has the following goals:

  • modularity — to make page layout and logic more simpler,
  • reusability — to let you reuse page's parts in other pages,
  • sharing — to share your smartwidget collections between projects.

For instance, on image below is PointDisplay smartwidget. It can show point's display name and real-time current value.

Working smartwidget

For example, you need to show curVal and displayName for ten points. You need to add two labels for each point, make 10 record watchers, extract name and value and don't mess Labels. Or you can just use 10 PointDisplay widgets (or other smartwidget).

Other case to use smartwidget is page header with company logo, caption, links and electricity site meter. One more great thing is if your company updated logo, you need to change one smartwidget, and all pages uses it will be updated too automatically.

Third example can be a building navigation block, which can be used in few different pages. It can take current navigation node, check it children and display navigation links.

Using smartwidget

Smartwidgets is something user should create by self or use third-part ones. But in Visualytik we already have one smartwidget. In that section we will work with PointDisplay bundled smartwidget, but same actions is applicable for any other smartwidget.

Adding smartwidget

You can add smartwidget from usual Add Widgets dialog. Last tab is "default", with only one widget: PointDisplay.

In Page Editor's Gui tab it looks like usual Label widget, but has two rows of text. We can move it, duplicate. But resizing doesn't change anything: that smartwidget is designed with fixed size. But it's possible to create adjustable smartwidgets.

Setting properties

We don't see any special properties at properties panel: only positioning ones. But we can see something useful at Logic Editor: property id, where we can set record id. Smartwidgets can be configured from logic only.

At next example we connect after NavRecordSearcher to id inport. It's also possible to set direct value of point id.

Set record id

And you can see point valuer and name in preview mode. It feels like usual widget with a bit of brains and slightly more complex layout.

Investigating smartwidget

It's possible to check out how is PointDisplay made. All you need to do is click twice at smartwidget at Gui tab and you will be navigated to smart Widget Editor.

|| Be aware: after that navigation you will lost all unsaved changes! Save page before go.

At SmartWidget Editor you can see same Layout and Logic tabs, where you can look at widget that was used, and it's logic:


Orange Id block is here — inport for component. From that block RecordWatcher gets initial data. Smartwidget may have outports too, and have a lot of ports.

Libraries and components

PointDisplay widget is in some "default" tab at Add Widget dialog. "Default" is a build-in library. You can create your own libraries, export and import libraries between your projects.

Library contains smartwidgets and styles, let's say library contains components. In a future we are going to add more types of components. Also library can have any levels of folders to help you organize components in best way.

Two kinds of smartwidgets

Smartwidget is something visible and with logic. But you can create almost "stupid" smartwidgets: may be you need only page header with fixed caption and image. You can just pass some widgets properties to smartwidget's inports. This is visual kind of smartwidget, and you always can find it in Add Widget dialog.

Other kind is invisible widget, is smartblock to use in logic of page (or other library's component). This is kind of logic function. You organize few inports, process data and return result at one or more outports.

To make smartblock you don't need do something special: just leave smartwidget's Layout empty.

Smartblocks can be added and used at Logic Editor only. You can't see it at Add Widget dialog, and you can't see smartwidgets at Add Block dialog.

Creating smartwidgets

Here we will review how to create and edit smartwidgets and smartblocks at one time as they are almost same. All actions are going at Library Editor application.

Create library

To create any smart block or widget you need to have your library. Visualytik have one built-in, but it's read-only, you can't remove it or add new component here. So, go and create new library.

ID is something you want to keep as original as possible if you want to share this library with other project, to avoid id match. Name can be more readable and short.

Create component

Now when you library, you can select it and create a new widget within. Click "Add item" button ad type new component name: "PointValue", for instance. You don't need to choose special settings if you need smartwidget or smartblock.

You can fill it with widgets just like you do it in Page Editor. But one moment: try avoid offset at position, let widgets be at (0,0) position. If you want to create smartblock, don't add any widget.

Making inports

The most important step here is making in and out ports, so you can pass some information to your component, make it context sensitive.

For example, you wanna do a little helper to watch for record and get it curVal, just like PointWatcher but not-visual. What you take as input: markers or id? Let's make it universal and take id. So, we have id, and we need to pass it to RecordWatcher to subscribe to record changes. And our first action would be adding RecordWatcher.

Now click with right mouse button over it's id inport and choose "export" option. You will se orange block with "id" name.

Export component port

This is how we defined inport. From that moment our component have id inport which you can see at logic editor of page or other component. Each time our PointValue block gets new id value, RecordWatcher in it gets that id.

After that you can build other blocks to make component work. Here we need to add RecordToTags only.

Completing program

Making outports

Now we need to return some result, otherwise component would be useless. We need to return out1 value and we can do that like we did for inport: right click on outport and choose "export".

Also, I guess we need to return point display name too, it would be useful. Set tag2 as "navName" and export out2 too.

Renaming ports

It's not clear to our users what our out1 and out2 means, so we need to set descriptive port names. We can do that at Properties dialog: set out1 name as "value", and out2 as "name". And now our program looks like:

Finished program

Check component

To be sure all works as supposed we need to use our new component within a page (not in other component, because we can't "run" component, only page). We already described how to add smartwidget at "Using smartwidget" section. But here we have smartblock, and we can add it in Logic Editor only.

Create page, add two labels, find point by markers and pass result id to PointValue block. It's outports should be connected with two labels to display vale and name. And if everything is good you will see result at preview page.

If you met errors — read Debugging article.

  • No labels