keyTMS ALL-ACCESS
local_offerOne money and time saving bundle
mouseCross Platform UI
bar_chartReporting
languageWeb
swap_horizCommunication
storageData
mouseWindows UI
  •  
  •  
  •  
  1. Home
  2. Blog

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);
This means that when we invoke the app with http://www.mywebapp.com/iphone/ it will serve the iPhone UI built with TIWForm1. When we invoke the app with http://www.mywebapp.com/ipad/ , it will serve the iPad UI built with TIWForm2. With the instruction: 
initialization
  TIWForm3.SetAsMainForm;
in the last unit, unit3, this form file TIWForm3 is set as default form and is the form used for http://www.mywebapp.com/ Now, if we'd want that when the browser hits http://www.mywebapp.com/, the server automatically detects the device and performs the redirection to the appropriate form file, we can implement the TIWServerController.OnBeforeDispatch event in the following way: 
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;
In this code, you can see that when that start URL or default URL is hit with a UserAgent string that contains iPad, it redirects to the sub domain http://www.mywebapp.com/ipad/ When the UserAgent contains iPod or iPhone, it redirects to http://www.mywebapp.com/iphone/ A similar automatic redirect can be done when the UserAgent contains "Android". In this case, you'll most likely also need to look at the browser resolution in the HTTP header to detect the difference between an Android phone and Android tablet and serve the proper UI. The sample project for Delphi XE / IntraWeb XI that demonstrates this can be downloaded here.

Bruno Fierens




This blog post has received 11 comments.


1. Friday, May 20, 2011 at 6:10:12 AM

Hi, I''ve Delphi 2010, can I get the executable file to try it?
thanks
Stefano Coluccia

michele pozzi


2. Wednesday, July 13, 2011 at 10:51:39 PM


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


3. Thursday, July 14, 2011 at 2:44:04 AM

Can you please clarify "it fails" ? We''re not aware of issues with this.

Bruno Fierens


4. Thursday, July 14, 2011 at 3:40:39 AM

In the same example of you
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


5. Thursday, July 14, 2011 at 9:53:50 AM

this works fine here, I can only suspect that Atozed changed something in the servercontroller and so I will need to contact Atozed.

Bruno Fierens


6. Thursday, July 14, 2011 at 11:11:47 AM

This is an issue in the IW code. I already fixed it and a new release will be available ASAP

Jackson Gomes / Atozed


7. Thursday, July 14, 2011 at 11:12:46 AM

This was confirmed as a bug in IntraWeb 11.0.47

Bruno Fierens


8. Thursday, July 14, 2011 at 4:26:57 PM

Thank you for your answers, I have continued making some tests and I detected this:

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


9. Thursday, July 14, 2011 at 6:25:02 PM

Thank you for your answers, I have continued making some tests and I detected this:

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


10. Tuesday, May 1, 2012 at 7:48:46 AM

when i add the TIWURLMap.Add bit to the initialization section, I get a compiler error "Undeclared identified TIWURLMap" - what unit is this in ?
I am using IntraWebXII
thanks
Peter

Gregory Peter


11. Wednesday, May 2, 2012 at 3:28:46 AM

unit : iwurlmap

Bruno Fierens




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post