Permalink
Browse files

Mobile web updates for KitchenSink.

  • Loading branch information...
1 parent cf3479f commit 486943cc66c8fabda6546382ff3b6aa23aea6249 @cb1kenobi cb1kenobi committed Apr 17, 2012
Showing with 390 additions and 131 deletions.
  1. +1 −0 .gitignore
  2. +6 −3 Resources/app.js
  3. BIN Resources/mobileweb/apple_startup_images/Default-Landscape.jpg
  4. BIN Resources/mobileweb/apple_startup_images/Default-Landscape.png
  5. BIN Resources/mobileweb/apple_startup_images/Default-Portrait.jpg
  6. BIN Resources/mobileweb/apple_startup_images/Default-Portrait.png
  7. BIN Resources/mobileweb/apple_startup_images/Default.jpg
  8. BIN Resources/mobileweb/apple_startup_images/Default.png
  9. +8 −0 Resources/mobileweb/apple_startup_images/README
  10. +49 −0 Resources/mobileweb/splash/README
  11. BIN Resources/mobileweb/splash/appc.png
  12. +60 −0 Resources/mobileweb/splash/splash.css
  13. 0 Resources/mobileweb/splash/splash.html
  14. BIN Resources/mobileweb/splash/titanium.png
  15. +23 −29 Resources/ui/common/ApplicationTabGroup.js
  16. +4 −6 Resources/ui/common/BaseUIWindow.js
  17. +5 −3 Resources/ui/common/MashupsWindow.js
  18. +15 −6 Resources/ui/common/PhoneWindow.js
  19. +11 −6 Resources/ui/common/PlatformWindow.js
  20. +2 −0 Resources/ui/common/baseui/view_event_propagation.js
  21. +6 −6 Resources/ui/common/baseui/views.js
  22. +4 −0 Resources/ui/common/controls/button.js
  23. +41 −38 Resources/ui/common/phone/geolocation.js
  24. +21 −0 Resources/ui/common/phone/shake.js
  25. +3 −1 Resources/ui/common/platform/app_data.js
  26. +42 −0 Resources/ui/common/platform/custom_properties.js
  27. +23 −0 Resources/ui/common/platform/custom_properties_2.js
  28. +5 −3 Resources/ui/common/platform/logging.js
  29. +19 −17 Resources/ui/common/platform/platform.js
  30. +1 −1 Resources/ui/common/platform/set_timeout.js
  31. +12 −9 Resources/ui/common/platform/xhr.js
  32. +1 −2 Resources/ui/handheld/ios/baseui/scroll_views_dragging.js
  33. +1 −1 Resources/ui/handheld/ios/phone/music_query.js
  34. +27 −0 Resources/ui/mobileweb/ApplicationWindow.js
