Re: Mobile Web Question

[Sean Montgomery]

Hi Evan,

I'm cc-ing the class google group, so others may benefit from your question.

The answer is yes, you may have multiple html files linked in any of the following ways:

<a href="file:///android_asset/www/nextpage.html">file:next</a><br>

<a href="./nextpage.html">.next</a><br>

<a href="nextpage.html">next</a><br>

HOWEVER, there is a cost to having multiple pages. Each time you load a new page the entire phonegap javascript library (and any other js libraries you're using) has to be reloaded, which can slow down the feel of your app. To avoid this, in many cases I prefer to use a single page with a number of hidden divs that can be shown or hidden as you "navigate" the page. This tabs example is a useful template for this type of idea - http://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html

Your emulator errors may be related to something else. Try looking at the console in eclipse to narrow down the problem. You may also wish to use an actual phone instead of the emulator since the emulator can be a little fiddly at times.

Cheers,

Sean

On Tue, Feb 14, 2012 at 7:24 PM, Evan Emolo <i_...@evanemolo.com> wrote:

Hi Sean,

So I have a number of HTML files that I need to add to my PhoneGap project. When running the Android Emulator with an html file named something other than "index.html", it throws an error. Can I enter custom-named HTML names for the PhoneGap project to access?

Thanks,

Evan Emolo

[Sean Montgomery]

Hi Bona,

As, usual, this may be of use to everyone in class, so I'll cc the google group.

Yes, we'll go over some of the DOM stuff and talk about how you might modify the tabs example. Bring your questions.

The way to deal with images to work across multiple different screen resolutions is to set your image size using css and javascript. For example you can use the following css:

.myImageClass

{

  height: 20%; /* 20% of the height of the containing element */

}

It can be a little tricky to support both landscape and portrait and is something you should play around with. 

It might be helpful to use the orientationChanged listener  - http://stackoverflow.com/questions/3300947/detect-that-iphone-has-been-rotated-using-phonegap-accelerometer

http://stackoverflow.com/questions/5284878/how-do-i-correctly-detect-orientation-change-using-javascript-and-phonegap-in-io

or you can use the direct accelerometer data as we'll cover in class today.

Sometimes it's helpful to use javascript to get the height and width of the current "browser" window.

var w = document.documentElement.clientWidth; // width of the current browser window

and then set the size of your image using DOM accessors

var myImage= document.getElementById("myImage");

myImage.style.width= w + "px";

**NOTE** this is live coded in my gmail window, so I can't guarantee that any of this will work, but this might get you heading in the right direction.

Bring any questions to class.

Cheerio,

Sean

On Thu, Feb 16, 2012 at 10:47 AM, Bona kim <bk1...@nyu.edu> wrote:

Hi Sean, 

I've been trying to make the tabs according to the tutorial you've posted on the email but having hard time integrated it on my format. 

Could you explain more about this in class? I think it will be beneficial to other students as well. 

Also, what is the resolution I should work? I made png files to use as buttons and they appear a lot larger on the emulator. Is there a preferred resolution of window size I should reference?

Thank you so much! 

Bona