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.
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 ofFile
.
Step 3: Click on the
Blank
Module Preset inModule
▸User Module
menu and click on thenext
button.
Step 4: In the Project Setting popup, complete the following:
Fill out the spaces in the
Name
,Package Name
,Save
location andDart-SDK Version
field.For the
User Module category
, chooseJog
.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 thename
to the Module name you want. After it, go back to theindex.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.