0
iPhone/iPad Dev Con 2010


     San Diego, CA ~ September 28
About Me


           Jeff Haynie
           @jhaynie
           http://blog.jeffhaynie.us
           http://github.com/jh...
Massive Business Problem offers Significant Opportunity
Appcelerator




 We empower web developers by giving them
 the ability to create native iOS applications
 using JavaScrip...
Appcelerator by the numbers




  72,000                      Developers

    4,750                     Apps in Stores

  ...
Not write once, run crappy everywhere




 Appcelerator isn’t a write once, run
 everywhere. This isn’t possible (if you w...
Appcelerator is native iOS




 Exposed native capabilities


 Optimization of your JS code


 Generation of native bindin...
Appcelerator is native




✓ You still need a Mac and OSX
✓ You still need iOS SDK
✓ You still need provisioning profiles ...
Appcelerator Basic




 APIs are self-declarative


 Titanium.Media
 Titanium.UI
 Titanium.Network
Appcelerator Basics




 We use a factory pattern:


 var media=Ti.UI.createVideoPlayer();
 window.add(media);
 media.play...
Properties




 var m = Ti.Media.createVideoPlayer
 ( {
         url: “foo.mpg”
 });


 m.url = “bar.mpg”;
Garbage Collection




 We’ll handle retain/release cycles for you
 based on your JS references.


 Some objects allow you...
UI Framework




 Titanium exposes native UI through model/
 view paradigm.


 Windows
 Views
 Widgets
Window / View / Widget relationships




Windows are Views
Widgets are Views


            Views are hierarchical
        ...
Layout




 Relative positioning / CSS-like


 top, left, right, bottom

 width: “50%”, height: “200”

 layout: “vertical”...
JSS




Like CSS, adapted for Titanium
#foo {
      title: “Hello world”;
      width: 200px;
      height:40px;
}
var but...
Common Properties




A lot of the common CSS properties you’d
expect:


borderWidth
borderColor
backgroundImage
fontFamily
Simple Example




