Getting started with Mobile

[Bruce]

The Mobile support is in it's infancy, and there are some very specific parameters you need to adhere to for now. the text below was taken from an earlier thread, and is repeated here so it can be found more easily. I'll update this thread as circumstances change.

--------------------------------------
From http://www.nettalkcentral.com/index.php?option=com_smf&Itemid=36&topic=2901.0
--------------------------------------
Joe writes:
>> I took the example 3 (simple with login), and set it to "Mobile" in the Webhandler procedure.

Probably an excellent one to work through as example 3 has not had any special attention to make it "mobile". the steps below probably apply to your own app as well. (As mentioned in the webinar the mobile stuff is in alpha, meaning that there are an uncommon number of restrictions at the moment.) To make example 3 work in mobile;

a) set it to "page" mode not popup mode.
(Global extensions, Activate Web Server extension, Advanced Tab, "popups" = NO.
update : 6.13 : This restriction is removed. Apps can behave in popup mode on the desktop, they'll switch to "page mode" when run in mobile mode.

b) If it doesn't auto-detect your mobile device, or if you want to test mobile on the desktop, go to Webhandler, Actions, Set mode to "mobile".

c) WebServer - Set "Tab type" to "Rounded" or "Plain".
(WebServer procedure, NetTalk extension, Settings, Styles, Form, "Form Type".
update: 6.14 - you shouldn't need to do this, it should change the tab type automatically. At the moment "tab" changes to "wizard", the round, plain or none stay "as-is".

d) Header procedure needs work - specifically lose the Border extension, and simplify the xHtml. Using a wizard generated Header, and Footer, is a good idea here - however doing it by hand is straightforward (especially the header, which probably already contains your menu that you _don't_ want to trash.

the mobile version of the header should contain something like
<h1>Example 3</h1>
you can make the desktop one different if you like.

note that both header, and footer, have "This is a HEADER" and "This is a Footer" set respectively.

e) Global buttons need refreshing - go to WebServer brocedure, Settings, buttons, and "delete" all the buttons (they're re-appear as you delete them).

f) The LoginForm procedure needs a "heading" - at the moment it's blank.
update : 6.13 : Forms with blank headers are allowed.

g) the login form overrides the text on the "save" button using the following line of embed code;
  p_web.site.SaveButton.TextValue = 'Login'
to override the same text, on mobile, use
  p_web.site.SaveButton.MobileText = 'Login'
in the same place.

h) For both Browse procedures; Goto Settings
Go to FORM tab, Show Buttons/Close tab, "Include Close Button" - tick this on.
update : 6.13 : Close buttons are automatically generated on Browses in mobile mode.

i) PageHeaderTag procedure, go to the Extensions, Menu, Browse menu, both Items - remove the IMAGE setting there.

j) then - as mentioned in the webinar, you'll want to tweak the browses to make them "look better" in Mobile mode. Fewer columns, inline Change & delete buttons and so on.

k) In the WebServer procedure, Extensions, Advanced tab, untick the options to Compress and Combine the .js and .css files.
update : 6.13 : mobile now supports combined and compressed

Of course some of these restrictions - will be lifted in the near future - but this should help get you going for now.

cheers
Bruce

[rjmiller]

Thanks for the info.  I have taken your advice and have a VERY SPARTAN browse.  I would very much like to separate the form data into tabs.  I assume that tabs won't work in mobile so defaults to wizard.  Wizard looks good but really needs to go both ways and have some type of header/title to let them know which page of the wizard they are on.

Where in the code would I go to try and implement this?

Thanks.

[useless]

This link might be relevant for testing the mobile features from within firefox.
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

It allows you to change the firefox agent to say iphone or anything else you like including your user agent and then you can see how the website looks in firefox although for 100% accurate results always best to try browsing the website from the device in question, but its useful if one cant lay their hands on teh appropriate device.

[Bruce]

Chrome is the browser most like the browse on iOS and Android. It's not exactly the same, but close. You also don't need to fiddle with the User-agent etc - you can "force" your app into mobile mode either at compile time (See WebHandler options) or at runtime by using the parameter;
_mobile_=1
for example;
http://127.0.0.1:88?_mobile_=1

cheers
Bruce