Download to read offline
![4. Customize the Module
⑦ Click here to show
the module’s
properties window
⑧ Add 3 rows like this
This is a value map from ‘module property’ to
‘control property’ , the pattern for “key” is
[control’s alias] > [control’s property name]](https://image.slidesharecdn.com/tutorial-intermediate-reusablemodule-180622062408/75/CrossUI-Tutorial-intermediate-reusable-module-17-2048.jpg)
CrossUI Tutorial - intermediate - reusable module
- 1. Reusable Module CrossUI Tutorial- Intermediate How to create and use a reusable module?
- 2. Online demo http://www.crossui.com/demo/Tutorial-Intermediate-ReusableModule How tocreate and use a reusable module in CrossUIObjectives Result page
- 3. Reusable Module There aretwo types of reusable modules in CrossUI Builder • Built-in module: The built-in modules can be used in any project • Project custom modules: We can add own custom module and reuse it in a project We focus on the custom module in this tutorial CrossUI build-in modules Project modules Project modules will locate in Module/js folder
- 4. 1.Create a newproject ① Click here to add a blank project ② Modify the project name ③ Click “OK” to create it
- 5. 2. Add someimages for avatar ① Click here to pop the menu ② Select it to add file
- 6. 2. Add someimages for avatar ③ Click here to add images one by one
- 7. 2. Add someimages for avatar We added 8 images here, just use them as examples You can add some small pictures according to your liking
- 8. 3. Create acustom module ① Click here to add a new module file
- 9. 3. Create acustom module ② Select “XUI Module” page ③ Click here to add a new module ④ Modify the module name ⑤ Click “OK” to confirm it
- 10. 3. Create acustom module ⑥ The new module shows here
- 11. 4. Customize theModule Properties setting ① Add a “Block” as the container
- 12. 4. Customize theModule Properties setting ② Add an “Image” to show the avatar alias: v_avatar
- 13. 4. Customize theModule Properties setting ③ Add a “Label” to show “Name:” label
- 14. 4. Customize theModule Properties setting ④ Add a “Label” to show the “staff name” alias: v_name
- 15. 4. Customize theModule Properties setting ⑤ Add a “Label” to show “Title:” label
- 16. 4. Customize theModule Properties setting ⑥ Add a “Label” to show the “staff title” alias: v_title
- 17. 4. Customize theModule ⑦ Click here to show the module’s properties window ⑧ Add 3 rows like this This is a value map from ‘module property’ to ‘control property’ , the pattern for “key” is [control’s alias] > [control’s property name]
- 18. 4. Customize theModule ⑩ Expand “Project Modules” group, you can find the “StaffCard” module in it ⑨ Click here to save the module
- 19. 5. Use themodule in the start page ① In the “Start Page”, drag 8 StaffCard into the canvas Switch to the “Start Page”
- 20. 5. Use themodule in the start page ② Select the first module ③ Click here to show the module designer window Setting up module - Method 1: Modify the module instance directly inside
- 21. 5. Use themodule in the start page ③ Select the image first ④ Click here to show the image selector window ⑤ Select the first picture ⑥ confirm it Setting up module - Method 1: Modify the module instance directly inside
- 22. 5. Use themodule in the start page Image changed ⑦ copy the image path for later use Setting up module - Method 1: Modify the module instance directly inside
- 23. 5. Use themodule in the start page ⑧ Select the v_name ⑨ Modify the caption Setting up module - Method 1: Modify the module instance directly inside
- 24. 5. Use themodule in the start page ⑩ Select the v_title ⑪ Modify the caption ⑫ Click OK to confirm Setting up module - Method 1: Modify the module instance directly inside
- 25. 5. Use themodule in the start page ⑬ We got this result Setting up module - Method 1: Modify the module instance directly inside
- 26. 5. Use themodule in the start page ⑭ Select the 2rd module ⑮ Click here to show the module properties configure window Setting up module - Method 2: Modify the module properties
- 27. 5. Use themodule in the start page Setting up module - Method 2: Modify the module properties⑯ Modify 3 prop as follows ⑰ Click OK to confirm
- 28. 5. Use themodule in the start page Setting up module - Method 2: Modify the module properties ⑱ We got this result
- 29. 5. Use themodule in the start page ⑲ Modify the following modules one by one ⑳ Save the page At last, click to show the runtime
- 30. 7. The runtime Inthe page, we used a custom module for 8 times
- 31. Thanks Download the sourcecode CrossUI Tutorial - Intermediate Reusable Module http://www.crossui.com/Download/Tutorial-Intermediate-ReusableModule.zip Online demo http://www.crossui.com/demo/Tutorial-Intermediate-ReusableModule http://www.linkedin.com/in/crossui