SlideShare a Scribd company logo
1 of 21
Download to read offline
Appcelerator Titanium Alloy

    Simple App, Step-By-Step
Getting Started
• Follow Alloy download instruction
  – http://projects.appcelerator.com/alloy/docs/Alloy-
    bootstrap/index.html
  – https://github.com/appcelerator/alloy
• Complete Project Source Code
  – https://github.com/aaronksaunders/SimpleAlloyPr
    esentationApp
Create new project in TiStudio
• Save Project
• Open up terminal in project to add Alloy
  functionality
Create Alloy Project
• In the terminal window you just created, type
  alloy new .
• Output should look something like this
Modify index.js in controllers folder
• Open app/controllers/index.js edit the file so it
  should look like this
Create the Tabs for the TabGroup
• Type alloy generate controller tabOneView
• Open the file app/views/tabOneView.xml
• Edit the file as follows
Tab creation, more details
• We set an ids on objects so they can be accessed
  from controllers
• We have a tab with a nested window and the
  button in the window
Tab creation, Tab View Two
• Type alloy generate controller tabViewTwo
• app/views/tabViewTwo.xml is very similar to
  tabViewOne.xml

• We now have the tabs set up, lets create the
  tabGroup
TabGroup Creation
• Open app/views/index.xml
• Add the TabGroup object and then nest the
  require statements using the controller file
  name for each tabView we created
TabGroup Creation, explanation
• We are using <Require src=“”/> so we can
  modularize our code more efficiently.
• The functionality for each components is
  separated into the specified controller file
Let’s See What We’ve Built
• At this point you should be able to run you
  application and click through the two tabs and
  see the expected behavior


                QUESTIONS
Navigating Between Windows
• Open app/controllers/tabViewOne.js
• Here we will add some action to what we have
  built to open a child window from
  app/views/tabViewOne.xml.
Navigating Between Windows
• The $.open_button.eventListener will be called when
  the user clicks on “one_button”. The “$.” notation
  allows you to access your objects by id
Navigating Between Windows
• Next we need to access the controller for the
  new window.
• Alloy.getController(„tabViewOneChild‟); returns the
  controller object.
Creating new controller object
• Type, alloy generate controller tabViewOneChild,
• In this controller at app/controllers/tabViewOneChild.js
  we only need to open the view.
• We pass in the tab object as a parameter for
  the function
• To expose methods outside of controller we
  use exports
tabViewOneChild.js controller source
• app/controllers/tabViewOneChild.js code   should look
  like this when completed
• We use the tab container to open the child
  window using the window id
tabViewOneChild.xml view source
• app/views/tabViewOneChild.xml code   should look like
  this when completed
• We simple window with label; the id is
  defined here so that the controller can access
  it.
Back to tabViewOne controller
• Here we call the exported function we created in
  app/controllers/tabViewOneChild.js to open the window.

• We have access to any and all exported objects from
  the controller
Final Directory Structure Should Look
               Like This
App Should Look Like This
• A
More Information
                Aaron K. Saunders
               Clearly Innovative Inc
           info@clearlyinnovative.com
                @aaronksaunders
        http://blog.clearlyinnovative.com

                Project Source Code
https://github.com/aaronksaunders/SimpleAlloyPre
                   sentationApp

More Related Content

What's hot

Quick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator TitaniumQuick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator TitaniumAaron Saunders
 
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Matt Raible
 
Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2INader Debbabi
 
Angular 4 Introduction Tutorial
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction TutorialScott Lee
 
Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Matt Raible
 
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Matt Raible
 
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017Matt Raible
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Ahmed Bouchefra
 
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...Edureka!
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninEzéchiel Amen AGBLA
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2Dhyego Fernando
 
Say hello world with angular 5
Say hello world with angular 5Say hello world with angular 5
Say hello world with angular 5Abhishek Mallick
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Matt Raible
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017Matt Raible
 
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017Matt Raible
 

What's hot (20)

Quick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator TitaniumQuick Way to work with Models and Alloy in Appcelerator Titanium
Quick Way to work with Models and Alloy in Appcelerator Titanium
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
An Overview of Angular 4
 
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
 
Introduction to angular 4
Introduction to angular 4Introduction to angular 4
Introduction to angular 4
 
Developing a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2IDeveloping a Demo Application with Angular 4 - J2I
Developing a Demo Application with Angular 4 - J2I
 
