SlideShare a Scribd company logo
Titanium Alloy Tutorial
Titanium Tutorial
Your instructors
FokkeJason
Titan	
  
Certified	
  Instructor	
  
Self-­‐employed	
  
!
@JasonKneen
Titan	
  
Certified	
  Instructor	
  
Self-­‐employed	
  
!
@FokkeZB
Program
• What is Titanium?!
• Finding resources!
• Setting up!
• What is Alloy?!
• Build your first app!
• Using TiShadow!
• Step by step assignments!
• What’s next?

Recommended for you

An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
An Overview of Angular 4

Angular is an open source JavaScript framework that is used to build single page based web applications.A detailed overview of Angular 4, Its features, development environment and components.

angular developmentangular jsangular development services
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

You’re in love with Spring Boot, but you miss your old pal AngularJS? Don’t fear, Vue.js is here! Vue is very similar to AngularJS, but much more powerful, yet slim and light for PWAs. In this session, you’ll see how to build a Spring Boot API and secure it with Spring Security. You’ll also learn how to build a Vue.js PWA, all the while enjoying a bootiful hot-code-reload experience. Lots of live coding in this one! Blog: https://developer.okta.com/blog/2018/12/03/bootiful-spring-boot-java-vue-typescript GitHub: https://github.com/oktadeveloper/spring-boot-vue-example

spring-bootvue.jsvue-cli
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

Microservices are being deployed by many Java Hipsters. If you're working with a large team that needs different release cycles for product components, microservices can be a blessing. If you're working at your VW Restoration Shop and running its online store with your own software, having five services to manage and deploy can be a real pain. This presentation will show you how to use JHipster to create Angular + Spring Boot apps with a unified front-end. You will leave with the know-how to create your own excellent apps! Bonus: I'll show you how to use Ionic for JHipster to create native applications on mobile. It's pretty darn slick! Blog posts: * https://developer.okta.com/blog/2018/03/01/develop-microservices-jhipster-oauth * https://developer.okta.com/blog/2018/01/30/jhipster-ionic-with-oidc-authentication GitHub: https://github.com/oktadeveloper/okta-jhipster-microservices-oauth-example Download the JHipster Mini-Book v5.0 for free from InfoQ! https://www.infoq.com/minibooks/jhipster-mini-book-5 You can also watch my JHipster Microservices course on Pluralsight. https://www.pluralsight.com/courses/play-by-play-developing-microservices-mobile-apps-jhipster

spring-bootjavamicroservices
Titanium
… and what is Appcelerator?
Founded 

In 2007
Mountain View
London

Tokyo

Beijing
150

Employees
$50M
Mayfield,
Translink, Storm, 

Sierra, eBay, Red
Hat
GSMA Global
Mobile Awards
2012 Winner
Gartner 2013
Magic Quadrant
Highest placement in

both vision and

execution thereof.
About

Appcelerator
Titanium Alloy Tutorial
You’ve probably already used Titanium
600K!
Developers
230M!
Devices
70K!
Apps

Recommended for you

React JS
React JSReact JS
React JS

React is an open source JavaScript library for building user interfaces. It was created by Jordan Walke at Facebook in 2011 and is now maintained by Facebook, Instagram, and a community of developers. Major companies like Facebook, Netflix, Instagram, Khan Academy, and PayPal use React to build their interfaces. React uses a virtual DOM for faster rendering and makes components that manage their own state. It uses JSX syntax and a one-way data flow that is declarative and composable.

smgreactjsreact
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

To simplify development and deployment, you want everything in the same artifact, so you put your Angular app “inside” your Spring Boot app, right? But what if you could create your Angular app as a standalone app and make cross-origin requests to your API? A client app that can point to any server makes it easy to test your current client code against other servers (e.g. test, staging, production). This workshop shows how to develop with Java 8, Spring Boot, Angular 4, and TypeScript. You’ll learn how to create REST endpoints with Spring MVC, Spring Data REST, configure Spring Boot to allow CORS, and create an Angular app to display its data. If time allows we’ll cover microservices, security/authentication, continuous integration, and deployment to Cloud Foundry. Prerequisites: Java 8, Maven 3.5.0, Node.js 6.9.5, Chrome (higher versions ok) Install Angular CLI: npm install -g @angular/cli Optional: Yarn instead of npm Tutorial used for workshop: http://developer.okta.com/blog/2017/04/26/bootiful-development-with-spring-boot-and-angular

spring-ioangularspring-boot
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile

The document discusses how to build iPhone apps using Titanium Mobile which allows using JavaScript. It provides instructions on installing the iPhone SDK, Titanium Developer, requesting access, and setting up a new app by configuring tiapp.xml, adding HTML/JS/CSS files, and checking in the emulator. It also outlines the available APIs for building advanced apps.

appcelerator titanium
WappZapp
Native UI
Swift? We have Hyperloop!
OBJECTIVE-C
UITableView *myTableView = [[UITableView alloc] initWithFrame:CGRectZero
style:UITableViewStyleGrouped];
SWIFT
let myTableView: UITableView = UITableView(frame: CGRectZero, style: .Grouped)
HYPERLOOP
var myTableView = new UITableView({ frame: CGRectZero(), style: UITableView.Grouped });
TITANIUM
var myTableView = Ti.UI.createTableView({ style: Ti.UI.TableView.GROUPED });
Resources
Where to get your information?

Recommended for you

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

Introduction to Angular Material, Angular Router and Angular Http with RxJS library. Fake REST API set up using json-server. Demo app source code available at: https://github.com/jeuneingenieurisamm/LangInstitute

angular 4angular materialangular router
Say hello world with angular 5
Say hello world with angular 5Say hello world with angular 5
Say hello world with angular 5

Basics to start with Angular 5 from setting up to deploying the application in production mode. It will help you to start fast and compare Angular JS with Angular 5

angular 5angular jsjavascript
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

Are you a backend developer that’s being pushed into front end development? Are you frustrated with all JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We’ll explore the tools of the trade for frontend development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript. This presentation dives into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, I'll show how it can all be found and integrated through the fine and dandy JHipster project.

angular-clivue.jsnpm
Resources
• tidev.io/resources!
!
• appcelerator.com/developers!
• docs.appcelerator.com!
!
• ticonf.org/#amsterdam

June 28-29th, European conference!
• amsterdam-titanium.nl

July 2nd, every 1st Wednesday / month
• Repeat after me: “Titanium is Native”!
• Bookmark tidev.io/resources!
!
• Get a last-minute ticonf.org/#amsterdam
Assignment
Set-up
Getting Ready!
What makes Titanium?
• NodeJS CLI!
!
• SDK!
!
• Titanium Studio (optional)!
!
• Target platform SDKs

Recommended for you

Introduction to angular 4
Introduction to angular 4Introduction to angular 4
Introduction to angular 4

This document provides an introduction to building applications with Angular. It discusses installing Node.js and NPM, creating an Angular project, modules and components. The document walks through generating a new project, adding modules and components, and serving the application locally. It also briefly discusses Single Page Applications and the different types of modules in Angular.

merousoftangular
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2

I presented it at my company to give them a brief introduction of Angular 2, which were published officially recently. TypeScript is using in Angular 2 by default to extend a lot of benefits on writing best code.

javascriptangular2typescript
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2

With the progressive growing of Web Applications in the last few years, the new version of this super framework has some awesome new things. Change detection? Syntax sugar? ES6? Native APIs?

