howto make an iPhone webclient

Harjo · September 4, 2008, 9:32pm

As promised, after our session: howto make an iPhone webclient, I post my ‘hack’ here ;-)

the only thing you have to make sure, that your forms are 320px width
create a global with this default value:

<html><head></head></html><meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Place this global on every form, make it an HTML-AREA and make it 1px by 1px (and hide it somewhere)
Now Servoy is taking care of the rest.

I also promised to post my CSS style (it’s not quit finished and optimal, but if gives you a jumpstart!)

field
{
	font-family: Helvetica;
	//font-weight: bold;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #b6b6b6;
	font-size: 13px;
	color: #000000;
    text-align: left;
}

form
{
	background-color: #ffffff; 
	border-style: none; 
}
label
{
	font-family: Helvetica;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
    text-align: left;
}
label.menu
{
	font-family: Helvetica;
	font-weight: bold;
	font-size: 20pt;
	color: #ffffff;
    text-align: center;
	//text-shadow: #333 0px 1px 1px;
}

label.menutext
{
	font-family: Helvetica;
	font-weight: bold;
	font-size: 12pt;
	color: #ffffff;
    text-align: center;
}
label.menutext_plus
{
	font-family: Helvetica;
	font-weight: plain;
	font-size: 22pt;
	color: #ffffff;
    text-align: center;
}
label.list
{
	background-color: #ffffff;
	border-width: 0px 0px 1px 0px;
	border-color: #dddddd;
	border-style: solid;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 22pt;
	color: #000000;
    text-align: left;
	margin: 0 6px 0 9px;
}
label.list_doubleline
{
	background-color: #ffffff;
	border-width: 0px 0px 1px 0px;
	border-color: #dddddd;
	border-style: solid;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 16pt;
	color: #000000;
    text-align: left;
	margin: 0 6px 0 9px;
}
label.calendardays
{
	font-family: Helvetica;
	font-weight: bold;
	font-size: 14pt;
	color: #000000;
    text-align: center;
}
label.calendarnumbers
{
	font-family: Helvetica;
	font-weight: bold;
	font-size: 18pt;
	color: #000000;
    text-align: center;
}

.navigatornumber
{
   	background-color: #ffffff;
	border-width: 1px 1px 1px 1px;
	border-color: #dddddd;
	border-style: solid;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 22pt;
	margin: 0 6px 0 6px;
	color: #000000;
}

.navigatornext
{
   display: none;
}

.navigatorprev
{
   display: none;
}

.navigatorfirst
{
   display: none;
}

.navigatorlast
{
   display: none;
}

I hope you all enjoined our session.
Hope to see you next year on Servoy World.

david · September 9, 2008, 3:05pm

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Great post and session Harjo – always nice to see great looking apps made with Servoy.

I would extend your post here slightly by saying that you can stick the above code by hand into the header of the Servoy html master template “MainPage.html”. Need to open via webdav and it is located in “http://localhost:8080/servoy-webclient/templates”.

Of course all web deployed solutions on the server would get that insertion then so it could very well not save any work. It would be kind of cool I think if we could specify/customize the master html and css template per solution instead of per server. Hmm…maybe something to bring up with the Servoy guys.

Harjo · September 9, 2008, 6:13pm

yeah I know, but now I have it solution based and totally dynamic.
btw I have now the same tabpanel on everyscreen, so I have to insert that global only on that tabpanel :-)

david · September 9, 2008, 7:16pm

ah even better.

jdcunha · April 24, 2009, 5:04pm

Hi,

I want to hide the address bar on the browser when the page loads. I use the following code as a global variable and then put it in a html area with size of 1px by 1px

<html><head><meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/></head><body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body></html>

For some reason it does not hide the address bar.

Am I missing something?

Regards
jdcunha

Harjo · April 24, 2009, 6:43pm

you can use this:

globals.header = "<html><script type='application/x-javascript'> if (navigator.userAgent.indexOf('iPhone') != -1) {addEventListener('load', f" + "unction() {setTimeout(hideURLbar, 0);}, false);}f" + "unction hideURLbar() {window.scrollTo(0, 1);}</script><head></head><meta name='viewport' content='width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/><body></body></html>";

or this is even nicer, when a customer, saves your webclient as a bookmark on the iphone desktop, than the second time, you fire thewebclient, it is fullscreen!! :-)

