Site hosted by Angelfire.com: Build your free website today!

Homescreen Design and XML

Simple Homescreen Design
Advanced Homescreen Design
Anatomy of a the "full.home.xml" file
Default settings
Colour Codes
Plugins
Iconbar Plugin
MRU (Most Recently Used) Plugin
Clock & Carrier Plugins
Call Progress plugin
Missed Call Plugin
All Day Event Plugin
Calendar Plugin
Message Count Plugin
Profile Plugin
Orange Shortcut Plugin
"Format" and "Background" tags


Simple Homescreen Design

The most straightforward way to design your homescreen is to simply go into the Homescreen menu (Programs›Settings›Homescreen), and then find a homescreen layout that you like the look of (ie. "Full", "Simple", "Default" etc.)
You can then change the background image to one you like, or alternatively if none of the preset backgrounds appeal to you, you can also use your own by saving a jpeg or gif picture file in the "IPSM/Application Data/Home" folder- it will then show up in the list from the Settings menu.
The Colour Scheme can also be selected from the Homescreen option in the Settings menu.
If you want to edit the colour scheme without getting into XML codes, you can download the "Theme Editor" program from the Microsoft website, which allows you to create a theme on your PC, then copy it to your phone.) Presto- one personalised homescreen, no fiddling with XML, but on the other hand, not much freedom to play around with things like the positioning of text, what is and what isn’t displayed etc.

Return to index

Advanced Homescreen Design

If you want to change the actual layout of the various parts of the Homescreen, then you’re going to need to make your own XML file.
The quickest and easiest way to do this and to start off with learning how Homescreen XML works is to jump straight in and start modifying an existing screen; although any coding language can be quite intimidating to get started with, XML is actually quite straightforward.

Note that this isn’t a guide to creating a homescreen from scratch- the idea is that this will show you the quickest and simplest way to create a homescreen that does what you want it to do, assuming that you have no previous experience of coding (although some experience with XML, HTML or a similar language will give you something of a head start.)

To get started doing this, all you will need is;
A Smartphone,
A Text Editor (to edit the XML code.) Note that this can be either on your phone, or on a PC with Activesync installed- I would strongly recommend the PC-based option due to the ease of use of a full keyboard, mouse etc. (It is perfectly possible, if fiddly, to create a customised Homescreen without ever using a PC.)
• (Optional)- a Graphic Editing Program (even something as simple as Paint) to create/edit your background images.

(The very fact that you’re reading this means that the chances are very high that you already have some or all of those!)

Return to index

Anatomy of the full.home.xml file

A homescreen file is easily identified by it’s filename, which will be in the format; name.home.xml.
XML stands for "eXtensible Markup Language." Although "eXtensible" isn’t a word in my dictionary, it’s the "markup" that’s the important part; everything in an XML file is marked with tags, which you will probably notice immediately due to the pointy brackets all over the place.

To start off, use ActiveSync to connect your phone to the PC and download one of the default Microsoft homescreens from the phone- you can find these in the \Windows folder. The one I’m going to use has the filename full.home.xml, which is a Microsoft Homescreen and should be on all Smartphones (including those not installed with the Orange ROM.) Simply copy the file, paste it on your computer and open it up in your chosen text editor.
(If you’re using a Smartphone-based text editor, then paste the file in the IPSM/Application Data/Home folder- any changes made to anything in the /Windows folder will be lost when the phone is switched off.)

The first thing right at the top of the "full.home.xml" file is this;

‹?xml version="1.0"?›
‹home›

The first line simply states that the file is using XML version 1.0.
The second line is the opening tag of a "home" (the pointy brackets are what identifies it as a tag)- at the very end of the file is the closing tag, which looks like this;

‹/home›

The slash is what distinguishes it as a closing tag- everything contained inside that pair of "home" tags is the homescreen code.

‹author›Microsoft Corporation‹/author›
‹contacturl›http://www.microsoft.com/‹/contacturl›

The third and fourth line obviously state who the author of the homescreen is, and how they can be contacted- notice the opening and closing tags again.

As you’re hopefully realising that XML code isn’t terribly intimidating at this point, it is probably as good a time as any to start making your personal mark on your homescreen, so change the parts that say "Microsoft Corporation" and the Microsoft website address to your own name and homepage, email address or whatever contact info you want to put on (or not if you prefer!) This is also a good point to save your file under a different name- for the phone to recognise it as a homescreen, it will need to end in .home.xml –just change the "full" part of the filename to something of your choice.