angular 2angular
• Sign up and download Studio!
• Install Studio and its dependencies!
• JAVA, NodeJS, CLI, SDK!
• Use the Platform Configuration Tool!
• Create the Classic / Default Project!
• Run in a simulator or device!
• Investigate Resources/app.js
Assignment
Alloy
Conventions vs Chaos
This might be confusing
Classic vs Alloy
CLASSIC: APP.JS
var win = Ti.UI.createWindow({backgroundColor:”white”});

win.open();
ALLOY: INDEX.XML
<Alloy><Window id=“win” /></Alloy>
ALLOY: INDEX.TSS
“#win”: { backgroundColor: ‘white’ }
ALLOY: INDEX.JS
$.win.open();

Recommended for you

Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI

This document provides an overview of the Angular CLI and how to get started with it. It discusses how to install the Angular CLI, generate an initial project using the ng new command, and an overview of the file structure and common commands like ng serve, ng test, and ng build. It also briefly touches on generating components, services, pipes and more using the ng generate command.

angularjsjavascriptangular
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...

This blog is about creation of a ‘Hello World’ Angular 2.0 Application integrated with Liferay DXP to fetch Liferay’s OOTB advantages. Such integration can enable quick development of secured application that provides boosted digital experience to the user.

applicationliferay dxpootb
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...

This Edureka "What's New in Angular 4" tutorial will help you to understand the changes that have been incorporated in Angular 4. In this tutorial, you will learn how to migrate an Angular 2 application to Angular 4. Below are the topics covered in this tutorial: 1) Angular Releases 2) Why not Angular 3? 3) It's Just Angular!!! 4) What's new in Angular 4? 5) Demo for Upgrading an Angular 2 app to Angular 4 Here is a structured training on Angular, check out the details: https://goo.gl/wdcjyr Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/15McX5

angular 4angular 4 tutorial for beginnerswhat's new in angular 4
Few more things
Widgets
Build	
  Configuration	
  File
Built-­‐ins
Moment.js
Backbone.js
Underscore.js
Sync	
  adapters
Themes
Require
Dynamic	
  Styling
Controller-­‐less	
  views
Data-­‐binding
Project	
  Configuration	
  File
Source	
  Maps
Open Source Widgets*!
* And Modules
http://gitt.io
• Create the Two-tabbed Alloy Application!
• Run in a simulator or device!
• Compare index.xml/tss/js with classic!
• Unhide the Resources folder!
!
!
!
!
!
!
• Compare app.js & iphone/alloy/controllers/index.js!
Assignment
Zero to App
What you will build today

Recommended for you

ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET

Troy Miles presented on ReactJS and related technologies. He discussed React which uses a virtual DOM and one-way data flow to build user interfaces. React uses JSX syntax to generate HTML and is component-based. React Router syncs the UI with the URL. Flux and Redux are patterns for managing data flow, with Redux being a predictable state container. Components are used to build reusable UI, and props are used to pass data between components.

flux.netjsx
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

Are you a backend developer that’s being pushed into front end development? Are you frustrated with all JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We’ll explore the tools of the trade for fronted development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript. We’ll dive into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, we’ll show how it can all be found and integrated through the fine and dandy JHipster project.

react.jswebpackangularjs
Titanium and its alloys
Titanium and its alloysTitanium and its alloys
Titanium and its alloys

Titanium is a lustrous transition metal with low density and high strength. It is produced commercially from titanium dioxide via the Kroll process. Titanium has excellent corrosion resistance and high strength at elevated temperatures, making it useful for applications in aerospace, marine, chemical and biomedical industries. It exists in two crystal structures, hexagonal close-packed at lower temperatures and body-centered cubic at higher temperatures, and can be alloyed to modify its properties for different applications.

tiDev RSS reader
Ingredients
• JSON feed: tidev.io/feed/json!
• Repo: github.com/FokkeZB/Tutorial
VS
• Import a clone of the repository!
• File > Import > Git > .. as New Project!


!
!
!
!
• Run the app!
• Copy @Slides/slides.pdf to your Desktop
Assignment
TiShadow
Rapid Application Development

Recommended for you

titanium and titanium alloys
 titanium and titanium alloys titanium and titanium alloys
titanium and titanium alloys

Titanium is named after the Titans, the powerful sons of the earth in Greek mythology. • Titanium is the forth abundant metal on earth crust (~ 0.86%) after aluminium, iron and magnesium. Titans homepage.mac.com Rutile (TiO2) mineral.galleries.com Ilmenite (FeTiO3) • Not found in its free, pure metal form in nature but as oxides, i.e., ilmenite (FeTiO3) and rutile (TiO2). • Found only in small amount in Thailand...

Amg amg titanium alloys & coatings presentation may 2013
Amg   amg titanium alloys & coatings presentation may 2013Amg   amg titanium alloys & coatings presentation may 2013
Amg amg titanium alloys & coatings presentation may 2013

This document provides an overview of AMG Titanium Alloys & Coatings, including its business units, products, markets served, locations, and strategic priorities. Key points include: - AMG serves the aerospace, energy, infrastructure, and specialty metals & chemicals industries. - Its main products include coating materials, master alloys, chemicals, and powders. - Facilities are located in Nuremberg and Freiberg, Germany. - Strategic priorities for 2013 include reducing expenses, improving working capital levels, and optimizing capital expenditures to increase returns.

Appcelerator droidcon15 TLV
Appcelerator droidcon15 TLVAppcelerator droidcon15 TLV
Appcelerator droidcon15 TLV

The document discusses a presentation given at Droidcon 2015 about the Titanium/Appcelerator application development platform. The presentation covered the benefits of Titanium, such as code reuse across platforms and leveraging existing web development skills. It demonstrated building a simple weather app in Titanium and discussed lessons learned around installation/IDEs, debugging, community support and when Titanium may be a good fit for a project.

mobile applicationtitaniumappcelerator
“If you're not using TiShadow
in your Titanium projects, you
might be wasting hours per
week on builds. Love it.”!
!
@kevinwhinnery
Compile process
• Compiling for Alloy!
• Compiling for Titanium!
• Compiling for Xcode/Android!
• Deploying to simulator/device!
• Starting the app!
• Running your code
Few more things
Express
Automated	
  testing
Rooms
Spies
Jasmine
REPL
Automatic	
  updates
Should.js
Browser	
  interface
Code	
  coverage
Server	
  hosting
Screengrabbing
Dynamic	
  localisation
Appify
• Install TiShadow!
!
!
• Run an app using CLI and TiShadow Express!
!
!
• Change backgroundColor to red and save
Assignment
~ $ [sudo] npm install -g tishadow
~/Tutorial $ ti build -p ios --shadow

Recommended for you

