When a new mobile application is launched, it often is an issue how it is to be presented to the targeted users on the web. Linking directly to the application URL often results in a poor browsing experience on standard web browsers. Likewise, relying on one of the known online device emulators may result in compatibility problems, performance issues and dependencies on third party web servers. In this article we learn how the device simulator feature of the HAWHAW library can be used to create highly customizable device simulators with PHP.
HAWHAW Basics
Coding a mobile application with HAWHAW basically goes like this (see this article for a complete introduction to HAWHAW):
|
1 2 3 4 5 6 7 |
<?php require("hawhaw.inc"); $my_deck = new HAW_deck("Test"); $my_text = new HAW_text("This is a very poor mobile application."); $my_deck->add_text($my_text); $my_deck->create_page(); ?> |
When a web browser is pointed to this kind of application, the HAWHAW library displays the content in a green display field. In the situation that the content does not fit into the display area, the web browser creates a scrollbar on the right border of the display.
This kind of simulator may be appropriate for some quick-and-dirty hacks, and it is helpful during the development process, but we can improve on this.
Using the default simulator
The HAWHAW library provides a standard device simulator, that can be enabled by a simple function call:
|
1 |
use_simulator() |
|
1 2 3 4 5 6 7 8 |
<?php require("hawhaw.inc"); $my_deck = new HAW_deck("Test"); $my_deck->use_simulator(); $my_text = new HAW_text("This text appears within the default simulator."); $my_deck->add_text($my_text); $my_deck->create_page(); ?> |
With this solution the web browser output is remote-controlled by a CSS-file located on the HAWHAW web site. This means that the rendered device can change from time to time and there is no device displayed at all in case that the HAWHAW server goes down.
The clear advantage is that programmers can realize a good-looking device simulator without any programming or image processing effort. The mobile content will be displayed properly within the display area and scrollbars will be created automatically whenever necessary.
Creating your own simulator device
Replacing HAWHAW's default simulator with your individual one goes like this:
First you need an image file of a device or whatever you want to see your content within. The image file is not restricted to mobile devices. You can project your content onto images of beer bottles or washing machines, if you want to do that. The only important thing is: Your image must contain a rectangular display area, where your output appears readable within.
The next thing you need is a cascading-style-sheet (CSS file) that controls your device simulator. As a template you can take the HAWHAW default ccs sheet which looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* HAWHAW skin stylesheet for the hawhaw phone */ body background-color: #FFFFFF; text-align: center; margin: 0px; padding: 0px; color: #222222; font-size:10pt; #skin margin: 0px auto; padding: 0px; text-align: left; width: 280px; height: 466px; background-image: url(http://www.hawhaw.de/skin/hawhaw_phone/hawhaw_phone.png); #display position: relative; top: 151px; left: 43px; width: 191px; height: 223px; overflow: auto; |
There are just a few settings concerning the #skin and #display sections that you have to modify:
In the #skin section you have to set the width and the height attribute according to the size properties of your image file. The background-image attribute must point to the url where your image file is located.
In the #display section four settings have to be adjusted according to the desired placement of the display area within the whole image. The top and left attributes must be specified relative to the upper left corner of the image, while the width and height attributes are defining the display size.
Finally you have to activate your CSS-file like this:
|
1 |
$my_deck->use_simulator('mySimulator.css'); |
Finetuning
If your style demands are still not satisfied by the approaches shown here, you can try some more sophisticated hacks. The web development company tweede golf has pointed out at UFO London how to customize scrollbars within a device simulator by combining HAWHAW with the fleXcroll script.
fleXcroll is based on javascript and css handling and facilitates the creation of highly customizable cross-browser scrollbars. fleXcroll requires a valid license, but is free of charge for non-commercial websites.
A comprehensive description how fleXcroll works in detail would go far beyond the scope of this article. Instead we will just list those code snippets, which are necessary to create the scrollbars as shown here.
- First thing you need is an image that contains several important scrollbar segments.
- The CSS file has to be enhanced by some scrollbar-specific settings
- The fleXcroll javascript code has to be downloaded from the fleXcroll website
- Finally there is some Javascript code to be inserted within HAWHAW's HTML output. While the documented HAWHAW API does not provide a legal way to insert arbitrary HTML output, we can use the (undocumented) HAW_raw class to make this happen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php require_once("hawhaw.inc"); $deck = new HAW_deck("Test"); $deck->use_simulator("mySimulator.css"); $haw_js = new HAW_raw(HAW_HTML, ' <script type="text/javascript" src="flexcroll.js"></script> <script type="text/javascript"> <!-- if (document.getElementById && document.getElementsByTagName) if( window.addEventListener ) window.addEventListener("load", initScrollBars, false); else if(window.attachEvent) window.attachEvent("onload", initScrollBars); function initScrollBars() CSBfleXcroll("display"); //--> </script> '); $deck->add_raw($haw_js); $longtext = new HAW_text("This is very loooooong text ..."); $deck->add_text($longtext); $deck->create_page(); ?> |
Conclusion
The HAWHAW PHP library provides more than one approach to present mobile applications on web browsers. Go ahead and find your favourite solution and style for your next mobile project. Further information is available at the HAWHAW website.