The next few lines are the title of the homescreen; this is the name that it will appear under in the list of homescreens in the phone’s Settings menu, and is dependant on the language that the phone is set to. Notice that the opening tag is a little more complicated than the previous tags;

‹title lang="0x0409"›Full layout‹/title›
‹title lang="0x0809"›Full layout‹/title›
‹title lang="0x040c"›Disposition pleine‹/title›
‹title lang…

These lang="0x0409" elements are effectively setting conditions- what this is telling the phone is "the title of the Homescreen ("title" if the language ("lang") has been set to English ("0x0409"), then the title is "Full Layout. If the language is set to ‘0x040c’ then the title is ‘Disposition pleine’" (and so on for the various other titles and languages.)

As you’re probably only making this Homescreen for your own use, and you probably don’t want to learn 9 languages on top of XML just to make a homescreen for your phone, you can get rid of all but one of these rows, remove the "lang=…." section from the opening tag, and change the title to one of your liking which will appear in any language; for example;

‹title›My Customised Layout‹/title›

The Version tag is a useful one to get used to using when you make changes- for example, if you find yourself with three different versions of the same homescreen saved in three different places but can’t remember which one is the latest one.

‹version›1.0‹/version›

Return to index

Default settings

The next bit of the XML file is as follows;

‹default font-face="nina" font-size="14" font-weight="bold" padding-left="4" padding-right="4" bgcolor="transparent" fgcolor="COLOR_HOMETEXT" padding-top="2" b-border-color="COLOR_HOMERULE" b-border-width="1"›
‹format state="selected" fgcolor="COLOR_HOMEHIGHLIGHTTEXT"/›
‹/default›
‹background bgimage="\windows\luna.gif" valign="bottom"/›

The "default" tag sets what the font settings, margins, and certain colours will be set to as default in the Homescreen ie. unless specifically specified as being something else. (The actual settings are addressed in the format and background tags section.)

The "format" tag here is slightly different to what we’ve seen so far. It starts off as an opening "format" tag, then has the condition of "state="selected" (similar to the language tags previously), then has the various settings for when the state is "selected". But unlike the conditional elements of the Language tags, there’s no closing ‹/format› tag, and therefore no information between the pair of tags.

Instead, as all the information being used is contained within the tag rather than between the opening and closing tags, and the tag finishes with a backslash, which closes the tag. What this means is that every time something is in the state "selected" (ie. whatever the active part of the Homescreen is), the formatting set by this tag will override the settings in the previous tag- specifically the foreground colour ("fgcolor") won’t be "COLOR_HOMETEXT", but instead will be "COLOR_HOMEHIGHLIGHTTEXT". These colour codes are explained in the next section. (It is also possible for both of these to be overridden as well, but we’ll come to that later on.)

Next there’s a background tag which also closes itself- this sets the background image, and where it’s positioned on the screen- in this case, the bottom of the image is lined up with the bottom edge of the screen (not including the softkeys at the bottom of the Homescreen.) This is the most obvious thing to personalise, so you’ll want to save your own chosen image to the IPSM/Application Data/Home directory. (If it’s in that folder then you only need to put the filename in- you can use images from elsewhere on the phone, but you’ll have to put the whole pathname in.) The image can be in GIF, JPEG or BMP format, and it’s best to have it the same size as the part of the screen it covers- 176 pixels wide by 200 pixels high.

Return to index

Colour Codes

The next section sets the colours used by the phone- not just for the Homescreen, but also for the Programs menu, the softkeys at the bottom of the phone, and the colours used by most applications. (You may find that some applications use colour codes that aren’t immediately obvious- for example, when looking at the Monthly view in the Calendar, the colours are set by the colours of the softkeys.)

The colours are coded in hexadecimal. That is, a numbering system that has 16 digits from 1 to F, instead of just 1 to 9 (ie; 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C etc.) Having extra numbers coming between 9 and 10 take a little bit of getting used to (as does the pronounciation- is 1A "A-teen?"), but is really quite simple to deal with once you've got your head round the concept. You might find it useful to create a list or spreadsheet with the "normal" decimal and hexadecimal numbers for converting between the two.

