Recommended
Recommended
More Related Content
Similar to Tutorial advanced - renderer
Similar to Tutorial advanced - renderer (20)
Recently uploaded
Recently uploaded (20)
Tutorial advanced - renderer
- 1. Renderer CrossUI Tutorial - Advanced How to use "renderer" to build complex content?
- 2. Online demo http://www.crossui.com/demo/Tutorial-Advanced-ModuleInRender How to use "renderer" to build complex content in CrossUI?Objectives Result page
- 3. Renderer – template/control/module/function There’s a renderer property (string <template, control class name, module name> or function) in many widgets, which can be used to provide a way to assign/overwrite the caption property A template renderer A function renderer A module renderer No renderer
- 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. Prepare the start page Return to the “Start Page” A Panel for dragging a StaffCard module into it
- 20. 5. Prepare the start page A Button for rendering a StaffCard module in it
- 21. 5. Prepare the start page A Panel for dragging a List into it
- 22. 5. Prepare the start page A Panel for dragging a Grid into it
- 23. 5. Use module as renderer ①Drag a StaffCard into the panel ② Click here to set prop ③ Set 3 prop like these ④ Click OK to confirm it Use module directly
- 24. 5. Use module as renderer ① Select the button ② Set the renderer to “Module.StaffCard” ④ Set 3 prop like this ⑤ Click OK to confirm it ③ Click here to set tagVar ⑥ The result Render a module in a Button
- 25. 5. Use the module in the start page Render modules into a List ①Drag a List into the panel ② Set prop like this
- 26. 5. Use the module in the start page ③ Click here to set items ④-1 Set “caption “ and “ renderer “ columns like this No renderer A template renderer A control renderer A module renderer Render modules into a List
- 27. 5. Use the module in the start page ④-2 Scroll to the “tagVar” column, set the tagVar column like this ⑤ At last, click here to apply ‘items’ Render modules into a List
- 28. 5. Use the module in the start page Render modules into a List ⑥ The result No renderer A template renderer A control renderer A module renderer
- 29. 5. Use the module in the start page ①Drag a Grid into the panel ② Set prop like this ③ Click here to set columns ④ Set columns like this ⑤ At last, click here to apply ‘header’/columns Render modules into a Grid [*] Set cellRenderer to “Module StaffCard” for the 3rd column
- 30. 5. Use the module in the start page ⑦ Add 4 rows, set tagVar column like this ⑧ At last, click here to apply ‘rows’ ⑥ Click here to set rows
- 31. 5. Use the module in the start page ⑨ The result A module was rendered into a cell
- 32. 7. The runtime Render a module into a Button Render some modules into a List Render some modules into a Grid
- 33. Thanks Download the source code CrossUI Tutorial - Advanced Renderer http://www.crossui.com/Download/Tutorial-Advanced-ModuleInRender.zip Online demo http://www.crossui.com/demo/Tutorial-Advanced-ModuleInRender http://www.linkedin.com/in/crossui