Angular 4 Introduction Tutorial
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction Tutorial
 
Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
 
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
 
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
 
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...
What's New in Angular 4 | Angular 4 Features | Angular 4 Changes | Angular Tu...
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Say hello world with angular 5
Say hello world with angular 5Say hello world with angular 5
Say hello world with angular 5
 
Angular 4 - quick view
Angular 4 - quick viewAngular 4 - quick view
Angular 4 - quick view
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
 
Angular 9 New features
Angular 9 New featuresAngular 9 New features
Angular 9 New features
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
 
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 

Similar to Alloy Simple App Demonstration

Selenium with testng and eclipse ide
Selenium with testng and eclipse ideSelenium with testng and eclipse ide
Selenium with testng and eclipse ideTestertester Jaipur
 
Streamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxStreamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxShubhamJayswal6
 
Eclipse IDE, 2019.09, Java Development
Eclipse IDE, 2019.09, Java Development Eclipse IDE, 2019.09, Java Development
Eclipse IDE, 2019.09, Java Development Pei-Hsuan Hsieh
 
Selenium training
Selenium trainingSelenium training
Selenium trainingShivaraj R
 
Efficient Automated Test Creation With Selenium IDE Plugins
Efficient Automated Test Creation With Selenium IDE PluginsEfficient Automated Test Creation With Selenium IDE Plugins
Efficient Automated Test Creation With Selenium IDE PluginsSamit Badle
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2 Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2 Thecreating Experts
 
Build Your First Android App Session #1
Build Your First Android App Session #1Build Your First Android App Session #1
Build Your First Android App Session #1Troy Miles
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps QuicklyGil Irizarry
 
01 startoff angularjs
01 startoff angularjs01 startoff angularjs
01 startoff angularjsErhwen Kuo
 
My Very First Zf App Part One
My Very First Zf App   Part OneMy Very First Zf App   Part One
My Very First Zf App Part Oneisaaczfoster
 
Mobile Worshop Lab guide
Mobile Worshop Lab guideMobile Worshop Lab guide
Mobile Worshop Lab guideMan Chan
 
Aura Framework Overview
Aura Framework OverviewAura Framework Overview
Aura Framework Overviewrajdeep
 
Introduction to Android and Java.pptx
Introduction to Android and Java.pptxIntroduction to Android and Java.pptx
Introduction to Android and Java.pptxGandhiMathy6
 

Similar to Alloy Simple App Demonstration (20)

Introduction of Xcode
Introduction of XcodeIntroduction of Xcode
Introduction of Xcode
 
Selenium with testng and eclipse ide
Selenium with testng and eclipse ideSelenium with testng and eclipse ide
Selenium with testng and eclipse ide
 
Streamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxStreamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptx
 
Eclipse IDE, 2019.09, Java Development
Eclipse IDE, 2019.09, Java Development Eclipse IDE, 2019.09, Java Development
Eclipse IDE, 2019.09, Java Development
 
Selenium training
Selenium trainingSelenium training
Selenium training
 
IOS- Designing with ui tool bar in ios
IOS-  Designing with ui tool bar in iosIOS-  Designing with ui tool bar in ios
IOS- Designing with ui tool bar in ios
 
Efficient Automated Test Creation With Selenium IDE Plugins
Efficient Automated Test Creation With Selenium IDE PluginsEfficient Automated Test Creation With Selenium IDE Plugins
Efficient Automated Test Creation With Selenium IDE Plugins
 
Project anatomy & hello world
Project anatomy & hello worldProject anatomy & hello world
Project anatomy & hello world
 
Advanced Zen
Advanced ZenAdvanced Zen
Advanced Zen
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2 Selenium Training in Chennai Demo Part-2
Selenium Training in Chennai Demo Part-2
 
Build Your First Android App Session #1
Build Your First Android App Session #1Build Your First Android App Session #1
Build Your First Android App Session #1
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly
 
01 startoff angularjs
01 startoff angularjs01 startoff angularjs
01 startoff angularjs
 
My Very First Zf App Part One
My Very First Zf App   Part OneMy Very First Zf App   Part One
My Very First Zf App Part One
 
Mobile Worshop Lab guide
Mobile Worshop Lab guideMobile Worshop Lab guide
Mobile Worshop Lab guide
 
Aura Framework Overview
Aura Framework OverviewAura Framework Overview
Aura Framework Overview
 
UIAutomator
UIAutomatorUIAutomator
UIAutomator
 
Web works hol
Web works holWeb works hol
Web works hol
 
