iRise Company Confidential © 2013 1

iRise Asset Libraries for Code GenerationMike Hughes, Kostas Morfis

iRise

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.

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

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

iRise Company Confidential © 2013 5

How is the process different for CodeGen?

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

iRise Company Confidential © 2013 6

Anatomy of an iRise Asset Library for CodeGen

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

iRise Company Confidential © 2013 7

Structure

• Folder Structure• Wrap in toolkit

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/

iRise Company Confidential © 2013 9

Layout

• What is layout?• Layout approaches

o Tableso Vertical stacked containers

• Leverage templates• When to use?

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:

iRise Company Confidential © 2013 11

Exercise 2

• We can also nest containers

iRise Company Confidential © 2013 12

Styles

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

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?

iRise Company Confidential © 2013 14

Simple Components

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

iRise Company Confidential © 2013 15

Exercise 4

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

iRise Company Confidential © 2013 16

Complex Components

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

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

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

iRise Company Confidential © 2013 19

Documentation

• Leverage document view• Describe how the 

component is used• Describe what can be 

customized• Leverage annotations

iRise Company Confidential © 2013 20

Generating Code

DEMO

iRise Company Confidential © 2013 21

Advanced Concepts

• Naming of objects• Composite Pages• CodeGen parameters