[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介

簡單介紹Appcelerator Titanium這套跨平台行動應用框架,包含其運作原理、特色與開發工具。

titaniumappceleratortitanium mobile
2013/05/19 - Titanium 入門實戰 3
2013/05/19 - Titanium 入門實戰 32013/05/19 - Titanium 入門實戰 3
2013/05/19 - Titanium 入門實戰 3
Titanium Appcelerator - Beginners
Titanium Appcelerator - BeginnersTitanium Appcelerator - Beginners
Titanium Appcelerator - Beginners

The document provides steps to set up the development environment for building mobile apps using Titanium, an open source framework. It discusses installing Java, Android SDK, Python, SCons, Git. It also explains concepts like windows, views and widgets in Titanium and provides code samples to create common UI elements like labels, text fields, buttons, pickers, images and tables.

crosstitaniumcoing
Window
Creating a Window
Views
• UI components are name-spaced Ti.UI.*!
• Most UI components extend Ti.UI.View!
• Create components: Ti.UI.create<View>()!
• In Alloy <View> ➤ Ti.UI.create<View>()!
• XML attributes and TSS properties are
merged and passed to the create-method.!
• TSS can select by tag, id or class.!
• JS can refer to $.<id>
Classic vs Alloy
CLASSIC: APP.JS
var win = Ti.UI.createWindow({backgroundColor:”white”});

win.open();
ALLOY: INDEX.XML
<Alloy><Window id=“win” /></Alloy>
ALLOY: INDEX.TSS
“#win”: { backgroundColor: ‘white’ }
ALLOY: INDEX.JS
$.win.open();
• Reset any changes:!
!
!
• Switch to window branch.!
!
!
• Run the app.!
• Add a Label saying Hello world.!
• Give the label a class.!
• Use the class to make the color red.
Assignment
~/Tutorial $ git reset —-hard
~/Tutorial $ git checkout window

Recommended for you

Using Titanium Mobile
Using Titanium MobileUsing Titanium Mobile
Using Titanium Mobile

Titanium Mobile allows building cross-platform mobile apps using JavaScript, HTML, and CSS. It simplifies mobile development by using existing web skills. Apps are built natively for iOS and Android and can access useful modules like Maps, Media, and Contacts. The document demonstrates creating a study app prototype in Titanium Mobile in under 24 hours with no prior mobile experience. It discusses the app structure, main components like windows, tabs and tables, and building out specific screens for disciplines, books, chapters, quizzes and feedback.

titaniumappframework
Titanium Mobile: flexibility vs. performance
Titanium Mobile: flexibility vs. performanceTitanium Mobile: flexibility vs. performance
Titanium Mobile: flexibility vs. performance

The document discusses the tradeoff between flexibility and performance in Appcelerator Titanium Mobile. Titanium offers rapid development, cross-platform deployment, and leveraging of JavaScript libraries, but questions whether the native user experience and execution speed can match truly native mobile apps. Some techniques for improving Titanium performance are presented, such as optimizing code through profiling, caching values, and using native modules when possible.

iosappceleratortitanium mobile
Project "Titanium"
Project "Titanium"Project "Titanium"
Project "Titanium"

The document summarizes information about a project called "Titanium" led by the Ukrainian Center of Commercialization and Technology Transfer. The innovative technology employs hydrogenated titanium powder to produce titanium alloys via a simplified pressing and sintering process. This reduces production costs by 5 times compared to traditional titanium production while maintaining high mechanical properties of the synthesized alloys. The project aims to enter the European, Russian and Kazakhstan markets between 2015-2016, targeting the aviation, automotive, and medical industries. It provides background on the team and details production stages and investment needs to reach profitability by 2018.

titantitaniummatall
ListView
Not the most easy component
ListViews
• Docs > Search: guide: ListViews!
• Docs > Search: UI.ListView!
!
• “Crossing the bridge” has a toll!
• ListView vs TableView!
• Alloy does most of the hard work
• Study the ListViews guide.!
• Compare the API doc classic & Alloy examples.!
• Reset & Switch to the listview branch.!
• Run the app.!
• Try the first API doc Alloy example JS & TSS.!
• Compare Resources/iphone/alloy/
controllers/index.js with the classic examples.!
• Remove the blank icons, align the text left,
reduce the sections to one and remove the
headerTitle of that section.
Assignment
NavigationWindow
Stacking Windows

Recommended for you

Extending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native ModulesExtending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native Modules

Presentation used for the speech I gave at the WHYMCA 2011 - Italian Mobile Developer Conference, held in Milan (IT) on may 20th 2011

whymcaappceleratormodule
Titanium ppt
Titanium pptTitanium ppt
Titanium ppt

Kelompok 3 mempresentasikan tentang unsur titanium. Titanium ditemukan pada tahun 1791 dan memiliki sifat fisika seperti keras, ringan, dan tahan korosi. Secara kimia, titanium bereaksi dengan oksigen membentuk oksida titanium dan dapat digunakan sebagai pigmen putih. Titanium memiliki berbagai penerapan seperti di industri pesawat terbang dan peralatan medis.

titanium logam titanium smakbo anorganik
Aerospace Supply Chain & Raw Material Outlook
Aerospace Supply Chain & Raw Material OutlookAerospace Supply Chain & Raw Material Outlook
Aerospace Supply Chain & Raw Material Outlook

Kevin Michaels, global managing director – aviation consulting & services at ICF International, presented at the 2nd Annual European Aerospace Raw Materials & Manufacturers Supply Chain Conference. The conference is designed to serve a full-range of participants in the dynamic global commercial and military aerospace markets. In this presentation, Mr. Michaels addresses Aerospace demand outlook and supply chain trends in the market. http://www.icfi.com/markets/aviation

 
by ICF
aerospace supply chain trendsadditive manufacturingadvanced aero engines
NavigationWindow
• Docs > Search: NavigationWindow!
• iOS only
Event Handling
• Docs > Search: Alloy XML Markup!
• HTML-like on[Event] attribute!
INDEX.XML
<Button onClick=“talkToMe” />
INDEX.JS
function talkToMe(e) {
alert(“hello world”);
}
Creating Controllers
~/Tutorial $ alloy generate controller detail
Using Controllers
• Use <Require> to create + add in XML!
• Use Alloy.createController in JS
INDEX.XML
<Window id=“win”>
<Require src=“detail” />
</Window>
INDEX.JS
var detailController = Alloy.createController(‘detail’);
var rootView = detailController.getView();
$.win.add(rootView);

Recommended for you

Titanium and titanium alloys/ /certified fixed orthodontic courses by India...
Titanium  and  titanium alloys/ /certified fixed orthodontic courses by India...Titanium  and  titanium alloys/ /certified fixed orthodontic courses by India...
Titanium and titanium alloys/ /certified fixed orthodontic courses by India...

Welcome to Indian Dental Academy The Indian Dental Academy is the Leader in continuing dental education , training dentists in all aspects of dentistry and offering a wide range of dental certified courses in different formats. Indian dental academy has a unique training program & curriculum that provides students with exceptional clinical skills and enabling them to return to their office with high level confidence and start treating patients State of the art comprehensive training-Faculty of world wide repute &Very affordable

dental coursescertified fixed orthodontic coursesdental crown & bridge courses
Extending Titanium with native iOS and Android modules
Extending Titanium with native iOS and Android modules Extending Titanium with native iOS and Android modules
Extending Titanium with native iOS and Android modules

This is the presentation used for the workshop on Titanium module development held at tiConf 2013 in Valencia

iosmoduleticonf
Titanium and its alloys ppt show
Titanium and its alloys ppt showTitanium and its alloys ppt show
Titanium and its alloys ppt show

Titanium and its alloys have a high strength-to-weight ratio. Titanium is light, strong, ductile when pure, and has a high melting point. It is the seventh most abundant metal. Commercially pure titanium has a density about 45% lighter than steel. Titanium is resistant to corrosion and has good performance in seawater environments. Around 50% of titanium produced is used as the alloy Ti-6Al-4V. Titanium exists in both a hexagonal alpha phase and body-centered cubic beta phase, and alloys can contain mixtures of these phases. Common applications of titanium alloys include jet engines, implants, and marine applications due to its corrosion resistance and strength.

• Study the NavigationWindow API docs.!
• Reset & Switch to the navwin branch and run it.!
• Wrap the Window in a NavigationWindow

For Android add module=“xp.ui” attribute.!
• Add an itemclick listener to the ListView.!
• Create a new detail controller and make it a
Window. Give both windows a title.!
• On click, create a detail controller instance and
open the window via NavigationWindow.!
• Study lib/xp.ui.js. What happends on Android?
Assignment
Collections
Models with brains
☁COLLECTIONSYNC	
  ADAPTERSTORAGE BINDINGS VIEWS
Ti.UI
⚡EVENTS
• Docs > Search: Alloy Models!
• Note: Older version (0.9.2)!
• In Titanium JS has no DOM!
!
• Instantiate a global collection:

Collection tag!
• Bind a collection to a loop-able view:

dataCollection attribute!
• Bind a model attribute to a child view property:

{<attribute>} value

Recommended for you

LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-PresentedLinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-Presented

70 million professionals use LinkedIn SlideShare to learn about any topic quickly and stand out.

visualpresentationsvideos
Getting started with Appcelerator Titanium
Getting started with Appcelerator TitaniumGetting started with Appcelerator Titanium
Getting started with Appcelerator Titanium

Techday7, Cross platform application development using Appcelerator Titanium event's Getting started with Appcelerator Titanium By Naga Harish M, Lead Developer of Anubavam Technologies

demosappcelerator titaniumgetting started
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium

It is just basic information and getting start with Titanium cross platform mobile application framework for future...

appcelerator titanium
• Study the Alloy Data Binding guide.!
• Reset & Switch to the collections branch and
run it.!
• Bind the feed collection to the ListSection so
that the list is populated showing the title and
excerpt of the items.!
• Study models/feed.js and lib/alloy/sync/
json.js. How do they work? And why that
second path?
Assignment
WebView
Titanium > Phonegap
WebView
• Docs > Search: guide: Communication!
• Docs > Search: UI.WebView!
!
• Display local, remote and “inline” HTML!
• Communicate via events and evalJS!
!
• Displaying formatted text native is complex!
• Displaying HTML in WebView is easy :)
• Study the WebView docs.!
• Reset & Switch to webview branch and run it.!
• Study index.xml to see how we expose the id
of the model via itemId.!
• Pass the model to the detail controller.!
• Add a WebView to the detail Window and use
the model to populate it.!
• Use the model to set the title of the detail
Window.
Assignment

