howto make an iPhone webclient

Find out how to get things done with Servoy. Post how YOU get things done with Servoy

howto make an iPhone webclient

Postby Harjo » Thu Sep 04, 2008 11:32 pm

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:

Code: Select all
<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. :D

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

Code: Select all
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.
Last edited by Harjo on Fri Oct 24, 2008 10:14 am, edited 1 time in total.
Harjo Kompagnie
ServoyCamp
Servoy Certified Developer
Servoy Valued Professional
SAN Developer
Harjo
 
Posts: 4321
Joined: Fri Apr 25, 2003 11:42 pm
Location: DEN HAM OV, The Netherlands

Re: howto make an iPhone webclient

Postby david » Tue Sep 09, 2008 5:05 pm

Code: Select all
<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.
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.

Re: howto make an iPhone webclient

Postby Harjo » Tue Sep 09, 2008 8:13 pm

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 :-)
Harjo Kompagnie
ServoyCamp
Servoy Certified Developer
Servoy Valued Professional
SAN Developer
Harjo
 
Posts: 4321
Joined: Fri Apr 25, 2003 11:42 pm
Location: DEN HAM OV, The Netherlands

Re: howto make an iPhone webclient

Postby david » Tue Sep 09, 2008 9:16 pm

ah even better.
David Workman, Kabootit

Image
Everything you need to build great apps with Servoy
User avatar
david
 
Posts: 1727
Joined: Thu Apr 24, 2003 4:18 pm
Location: Washington, D.C.

Re: howto make an iPhone webclient

Postby jdcunha » Fri Apr 24, 2009 7:04 pm

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

Code: Select all
<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
jdcunha
 
Posts: 93
Joined: Wed Dec 19, 2007 7:59 pm

Re: howto make an iPhone webclient

Postby Harjo » Fri Apr 24, 2009 8:43 pm

you can use this:

Code: Select all
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!! :-)

Code: Select all
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
Harjo Kompagnie
ServoyCamp
Servoy Certified Developer
Servoy Valued Professional
SAN Developer
Harjo
 
Posts: 4321
Joined: Fri Apr 25, 2003 11:42 pm
Location: DEN HAM OV, The Netherlands

Re: howto make an iPhone webclient

Postby jdcunha » Tue Apr 28, 2009 6:33 pm

Hi Harjo,

Thanks a lot. It worked.

Regards
jdcunha
jdcunha
 
Posts: 93
Joined: Wed Dec 19, 2007 7:59 pm

Re: howto make an iPhone webclient

Postby dpearce » Fri Mar 12, 2010 9:41 am

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
dpearce
 
Posts: 469
Joined: Sun Dec 03, 2006 11:53 am

Re: howto make an iPhone webclient

Postby Harjo » Fri Mar 12, 2010 9:46 am

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)
Harjo Kompagnie
ServoyCamp
Servoy Certified Developer
Servoy Valued Professional
SAN Developer
Harjo
 
Posts: 4321
Joined: Fri Apr 25, 2003 11:42 pm
Location: DEN HAM OV, The Netherlands

Re: howto make an iPhone webclient

Postby Gordon » Thu Jun 03, 2010 12:12 pm

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 McLean
Click Digital Media Ltd
SAN Developer
www.clickdigital.com
User avatar
Gordon
 
Posts: 265
Joined: Thu Mar 17, 2005 8:05 pm
Location: UK

Re: howto make an iPhone webclient

Postby Gordon » Thu Jun 24, 2010 6:09 pm

Harjo wrote: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/var1*var2*var3 (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
Gordon McLean
Click Digital Media Ltd
SAN Developer
www.clickdigital.com
User avatar
Gordon
 
Posts: 265
Joined: Thu Mar 17, 2005 8:05 pm
Location: UK

Re: howto make an iPhone webclient

Postby Harjo » Thu Jun 24, 2010 7:49 pm

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)
Harjo Kompagnie
ServoyCamp
Servoy Certified Developer
Servoy Valued Professional
SAN Developer
Harjo
 
Posts: 4321
Joined: Fri Apr 25, 2003 11:42 pm
Location: DEN HAM OV, The Netherlands

Re: howto make an iPhone webclient

Postby Gordon » Fri Jun 25, 2010 3:35 pm

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 <link rel="apple-touch-icon" href="apple-touch-icon.png"/> 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

<html>
<meta name='viewport' content='width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<iframe src ="http://<server>/servoy-webclient/ss/s/Application/m/startup/a/var1|var2|var3" width="100%" height="100%" frameborder="0">
</iframe>
</html>

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 !!
Attachments
apple-touch-icon-1.png
apple-touch-icon-1.png (6.86 KiB) Viewed 12635 times
Gordon McLean
Click Digital Media Ltd
SAN Developer
www.clickdigital.com
User avatar
Gordon
 
Posts: 265
Joined: Thu Mar 17, 2005 8:05 pm
Location: UK

Re: howto make an iPhone webclient

Postby Gordon » Fri Jun 25, 2010 8:38 pm

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

<html>
<head>
<meta name='viewport' content='width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
</head>
<body>
<iframe src ="http://<yourserver>/servoy-webclient/ss/s/YourApp/m/startup/a/Var1|Var2|Var3" style="position:absolute; left:0px; top:0px; width:320; height:420; border:none;">
</iframe>
</body>
</html>

HTH
Gordon
Gordon McLean
Click Digital Media Ltd
SAN Developer
www.clickdigital.com
User avatar
Gordon
 
Posts: 265
Joined: Thu Mar 17, 2005 8:05 pm
Location: UK

Re: howto make an iPhone webclient

Postby Harjo » Fri Jun 25, 2010 10:42 pm

also a nice solution!
thanks for sharing!
Harjo Kompagnie
ServoyCamp
Servoy Certified Developer
Servoy Valued Professional
SAN Developer
Harjo
 
Posts: 4321
Joined: Fri Apr 25, 2003 11:42 pm
Location: DEN HAM OV, The Netherlands


Return to How To

Who is online

Users browsing this forum: No registered users and 7 guests

cron