There are 6 digits in the hexadecimal colour codes used by the phone, which work in pairs and correspond to the Red, Green and Blue values (as any colour can be made up of a combination of the three primary colours.) The first two digits refer to the Red component, the second two to the Green, and last two to the Blue. And because the two digits are hexadecimal, that means there are 255 possible values (if they were in boring old decimal, you’d only have 100…) So, for example, #FF0000 would be pure red, #0000FF would be pure blue, #FFFFFF would be white, #000000 would be black.

You’ll probably find that the "pure" colours look slightly unnatural- for example, if you find #FF0000 (for example) to be too bright for whatever you're after, then bring the code a bit closer to black. As black is #000000, just bring down the "FF" part of the code- for example, you could try dropping it to "A0", so the code would be #A00000. If it's too dark, then bring the other values up to bring it closer to white- for example, #FFA0A0 would be a light pink.

(It's worth noting that these colours don't mix in the way you are probably used to- that is, the way paint mixes- this is because the colour of a paint is determined by the light it absorbs, whereas with these colours, you're effectively mixing the actual light itself.)

If you’re trying to find the code for a specific colour- for example, if you're trying to make your colour scheme match with a colour from your background image- but you don't want to spend hours tweaking colour codes, then it’s no problem;

1) Open up the image which whatever colour you’re after is in with Paint (as standard as Solitaire on Windows machines.)
2) Zoom in (so that you can be sure you’re going for the exact pixel you want to match the colour of), select the "dropper" tool, and click on the colour you’re after.
3) Then go into the "Colors" menu, and select "Edit Colors", and click on "define custom colours." The colour you’ve selected will be the one that comes up, and the Red, Green and Blue component values will be displayed on the bottom right hand side- just convert these values to a hexadecimal number (explained above) and put them into your colour code.

One final colouring tip- if you want your colour scheme to be used by other people, then avoid using Red and Green on each other (eg. red text on a green background) as that is the most common pair of colours that colourblind people (like me...) have in distinguishing from each other.

Return to index

Plugins

Next comes the meat of the Homescreen- the plugins. So far, we’ve set the background image, the name and the default colour scheme- nothing that you couldn’t do without bothering with XML code- however, the real meat of a homescreen is in the plugins, which determine exactly what appears on the screen, and where it appears.

I’m only going to go into the plugins that are installed on the phone by Orange- there are other plugins available for download and installation, but be aware that as well as installing new plugins on your phone, you will also have to either download a Homescreen that includes the plugin, or include it in your own XML file. (Usually, the plugin will include a guide to how it works.)

Return to index

Iconbar Plugin

The first plugin that appears on our homescreen is the iconbar plugin. As far as plugins go, this is as straightforward as they can get- although this has the functionality of being able to show you if you’ve got messages, voicemails, missed calls, GPRS coverage, the state of your battery, how good your signal is and whether your phone is set to silent, it’s all handled by the plugin itself, and doesn’t really need much at all in the XML code.

‹plugin clsid="{837FC251-FE69-43ad-84E0-EBCEDEBA0884}" name="iconbar" height="20"›
‹iconbar fgcolor="COLOR_TRAYTEXT"/›
‹background gradient="title" bgcolor="COLOR_TRAYGRADLEFT" b-border-color="COLOR_WINDOWFRAME" b-border-width="1"/›
‹/plugin›

The opening plugin tag includes the clsid- a big string of letters and numbers (actually a hexadecimal code) which tells the phone where to find the actual plugin program itself), the name of the plugin, and it’s height- the number of pixels the plugin takes up on the screen.

There follows an Iconbar tag, which simply tells the phone to put the iconbar in, as well as specifying the colour to use for the foreground colour. If this is left out, then the phone will use the default fgcolor set above.