var win = Ti.UI.createWindow();
var b = Ti.UI.createButton({
      title: “hello world”,
      width:20...
Make the button go “quack”




 b.addEventListener(‘click’,function(
 ){
     var m = Ti.Media.createSound({
           ur...
Simple Animations




 Grow the width over 3 seconds


 view.animate({
         duration:3000,
         width:200
 });
Complex 2D and 3D Animations




 Using matrix transforms


 var
 t=Ti.UI.create2DMatrix().rotate(20).
 scale(1.5);
 var a...
Major API sets




 Media - audio, video
 Network - networking (sockets, web services)
 UI - user interface
 Database - da...
Web Services




 var xhr = Ti.Network.createHTTPClient();
 xhr.onload = function() {
      Ti.API.info('in utf-8 onload f...
Web Services with Complex Data (Image from Photo Gallery)




 Ti.Media.openPhotoGallery({
       success:function(event)
...
iOS4 Backgrounding (new in upcoming 1.5)




 Ti.App.registerBackgroundService({
         url:'bg.js'
 });
iOS4 Local Notifications (new in upcoming 1.5)




 Ti.App.scheduleLocalNotification({
    alertBody:"Are you sure?",
    ...
What can you not do with Titanium?




 It’s not great for 3D immersive games. Plenty
 of casual / 2D games being built.

...
More new stuff in upcoming 1.5




 Localizations


 L(“my_string”)
 Ti.Locale.getString(“my_string”)


 Due out in October
How about iPad?




 Split Views
 Popovers
 Nav Controllers (also in iPhone)
iPad SplitView example




 var sv =
 Ti.UI.iPad.createSplitWindow({
    masterView:masterNav,
    detailView:detailNav,
 ...
Can I hack on Appcelerator?




 Code is on github.com/appcelerator


 Licensed under Apache Public License (v2)


 develo...
Other Appcelerator Products


                              Titanium Analytics
                              Web-based pro...
Upcoming SlideShare
Loading in...5
×

Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA

4,221

Published on

Jeff Haynie's Appcelerator presentation at the iPhone/iPad Dev Con held in San Diego, CA on September 28, 2010.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,221
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
80
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
































  • Transcript of "Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA"

    1. 1. iPhone/iPad Dev Con 2010 San Diego, CA ~ September 28
    2. 2. About Me Jeff Haynie @jhaynie http://blog.jeffhaynie.us http://github.com/jhaynie http://slideshare.net/jhaynie Serial Entrepreneur & Silicon Valley geek Objective-C hacker Co-founder and CEO, Appcelerator All around good guy
    3. 3. Massive Business Problem offers Significant Opportunity
    4. 4. Appcelerator We empower web developers by giving them the ability to create native iOS applications using JavaScript. Speed, Skills, Infrastructure, Processes, Tools, Libraries, Reusability...
    5. 5. Appcelerator by the numbers 72,000 Developers 4,750 Apps in Stores 1,100 New Apps/Mo
    6. 6. Not write once, run crappy everywhere Appcelerator isn’t a write once, run everywhere. This isn’t possible (if you want create application experiences for each device). Not a replacement for terrible UI design. Not a replacement for great developers. JavaScript FTW!
    7. 7. Appcelerator is native iOS Exposed native capabilities Optimization of your JS code Generation of native binding code (Obj-C) Compile your application using iOS SDK.
    8. 8. Appcelerator is native ✓ You still need a Mac and OSX ✓ You still need iOS SDK ✓ You still need provisioning profiles (ugh!) ✓ You still need Apple You still need a good app design and ... common sense. If your app is a bad idea or has bad design, Apple will still reject it.
    9. 9. Appcelerator Basic APIs are self-declarative Titanium.Media Titanium.UI Titanium.Network
    10. 10. Appcelerator Basics We use a factory pattern: var media=Ti.UI.createVideoPlayer(); window.add(media); media.play();
    11. 11. Properties var m = Ti.Media.createVideoPlayer ( { url: “foo.mpg” }); m.url = “bar.mpg”;
    12. 12. Garbage Collection We’ll handle retain/release cycles for you based on your JS references. Some objects allow you to help us, help you. media.destroy();
    13. 13. UI Framework Titanium exposes native UI through model/ view paradigm. Windows Views Widgets
    14. 14. Window / View / Widget relationships Windows are Views Widgets are Views Views are hierarchical Views contain views Windows can be opened or closed Windows can points to a local url
    15. 15. Layout Relative positioning / CSS-like top, left, right, bottom width: “50%”, height: “200” layout: “vertical”, “horizontal” zIndex: 199
    16. 16. JSS Like CSS, adapted for Titanium #foo { title: “Hello world”; width: 200px; height:40px; } var button = Ti.UI.createButton({ id:”foo” });
    17. 17. Common Properties A lot of the common CSS properties you’d expect: borderWidth borderColor backgroundImage fontFamily
    18. 18. Simple Example var win = Ti.UI.createWindow(); var b = Ti.UI.createButton({ title: “hello world”, width:200, height: 80 }); win.add(b); win.open();
    19. 19. Make the button go “quack” b.addEventListener(‘click’,function( ){ var m = Ti.Media.createSound({ url:”cricket.wav” }); m.play(); });
    20. 20. Simple Animations Grow the width over 3 seconds view.animate({ duration:3000, width:200 });
    21. 21. Complex 2D and 3D Animations Using matrix transforms var t=Ti.UI.create2DMatrix().rotate(20). scale(1.5); var a=Ti.UI.createAnimation(); a.transform = t; a.duration = 3000; view.animate(a);
    22. 22. Major API sets Media - audio, video Network - networking (sockets, web services) UI - user interface Database - database Geolocation - location services Utils - common utilities like md5, base64 XML - native XML Map - native maps
    23. 23. Web Services var xhr = Ti.Network.createHTTPClient(); xhr.onload = function() { Ti.API.info('in utf-8 onload for POST'); }; xhr.open("POST","http://api.appcelerator.net/ p/v1/echo"); xhr.send({"a":"€ ", "b":"aöbäcüd"});
    24. 24. Web Services with Complex Data (Image from Photo Gallery) Ti.Media.openPhotoGallery({ success:function(event) { xhr.send({media:event.media}); } });
    25. 25. iOS4 Backgrounding (new in upcoming 1.5) Ti.App.registerBackgroundService({ url:'bg.js' });
    26. 26. iOS4 Local Notifications (new in upcoming 1.5) Ti.App.scheduleLocalNotification({ alertBody:"Are you sure?", alertAction:"Launch!", userInfo:{"hello":"world"}, sound:"pop.caf", date:new Date(new Date().getTime() + 3000) });
    27. 27. What can you not do with Titanium? It’s not great for 3D immersive games. Plenty of casual / 2D games being built. For anything else, we have the Module SDK. Package your Titanium extension and distribute it. Great for extending and third-party APIs.
    28. 28. More new stuff in upcoming 1.5 Localizations L(“my_string”) Ti.Locale.getString(“my_string”) Due out in October
    29. 29. How about iPad? Split Views Popovers Nav Controllers (also in iPhone)
    30. 30. iPad SplitView example var sv = Ti.UI.iPad.createSplitWindow({ masterView:masterNav, detailView:detailNav, }); sv.open();
    31. 31. Can I hack on Appcelerator? Code is on github.com/appcelerator Licensed under Apache Public License (v2) developer.appcelerator.com
    32. 32. Other Appcelerator Products Titanium Analytics Web-based product that enables companies to understand their application usage, scenarios and users. Titanium+Geo Web-based product that enables geo- spatial analytics as well as integration into first-party and third-party data sources. Enables companies to apply location context to their analysis and forecasting.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×