INTRODUCTION
Although the Smartphone Operating System may have debuted several years ago, 2006 was definitely the "year of the Smartphone." We saw the launch of the Motorola Q, T-Mobile Dash, and the Cingular BlackJack to name a few of the more popular devices. Compared with a traditional Pocket PC, the Smartphone OS may seem simplified, however, (among other things) a major difference is found in the way customization occurs. Specifically, Homescreen (today page) layout, appearance, and function. Historically, PPC users would install tsk files and then add/remove plugins via the settings menu. Smartphone's handle this area quite differently. If the whole Homescreen thing is a bit of a mystery, or you are simply bored with your current layout, read on. Today we're going to take a closer look at the Homescreen concept and hopefully answer a few of those queries you may have.
TUTORIAL STUCTURE
The tutorial will be laid as follows: basic info on Page 1, and advanced info on Page 2. If you are a beginner, with no prior Homescreen experience, start here, otherwise, jump to page 2. Ready to go?
Here's one finished product: A Homescreen running Facade, Fizz Weather, AlarmInfo, and GRPS Traffic Monitor.
WHAT'S WHAT?
First up, let's look at the anatomy of a Smartphone Homescreen. Typically, this is made up of two files: an XML document that specifies the layout, color theme, plugins, etc. and an optional background image; usually a JPEG resized or cropped to your relevant resolution (320x240, 240x320, 176x220). Additional items such as icons for use with 3rd party applications can also be included and are used for further customization of a homscreen.
REQUIRED ITEMS
From here, you can either read along, or if you are feeling game, actually follow along with your device. Before we crack into it, there's a few things at minimum we're going to need:
- An MS Smartphone
- Activesync*
- CENotepad**
*If you plan on just installing and removing themes, CENotepad is not required. If you plan on altering screen layout, it will be required.
**CENotepad and Activesync can be substituted for Total Commander, allowing for on-device amendment of XML files. Great for small mods on the fly, however, as we will be doing a bit of cut and paste, this is not recommended.
LET'S GET STARTED
**Remember to backup your phone before attempting any modifications. pocketnow.com takes all care (but no responsibility) for Smartphone loss or damage**
OK. So you have your Windows Mobile Smartphone, paired it with Activesync, and have installed yourself a copy of CENotepad. Some themes are bundled as self-install cab files
, however, these seem to be the minority. We'll proceed as though this is not the case, and work with source files directly. First step, let's familiarize yourself with the file structure, both on the device and in Windows:
- Open your
Smartphone's
File Explorer - Navigate to Application Data\Home (Application Data should be in the root folder)
- Open the Home folder, and you should see something similar to this:
This is where all your XML and image files live, plus any subfolders containing icons. This is the only place we will deposit files, so ensure you are familiar with how to reach it. Now open Activesync's
file explorer and do the same thing. Your folder should resemble the following:
Here's our Application Data\Home folder (desktop view). This is another view of where all our XML and Image files will reside.
LET'S GET SOME FILES
Now that you know where the source files live, it's time to get some Homescreens! There is a wealth of source information available, most on the surface, but some requires a bit of digging. The files used during this tutorial were obtained from Kooldezine, Dashusers, and Qusers. First step, let's grab an image file. Right click on the below picture and choose "save as".
Next step involves grabbing our XML file. XML, for those who have not used it, it a markup language which uses tags to depict database structure. Fortunately, it's very intuitive and simple to use, plus we do not need to delve too deeply in order to customize our screens. Let's start with a very basic XML file. Click here to download our file. Save it in the same folder as the above image.
Now that we have our image and XML, it's time to install them. Transfer both files to the Application Data\Home folder using Activesync. Next, go to the device and choose Start->Settings. Option 6 should be "Home Screen", if not scroll until you find it. Select this option. After selecting Homescreen, you should see the following sub-menu:
Depending on what your current Homescreen is set at, you should see the following sub-menu under the Home Screen option within the settings menu.
Before going any further
, write down your current Homescreen! That way you can revert back to it after the tutorial. This is very important. Once you have notated your current setting, scroll to "standard" as per above. Color scheme and Background image leave as "default". Hit done twice then home. If you have done everything correctly, you should see the following image (depending on your carrier of course):
Viola! Robert's your father's brother, you have a new Homescreen! Pretty boring though right? Thought so. Let's spice it up a bit. Download this XML file and upload it to your Application Data\Home folder. Go back to Settings->Home Screen and choose "Standard2" as the layout. All going well, your screen should now look like:
It's that simple. Let's take a closer look. If you open either XML file (xxxxxx.home.xml) by using either notepad, word pad or on the device via CENotepad, you will notice a series of descriptive text fields, henceforth known as "tags". Starting at the top, information such as title, author, version number is assigned. Somewhere near the top is a tag called "background image" it looks like:
<background bgimage="dock.jpg" valign="bottom" bgcolor="COLOR_TRAYGRADLEFT" /> This line of script controls the background image. Here's a folder with a few other images. Download, unzip, and upload them into your Application Data\Home folder. Now you can change your background image. This can be done either one of two ways: amend the directory within the background image tag, or change it via the Homescreen menu:
The background image can be selected without having to get your hands dirty.
Nice and shiny new background. Any image can be used for this purpose.
Now that you know how to install background (image) and layout (XML) files, it's time to take a closer look at the layout file and what it can do. After background, the next set of tags is typically the scheme tags. These refer to color scheme, and sets the color scheme for the homesceen, menus, backgrounds throughout the device (look and feel to a certain extent). Here's a very short list:
<scheme>
<color name="COLOR_TRAYGRADLEFT" value="#2E97E3" />
<color name="COLOR_HOMEHIGHLIGHT" value="#50A5E5" />
</scheme>
As you can see, each attribute has a value, which is equal to a color hex code. Here's a chart including the more common color codes. After the scheme tags, we can start adding plugins. Plugins refer to a strip of data, either provided by the OS or a 3rd party, that displays information. This can include such items as appointments, WiFi status, alarm info, weather, missed calls, unread emails, GPRS usage... the list goes on. Typically, all plugins consist of an ID, name, and height. Additional data such as separation lines, font color, etc. is usually specific to the plugin.
<plugin clsid="{30DF3430-2005-0509-BAA6-00AA003E0EED}" name="WeatherPlugin" height="54" >
<general sepline="true"/>
</plugin>
That's it for the beginner info. To revert back to your original Homescreen, open the settings dialog and choose your original file under "home screen layout". If you want a detailed descriptions of plugins, including all the color scheme tags, head on over to page 2. Page 2 also contains plugins for the following 3rd party applications:
- Fizz Weather
- GPRS Traffic Monitor
- WorldMate 2006
- Skype
- MSN
- Facade
- AlarmInfo
Here's another look at the above theme with Facade, Fizzweather, GPRS Monitor and AlarmInfo.
