Create your first Module

In this page, we will have a tutorial in both video and document. With both, you might learn easily how to create a module. This is a short Tutorial video for creating your first Jog module. For more detailed tutorial, keep reading this page which has more information and descriptions that you can easily follow.

https://youtu.be/sf6-cCfI92I

This is an example of Jog module. In this page we will make this same module by following some easy steps.

Note

For more understanding of the ecosystem of Dart-Suite, See the What is Dart-Suite?.

1. Create a new project

To make a module, you need to create a new project for in Dart-IDE first.

• Step 1: Access to Dart-IDE (https://ide.drdart.io)

• Step 2: Click on the New project menu which is in the menu of File.

• Step 3: Click on the Blank Module Preset in Module ▸User Module menu and click on the next button.

• Step 4: In the Project Setting popup, complete the following:

  • Fill out the spaces in the Name, Package Name, Save location and Dart-SDK Version field.

  • For the User Module category, choose Jog.

  • Click Finish.

Tips for Package name

Usually, the Package Name is composed of 3 parts (com . company name . your module name) with three dots that separate these parts. The first part is freestyle so that you can write any names, acronyms, etc. This may help you remember or distinguish the package from other modules. The middle part is usually for your company name. The last part is for your module name which you have already entered in the Name field. By following the form, for example, the Package Name is com.doosan.palletizing.

• Step 5: After processing, the index.tsx which is under the src file of the project file (com.xxxx.xxxx) to design your project will be automatically opened.

• Step 6: For the display name in Dart-Platform, go to the manifest.json folder and change the name to the Module name you want. After it, go back to the index.tsx.

Note.

For more information on manifest.json, refer to the page Manifest.json.

Shortcut - When you code your module,

Be sure to manually click File ▸ Save or Ctrl+S because Dart-IDE cannot save the items automatically.

2. Drag & Drop the Typography Basic Component

Now the preparation for your module is ready. We will write “Hello Dr. Dart!” for the module.

• Step 1: Uncheck the Code which is on the top right so that you can do drag & drop more easily.

• Step 2: Also, click the Fit to Screen below the UI Preview for your appropriate sight.

• Step 3: In the COMPONENT PALETTE, search the Basic Component called “Typography”. Finding it, drag & drop it to your UI Preview.

• Step 4: If you dragged and dropped the typography successfully, the PROPERTY page will have a list for the setting. In the list, find the TEXT section and write “Hello Dr.Dart!” for the text.

• Step 5: Set the Font-size as 80 px and the Font-weight as bold.

Shortcut - When you want to move within the UI Preview,

Be sure to push the Space button + Mouse Left button. The grip hand icon will appear.

3. Drag & Drop the Box Components

Now, you have done the Typography part which becomes the title in this screen.

From now on we will add some Basic Components in our project.

• Step 1: Search “Box” Component within the BASIC COMPONENT.

• Step 2: Drag & Drop the Box under the typography.

• Step 3: Drag & Drop another Box component right below the first box.

4. Insert User Component into Box Component

In this part, we will insert the User Component into the boxes we have drag&dropped in the former process.

• Step 1: First, close the dropdown menu of BASIC COMPONENT then the USER COMPONENT dropdown will appear.

• Step 2: In the USER COMPONENT find the Simulator View Component and drag & drop it to the Box component included in the UI Preview right below the ‘Hello Dr.Dart!’.

• Step 3: Next, find another USER COMPONENT named JointJogView and drag & drop it to the box next to the Simulator View Component.

• Step 4: Finally, downsize the Width of each box to 50 % (Be aware of the unit) in SIZE Section.

Note.

Make sure you have put these USER COMPONENTS in each box. You can check the status via the COMPONENT TREE right below the COMPONENT PALETTE.

5. Insert Box Components into Stack Component

Now, we will add another BASIC COMPONENT to make the two USER COMPONENTS displayed in a row.

• Step 1: Add the Stack Component which is included in the BASIC COMPONENT. (Place it below the typography in the UI Preview)

• Step 2: If you see the COMPONENT TREE section, you can see or change the structure of the whole components. To change the structure, you can click the icon displayed on each component. With this function, Put the two Box Components (which include USER COMPONENT each) into the Stack component.

• Step 3: Click the Stack component in the COMPONENT TREE again. The property will appear.

• Step 4: In the property, you will see the DEFAULT STYLE section. Change the style to “row”, then you will see the result as below.

Finally your first module is complete!

Save the file again, and we will go to the next step for building this module.