Lumira 2.0 Designer Highlights – Composites (part 5 – Interface Functions)

We’ve taken a high level tour of composite interfaces and implemented an interface property. Now we’ll look at interface functions. Remember that composites and the apps hosting them don’t share a common scope. Interface functions are functions that are visible in the application scope (and can be called from application scripts) and run in the composite scope, where there is full access to everything in the composite.

In the example lumx file that we have been using, there is a chart tile, with title text in the header. Last time, we made the text data bound to an interface property, so that the designer could set it from the properties pane, when she added this tile to an app. Now we are going to add an interface function to the composite, so that she can also set it via script at runtime.

Creating a function to set the composite’s header text

To add a new interface function, go to the outline pane and navigate to the Interface section, near the top of the outline tree. Right click on Functions and select Create Function.

Name it setheaderText

If you select the function and look in the properties pane. You notice that none of the properties of the interface function are editable from there.

To edit the function, double click on the function in the outline and the script editor will pop up. Editing interface functions is similar to global script functions, but we will still walk through it in detail.

The description field holds the function description text that the designer sees in the script editor value help.

We have a lot of options for the function’s return type. In this case, we are simply setting the value of a text string and don’t need to return anything, so we’ll leave the return type as void.

We will need an input parameter; the new text value. To add this, we click on the Insert button. We’ll give it a self-descriptive name, such as newText. Again, we have a long list of options for the input parameter type. We’ll go with String.

We can decide to allow arrays of values as input parameters. We’ll leave it as a single value.

The description field hold the value help documentation for this input parameter (perviously, we set the description for the function as a whole),  that the designer will see when she adds this function to a script in an app.

Save the composite. The app will refresh. After it is done, edit the On Startup event script. We will simply set the text at startup with a hardcoded “Hello World”. You would not do this in an actual app, but we want to demonstrate using a composite interface script in an app without cluttering it up with UI elements.

In the script editor, type in “CB_COMPOSITE_1.set” and you will see the new interface function show up in the value help.

Write the command: CB_COMPOSITE_1.setHeadertext(“hello World”);

Close the editor and test the app. You’ll see that the parent app sets the header text of the tile on startup.

That’s it!  Now you have an interface function!