Introduction to Android and Java.pptx
Introduction to Android and Java.pptxIntroduction to Android and Java.pptx
Introduction to Android and Java.pptx
 

More from Aaron Saunders

Mobile Application Workshop - So You Want To Build a Mobile App?
Mobile Application Workshop - So You Want To Build a Mobile App?Mobile Application Workshop - So You Want To Build a Mobile App?
Mobile Application Workshop - So You Want To Build a Mobile App?Aaron Saunders
 
Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...
Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...
Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...Aaron Saunders
 
Appcelerator Titanium Alloy + Kinvey Collection Databinding - Part One
Appcelerator Titanium Alloy + Kinvey Collection Databinding - Part OneAppcelerator Titanium Alloy + Kinvey Collection Databinding - Part One
Appcelerator Titanium Alloy + Kinvey Collection Databinding - Part OneAaron Saunders
 
Identify & Unlock Your Mobile Strategy
Identify & Unlock Your Mobile StrategyIdentify & Unlock Your Mobile Strategy
Identify & Unlock Your Mobile StrategyAaron Saunders
 
SubAid User Guide - Overview
SubAid User Guide - OverviewSubAid User Guide - Overview
SubAid User Guide - OverviewAaron Saunders
 
DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...
DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...
DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...Aaron Saunders
 
Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013
Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013
Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013Aaron Saunders
 
Simple Unit Testing in Appcelerator Titanium Alloy
Simple Unit Testing in Appcelerator Titanium AlloySimple Unit Testing in Appcelerator Titanium Alloy
Simple Unit Testing in Appcelerator Titanium AlloyAaron Saunders
 
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013Aaron Saunders
 
modeveast 2012 Appcelerator Alloy & Cloud Services Presentation
modeveast 2012 Appcelerator Alloy & Cloud Services Presentationmodeveast 2012 Appcelerator Alloy & Cloud Services Presentation
modeveast 2012 Appcelerator Alloy & Cloud Services PresentationAaron Saunders
 
Introduction to Module Development with Appcelerator Titanium
Introduction to Module Development with Appcelerator TitaniumIntroduction to Module Development with Appcelerator Titanium
Introduction to Module Development with Appcelerator TitaniumAaron Saunders
 
Clearly Innovative Inc Capabilities
Clearly Innovative Inc CapabilitiesClearly Innovative Inc Capabilities
Clearly Innovative Inc CapabilitiesAaron Saunders
 
PaaS + Appcelerator = WIN
PaaS + Appcelerator = WINPaaS + Appcelerator = WIN
PaaS + Appcelerator = WINAaron Saunders
 
StackMob & Appcelerator Module Part One
StackMob & Appcelerator Module Part OneStackMob & Appcelerator Module Part One
StackMob & Appcelerator Module Part OneAaron Saunders
 
Modeveast Appcelerator Presentation
Modeveast Appcelerator PresentationModeveast Appcelerator Presentation
Modeveast Appcelerator PresentationAaron Saunders
 

More from Aaron Saunders (15)

Mobile Application Workshop - So You Want To Build a Mobile App?
Mobile Application Workshop - So You Want To Build a Mobile App?Mobile Application Workshop - So You Want To Build a Mobile App?
Mobile Application Workshop - So You Want To Build a Mobile App?
 
Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...
Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...
Getting Started with Appcelerator Alloy - Cross Platform Mobile Development -...
 
Appcelerator Titanium Alloy + Kinvey Collection Databinding - Part One
Appcelerator Titanium Alloy + Kinvey Collection Databinding - Part OneAppcelerator Titanium Alloy + Kinvey Collection Databinding - Part One
Appcelerator Titanium Alloy + Kinvey Collection Databinding - Part One
 
Identify & Unlock Your Mobile Strategy
Identify & Unlock Your Mobile StrategyIdentify & Unlock Your Mobile Strategy
Identify & Unlock Your Mobile Strategy
 
SubAid User Guide - Overview
SubAid User Guide - OverviewSubAid User Guide - Overview
SubAid User Guide - Overview
 
DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...
DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...
DC Health Link New Mobile App 1.0 Brings Health Insurance Resources to Consum...
 
Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013
Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013
Amsterdam Titanium User Group - Cloud Services for Apps Nov 2013
 
Simple Unit Testing in Appcelerator Titanium Alloy
Simple Unit Testing in Appcelerator Titanium AlloySimple Unit Testing in Appcelerator Titanium Alloy
Simple Unit Testing in Appcelerator Titanium Alloy
 
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
 