Recommended for you

Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android

This document provides instructions for building a mobile app using Appcelerator Titanium. It begins by explaining the objectives of building an app and the assumptions about the intended audience's experience level. It then provides an overview of Titanium, describing it as a JavaScript SDK that allows building native apps for iOS, Android, and other platforms. The document proceeds to guide building an example "Jokes" app, demonstrating how to set up the project structure in XML, apply styles, and construct the user interface with elements like windows, views, and table views.

titaniumalloycross-platform
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android

This document provides instructions for building a mobile app using Appcelerator Titanium. It begins by explaining the objectives of building an app and the assumptions about the intended audience's experience level. It then introduces Titanium and its capabilities. The document walks through creating a sample "Jokes" app, including setting up the Titanium development environment, configuring a new project, previewing it on simulators, and building out the app's structure and styling using XML and TSS files. The goal is to demonstrate the basic process and tools for designing, developing and running a simple Titanium-based mobile app.

titaniumioscross-platform
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro

- Nic Jansma is a developer who previously worked at Microsoft and recently founded Wolverine Digital to develop high-performance websites and apps. - He used Appcelerator Titanium to build cross-platform mobile apps, including a LEGO Minifigure catalog app, allowing him to write code once and deploy to both iOS and Android. - While Titanium allowed cross-platform development, Nic still encountered platform-specific issues and the need to occasionally write platform-specific code, but found Titanium a good choice overall for his needs.

appcelerator titanium
SeachBar
Filtering our feed
SearchBar
• Docs > Search: ListViews > Search Text and View!
• Docs > Search: UI.ListView (last examples)!
• Docs > Search: UI.SearchBar!
!
!
!
• ListView.searchView works together with
ListView.searchText & ListItem.searchAbleText!
!
• Study the last two ListView examples.!
• Reset & switch to searchbar and run it.!
• Add a SearchBar (also for Android) to the list
to search on the excerpt.!
• If you have time left, try to search on the
content, after using the dataTransform
attribute to remove HTML tags from it.



HINT: Google is your friend.
Assignment
Artwork
Density Hell

Recommended for you

Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...

This is a presentation I gave to the Southwestern Ontario STC chapter on API documentation on Feb 2, 2015. For more details, see my blog at http://idratherbewriting.com. You can listen to the recorded presentation here: http://youtu.be/I8rGe2w1sAo.

api documentation
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014

This document provides a summary of a presentation about making cross-platform mobile apps quickly using open source tools. It discusses using PhoneGap to create apps using HTML, CSS, and JavaScript that are cross-platform. It provides examples of building simple apps demonstrating concepts like accessing device data, using maps, touch events, and animation. The examples are meant to illustrate how to create mobile apps that work across Android and iOS without using their native languages.

javaiosandroid
Intro to appcelerator
Intro to appceleratorIntro to appcelerator
Intro to appcelerator

Titanium Mobile allows developers to build native mobile apps using JavaScript. It works by compiling JavaScript code into the native platform's code (Java for Android, Objective-C for iOS). This allows apps built with Titanium to have access to native device APIs and feel and function like a true native app while using a common JavaScript codebase. Titanium Studio is the IDE used for Titanium development and provides features like code completion, debugging, and building for release. Projects have a standard structure with resources, modules, and code files organized into platform-specific folders. Internationalization is supported by creating language-specific string files.

titaniumcross platformios
NON-­‐RETINA RETINA	
  (2X)
.75x	
  	
  	
  	
  1x	
  	
  	
  	
  	
  	
  	
  1.5x	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  2x	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  3x	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  4x
Icons & Splashes
Platform & Density specific folders
assets/iphone/images/image@2x.png
assets/images/image.png
assets/android/images/res-mdpi/image.png
assets/android/images/res-xhdpi/image.png
assets/android/images/res-xhdpi/some.file
!
platform/android/res/drawable-xhdpi/some.file
platform/android/res/drawable-nl-port-xhdpi/some.file
assets/some_dir/some.file
assets/android/some_dir/some.file
assets/iphone/some_dir/some.file
BEST	
  
PRACTICE
Android 9-Patch

Recommended for you

Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks

This document provides 14 lessons and hacks for building native and mobile web applications using JavaScript. It discusses issues like architecting for multiple platforms and environments, structuring the codebase, detecting the platform, improving performance of animations through CSS transitions, handling garbage collection of images and HTML, supporting touch events, adding sound, and leveraging tools like PhoneGap Build. The tips aim to help developers apply their web skills to build applications that run on both desktop and mobile devices using a single codebase.

Riding the Edge with Ember.js
Riding the Edge with Ember.jsRiding the Edge with Ember.js
Riding the Edge with Ember.js

Ember.js brings some new and interesting conventions to the table for designing single page applications. In this talk, I'll be covering the key pieces of Ember, how it compares to other frameworks, and the backstory of why it was created.

javascriptember.js
Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014

The document discusses strategies for cross-platform mobile app development. It recommends separating costs by function and platform, helping designers understand platform differences, testing on multiple real devices, creating flexible layouts, using Alloy for code organization, optimizing apps for performance, and delivering apps over-the-air to users. The document emphasizes testing apps thoroughly and improving the design process through communication with designers.

cross-platformtitaniumandroid
No more handwork
~ $ [sudo] npm install -g ticons
• Study the Icons and Splash Screens guide!
• Install the ticons CLI or visit the site.!
!
!
• Reset & Switch to artwork branch and run it.!
• Generate icons and splashes using the CLI or
site on the logo.png image.!
• For splashes, find out how to prevent the logo
from being cropped.
Assignment
~ $ [sudo] npm install -g ticons
Company Confidential
You are a TiDev now!
What’s next?
Join the community

