Recommended
More Related Content
Similar to CrossUI Tutorial - intermediate - reusable module
Similar to CrossUI Tutorial - intermediate - reusable module (20)
Recently uploaded
Recently uploaded (20)
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 to create and use a reusable module in CrossUIObjectives Result page
- 3. Reusable Module There are two 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 new project ① Click here to add a blank project ② Modify the project name ③ Click “OK” to create it
- 5. 2. Add some images for avatar ① Click here to pop the menu ② Select it to add file
- 6. 2. Add some images for avatar ③ Click here to add images one by one
- 7. 2. Add some images 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 a custom module ① Click here to add a new module file
- 9. 3. Create a custom module ② Select “XUI Module” page ③ Click here to add a new module ④ Modify the module name ⑤ Click “OK” to confirm it
- 10. 3. Create a custom module ⑥ The new module shows here
- 11. 4. Customize the Module Properties setting ① Add a “Block” as the container
- 12. 4. Customize the Module Properties setting ② Add an “Image” to show the avatar alias: v_avatar
- 13. 4. Customize the Module Properties setting ③ Add a “Label” to show “Name:” label
- 14. 4. Customize the Module Properties setting ④ Add a “Label” to show the “staff name” alias: v_name
- 15. 4. Customize the Module Properties setting ⑤ Add a “Label” to show “Title:” label
- 16. 4. Customize the Module Properties setting ⑥ Add a “Label” to show the “staff title” alias: v_title
- 17. 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]
- 18. 4. Customize the Module ⑩ Expand “Project Modules” group, you can find the “StaffCard” module in it ⑨ Click here to save the module
- 19. 5. Use the module in the start page ① In the “Start Page”, drag 8 StaffCard into the canvas Switch to the “Start Page”
- 20. 5. Use the module 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 the module 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 the module 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 the module 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 the module 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 the module in the start page ⑬ We got this result Setting up module - Method 1: Modify the module instance directly inside
- 26. 5. Use the module 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 the module 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 the module in the start page Setting up module - Method 2: Modify the module properties ⑱ We got this result
- 29. 5. Use the module 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 In the page, we used a custom module for 8 times
- 31. Thanks Download the source code 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