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

iRise Company Confidential © 2013 1

iRise Asset Libraries for Code GenerationMike Hughes, Kostas Morfis

iRise


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.


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


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


How is the process different for CodeGen?

• Aligning to a technology frameworko Component‐centrico Widget hierarchyo Styleso Naming


Anatomy of an iRise Asset Library for CodeGen

• Structure• Layout• Styles• Simple Components• Complex Components• Documentation


Structure

• Folder Structure• Wrap in toolkit


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/


Layout

• What is layout?• Layout approaches

o Tableso Vertical stacked containers

• Leverage templates• When to use?


Exercise 2

• Create a new page from the Standard Empty Page template• Use Bootstrap layout containers to create the following:


Exercise 2

• We can also nest containers


Styles

• Inline vs Managed styles• Inheritance• Mimic style names from the code• Create sample pages with all style names


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?


Simple Components

• Widgets versus Masters• Removing outer sections• Widgets versus styles


Exercise 4

• Create a new Text Input – Span 4 component• Create a new Password Text Input – Span 4 component


Complex Components

• Importance of container hierarchy• Avoid overlapping widgets• Incorporate style names• Build for ease of use


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


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


Documentation

• Leverage document view• Describe how the

component is used• Describe what can be

customized• Leverage annotations


Generating Code

DEMO


Advanced Concepts

• Naming of objects• Composite Pages• CodeGen parameters

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

Documents