Recommended for you

Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit

Node Webkit allows you to create desktop applications using HTML, CSS, JavaScript and Node.js modules. It combines the Chromium browser and Node.js framework. This allows building cross-platform desktop apps that can include Node functionality and access system resources. Examples are given of apps built with Node Webkit. Key aspects covered include how it integrates Chromium and Node.js, building a basic app, window rendering options, menus, tray apps, and the developer tools. Benefits for a medical conference app replacement are discussed.

node.js
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly

Gil Irizarry presents techniques for building lightweight mobile apps quickly using open source tools like PhoneGap, jQuery Mobile, and Android SDK. The presentation includes 5 code examples that demonstrate getting data from online RSS feeds and the device, building interactive UIs, and using local storage. PhoneGap allows developing cross-platform mobile apps using HTML, CSS, and JavaScript that can access device capabilities like contacts.

htmlioshtml5
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)

A 2.5 hour workshop at SXSW 2014 to teach Angular.js. Code and examples from the workshop can be found here: http://bit.ly/angularsx

angular.jsweb developmentjavascript
Join the community
• Follow @appcelerator & @TiDevIO.!
• Follow @FokkeZB & @JasonKneen.!
• Find a local Titanium Meetup on DevMap.!
• Go to a tiConf on your continent.!
• Find help on the Q&A.!
• Find widgets & modules on gitTio.!
• Share your libraries & widgets on GitHub.
Get certified
training.appcelerator.com/get-­‐certified	
  
Thank you!
• Reset & Switch to master branch and run it.!
• Fine-tune the app! For example:!
• Replace the list title by the tiDev logo.!
• Add the date and category to the list view.!
• Add a button to open a blog in the browser.!
• Add a button for the user to share a blog.!
• Be creative!
Bonus Assignment

Recommended for you

Froyo to kit kat two years developing & maintaining deliradio
Froyo to kit kat   two years developing & maintaining deliradioFroyo to kit kat   two years developing & maintaining deliradio
Froyo to kit kat two years developing & maintaining deliradio

This document discusses the development of the DeliRadio Android app from 2012 to 2014. It went through several versions of the Android OS, from Froyo to KitKat. It describes the tools and libraries used, including migrating from Eclipse to Android Studio and using Gradle. It also covers the app's graphics, user interface, and quality assurance testing process.

Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript

JavaScript has a well deserved reputation of be hard to write and debug. Put it on a mobile device and the problems increase exponentially. Mobile browsers lack all of the niceties that developers rely on to do testing and debugging including the most fundamental tool, the debugger. But it is possible to write quality JavaScript on a mobile device without relying on blind luck. In this talk I will show all of the tools and tricks that I learned in my 12 month development of the new KBB.com mobile site.

unit testingdebuggingjavascript
David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?

The document discusses Anko, a library that aims to simplify Android development using Kotlin. It consists of multiple parts that provide helpers for common tasks like building layouts, SQLite queries, and coroutines. Anko uses a domain-specific language to allow building layouts in a type-safe way without XML, which can improve performance compared to traditional layout inflation. The document provides an example comparing the speed of building a layout with Anko versus XML, finding Anko to be up to 4 times faster in some cases. It also demonstrates creating a sample layout using both traditional Android code and Anko's DSL approach.

mdevtalkkotlinanko
Titanium Alloy Tutorial

More Related Content

What's hot

What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
Troy Miles
 
Alloy backbone
Alloy backboneAlloy backbone
Alloy backbone
Braden Powers
 
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
Matt Raible
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
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
Matt 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 2018
Matt Raible
 
React JS
React JSReact JS
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
Matt Raible
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
Axway Appcelerator
 
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
Nader Debbabi
 
Say hello world with angular 5
Say hello world with angular 5Say hello world with angular 5
Say hello world with angular 5
Abhishek 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 2017
Matt Raible
 
Introduction to angular 4
Introduction to angular 4Introduction to angular 4
Introduction to angular 4
Marwane El Azami
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Trung Vo Tuan
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dhyego Fernando
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
Jim Lynch
 
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
Azilen Technologies Pvt. Ltd.
 
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!
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
Troy Miles
 
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
Matt Raible
 

What's hot (20)

What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Alloy backbone
Alloy backboneAlloy backbone
Alloy backbone
 
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
 
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 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
 
React JS
React JSReact JS
React JS
 
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
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
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
 
Say hello world with angular 5
Say hello world with angular 5Say hello world with angular 5
Say hello world with angular 5
 
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
 
Introduction to angular 4
Introduction to angular 4Introduction to angular 4
Introduction to angular 4
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
 
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
How to create an angular 2.0 application in liferay dxp to fetch the ootb adv...
 
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...
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
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
 

Viewers also liked

Titanium and its alloys
Titanium and its alloysTitanium and its alloys
Titanium and its alloys
Kedir Beyene
 
titanium and titanium alloys
 titanium and titanium alloys titanium and titanium alloys
titanium and titanium alloys
Ali Zamel
 
Amg amg titanium alloys & coatings presentation may 2013
Amg   amg titanium alloys & coatings presentation may 2013Amg   amg titanium alloys & coatings presentation may 2013
Amg amg titanium alloys & coatings presentation may 2013
jdiluzio
 
Appcelerator droidcon15 TLV
Appcelerator droidcon15 TLVAppcelerator droidcon15 TLV
Appcelerator droidcon15 TLV
YishaiBrown
 