modeveast 2012 Appcelerator Alloy & Cloud Services Presentation
modeveast 2012 Appcelerator Alloy & Cloud Services Presentationmodeveast 2012 Appcelerator Alloy & Cloud Services Presentation
modeveast 2012 Appcelerator Alloy & Cloud Services Presentation
 
Introduction to Module Development with Appcelerator Titanium
Introduction to Module Development with Appcelerator TitaniumIntroduction to Module Development with Appcelerator Titanium
Introduction to Module Development with Appcelerator Titanium
 
Clearly Innovative Inc Capabilities
Clearly Innovative Inc CapabilitiesClearly Innovative Inc Capabilities
Clearly Innovative Inc Capabilities
 
PaaS + Appcelerator = WIN
PaaS + Appcelerator = WINPaaS + Appcelerator = WIN
PaaS + Appcelerator = WIN
 
StackMob & Appcelerator Module Part One
StackMob & Appcelerator Module Part OneStackMob & Appcelerator Module Part One
StackMob & Appcelerator Module Part One
 
Modeveast Appcelerator Presentation
Modeveast Appcelerator PresentationModeveast Appcelerator Presentation
Modeveast Appcelerator Presentation
 

Recently uploaded

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Recently uploaded (20)

20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

Alloy Simple App Demonstration

  • 1. Appcelerator Titanium Alloy Simple App, Step-By-Step
  • 2. Getting Started • Follow Alloy download instruction – http://projects.appcelerator.com/alloy/docs/Alloy- bootstrap/index.html – https://github.com/appcelerator/alloy • Complete Project Source Code – https://github.com/aaronksaunders/SimpleAlloyPr esentationApp
  • 3. Create new project in TiStudio • Save Project • Open up terminal in project to add Alloy functionality
  • 4. Create Alloy Project • In the terminal window you just created, type alloy new . • Output should look something like this
  • 5. Modify index.js in controllers folder • Open app/controllers/index.js edit the file so it should look like this
  • 6. Create the Tabs for the TabGroup • Type alloy generate controller tabOneView • Open the file app/views/tabOneView.xml • Edit the file as follows
  • 7. Tab creation, more details • We set an ids on objects so they can be accessed from controllers • We have a tab with a nested window and the button in the window
  • 8. Tab creation, Tab View Two • Type alloy generate controller tabViewTwo • app/views/tabViewTwo.xml is very similar to tabViewOne.xml • We now have the tabs set up, lets create the tabGroup
  • 9. TabGroup Creation • Open app/views/index.xml • Add the TabGroup object and then nest the require statements using the controller file name for each tabView we created
  • 10. TabGroup Creation, explanation • We are using <Require src=“”/> so we can modularize our code more efficiently. • The functionality for each components is separated into the specified controller file
  • 11. Let’s See What We’ve Built • At this point you should be able to run you application and click through the two tabs and see the expected behavior QUESTIONS
  • 12. Navigating Between Windows • Open app/controllers/tabViewOne.js • Here we will add some action to what we have built to open a child window from app/views/tabViewOne.xml.
  • 13. Navigating Between Windows • The $.open_button.eventListener will be called when the user clicks on “one_button”. The “$.” notation allows you to access your objects by id
  • 14. Navigating Between Windows • Next we need to access the controller for the new window. • Alloy.getController(„tabViewOneChild‟); returns the controller object.
  • 15. Creating new controller object • Type, alloy generate controller tabViewOneChild, • In this controller at app/controllers/tabViewOneChild.js we only need to open the view. • We pass in the tab object as a parameter for the function • To expose methods outside of controller we use exports
  • 16. tabViewOneChild.js controller source • app/controllers/tabViewOneChild.js code should look like this when completed • We use the tab container to open the child window using the window id
  • 17. tabViewOneChild.xml view source • app/views/tabViewOneChild.xml code should look like this when completed • We simple window with label; the id is defined here so that the controller can access it.
  • 18. Back to tabViewOne controller • Here we call the exported function we created in app/controllers/tabViewOneChild.js to open the window. • We have access to any and all exported objects from the controller
  • 19. Final Directory Structure Should Look Like This
  • 20. App Should Look Like This • A
  • 21. More Information Aaron K. Saunders Clearly Innovative Inc info@clearlyinnovative.com @aaronksaunders http://blog.clearlyinnovative.com Project Source Code https://github.com/aaronksaunders/SimpleAlloyPre sentationApp