View
@@ -3,3 +3,4 @@ build/*
build.log
.fastdev.lock
.DS_Store
+._*
View
@@ -1,7 +1,7 @@
/*
* A tabbed application, consisting of multiple stacks of windows associated with tabs in a tab group.
* A starting point for tab-based application with multiple top-level windows.
- * Requires Titanium Mobile SDK 1.8.0+.
+ * Requires Titanium Mobile SDK 2.0.0+.
*
* In app.js, we generally take care of a few things:
* - Bootstrap the application with any data we need
@@ -11,8 +11,8 @@
*/
//bootstrap and check dependencies
-if (Ti.version < 1.8 ) {
- alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
+if (Ti.version < 2.0 ) {
+ alert('Sorry - this application template requires Titanium Mobile SDK 2.0 or later');
}
// This is a single context application with mutliple windows in a stack
@@ -37,6 +37,9 @@ if (Ti.version < 1.8 ) {
win.open();
}
}
+ else if (osname === 'mobileweb') {
+ Window = require('ui/mobileweb/ApplicationWindow');
+ }
else {
// iPhone makes use of the platform-specific navigation controller,
// all other platforms follow a similar UI pattern
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,8 @@
+These startup images are used by iPhone and iPad apps that are installed to the
+home screen. These images are displayed before the splash screen is displayed.
+
+If you want to create a new splash screen, it is recommended that you start by
+modifying the files in the adjacent "splash" folder, then take screenshots of
+device, crop, and save into this directory. This is the best way to avoid visual
+artifacts when the app transitions from the Apple startup images to the splash
+screen assets.
@@ -0,0 +1,49 @@
+This folder contains assets to make the startup splash screen assets. Splash
+screens are made up of HTML and CSS. This allows you the flexibility to
+customize your splash screen to fit a variety of screen sizes and orientations.
+
+
+splash.html
+-----------
+Contains an HTML fragment that is inserted into a div tag with an id="splash".
+You can choose to leave this file empty. You can put <script> tags in this file,
+though it is not recommended.
+
+Currently, the HTML code is NOT minified before being inserted into the page.
+
+
+splash.css
+----------
+Contains the styles used to control the display of the HTML. In addition to
+styling the default splash div, you can style other HTML elements.
+
+One advantage of using CSS background images in your splash screen is the images
+will be inlined in the CSS using data: URIs. It's best to keep the size of your
+images as small as possible. You can use PNG, JPG, or GIF images. You should use
+an image optimization tool to remove unnecessary meta data from the images such
+as smushit.com or crushpng.
+
+It is recommended that you develop your splash screen on an iPhone-sized screen
+so that you make your splash screen look good on small screens.
+
+Additionally, it is recommended that you use CSS media queries to tweak the
+layout for various screen sizes.
+
+The CSS code is minified when your mobile web application is packaged.
+
+
+Apple Startup Images
+--------------------
+After crafting your startup screen, it is recommended that you:
+
+1) Create a sample application with an empty app.js
+2) Run your sample app in both the iphone and ipad simulator
+3) Take screenshots of your splash screen in both portrait and landscape
+4) Crop the screenshots to remove the status bar from the top
+5) Save the images in the Resources/mobileweb/apple_startup_images directory
+
+These steps are the best way to avoid visual artifacts when the app transitions
+from the Apple startup images to the splash screen assets.
+
+It is recommended you save these images in the JPG format so that these images
+download faster.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,60 @@
+#splash {
+ background: #9a0707;
+ background: -moz-linear-gradient(top,#9a0707 0%,#5c0404 100%);
+ background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#9a0707),color-stop(100%,#5c0404));
+ background: -webkit-linear-gradient(top,#9a0707 0%,#5c0404 100%);
+ background: -o-linear-gradient(top,#9a0707 0%,#5c0404 100%);
+ background: -ms-linear-gradient(top,#9a0707 0%,#5c0404 100%);
+ background: linear-gradient(top,#9a0707 0%,#5c0404 100%);
+ -webkit-box-shadow: inset 0px 0px 15px 6px rgba(0,0,0,0.5);
+ -moz-box-shadow: inset 0px 0px 15px 6px rgba(0,0,0,0.5);
+ box-shadow: inset 0px 0px 15px 6px rgba(0,0,0,0.5);
+ bottom: 0;
+ min-height: 300px;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+}
+
+#splash:before {
+ background: url(appc.png) no-repeat 0 0;
+ content: "";
+ height: 150px;
+ left: 50%;
+ margin-left: -85px;
+ position: absolute;
+ top: 22%;
+ width: 170px;
+}
+
+#splash:after {
+ background: url(titanium.png) no-repeat 0 0;
+ content: "";
+ height: 48px;
+ left: 50%;
+ margin-left: -105px;
+ position: absolute;
+ bottom: 15%;
+ width: 200px;
+}
+
+@media all and (max-height: 320px) {
+ #splash:before {
+ top: 15%;
+ }
+
+ #splash:after {
+ bottom: 12%;
+ }
+}
+
+@media all and (min-height: 699px) {
+ #splash:before {
+ top: 25%;
+ }
+
+ #splash:after {
+ bottom: 25%;
+ }
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -22,45 +22,39 @@ function ApplicationTabGroup() {
window: baseUIWin
});
baseUIWin.containingTab = baseUITab;
+ self.addTab(baseUITab);
var controlsTab = Ti.UI.createTab({
title: L('controls_win_title'),
icon: '/images/tabs/KS_nav_views.png',
window: controlsWin
});
controlsWin.containingTab = controlsTab;
-
- self.addTab(baseUITab);
self.addTab(controlsTab);
+ var phoneTab = Ti.UI.createTab({
+ title:L('phone_win_title'),
+ icon:'/images/tabs/KS_nav_phone.png',
+ window:phoneWin
+ });
+ phoneWin.containingTab = phoneTab;
+ self.addTab(phoneTab);
+
+ var platformTab = Ti.UI.createTab({
+ title:L('platform_win_title'),
+ icon:'/images/tabs/KS_nav_platform.png',
+ window:platformWin
+ });
+ platformWin.containingTab = platformTab;
+ self.addTab(platformTab);
- if (Ti.Platform.osname !== 'mobileweb') {
-
- var phoneTab = Ti.UI.createTab({
- title:L('phone_win_title'),
- icon:'/images/tabs/KS_nav_phone.png',
- window:phoneWin
- });
- phoneWin.containingTab = phoneTab;
-
- var platformTab = Ti.UI.createTab({
- title:L('platform_win_title'),
- icon:'/images/tabs/KS_nav_platform.png',
- window:platformWin
- });
- platformWin.containingTab = platformTab;
-
- self.addTab(phoneTab);
- self.addTab(platformTab);
-
- var mashupsTab = Ti.UI.createTab({
- title:L('mashups_win_title'),
- icon:'/images/tabs/KS_nav_mashup.png',
- window:mashupsWin
- });
- mashupsWin.containingTab = mashupsTab;
- self.addTab(mashupsTab);
- }
+ var mashupsTab = Ti.UI.createTab({
+ title:L('mashups_win_title'),
+ icon:'/images/tabs/KS_nav_mashup.png',
+ window:mashupsWin
+ });
+ mashupsWin.containingTab = mashupsTab;
+ self.addTab(mashupsTab);
self.addEventListener('open',function() {
Titanium.UI.setBackgroundColor('#fff');
@@ -4,9 +4,11 @@ function BaseUIWindow(title) {
backgroundColor:'white'
});
+ var isMobileWeb = Titanium.Platform.osname == 'mobileweb';
+
// create table view data object
var data = [
- {title:'Tab Groups', hasChild:true, test:'ui/common/baseui/tab_groups'},
+ {title:'Tab Groups', hasChild:!isMobileWeb, test:'ui/common/baseui/tab_groups', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"},
{title:'Window Properties', hasChild:true, test:'ui/common/baseui/window_properties'},
{title:'Window Layout', hasChild:true, test:'ui/common/baseui/window_layout'},
{title:'Window (Standalone)', hasChild:true, test:'ui/common/baseui/window_standalone'},
@@ -17,10 +19,6 @@ function BaseUIWindow(title) {
{title:'Horizontal Layout', hasChild:true, test:'ui/common/baseui/horizontal_layout'}
];
- if (Ti.Platform.osname == 'mobileweb') {
- data.shift();
- }
-
// add iphone specific tests
if (Titanium.Platform.name == 'iPhone OS')
{
@@ -60,7 +58,7 @@ function BaseUIWindow(title) {
{
if (e.rowData.test)
{
- var ExampleWindow = require(e.rowData.test);
+ var ExampleWindow = require(e.rowData.test),
win = new ExampleWindow({title:e.rowData.title,containingTab:self.containingTab,tabGroup:self.tabGroup});
if (Ti.Platform.name == "android") {
@@ -3,11 +3,13 @@ function MashupsWindow(title) {
title:title,
backgroundColor:'white'
});
+
+ var isMobileWeb = Titanium.Platform.osname == 'mobileweb';
// create table view data object
var data = [
- {title:'Twitter', hasChild:true, test:'ui/common/mashups/twitter', title_image:'/images/twitter_logo_header.png'},
- {title:'Foursquare', hasChild:true, test:'ui/common/mashups/foursquare', title_image:'/images/light-poweredby-foursquare.png'},
+ {title:'Twitter', hasChild:!isMobileWeb, test:'ui/common/mashups/twitter', title_image:'/images/twitter_logo_header.png', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"},
+ {title:'Foursquare', hasChild:!isMobileWeb, test:'ui/common/mashups/foursquare', title_image:'/images/light-poweredby-foursquare.png', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"},
{title:'Facebook', hasChild:true, test:'ui/common/mashups/facebook'},
{title:'Dojo Mobile', hasChild:true, test:'ui/common/mashups/dojomobile'},
{title:'Sencha Touch', hasChild:true, test:'ui/common/mashups/senchatouch'},
@@ -20,7 +22,7 @@ function MashupsWindow(title) {
data.push({title:'RSS', hasChild:true, test:'ui/handheld/ios/mashups/rss', barColor:'#b40000'});
}
- data.push({title:'SOAP', hasChild:true, test:'ui/common/mashups/soap'});
+ data.push({title:'SOAP', hasChild:!isMobileWeb, test:'ui/common/mashups/soap', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"});
// create table view
for (var i = 0; i < data.length; i++ ) { data[i].color = '#000'; data[i].font = {fontWeight:'bold'} };
@@ -4,28 +4,37 @@ function PhoneWindow(title) {
backgroundColor:'white'
});
+ var isMobileWeb = Titanium.Platform.osname == 'mobileweb';
+
// create table view data object
var data = [
{title:'Play Movie', hasChild:true, test:'ui/common/phone/movie'},
{title:'Vibrate', hasChild:true, test:'ui/common/phone/vibrate'},
{title:'Geolocation', hasChild:true, test:'ui/common/phone/geolocation'},
- {title:'Accelerometer', hasChild:true, test:'ui/common/phone/accelerometer'},
- {title:'Sound', hasChild:true, test:'ui/common/phone/sound'},
- {title:'Photo Gallery', hasChild:true, test:'ui/common/phone/photo_gallery'}
+ {title:'Accelerometer', hasChild:true, test:'ui/common/phone/accelerometer'}
];
+ data.push({title:'Sound', hasChild:!isMobileWeb, test:'ui/common/phone/sound', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"});
+ data.push({title:'Photo Gallery', hasChild:!isMobileWeb, test:'ui/common/phone/photo_gallery', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"});
+
data.push({title:'Orientation', hasChild:true, test:'ui/common/phone/orientation'});
data.push({title:'Contacts', hasChild:true, test:'ui/common/phone/contacts'});
- if (Titanium.Platform.osname!='ipad') {
- data.push({title:'Camera', hasChild:true, test:'ui/common/phone/camera'});
+ if (Titanium.Platform.osname !== 'ipad') {
+ data.push({title:'Camera', hasChild:!isMobileWeb, test:'ui/common/phone/camera', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"});
}
// add iphone specific tests
if (Titanium.Platform.name == 'iPhone OS') {
data.push({title:'Screenshot', hasChild:true, test:'ui/handheld/ios/phone/screenshot'});
data.push({title:'Save to Gallery', hasChild:true, test:'ui/handheld/ios/phone/photo_gallery_save'});
- data.push({title:'Shake', hasChild:true, test:'ui/handheld/ios/phone/shake'});
+ }
+
+ if (Titanium.Platform.name !== 'android') {
+ data.push({title:'Shake', hasChild:true, test:'ui/common/phone/shake'});
+ }
+
+ if (Titanium.Platform.name == 'iPhone OS') {
if (Titanium.Platform.osname!='ipad')
{
data.push({title:'Record Video', hasChild:true, test:'ui/common/phone/record_video'});
@@ -4,31 +4,36 @@ function PlatformWindow(title) {
backgroundColor:'white'
});
+ var isMobileWeb = Titanium.Platform.osname == 'mobileweb';
+
// create table view data object
var data = [
{title:'XHR', hasChild:true, test:'ui/common/platform/xhr'},
{title:'Network', hasChild:true, test:'ui/common/platform/network'},
{title:'Common JS', hasChild:true, test:'ui/common/platform/commonjs'},
{title:'Logging', hasChild:true, test:'ui/common/platform/logging'},
- {title:'Application Data', hasChild:true, test:'ui/common/platform/app_data'},
- {title:'Application Events', hasChild:true, test:'ui/common/platform/app_events'},
+ {title:'Application Data', hasChild:!isMobileWeb, test:'ui/common/platform/app_data', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"},
+ {title:'Application Events', hasChild:!isMobileWeb, test:'ui/common/platform/app_events', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"},
{title:'Properties API', hasChild:true, test:'ui/common/platform/properties'},
- {title:'Database', hasChild:true, test:'ui/common/platform/database'},
+ {title:'Database', hasChild:!isMobileWeb, test:'ui/common/platform/database', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"},
{title:'Platform Data', hasChild:true, test:'ui/common/platform/platform'},
{title:'Filesystem', hasChild:true, test:'ui/common/platform/filesystem'},
{title:'JS Includes', hasChild:true, test:'ui/common/platform/js_include'},
{title:'Set Timeout (timer)', hasChild:true, test:'ui/common/platform/set_timeout'},
{title:'Set Interval (timer)', hasChild:true, test:'ui/common/platform/set_interval'},
- {title:'XML RSS', hasChild:true, test:'ui/common/platform/xml_rss'},
+ {title:'XML RSS', hasChild:!isMobileWeb, test:'ui/common/platform/xml_rss', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"},
{title:'Utils', hasChild:true, test:'ui/common/platform/utils'},
{title:'JSON', hasChild:true, test:'ui/common/platform/json'},
{title:'JS search', hasChild:true, test:'ui/common/platform/search_case_insensitive'},
{title:'Clipboard', hasChild:true, test:'ui/common/platform/clipboard'},
- {title:'Sockets', hasChild:true, test:'ui/common/platform/sockets'}
+ {title:'Sockets', hasChild:!isMobileWeb, test:'ui/common/platform/sockets', touchEnabled:!isMobileWeb, color:isMobileWeb?"#aaa":"#000"}
];
+ if (Titanium.Platform.name == 'iPhone OS' || isMobileWeb) {
+ data.push({title:'Passing Data (windows)', hasChild:true, test:'ui/common/platform/custom_properties'});
+ }
+
if (Titanium.Platform.name == 'iPhone OS') {
- data.push({title:'Passing Data (windows)', hasChild:true, test:'ui/handheld/ios/platform/custom_properties'});
data.push({title:'Bonjour', hasChild:true, test:'ui/handheld/ios/platform/bonjour'});
}
@@ -60,6 +60,8 @@ function view_evt_prop() {
a.addEventListener('click',function(ev)
{
+ console.log(ev.source.widgetId);
+ console.log(ev.source.parent.widgetId);
l.text = "view: You clicked on " +ev.source.name;
Ti.API.info('Clicked: '+ev.source.name);
clear(l);
Oops, something went wrong.

0 comments on commit 486943c

Please sign in to comment.