User Guide

In this short guide, we will go through the entire process of creating a module and using a module within a project.

To demonstrate all aspects of Modules, we will be creating a simple module that will show the text “Hello World” in many different styles and themes. When someone clicks on “Hello World”, the background color will change.

When creating a module, the first step would be to plan what we want our module to do and how we want it to function.

Planning

First, we can think about what components we want to use first. This module will be very straightforward as we want to display text, so we will use a label component.

Next, we want to consider how it will function. It’s important to think about Modules as a separate entity in your project. It doesn’t have any way to communicate with our project unless we make that connection.

For this module, we want to display “Hello World” in many different styles. So we need to have a way to set “styles” or “modes”. When it comes to setting, there are two places where we can set. The first is done through Properties and is in the Designer tab. The second is done through Methods and is in the Blocks tab. Setting in the Designer tab would allow us to choose a design before the app loads while setting in the blocks lets us change the design while the app is running. For this module, we will opt for both options. Thus, we will need to create a connection for the project to tell the module what style of “Hello World” to display.

Another aspect to consider is whether we would like any information from the module. Information can also take the form of any actions or events taking place in the module that we would like to be able to access or know of in the project. We can do this through Events and the Blocks tab. For our module, I would like to know when someone clicks on “Hello World” or when it changes.

Although there aren’t concrete plans, it is recommended to have a general idea of what you want your module to do.

Creating a New Module

First, we will need to create a new module.

Starting Build

Now that we have a new module, let's start building our Module.

Properties

A module’s properties can be found by clicking on the gear icon next to the Module Workspace in the component tree. Module properties can be used to pass information from the project to the module through the Designer before the app loads up.

Publishing & Testing

It is recommended that modules be published and tested throughout the development process. One important thing to note is that once we publish the module, method parameters, properties, events, and methods can not be deleted.

Events

Module Events can be found by clicking on the gear icon next to the Module Workspace under UI Components. Module events can be used to pass information from the module to the project. You can think of events as a doorbell. Anytime the module runs that block, a doorbell is pressed to alert the project

Updating

As you add features and make fixes to your module, you will need to push those updates out to all the projects that imported your module already.

Method

Module Methods allow your project to give commands to run blocks inside your module. This is also how you can have your project pass information from your project to your module through blocks.

Now that you have created a new feature, it is recommended to publish and test your module following the steps from Updating and Publishing & Testing.

Remixing

Like regular projects, if there is a module that looks interesting that you would like to use, modify, or look at its components or blocks, you can remix modules in projects. Give it a try with the project and module in this guide. A link to the project can be found here.