Then there is a Background tag, which sets the background colour ("bgcolor"), and the colour and width of the border along the bottom ("b-border-color" and b-border-width.

These both override the defaults set above- there is a hierarchy at work here; colours set within the plugin itself will override the default settings.

(It’s also worth noting at this point that the amount each line is indented makes no difference to the way the XML file runs- it simply makes it look tidier for the coder when XML that is "nested" between two tags is indented, as it becomes more obvious when something like a closing tag is missing.)

There isn’t much that can be modified with this plugin, other than the colours. Instead of using a named colour from the colour scheme, you could replace this with a hexadecimal code. Also, there is the colour "transparent", which when used as a bgcolor will simply allow the background image to show through.

Return to index

MRU (Most Recently Used) Plugin

The next plugin is the MRU- Most Recently Used. This gives you a set of shortcut icons relating to the most recently used programs to let you select them quickly, and it looks like this;

‹plugin clsid="{79EFB752-CB70-446d-B317-499723482B3D}" name="startmru" height="38"›
‹mru y="2"/›
‹/plugin›

Although this looks at first glance to be even simpler than the Iconbar one, there is actually quite a lot that you can tinker with in this plugin.

Firstly, you can change the size of the icons. By default, they are 32x32 pixels, but alternatively, they can be set to 16x16 pixels, meaning that they take up less space on the screen, but give you more options to choose from. To change this setting, add the following code into the MRU tag: icon-size=16

Another setting that can be changed is the highlight colour- by default, the plugin will use the COLOR_HOMEHIGHLIGHT, but if you prefer a different colour (either a hexadecimal colour code, or a different reference colour), add the following code to the MRU tag (hexadecimal code "#000000" has been used as an example): highlight="#000000"

Alternatively, you can create a bitmap image which will override the highlight by using the button-image="imagename.bmp" setting- this points to a bitmap file which will be divided horizontally into four equally sized pieces. The first piece (from the left) will be used for the selected icon when the plugin is selected, the second will be used for the unselected icon when the plugin is selected, the third for the selected icon when the plugin is unselected, and the fourth for the unselected icon when the plugin is unselected.

You can also make sections of the button image bitmaps transparent by using the button-image-transparent setting- this defines a colour (using the colour codes) which will be set to transparent. (By default, there is no transparency.)

By default, the MRU plugin will display as many icons as will fit on the screen. If you prefer, you can limit the number visible- for example, if you don’t want to obscure the background image. To do this, add the following code (where "number" is the number of icons you want to be displayed): max-buttons="number"

The positioning of the icons within the plugin area (set by the height in the first line of the plugin) can also be altered- the X value is the number of pixels along form the left hand edge of the screen you want it to start, and the Y value is the number of pixels down from the top edge of the plugin you want it to start. By default, these are both set to zero, so the MRU icons will begin in the top left hand corner.

An example of the MRU tag with all the available settings (with the exception of highlight, which would be overridden by the button-image setting) is below;

‹mru max-buttons="3" icon-size="16" button-image="mru.bmp" button-transparent-color="#000000" y="2"/›

Also, you can add an "appname" tag to display the name of the selected application- this tag supports the standard formatting elements, and the background of the plugin can be adjusted by adding a background tag- these are explained in the format and background tags section later on.

‹appname ›

Return to index

Clock & Carrier Plugins

Next is the Carrier plugin;

‹plugin clsid="{E09043DF-510E-4841-B652-388316977A7A}" name="carrier" height="40"›
‹label›
‹text›‹carrier/›‹/text›
‹/label›
‹clock›
‹time y="17"/›
‹/clock›
‹/plugin›

This is quite a useful one, because as well as telling you what network you’re on, it also tells the date and time. (The element that tells you what network you’re on can actually be more useful than it appears, as it also lets you know if you’ve set the "Aeroplane" mode on- something very easy to forget to turn off…)

This is the first plugin we have come across which uses ‹text› tags, which are used in some form or other in most plugins (as most plugins involve text being on the screen.) The ‹carrier› tag inbetween the ‹text› tags is something specifically recognised by the Carrier plugin, and the name of the network will be displayed (or "Aeroplane" if the Aeroplane mode has been selected.) The ‹text› tags also support the language conditions, as explained in the "title" section above.

The ‹Time› tag within the ‹Clock› tags works in a similar way to the ‹carrier/› tag within the ‹text› tags- the plugin recognises this as telling it to display the time. Similarly, a ‹Date› tag can be added which will display the date.

Also, there is a new element within the ‹Time› tag; y="17". What this tells the plugin is, instead of just starting in the top left corner of the plugin’s area, to put the time at coordinate y=17; which simply means 17 pixels down. (If you remove this and install the plugin on your phone, you’ll notice that the time and carrier appear in the same spot on top of one another, resulting in a garbled mess…) This and other formatting settings are explained INSERT LINK

There is also another setting that can be included within the ‹Time› and ‹Date› tags; ‹Mode›. In the ‹Time› tag, this can be set to either "12" or "24", setting either a 12 or 24 hour clock. In the ‹Date› tag, it can be either "short" or "long", setting whether the date is displayed either in short or long formats (which are set in the Regional Settings part of the Settings menu- generally, the "short" mode is abbreviated numerical date eg: "25/12/04", while "long" includes the name of the month- eg: "25th December 2004".)

The Clock Plugin works in a very similar way, using the Time and Date tags but without the need for a ‹Clock› tag enclosing them. It does not support the ‹Carrier› tag.

Return to index

Call Progress plugin

The next plugin is the Call Progress;

‹plugin clsid="{37391041-C324-4725-BEE1-3232ED3539CA}" name="callprog" height="41"›
‹background›
‹format state="selected" bgcolor="COLOR_HOMEHIGHLIGHT"/›
‹/background›
‹format state="nocall" visible="false"/›
‹label›
‹text lang="0x0409"›Call in progress:‹/text›
‹text lang="0x0809"›Call in progress:‹/text›
‹text lang="0x040c"›Appel en cours:‹/text›
‹text lang="0x0407"›Telefonverbindung aktiv:‹/text›
‹text lang="0x0410"›Chiamata in corso:‹/text›
‹text lang="0x0816"›Chamada em curso:‹/text›
‹text lang="0x040a"›Llamada en curso:‹/text›
‹text lang="0x0804"›????:‹/text›
‹text lang="0x0413"›Actieve oproep:‹/text›
‹text lang="0x0406"›Igangværende opkald:‹/text›
‹/label›
‹label y="17"›
‹text›‹progress/›‹/text›
‹/label›
‹/plugin›

This simply appears with the message "call in progress" (or whatever is set by the relevant ‹text› tag) when a there is a call in progress, and disappears from view when there isn’t (note the format state="nocall" tag.)

The ‹Progress› tag displays the number that the call is to (or if it is in the Contacts list, the name assigned to the number.)

Return to index

Missed Call Plugin

Next is the Missed Call plugin;

‹plugin clsid="{0BA8ABB8-1F1D-417f-88C6-DA8530E2E7A6}" name="missedcalls" height="20"›
‹background›
‹format state="selected" bgcolor="COLOR_HOMEHIGHLIGHT"/›
‹/background›
‹format state="nocall" visible="false"/›
‹label h="16"›
‹text lang="0x0409"›Missed calls: ‹calls/›‹/text›
‹text lang="0x0809"›Missed calls: ‹calls/›‹/text›
‹text lang="0x040c"›Appels manqués: ‹calls/›‹/text›
‹text lang="0x0407"›Verpasste Anrufe: ‹calls/›‹/text›
‹text lang="0x0410"›Chiamate perse: ‹calls/›‹/text›
‹text lang="0x0816"›Chamadas perdidas: ‹calls/›‹/text›
‹text lang="0x040a"›Llamadas perdidas: ‹calls/›‹/text›
‹text lang="0x0804"›–????: ‹calls/›‹/text›
‹text lang="0x0413"›Gemiste oproepen: ‹calls/›‹/text›
‹text lang="0x0406"›Mistede opkald: ‹calls/›‹/text›
‹/label›
‹/plugin›

This only appears when a call has been missed (as set by the ‹format state="nocall" visible="false"/› tag), and displays whatever text is set by the relevant text string.

This is a very useful plugin- one way to make the most of it is to change the height to 200 (the full height of the screen) and put it right at the top of the homescreen (just cut everything between and including the two plugin tags, and paste it up above the Iconbar plugin, after the closing "Scheme" tag.). That way, if a call is missed, this plugin will appear and take up the entire screen.

Return to index

All Day Event Plugin

Next is the All Day Event plugin- this is similar to the Calendar plugin below, but only appears if an entry for the current day has been set in the Calendar as being an all day event. When it has, this appears with the subject of the event (a useful reminder for those special days like your girlfriends birthday!)

‹plugin clsid="{2FFD93B3-0FF0-4228-A6D6-D2DF177D7D92}" name="alldayevent" height="20"›
‹background›
‹format state="selected" bgcolor="COLOR_HOMEHIGHLIGHT"/›
‹/background›
‹format state="noevent" visible="false"/›
‹label h="16"›
‹text›‹subject/›‹/text›
‹/label›
‹/plugin›

Return to index

Calendar Plugin

This plugin displays the details for the next upcoming event in the Calendar;

‹plugin clsid="{865A354A-4A96-4687-B001-C155DC0DBE76}" name="calendar" height="40"›
‹background›
‹format state="selected" bgcolor="COLOR_HOMEHIGHLIGHT"/›
‹/background›
‹label h="16"›
‹text›‹subject/›‹/text›
‹/label›
‹label y="17"›
‹text›‹time/›‹/text›
‹/label›
‹/plugin›

The supported tags are ‹time› (the start time and date of the appointment), ‹subject› (the "subject" of the appointment) and ‹location› (the location of the appointment.) If any of the fields are not entered in the Calendar, they will appear blank. If there are no upcoming appointments, then the subject will appear as "no upcoming appointments."

Return to index

Message Count Plugin

Next comes the Message Count- a plugin that is virtually essential, and tends to be found on virtually every homescreen.

‹plugin clsid="{2F930BF0-6FE9-4a53-9E17-88E9247BAB48}" name="msgcount" height="20"›
‹background›
‹format state="selected" bgcolor="COLOR_HOMEHIGHLIGHT"/›
‹/background›
‹label›
‹text lang="0x0409"›E-mail (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x0809"›Email (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x040c"›Email (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x0407"›E-Mails (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x0410"›E-mail (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x0816"›Correio (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x040a"›Correo (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x0804"›?? (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x0413"›E-mail (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹text lang="0x0406"›E-mail (‹unreadEmail/›), SMS (‹unreadSMS/›), MMS (‹unreadMMS/›)‹/text›
‹/label›
‹/plugin›

This one can get slightly complicated, as the MMS software isn’t a standard one on all Smartphones, so you might find that it doesn’t appear as you’d expect it to on the screen- either the MMS count is missing, or it ignores your formatting and always displays messages as "Email (0), SMS (0), MMS (0)"- if this is the case, then a solution can be found on the MoDaCo.com website.

Another supported tag not used in the full.home/xml Homescreen is ‹unreadVmail›, which can be added to count new voicemail messages.

Return to index

Profile Plugin

The final plugin in the "full" homescreen is the profile, which simply displays the profile which has been set (ie. Normal, Silent etc.)

‹plugin clsid="{95976968-45D5-40c9-9779-2B859B1C2FEC}" name="profile" height="20"›
‹background b-border-width="0"›
‹format state="selected" bgcolor="COLOR_HOMEHIGHLIGHT"/›
‹/background›
‹label›
‹text lang="0x0409"›Profile: ‹profile/›‹/text›
‹text lang="0x0809"›Profile: ‹profile/›‹/text›
‹text lang="0x040c"›Profil: ‹profile/›‹/text›
‹text lang="0x0407"›Profil: ‹profile/›‹/text›
‹text lang="0x0410"›Profilo: ‹profile/›‹/text›
‹text lang="0x0816"›Perfil: ‹profile/›‹/text›
‹text lang="0x040a"›Perfil: ‹profile/›‹/text›
‹text lang="0x0804"›"z’u•??: ‹profile/›‹/text›
‹text lang="0x0413"›Profiel: ‹profile/›‹/text›
‹text lang="0x0406"›Profil: ‹profile/›‹/text›
‹/label›
‹/plugin›

Return to index

Orange Shortcut plugin

There is a plugin which is exclusive to Orange phones, which appears similar to the MRU icons on the screen- however, instead of displaying icons to link to the most recently used programs, this plugin displays icons which link to predefined fixed links.

Although this plugin isn’t used in the "full" Homescreen, it is used in two different ways in the "Orange Layout 1 (default)" Homescreen, which you can find in the /Windows folder of the phone (note- not /IPSM/Windows) under the filename ukfinal.home.xml. The first appears at the top of the screen as 5 large icons to the Orange website, Contacts, inbox, Calendar and Call History. The second way it’s used is for the shortcuts lower down on the page to "News", "Gallery", "Sport" and "Downloads" (all of which are actually links to parts of the Orange website.) This is actually the same plugin used twice- once for each row.

As this plugin is not fully publically documented, and also is quite tricky to assign icons to programs, rather than give a full guide here to how to customise it I would instead advise that if you want to put fixed icon links in your Homescreen to download the alternative Shortcut plugin by RemyJ (available at http://smartphone.peakin.com/) which is more effective at finding a relevant icon, and can also alternatively use image files such as JPEGs or GIFs for the icons, so you could customise your own icons to fit in with your theme- this plugin has the added advantage in that it can be used for any phone on any network- at present, there doesn’t seem to be any way to install the Orange shortcut plug on another, non-Orange phone.

Return to index

Plugin Elements

"Format" and "Background" tags

"Format" and "Background" are two similar tags used in most plugins to deal with the way information is presented on the screen, such as the font settings, margins, alignment of text, colours and so on.

If no settings are entered in the plugin section of the XML, then the "default" settings set near the top of the homescreen XML will be used.

The following settings can be entered in the "background" section, simply by entering them inbetween a pair of background tags within the plugin XML;

Background

• bgimage- Setting this as a filename of an image file in the IPSM/Application Data/Home folder (or the full pathname if the image is elsewhere) sets this as the background image for the plugin, which will be drawn over the top of the homescreen background image or colour. The default setting is the systems foreground colour (usually transparent.)
• bgcolor- Setting this a a colour (either a hexadecimal colour code or a colour name reference) sets the background colour for the plugin. The default setting for this is transparent (meaning that the backgound image is visible.) This is often used in conjunction with the format state="selected" setting to highlight the plugin when selected.
• halign- sets the horizontal alignment of the background image, within the plug-in's drawable region (ie. within the plugin's height and any borders set.) Possible settings are left, right, center- default setting is left. Note- when used within the format tag, sets the horizontal alignment of the plugin element- usually text.
• valign- sets the vertical alignment of the background image, within the plug-in's drawable region (ie. within the plugin's height and any borders set.) Possible settings are top, center, bottom.- default setting is top. Note- when used within the format tag, sets the vertical alignment of the plugin element- usually text.
• l-border-width
• t-border-width
• r-border-width
• b-border-width- Sets the size of the border of the plugins- (left, top, right and bottom, respectively) in pixels. The default values are all zero (ie. no border.)
• l-border-color
• t-border-color
• r-border-color
• b-border-color- sets the colour of the borders (left, top, right and bottom, respectively), either as a hexadecimal code or colour name reference. The default setting is black (#000000)
• gradient- sets a colour gradient to use when drawing the background. Possible values are "title" and "app". The default setting is no gradient. If the plug-in accepts selection and the background is set to app, the background will draw using the selected gradient colors automatically. This can be overridden by using a element within the plug-in.

Return to index

Format

The Format tag works in a similar way to Background, but tends to deal with the text being displayed in a plugin, rather than the background image/colours and borders.

The following settings are supported;

• State- the plugin state to which the formatting applies- either "selected" or "unselected". The default state is "unselected"- any settings for the "selected" state will override the default settings when the plugin is selected.
• Bgcolor
The background color for the element. The background image is drawn over-top of the background color. Default value is the system background color. ‘transparent' is also accepted as a value. Does not apply to text backgrounds.
• Bgtext- sets a background colour for the text- default value is transparent. (Useful when the text is unclear against a colourful background.)
• font-face- sets the font to be used to display any text. Note that there is a bug that prevents fonts other than the system fonts to be used. A fix can be found on the MoDaCo forums (Note that you need to be registered and logged in to see attachments and downloads.)
• font-size- sets the size of the font used to display any text.
• font-style- sets the style of any text- either italics or normal. Default setting is normal.
• font-weight- sets the weight of the font as a value between 100 and 900 in increments of 100. Other values are "bold" (equal to a weight of 700) and "normal (equal to a weight of 400.) Default is 400.
• Fgcolor- sets the foreground colour- the colour used for any text or other elements.
• Halign- sets the horizontal alignment of an element (usually text.) Possible values are left, right and center. Default setting is left.
• Valignsets the vertical alignment of an element (usually text.) Possible values are top, center and bottom. Default setting is top.
• X- sets the X co-ordinate (number of pixels from the left hand edge) to start drawing the elements of the plugin.
• Y- sets the Y co-ordinate (number of pixels from the top) to start drawing the elements of the plugin.
• W- sets the width of the element, either in pixels or as a percentage of the screen size.
• H- sets the height of the element, either in pixels or as a percentage of the plugin height.
• Padding-left
• padding-right
• padding-top
• padding-bottom- sets a margin (measured in pixels) on the left, right, top and bottom of the plugin. Default values are zero.

Return to index



Feedback welcome: SomeRandomNerd @ hotmail.com