[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介
Justin Lee
 
2013/05/19 - Titanium 入門實戰 3
2013/05/19 - Titanium 入門實戰 32013/05/19 - Titanium 入門實戰 3
2013/05/19 - Titanium 入門實戰 3
樂平 大俠
 
Titanium Appcelerator - Beginners
Titanium Appcelerator - BeginnersTitanium Appcelerator - Beginners
Titanium Appcelerator - Beginners
Ambarish Hazarnis
 
Using Titanium Mobile
Using Titanium MobileUsing Titanium Mobile
Using Titanium Mobile
johndbritton
 
Titanium Mobile: flexibility vs. performance
Titanium Mobile: flexibility vs. performanceTitanium Mobile: flexibility vs. performance
Titanium Mobile: flexibility vs. performance
omorandi
 
Project "Titanium"
Project "Titanium"Project "Titanium"
Project "Titanium"
Ivan Bozhko
 
Extending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native ModulesExtending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native Modules
omorandi
 
Titanium ppt
Titanium pptTitanium ppt
Titanium ppt
Aditya Dwiaji
 
Aerospace Supply Chain & Raw Material Outlook
Aerospace Supply Chain & Raw Material OutlookAerospace Supply Chain & Raw Material Outlook
Aerospace Supply Chain & Raw Material Outlook
ICF
 
Titanium and titanium alloys/ /certified fixed orthodontic courses by India...
Titanium  and  titanium alloys/ /certified fixed orthodontic courses by India...Titanium  and  titanium alloys/ /certified fixed orthodontic courses by India...
Titanium and titanium alloys/ /certified fixed orthodontic courses by India...
Indian dental academy
 
Extending Titanium with native iOS and Android modules
Extending Titanium with native iOS and Android modules Extending Titanium with native iOS and Android modules
Extending Titanium with native iOS and Android modules
omorandi
 
Titanium and its alloys ppt show
Titanium and its alloys ppt showTitanium and its alloys ppt show
Titanium and its alloys ppt show
aamitchak
 
LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-PresentedLinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-Presented
SlideShare
 

Viewers also liked (17)

Titanium and its alloys
Titanium and its alloysTitanium and its alloys
Titanium and its alloys
 
titanium and titanium alloys
 titanium and titanium alloys titanium and titanium alloys
titanium and titanium alloys
 
Amg amg titanium alloys & coatings presentation may 2013
Amg   amg titanium alloys & coatings presentation may 2013Amg   amg titanium alloys & coatings presentation may 2013
Amg amg titanium alloys & coatings presentation may 2013
 
Appcelerator droidcon15 TLV
Appcelerator droidcon15 TLVAppcelerator droidcon15 TLV
Appcelerator droidcon15 TLV
 
[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介
 
2013/05/19 - Titanium 入門實戰 3
2013/05/19 - Titanium 入門實戰 32013/05/19 - Titanium 入門實戰 3
2013/05/19 - Titanium 入門實戰 3
 
Titanium Appcelerator - Beginners
Titanium Appcelerator - BeginnersTitanium Appcelerator - Beginners
Titanium Appcelerator - Beginners
 
Using Titanium Mobile
Using Titanium MobileUsing Titanium Mobile
Using Titanium Mobile
 
Titanium Mobile: flexibility vs. performance
Titanium Mobile: flexibility vs. performanceTitanium Mobile: flexibility vs. performance
Titanium Mobile: flexibility vs. performance
 
Project "Titanium"
Project "Titanium"Project "Titanium"
Project "Titanium"
 
Extending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native ModulesExtending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native Modules
 
Titanium ppt
Titanium pptTitanium ppt
Titanium ppt
 
Aerospace Supply Chain & Raw Material Outlook
Aerospace Supply Chain & Raw Material OutlookAerospace Supply Chain & Raw Material Outlook
Aerospace Supply Chain & Raw Material Outlook
 
Titanium and titanium alloys/ /certified fixed orthodontic courses by India...
Titanium  and  titanium alloys/ /certified fixed orthodontic courses by India...Titanium  and  titanium alloys/ /certified fixed orthodontic courses by India...
Titanium and titanium alloys/ /certified fixed orthodontic courses by India...
 
Extending Titanium with native iOS and Android modules
Extending Titanium with native iOS and Android modules Extending Titanium with native iOS and Android modules
Extending Titanium with native iOS and Android modules
 
Titanium and its alloys ppt show
Titanium and its alloys ppt showTitanium and its alloys ppt show
Titanium and its alloys ppt show
 
LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-PresentedLinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-Presented
 

Similar to Titanium Alloy Tutorial

Getting started with Appcelerator Titanium
Getting started with Appcelerator TitaniumGetting started with Appcelerator Titanium
Getting started with Appcelerator Titanium
Techday7
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium
Naga Harish M
 
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
Ricardo Alcocer
 
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
ralcocer
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
Nicholas Jansma
 
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Tom Johnson
 
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Gil Irizarry
 
Intro to appcelerator
Intro to appceleratorIntro to appcelerator
Intro to appcelerator
Mohab El-Shishtawy
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
DevelopmentArc LLC
 
Riding the Edge with Ember.js
Riding the Edge with Ember.jsRiding the Edge with Ember.js
Riding the Edge with Ember.js
aortbals
 
Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014
Jason Kneen
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
Paul Jensen
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly
Gil Irizarry
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)
kbekessy
 
Froyo to kit kat two years developing & maintaining deliradio
Froyo to kit kat   two years developing & maintaining deliradioFroyo to kit kat   two years developing & maintaining deliradio
Froyo to kit kat two years developing & maintaining deliradio
Droidcon Berlin
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
Troy Miles
 
David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?
mdevtalk
 
An introduction to Titanium
An introduction to TitaniumAn introduction to Titanium
An introduction to Titanium
Graham Weldon
 
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
Rich Helton
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
Marco Breveglieri
 

Similar to Titanium Alloy Tutorial (20)

Getting started with Appcelerator Titanium
Getting started with Appcelerator TitaniumGetting started with Appcelerator Titanium
Getting started with Appcelerator Titanium
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium
 
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
 
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
 
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
 
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
Make Cross-platform Mobile Apps Quickly - SIGGRAPH 2014
 
Intro to appcelerator
Intro to appceleratorIntro to appcelerator
Intro to appcelerator
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Riding the Edge with Ember.js
Riding the Edge with Ember.jsRiding the Edge with Ember.js
Riding the Edge with Ember.js
 
Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014Adventures in cross platform ConnectJS / TiConnect 2014
Adventures in cross platform ConnectJS / TiConnect 2014
 
Desktop apps with node webkit
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
 
Make Mobile Apps Quickly
Make Mobile Apps QuicklyMake Mobile Apps Quickly
Make Mobile Apps Quickly
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)
 
Froyo to kit kat two years developing & maintaining deliradio
Froyo to kit kat   two years developing & maintaining deliradioFroyo to kit kat   two years developing & maintaining deliradio
Froyo to kit kat two years developing & maintaining deliradio
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
 
David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?David Bilík: Anko – modern way to build your layouts?
David Bilík: Anko – modern way to build your layouts?
 
An introduction to Titanium
An introduction to TitaniumAn introduction to Titanium
An introduction to Titanium
 
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1LEARNING	 iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
LEARNING  iPAD STORYBOARDS IN OBJ-­‐C LESSON 1
 
Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016Web Development with Delphi and React - ITDevCon 2016
Web Development with Delphi and React - ITDevCon 2016
 

More from Fokke Zandbergen

Building the (Support) Robot at Zapier
Building the (Support) Robot at ZapierBuilding the (Support) Robot at Zapier
Building the (Support) Robot at Zapier
Fokke Zandbergen
 
Lessons from helping developers integrate 1,000 APIs with Zapier
Lessons from helping developers integrate 1,000 APIs with ZapierLessons from helping developers integrate 1,000 APIs with Zapier
Lessons from helping developers integrate 1,000 APIs with Zapier
Fokke Zandbergen
 
We are all Remote Advocates
We are all Remote AdvocatesWe are all Remote Advocates
We are all Remote Advocates
Fokke Zandbergen
 
Cross-platform Native App ontwikkeling met Appcelerator
Cross-platform Native App ontwikkeling met AppceleratorCross-platform Native App ontwikkeling met Appcelerator
Cross-platform Native App ontwikkeling met Appcelerator
Fokke Zandbergen
 
Building Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with TitaniumBuilding Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with Titanium
Fokke Zandbergen
 
Getting Started with Titanium & Alloy
Getting Started with Titanium & AlloyGetting Started with Titanium & Alloy
Getting Started with Titanium & Alloy
Fokke Zandbergen
 
Cross-Platform Native Apps with JavaScript
Cross-Platform Native Apps with JavaScriptCross-Platform Native Apps with JavaScript
Cross-Platform Native Apps with JavaScript
Fokke Zandbergen
 
Titanium: Develop Native Mobile Apps with JavaScript
Titanium: Develop Native Mobile Apps with JavaScriptTitanium: Develop Native Mobile Apps with JavaScript
Titanium: Develop Native Mobile Apps with JavaScript
Fokke Zandbergen
 
Appcelerator OSS & Platform
Appcelerator OSS & PlatformAppcelerator OSS & Platform
Appcelerator OSS & Platform
Fokke Zandbergen
 
Platform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch EventPlatform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch Event
Fokke Zandbergen
 
Appcelerator Alloy MVC
Appcelerator Alloy MVCAppcelerator Alloy MVC
Appcelerator Alloy MVC
Fokke Zandbergen
 
