iPhone homescreen shortcut

Printable View

13 Nov 2012, 7:30 AM
MackeyMack

iPhone homescreen shortcut

I am getting a white screen when running my Sencha Touch 2.1 web app from an iphone home screen shortcut. My test page is a simple tab panel (code below). Everything works fine in iphone safari and from desktop safari. No javascript errors. However, it stops working when run from the home screen icon. I've had success with showing a regular panel and a list from the home screen shortcut. I've had failure (white screen) with the tabpanel and navigationview so far. Anyone else?

Code:

Ext.setup({ onReady: function () { Ext.Viewport.add( {xtype:'tabpanel', fullscreen: true, items: [{ title: 'Test' }] }); } });
13 Nov 2012, 7:50 AM
RoxburySoftware

I noticed the same thing with an app this morning. It was built with 2.0 and originally came up but when I closed it and reopened it It appears that it doesn't even load all of the files. My network spinner stops way to quickly. I deleted the icon and opened the page in Safari and when I imported the bookmark again it lost the Sencha default icon and still only shows a white screen. I would look in the Docs but I keep getting an error and can't pull them up. :D
13 Nov 2012, 2:53 PM
RoxburySoftware

I just rebuilt with 2.1 and the new commands app. It loads up fine now but the store doesn't load correctly once you shut the app down and try to relaunch. I use a login form that tries to post to the server but I get an internal error on the iPhone and the server logs show it isn't trying to access the server to post the form.
14 Nov 2012, 8:15 AM
MackeyMack

I am not using a custom build or icon for my test. The page below will not load from an IOS homescreen shortcut. I get a white screen. There is obviously a script error, but I can only get it to happen from the shortcut.

Code:

<html xmlns="http://www.w3.org/1999/xhtml"> <head > <title>Test</title> <link href="resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="sencha-touch-all.js"></script> <script type="text/javascript"> Ext.setup({ onReady: function () { Ext.Viewport.add({ xtype: 'tabpanel', fullscreen: true, html: 'test', items: [{ xtype: 'panel', html: 'test', title: 'Test' }] }); } }); </script> </head> <body> </body> </html>
15 Nov 2012, 9:04 PM
tcab

Same problem here
I get the same problem. Bookmarked apps on the iphone do not run! Just a white screen and a spinner.
- Generated via command line - they work. (via Sencha Cmd v3.0.0.250 with Sencha 2.1 SDK)
- Generated via Architect - they don't. (Sencha Architect 2.1.0 Build 670)
Interestingly the apps generated by Architect are started with app.html and those apps generated with the command line are started with index.html.
15 Nov 2012, 10:35 PM
tcab

Found a way...

Seems that Sencha Architect produces only a subset of the files needed to deploy a proper sencha touch web app and have it work correctly as an app that can be bookmarked onto the iPhone home screen.

Working with info I found in this thread I was finally able to generate a sencha touch 2.1 app via Architect which can be bookmarked onto the iPhone home screen successfully by doing the following:

1. Generate a sencha touch app template using the Sencha Cmd v3.0.0.250 to create an app called e.g. GS2
sencha generate app GS2 ../GS2
2. Create a new Architect project and save it over the top (into the same location) as GS2
3. Edit GS2/index.html and insert the following line just above the <script id="microloader"... line.
<script type="text/javascript" src="app.js"></script>

You should now be able to run this index.html and the microloader will kick in and load the architect generated app. Changes to the architect generated app seem to save without clobbering anything and no more manual intervention is needed from now on. Its a pity this 'bootstrapping' process isn't built into Architect.
17 Nov 2012, 8:39 PM
tcab

What about CSS references

Following on from my post, when I actually applied my own advice to an existing project with more things in it, I discovered that my custom css styles from my Architect project were not working.

Aha I thought - you obviously also need to copy any custom style links in app.html into index.html (which is what the original thread did say viz. "copy the links"). So in my own example, I did that e.g. index.html now has the line

<link rel="stylesheet" href="mycss/css1.css">

but this didn’t work. :-? The resulting index.html app still doesn't see the css1.css and various elements don't look right.

Anybody know what is going on here and how to get my css from architect to be loaded - possibly the microloader isn't seeing it or something?