Wednesday, May 18, 2011When 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:
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 TIWServerController.SetServerControllerClass; TIWURLMap.Add('/iphone/','',TWIForm1); TIWURLMap.Add('/ipad/','', TIWForm2);
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:
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.
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;
This blog post has received 11 comments.
Previous | Next | Index