The Ultimate Titanium CLI Toolchain
The Ultimate Titanium CLI ToolchainThe Ultimate Titanium CLI Toolchain
The Ultimate Titanium CLI Toolchain
Fokke Zandbergen
 
Getting ready for iOS 8 & iPhone 6
Getting ready for iOS 8 & iPhone 6Getting ready for iOS 8 & iPhone 6
Getting ready for iOS 8 & iPhone 6
Fokke Zandbergen
 
Titanium Community Toolkit Showcase
Titanium Community Toolkit ShowcaseTitanium Community Toolkit Showcase
Titanium Community Toolkit Showcase
Fokke Zandbergen
 
5 app alternatieven #AIB2013
5 app alternatieven #AIB20135 app alternatieven #AIB2013
5 app alternatieven #AIB2013
Fokke Zandbergen
 
Apps voor kerken #Kerk2013
Apps voor kerken #Kerk2013Apps voor kerken #Kerk2013
Apps voor kerken #Kerk2013
Fokke Zandbergen
 
TiNy #TiAppCamp
TiNy #TiAppCampTiNy #TiAppCamp
TiNy #TiAppCamp
Fokke Zandbergen
 
Internetmarketing
InternetmarketingInternetmarketing
Internetmarketing
Fokke Zandbergen
 
Alloy Tips & Tricks #TiLon
Alloy Tips & Tricks #TiLonAlloy Tips & Tricks #TiLon
Alloy Tips & Tricks #TiLon
Fokke Zandbergen
 
Alloy #DMC13
Alloy #DMC13Alloy #DMC13
Alloy #DMC13
Fokke Zandbergen
 

More from Fokke Zandbergen (20)

Building the (Support) Robot at Zapier
Building the (Support) Robot at ZapierBuilding the (Support) Robot at Zapier
Building the (Support) Robot at Zapier
 
Lessons from helping developers integrate 1,000 APIs with Zapier
Lessons from helping developers integrate 1,000 APIs with ZapierLessons from helping developers integrate 1,000 APIs with Zapier
Lessons from helping developers integrate 1,000 APIs with Zapier
 
We are all Remote Advocates
We are all Remote AdvocatesWe are all Remote Advocates
We are all Remote Advocates
 
Cross-platform Native App ontwikkeling met Appcelerator
Cross-platform Native App ontwikkeling met AppceleratorCross-platform Native App ontwikkeling met Appcelerator
Cross-platform Native App ontwikkeling met Appcelerator
 
Building Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with TitaniumBuilding Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with Titanium
 
Getting Started with Titanium & Alloy
Getting Started with Titanium & AlloyGetting Started with Titanium & Alloy
Getting Started with Titanium & Alloy
 
Cross-Platform Native Apps with JavaScript
Cross-Platform Native Apps with JavaScriptCross-Platform Native Apps with JavaScript
Cross-Platform Native Apps with JavaScript
 
Titanium: Develop Native Mobile Apps with JavaScript
Titanium: Develop Native Mobile Apps with JavaScriptTitanium: Develop Native Mobile Apps with JavaScript
Titanium: Develop Native Mobile Apps with JavaScript
 
Appcelerator OSS & Platform
Appcelerator OSS & PlatformAppcelerator OSS & Platform
Appcelerator OSS & Platform
 
Platform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch EventPlatform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch Event
 
Appcelerator Alloy MVC
Appcelerator Alloy MVCAppcelerator Alloy MVC
Appcelerator Alloy MVC
 
The Ultimate Titanium CLI Toolchain
The Ultimate Titanium CLI ToolchainThe Ultimate Titanium CLI Toolchain
The Ultimate Titanium CLI Toolchain
 
Getting ready for iOS 8 & iPhone 6
Getting ready for iOS 8 & iPhone 6Getting ready for iOS 8 & iPhone 6
Getting ready for iOS 8 & iPhone 6
 
Titanium Community Toolkit Showcase
Titanium Community Toolkit ShowcaseTitanium Community Toolkit Showcase
Titanium Community Toolkit Showcase
 
5 app alternatieven #AIB2013
5 app alternatieven #AIB20135 app alternatieven #AIB2013
5 app alternatieven #AIB2013
 
Apps voor kerken #Kerk2013
Apps voor kerken #Kerk2013Apps voor kerken #Kerk2013
Apps voor kerken #Kerk2013
 
TiNy #TiAppCamp
TiNy #TiAppCampTiNy #TiAppCamp
TiNy #TiAppCamp
 
Internetmarketing
InternetmarketingInternetmarketing
Internetmarketing
 
Alloy Tips & Tricks #TiLon
Alloy Tips & Tricks #TiLonAlloy Tips & Tricks #TiLon
Alloy Tips & Tricks #TiLon
 
Alloy #DMC13
Alloy #DMC13Alloy #DMC13
Alloy #DMC13
 

