20111130 titanium mobile

  • 4,026 views
Uploaded on

はじめようTitanium+JavaScriptでスマホアプリ開発カフェVol.1の発表資料

はじめようTitanium+JavaScriptでスマホアプリ開発カフェVol.1の発表資料

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,026
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
25
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. http://www.flickr.com/photos/vaucher/5763894833/11 11 28
  • 2. 11 11 28
  • 3. 11 11 28
  • 4. http://www.flickr.com/photos/ panman_/4507107513/11 11 28
  • 5. // comment var sampleCode = ‘Hello’; alert(sampleCode);11 11 28
  • 6. JavaScript Objective-C Java TitaniumMobile API ※ JavaScript Objective-C Java Titanium iOS Android OS Mobile Native iOS app Native Android app11 11 28
  • 7. Objective-C Titanium.UI.View Java Titanium.UI.View11 11 28
  • 8. ✤ ✤11 11 28
  • 9. ✤ ✤11 11 28
  • 10. http://www.flickr.com/photos/alanant/4483533096/11 11 28
  • 11. ✤ ✤ ✤ ✤11 11 28
  • 12. ✤ ✤ ✤ ✤ ✤11 11 28
  • 13. ✤ ✤ ✤ ✤11 11 28
  • 14. 11 11 28
  • 15. 11 11 28
  • 16. ✤ ✤11 11 28
  • 17. // this sets the background color of the master UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor(#000); // create tab group var tabGroup = Titanium.UI.createTabGroup(); // // create base UI tab and root window // var win1 = Titanium.UI.createWindow({ title:Tab 1, backgroundColor:#fff }); var tab1 = Titanium.UI.createTab({ icon:KS_nav_views.png, title:Tab 1, window:win1 }); var label1 = Titanium.UI.createLabel({ ! color:#999, ! text:I am Window 1, ! font:{fontSize:20,fontFamily:Helvetica Neue}, ! textAlign:center, ! width:auto }); win1.add(label1);11 11 28
  • 18. 11 11 28
  • 19. // create controls tab and root window // var win2 = Titanium.UI.createWindow({ title:Tab 2, backgroundColor:#fff }); var tab2 = Titanium.UI.createTab({ icon:KS_nav_ui.png, title:Tab 2, window:win2 }); var label2 = Titanium.UI.createLabel({ ! color:#999, ! text:I am Window 2, ! font:{fontSize:20,fontFamily:Helvetica Neue}, ! textAlign:center, ! width:auto }); win2.add(label2); // // add tabs // tabGroup.addTab(tab1); tabGroup.addTab(tab2); // open tab group tabGroup.open();11 11 28
  • 20. // this sets the background color of the master UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor(#000); // create tab group var tabGroup = Titanium.UI.createTabGroup(); // // create base UI tab and root window // var win1 = Titanium.UI.createWindow({ title:Tab 1, backgroundColor:#fff }); var tab1 = Titanium.UI.createTab({ icon:KS_nav_views.png, title:Tab 1, window:win1 }); var label1 = Titanium.UI.createLabel({ ! color:#999, ! text:I am Window 1, ! font:{fontSize:20,fontFamily:Helvetica Neue}, ! textAlign:center, ! width:auto }); win1.add(label1);11 11 28
  • 21. // this sets the background color of the master UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor(#000); // create tab group var tabGroup = Titanium.UI.createTabGroup(); // // create base UI tab and root window // var win1 = Titanium.UI.createWindow({ title:Tab 1, backgroundColor:#fff }); var tab1 = Titanium.UI.createTab({ icon:KS_nav_views.png, title:Tab 1, window:win1 }); var webView = Titanium.UI.createWebView({ ! url:http://www.google.co.jp }); win1.add(webView);11 11 28
  • 22. ✤ ✤ ✤ ✤ ✤11 11 28
  • 23. var win1 = Titanium.UI.createWindow({ title:Tab 1, backgroundColor:#fff }); var tab1 = Titanium.UI.createTab({ icon:KS_nav_views.png, title:Tab 1, window:win1 }); var webView = Titanium.UI.createWebView({ }); webView.html = <html> + <head> + <title> HTML </title> + </head> + <body> + <h1> HTML </h1> + <p> </p> + </body> + </html>; win1.add(webView);11 11 28
  • 24. Titanium.UI.setBackgroundColor(#FFF); urlBox.addEventListener(blur,function(e){ var tabGroup = Titanium.UI.createTabGroup(); actInd.show(); var win1 = Titanium.UI.createWindow({ webView.url = e.value; title: , webView.reload(); backgroundColor:#fff }); }); win1.add(urlBox); var tab1 = Titanium.UI.createTab({ icon:KS_nav_views.png, // title:Tab 1, var stopBtn = Ti.UI.createButton({ window:win1 title:stop, }); top:10, // URL left:220, var urlBox = Titanium.UI.createTextField({ width:60, color:#336699, height:30, top:10, systemButton:Titanium.UI.iPhone.SystemButton.STOP left:10, }); width:200, stopBtn.addEventListener(click,function(e){ height:30, webView.stopLoading(); hintText:enter url, actInd.hide(); keyboardType:Titanium.UI.KEYBOARD_URL, }); returnKeyType:Titanium.UI.RETURNKEY_DEFAULT, win1.add(stopBtn); autocapitalization: false, borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED });11 11 28
  • 25. // HTML WebView // var webView = Titanium.UI.createWebView({ ActivityIndicator top:50, var actInd = Titanium.UI.createActivityIndicator({ left:0, top:50, width:auto, height:55, height:auto width:auto, }); opacity:0.5, webView.addEventListener(beforeload,function(e){ color:#FFFFFF, actInd.show(); backgroundColor:#000, }); borderRadius:5, webView.addEventListener(load,function(e){ borderColor:#000, actInd.hide(); font:{fontFamily:Helvetica Neue, fontSize:13}, }); message: Loading..., win1.add(webView); style:Titanium.UI.iPhone.ActivityIndicatorStyle.PLA IN }); win1.add(actInd); tabGroup.addTab(tab1); tabGroup.open();11 11 28
  • 26. ✤ ✤ ✤ ✤11 11 28
  • 27. ✤ ✤ ✤ ✤ ✤ ✤11 11 28