var vHeader = "<html>"
vHeader += "<meta name='viewport' content='width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>"
vHeader += "<meta name='apple-mobile-web-app-capable' content='yes' />"
vHeader += "<meta name='apple-mobile-web-app-status-bar-style' content='black' />"
vHeader += "</html>";

globals.header = vHeader

jdcunha · April 28, 2009, 4:33pm

Hi Harjo,

Thanks a lot. It worked.

Regards
jdcunha

dpearce · March 12, 2010, 7:41am

I got this desktop icon working on a 3.5.10 solution,

but i have just made one in 5.01 and it changes so quickly to the session code that i cannot get the original url to save with its parameters on the iphone desktop.

Is there anyway to edit these desktop urls like other bookmarks to fors it to use the basic url with params to webclint?

David

Harjo · March 12, 2010, 7:46am

David, we had the same issue, but we have fixed this, by using our own expire.html (you can set this on the admin-page)

that expire.html contains a button, that just links us back to the right login page.

Hope this helps.

(you could also try the setting: nice url’s in the admin-page, we did’nt try that yet)

Gordon · June 3, 2010, 10:12am

Hi

I have created an iPhone app based on the above instructions, but seem to have an issue with content scrolling. The size of the page does not appear to scroll ie is fixed to the size of the iPhone screen length ways. I tried to view the Servoy sample solution at demo.servoy.com but it appears to be broken hence can not check to see if their offering works with a scroll feature.

On sampling other site the scroll is not a problem

Ideas would be appreciated

Cheers
Gordon

Gordon · June 24, 2010, 4:09pm

Harjo:
you can use this:

or this is even nicer, when a customer, saves your webclient as a bookmark on the iphone desktop, than the second time, you fire thewebclient, it is fullscreen!!

Each time I have tried to save the URL as a bookmark or homepage icon on the iPhone the Servoy-webclient session has been saved ie it has not saved the URL specified - can you tell me how you managed to remove the session information from the Servoy instance ?

URL: site/servoy-webclient/ss/s/application/m/startup/a/var1var2var3 (note there is not a | character on the iPhone)

results in a URL similar to

site/servoy-webclient/?x=N0tOjIfgld6yRD5iZWNj4w

IF this is saved and the phone re started you get an error from Servoy !! however you can’t create the shortcut until you have started the session !!

Cheers
Gordon

Harjo · June 24, 2010, 5:49pm

with 3.5 that is not possible. and indeed you get the expired page. What I do is replace that page, by my own page, and place a login button on it. If you need that, please let me know and I could post a sample…

with servoy5 you could use the property on the servoy-admin page: use nice urls (did not tried that yet)

Gordon · June 25, 2010, 1:35pm

Hi Harjo

Thanks for the reply - I fixed the issue all be it with the intervention of a PHP page. Essentially it seems that with or without the nice URLs you cant create a shortcut on the iPhone homepage that can be re used.

To get around this I created a shortcut with a combination of your posts above and an icon link which applies a nice icon to the home page. The icon I used was 47x47px flat art - Apple does the gloss and rounded corners bit for you !! Interestingly Apple user a far larger icon 129x129px which means it renders better when shrunk by the phone - see attached - it may be intended for the iPad. You have two options re the icon…

a) stick the image you want to use into the root of the site your running and call it apple-touch-icon.png
OR
b) stick the link into the header and point it at your image

With the addition of your header the phone then allows you to create a nice looking shortcut to the web client based web app on your iPhone !!

This link file I used on my site which I have subsequently made a little more dynamic by changing the arguments in the iFrame to suit each client

It would be a great help if there were more information about the nice URLs offered in the Servoy Admin - the info button tells you they exist and the wiki has the same or similar scant info. Although this may be obvious to some it would be nice for the rest of us if it were a bit more specific OR and example provided !!

Gordon · June 25, 2010, 6:38pm

The above iFrame example has a 3px trim around the top and left edge - this version makes the app fit exactly

HTH
Gordon

Harjo · June 25, 2010, 8:42pm

also a nice solution!
thanks for sharing!

Topic		Replies	Views
webclient on iphone. Classic Servoy	11	8194	November 2, 2008
iPhone Webapp / Servoy / Scroll Classic Servoy	5	5235	June 3, 2010
application.showURL( ETC Classic Servoy	1	2430	November 1, 2007
Newsletter Tip or Trick number 2 Classic Servoy	4	7834	March 26, 2008
iPhone Safari not Launching Servoy Client Classic Servoy	2	3288	November 23, 2009

howto make an iPhone webclient

Related topics