Titanium Alloy Tutorial

  • 3. Your instructors FokkeJason Titan   Certified  Instructor   Self-­‐employed   ! @JasonKneen Titan   Certified  Instructor   Self-­‐employed   ! @FokkeZB
  • 4. Program • What is Titanium?! • Finding resources! • Setting up! • What is Alloy?! • Build your first app! • Using TiShadow! • Step by step assignments! • What’s next?
  • 5. Titanium … and what is Appcelerator?
  • 6. Founded In 2007 Mountain View London Tokyo Beijing 150 Employees $50M Mayfield, Translink, Storm, Sierra, eBay, Red Hat GSMA Global Mobile Awards 2012 Winner Gartner 2013 Magic Quadrant Highest placement in both vision and execution thereof. About Appcelerator
  • 8. You’ve probably already used Titanium 600K! Developers 230M! Devices 70K! Apps
  • 11. Swift? We have Hyperloop! OBJECTIVE-C UITableView *myTableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped]; SWIFT let myTableView: UITableView = UITableView(frame: CGRectZero, style: .Grouped) HYPERLOOP var myTableView = new UITableView({ frame: CGRectZero(), style: UITableView.Grouped }); TITANIUM var myTableView = Ti.UI.createTableView({ style: Ti.UI.TableView.GROUPED });
  • 12. Resources Where to get your information?
  • 13. Resources • tidev.io/resources! ! • appcelerator.com/developers! • docs.appcelerator.com! ! • ticonf.org/#amsterdam
 June 28-29th, European conference! • amsterdam-titanium.nl
 July 2nd, every 1st Wednesday / month
  • 14. • Repeat after me: “Titanium is Native”! • Bookmark tidev.io/resources! ! • Get a last-minute ticonf.org/#amsterdam Assignment
  • 16. What makes Titanium? • NodeJS CLI! ! • SDK! ! • Titanium Studio (optional)! ! • Target platform SDKs
  • 17. • Sign up and download Studio! • Install Studio and its dependencies! • JAVA, NodeJS, CLI, SDK! • Use the Platform Configuration Tool! • Create the Classic / Default Project! • Run in a simulator or device! • Investigate Resources/app.js Assignment
  • 19. This might be confusing
  • 20. Classic vs Alloy CLASSIC: APP.JS var win = Ti.UI.createWindow({backgroundColor:”white”});
 win.open(); ALLOY: INDEX.XML <Alloy><Window id=“win” /></Alloy> ALLOY: INDEX.TSS “#win”: { backgroundColor: ‘white’ } ALLOY: INDEX.JS $.win.open();
  • 21. Few more things Widgets Build  Configuration  File Built-­‐ins Moment.js Backbone.js Underscore.js Sync  adapters Themes Require Dynamic  Styling Controller-­‐less  views Data-­‐binding Project  Configuration  File Source  Maps
  • 22. Open Source Widgets*! * And Modules http://gitt.io
  • 23. • Create the Two-tabbed Alloy Application! • Run in a simulator or device! • Compare index.xml/tss/js with classic! • Unhide the Resources folder! ! ! ! ! ! ! • Compare app.js & iphone/alloy/controllers/index.js! Assignment
  • 24. Zero to App What you will build today
  • 26. Ingredients • JSON feed: tidev.io/feed/json! • Repo: github.com/FokkeZB/Tutorial VS
  • 27. • Import a clone of the repository! • File > Import > Git > .. as New Project! 
 ! ! ! ! • Run the app! • Copy @Slides/slides.pdf to your Desktop Assignment
  • 29. “If you're not using TiShadow in your Titanium projects, you might be wasting hours per week on builds. Love it.”! ! @kevinwhinnery
  • 30. Compile process • Compiling for Alloy! • Compiling for Titanium! • Compiling for Xcode/Android! • Deploying to simulator/device! • Starting the app! • Running your code
  • 31. Few more things Express Automated  testing Rooms Spies Jasmine REPL Automatic  updates Should.js Browser  interface Code  coverage Server  hosting Screengrabbing Dynamic  localisation Appify
  • 32. • Install TiShadow! ! ! • Run an app using CLI and TiShadow Express! ! ! • Change backgroundColor to red and save Assignment ~ $ [sudo] npm install -g tishadow ~/Tutorial $ ti build -p ios --shadow
  • 34. Views • UI components are name-spaced Ti.UI.*! • Most UI components extend Ti.UI.View! • Create components: Ti.UI.create<View>()! • In Alloy <View> ➤ Ti.UI.create<View>()! • XML attributes and TSS properties are merged and passed to the create-method.! • TSS can select by tag, id or class.! • JS can refer to $.<id>
  • 35. Classic vs Alloy CLASSIC: APP.JS var win = Ti.UI.createWindow({backgroundColor:”white”});
 win.open(); ALLOY: INDEX.XML <Alloy><Window id=“win” /></Alloy> ALLOY: INDEX.TSS “#win”: { backgroundColor: ‘white’ } ALLOY: INDEX.JS $.win.open();
  • 36. • Reset any changes:! ! ! • Switch to window branch.! ! ! • Run the app.! • Add a Label saying Hello world.! • Give the label a class.! • Use the class to make the color red. Assignment ~/Tutorial $ git reset —-hard ~/Tutorial $ git checkout window
  • 37. ListView Not the most easy component
  • 38. ListViews • Docs > Search: guide: ListViews! • Docs > Search: UI.ListView! ! • “Crossing the bridge” has a toll! • ListView vs TableView! • Alloy does most of the hard work
  • 39. • Study the ListViews guide.! • Compare the API doc classic & Alloy examples.! • Reset & Switch to the listview branch.! • Run the app.! • Try the first API doc Alloy example JS & TSS.! • Compare Resources/iphone/alloy/ controllers/index.js with the classic examples.! • Remove the blank icons, align the text left, reduce the sections to one and remove the headerTitle of that section. Assignment
  • 41. NavigationWindow • Docs > Search: NavigationWindow! • iOS only
  • 42. Event Handling • Docs > Search: Alloy XML Markup! • HTML-like on[Event] attribute! INDEX.XML <Button onClick=“talkToMe” /> INDEX.JS function talkToMe(e) { alert(“hello world”); }
  • 43. Creating Controllers ~/Tutorial $ alloy generate controller detail
  • 44. Using Controllers • Use <Require> to create + add in XML! • Use Alloy.createController in JS INDEX.XML <Window id=“win”> <Require src=“detail” /> </Window> INDEX.JS var detailController = Alloy.createController(‘detail’); var rootView = detailController.getView(); $.win.add(rootView);
  • 45. • Study the NavigationWindow API docs.! • Reset & Switch to the navwin branch and run it.! • Wrap the Window in a NavigationWindow
 For Android add module=“xp.ui” attribute.! • Add an itemclick listener to the ListView.! • Create a new detail controller and make it a Window. Give both windows a title.! • On click, create a detail controller instance and open the window via NavigationWindow.! • Study lib/xp.ui.js. What happends on Android? Assignment
  • 48. • Docs > Search: Alloy Models! • Note: Older version (0.9.2)! • In Titanium JS has no DOM! ! • Instantiate a global collection:
 Collection tag! • Bind a collection to a loop-able view:
 dataCollection attribute! • Bind a model attribute to a child view property:
 {<attribute>} value
  • 49. • Study the Alloy Data Binding guide.! • Reset & Switch to the collections branch and run it.! • Bind the feed collection to the ListSection so that the list is populated showing the title and excerpt of the items.! • Study models/feed.js and lib/alloy/sync/ json.js. How do they work? And why that second path? Assignment
  • 51. WebView • Docs > Search: guide: Communication! • Docs > Search: UI.WebView! ! • Display local, remote and “inline” HTML! • Communicate via events and evalJS! ! • Displaying formatted text native is complex! • Displaying HTML in WebView is easy :)
  • 52. • Study the WebView docs.! • Reset & Switch to webview branch and run it.! • Study index.xml to see how we expose the id of the model via itemId.! • Pass the model to the detail controller.! • Add a WebView to the detail Window and use the model to populate it.! • Use the model to set the title of the detail Window. Assignment
  • 54. SearchBar • Docs > Search: ListViews > Search Text and View! • Docs > Search: UI.ListView (last examples)! • Docs > Search: UI.SearchBar! ! ! ! • ListView.searchView works together with ListView.searchText & ListItem.searchAbleText! !
  • 55. • Study the last two ListView examples.! • Reset & switch to searchbar and run it.! • Add a SearchBar (also for Android) to the list to search on the excerpt.! • If you have time left, try to search on the content, after using the dataTransform attribute to remove HTML tags from it.
 
 HINT: Google is your friend. Assignment
  • 57. NON-­‐RETINA RETINA  (2X) .75x        1x              1.5x                        2x                                            3x                                                              4x
  • 59. Platform & Density specific folders assets/iphone/images/image@2x.png assets/images/image.png assets/android/images/res-mdpi/image.png assets/android/images/res-xhdpi/image.png assets/android/images/res-xhdpi/some.file ! platform/android/res/drawable-xhdpi/some.file platform/android/res/drawable-nl-port-xhdpi/some.file assets/some_dir/some.file assets/android/some_dir/some.file assets/iphone/some_dir/some.file BEST   PRACTICE
  • 61. No more handwork ~ $ [sudo] npm install -g ticons
  • 62. • Study the Icons and Splash Screens guide! • Install the ticons CLI or visit the site.! ! ! • Reset & Switch to artwork branch and run it.! • Generate icons and splashes using the CLI or site on the logo.png image.! • For splashes, find out how to prevent the logo from being cropped. Assignment ~ $ [sudo] npm install -g ticons
  • 65. Join the community • Follow @appcelerator & @TiDevIO.! • Follow @FokkeZB & @JasonKneen.! • Find a local Titanium Meetup on DevMap.! • Go to a tiConf on your continent.! • Find help on the Q&A.! • Find widgets & modules on gitTio.! • Share your libraries & widgets on GitHub.
  • 68. • Reset & Switch to master branch and run it.! • Fine-tune the app! For example:! • Replace the list title by the tiDev logo.! • Add the date and category to the list view.! • Add a button to open a blog in the browser.! • Add a button for the user to share a blog.! • Be creative! Bonus Assignment