Blog
All Blog Posts | Next Post | Previous Post
Serving customized UI for mobile devices with IntraWeb
Wednesday, May 18, 2011
When creating web applications, there are these days roughly 3 different browsers to target: the mouse driven desktop browser, a tablet browser with touch UI such as the iPad or a mobile phone browser such as the iPhone with a small screen and also with touch. For an optimal user experience, it might be beneficial to build a different user interface for these three classes of devices. In the screenshots of the iPad, you can see that the common layout for an iPad type of application is the list of information on the left and the details client aligned on the right side. The same app on the iPhone translates to a client-aligned list with details sliding in focus when an item in the list is clicked. The iPad or iPhone UIs could be based on TMS IntraWeb iPhone Controls for example while the desktop browser could use strictly mouse only TMS IntraWeb Component Pack Pro controls.

In a single IntraWeb application, we could layout the UI for these 3 different devices in 3 different form files and connect this to the same business logic. The question is then how to automatically serve the right form file for the right device? The latest IntraWeb version XI provides some infrastructure to handle this. In the TIWServerController, the event OnBeforeDispatch is triggered when the browser first tries to connect to the server and here is the place we can route the browser to the proper form file. First of all, in the initialization of the ServerController, we map 2 paths to 2 form files, one for the iPad and one for iPod/iPhone class of devices:
initialization TIWServerController.SetServerControllerClass; TIWURLMap.Add('/iphone/','',TWIForm1); TIWURLMap.Add('/ipad/','', TIWForm2);
initialization TIWForm3.SetAsMainForm;
procedure TIWServerController.IWServerControllerBaseBeforeDispatch( Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); var s:string; agent: string; begin s := request.URL; agent := request.UserAgent; if (pos('$/start',s) > 0) or (s = '/') then begin if (pos('iPad', agent) > 0) then begin response.SendRedirect('/ipad/'); handled := true; end; if (pos('iPhone', agent) > 0) or (pos('iPod', agent) > 0) then begin response.SendRedirect('/iphone/'); handled := true; end; end; end;
Bruno Fierens

This blog post has received 11 comments.

Hi,
Is there a problem if I put the code to identify the iphone, ipad, ... in the event AfterDispath ?
I have also tried to identify the desktop.
....
if (pos(''iPad'', agent) > 0) then
begin
response.SendRedirect(''/ipad/'');
handled := true;
end;
if (pos(''Mozilla'', agent) > 0) then
begin
response.SendRedirect(''/desktop/'');
handled := true;
end;
and while in the beforeDispach fails in AfterDispach seems to do well.
iw 11.0.47
thanks
Diez Jose


Bruno Fierens

http://www.tmssoftware.com/download/iwredirectsample.zip
Modify:
if (pos(''''iPad'''', agent) > 0)
by
if (pos(''''Mozilla'''', agent) > 0) //test to detect the desktop browser
to compile and run gives these messages;
''session not found. session may have expired'' (delphi 2007 IDE)
''A time-out has occurred'' (browser)
Diez Jose


Bruno Fierens

Jackson Gomes / Atozed


Bruno Fierens

It seems that the iwforms that are released by response.sendRedirect inside the event
IWServerControllerBaseBeforeDispatch work this way:
Finalized the timeout of the user session,
if we shut down the browser, running it again produces the error message "A time-out has ocurred".
if we delete the cookies and we try again it works properly.
Diez Jose

It seems that the iwforms that are released by response.sendRedirect inside the event
IWServerControllerBaseBeforeDispatch work this way:
Finalized the timeout of the user session,
if we shut down the browser, running it again produces the error message "A time-out has ocurred".
if we delete the cookies and we try again it works properly.
Diez Jose

I am using IntraWebXII
thanks
Peter
Gregory Peter


Bruno Fierens
All Blog Posts | Next Post | Previous Post
thanks
Stefano Coluccia
michele pozzi