![Page 1: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/1.jpg)
iRise Company Confidential © 2013 1
iRise Asset Libraries for Code GenerationMike Hughes, Kostas Morfis
iRise
![Page 2: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/2.jpg)
iRise Company Confidential © 2013 2
Session Overview
Looking to take advantage of CodeGen to generate attractive user interface code quickly? Join this hands‐on session to learn how to use new, upcoming iRise asset libraries that have been created specifically for iRise CodeGen. Use these libraries to build simulations that mimic popular front end frameworks including Bootstrap, jQuery Mobile, PrimeFaces, ICEfaces — and then generate functional code from your simulation using the iRise CodeGen product.
![Page 3: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/3.jpg)
iRise Company Confidential © 2013 3
Agenda
• Why build CodeGen‐friendly libraries?• How is the process different?• Anatomy of an iRise Asset Library for CodeGen
o Structureo Layouto Styleso Simple Componentso Complex Componentso Documentation
• Generating Code
![Page 4: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/4.jpg)
iRise Company Confidential © 2013 4
Why build CodeGen-friendly libraries?
• Translate simulations into the “right” code• Consistency in UI• Enable less experienced modelers to leverage complex
components• Avoiding reinventing the wheel• Constrain modeling to a set of known components
![Page 5: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/5.jpg)
iRise Company Confidential © 2013 5
How is the process different for CodeGen?
• Aligning to a technology frameworko Component‐centrico Widget hierarchyo Styleso Naming
![Page 6: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/6.jpg)
iRise Company Confidential © 2013 6
Anatomy of an iRise Asset Library for CodeGen
• Structure• Layout• Styles• Simple Components• Complex Components• Documentation
![Page 7: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/7.jpg)
iRise Company Confidential © 2013 7
Structure
• Folder Structure• Wrap in toolkit
![Page 8: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/8.jpg)
iRise Company Confidential © 2013 8
Exercise 1
• Open Studio• Log in using the user ID provided• Definition Center: https://vizcaya.dc.irise.com• Open project which matches your user name• Review the folder structure• Run the simulation• Compare with http://getbootstrap.com/2.3.2/
![Page 9: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/9.jpg)
iRise Company Confidential © 2013 9
Layout
• What is layout?• Layout approaches
o Tableso Vertical stacked containers
• Leverage templates• When to use?
![Page 10: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/10.jpg)
iRise Company Confidential © 2013 10
Exercise 2
• Create a new page from the Standard Empty Page template• Use Bootstrap layout containers to create the following:
![Page 11: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/11.jpg)
iRise Company Confidential © 2013 11
Exercise 2
• We can also nest containers
![Page 12: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/12.jpg)
iRise Company Confidential © 2013 12
Styles
• Inline vs Managed styles• Inheritance• Mimic style names from the code• Create sample pages with all style names
![Page 13: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/13.jpg)
iRise Company Confidential © 2013 13
Exercise 3 – Style Detective!
• Find the Bootstrap Information Alert component• What is the class name?• What are the values for:
o color?o background‐color?o border‐color?
![Page 14: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/14.jpg)
iRise Company Confidential © 2013 14
Simple Components
• Widgets versus Masters• Removing outer sections• Widgets versus styles
![Page 15: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/15.jpg)
iRise Company Confidential © 2013 15
Exercise 4
• Create a new Text Input – Span 4 component• Create a new Password Text Input – Span 4 component
![Page 16: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/16.jpg)
iRise Company Confidential © 2013 16
Complex Components
• Importance of container hierarchy• Avoid overlapping widgets• Incorporate style names• Build for ease of use
![Page 17: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/17.jpg)
iRise Company Confidential © 2013 17
Complex Components
• Review Nav List ‐ Span 1o No container usedo Outer menu name nav‐listo Header menu item has nav‐header styleo Other items have nav‐list style
![Page 18: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/18.jpg)
iRise Company Confidential © 2013 18
Exercise 5
• Create a new Tabbable Nav Controlo Create outer wrapper o Create tabs – leverage menuso Add gray lineo Create section for contento Create alternate view for each tabo Name objectso Assign styles
![Page 19: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/19.jpg)
iRise Company Confidential © 2013 19
Documentation
• Leverage document view• Describe how the
component is used• Describe what can be
customized• Leverage annotations
![Page 20: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/20.jpg)
iRise Company Confidential © 2013 20
Generating Code
DEMO
![Page 21: iRise Asset Libraries for Code Generationassets.irise.com/.../Mon_Visualize_2013_CodeGen.pdf · iRise Asset Libraries for Code Generation Mike Hughes, Kostas Morfis iRise. ... Session](https://reader030.vdocument.in/reader030/viewer/2022040609/5eca9fd3cf6793005c2c3c90/html5/thumbnails/21.jpg)
iRise Company Confidential © 2013 21
Advanced Concepts
• Naming of objects• Composite Pages• CodeGen parameters