My IC Phone Customization Guide

All Rights Reserved Alcatel-Lucent 2010

My IC Phone
Table of Content 1 About this guide ...................................................................... 4
1.1 1.2 1.3 1.4 1.5 2.1 2.2 2.3 2.4 Who Should Read This Guide .......................................................................... What This Guide Tells You ............................................................................. Related Developers Guides ............................................................................ Terminology and Definitions ........................................................................... Whats New in this Version ............................................................................ File organization ........................................................................................ Default skin .............................................................................................. Total Skin ................................................................................................. Partial Skin ............................................................................................... 4 4 4 4 4 5 6 6 6

2 The My IC Phone Skin Manager ..................................................... 5

3 .File loading process ................................................................. 7 4 skin.xml descriptor file .............................................................. 8 5 Graphical Library ................................................................... 10

All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 2
Page 7

My IC Phone
Document history Edition 1 Interface Version Abstract References [1] My IC Phone Developers Guide March 2010 Initial edition

IC Touch Software Development Kit R1.0 This guide describes how to customize the My IC Phone user interface.

Copyright 2004-2010 by Alcatel-Lucent. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form for commercial purpose is prohibited without prior permission from the copyright holder. In the interest of continued product development, Alcatel-Lucent reserves the right to make improvements to this document and the products it describes at any time without notice or obligation. All trademarks and copyrights referred to are the property of their respective owners.

All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 3
Page 7

My IC Phone
1 ABOUT THIS GUIDE
1.1 Who Should Read This Guide
This guide is for graphic designers, developers or users who wish to customize the user interface of the Alcatel-Lucent My IC Phone. The reader should be familiar with web technologies such as HTML, CSS and javascript .

1.2 What This Guide Tells You

This document explains how the user interface of the phone can be modified and/or adapted.

1.3 Related Developers Guides

This guide is part of the Alcatel-Lucent ICTouch SDK intended to help design applications for the My IC Phone. It is recommended for the reader to consult the other components as well. Additional information and documentation enterprise.alcatel-lucent.com. are available online at http://developer-

1.4 Terminology and Definitions

API CSS HTML JS Skin Theme XML Application Programming Interface Cascading style sheet Hypertext Mark-up Language: language used to write documents for the World Wide Web (WWW) JavaScript Set of resources that modify the appearance and/or layout of a graphical user interface Collection of resources such as skins, sounds, artworks used to customize the look and feel of an environment eXtensible Markup Language

1.5 Whats New in this Version

This is the first version of the customization guide, one of the components of the IC Touch SDK. It describes how to adapt an existing skin or create a new one. It provides a library of all graphical objects implemented in the IC Touch.

All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 4
Page 7

My IC Phone
2 THE MY IC PHONE SKIN MANAGER
The skin is the visual part of a web application. It consists in a set of styles and graphical options that can drastically impact the look and feel of a user interface. A skin is typically made of cascading style sheet files (defining colors, object size and position, fonts, etc.) and images (background pictures, icons, etc.). All skins within the My IC Phone are managed by the skin manager application.

2.1 File organization

A skin is described in the skin.xml descriptor file (refer to the skin.xml section), used by the skin manager. Each skin is composed of the following files that are defined for the related web application(s): main.css : first loaded style file (MANDATORY) Folder Images containing graphical files: Backgrounds Icons Buttons

Figure 1 File tree of a theme

A theme usually deals with more than one web application. For each web application, the installation process will create the corresponding theme subfolder in the webApp folder and copy the package content (see also file organization details in [1]). All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide
Page 5
Page 7

My IC Phone

Figure 2 Theme installation from a package to the IC Touch

2.2 Default skin

The Default skin is available for every web application. The aim of this skin is to provide a generic style applicable even to external web applications. The Default Skin is a particular total skin.

2.3 Total Skin

A total skin is a complete alternative to the Default and contains replacements for all files of the Default skin. A total skin has to be exhaustive, define every style, every interface for GUI Elements, every button. The work required to create a total skin is quite important, but it allows users to fully personalize their MY IC Phones.

2.4 Partial Skin

A partial skin consists in a partial replacement of one or more total skin file(s). It is always associated with a total skin (event if it is the Default one) A partial skin does not have to be exhaustive. The skin manager loads the associated total skin, and then overloads it with the partial skin file(s). Only css properties and images are replaced. While this type of skins allows for much less personalization, they are quite fast to develop. It is very easy for example to change a logo, a font or a color. All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 6
Page 7

My IC Phone
3 .FILE LOADING PROCESS
In order to clarify the difference between types of skin, the following diagram shows the file loading process. As an example, we load the Directory web app described in [1] that requires some css/images files.
Get an interface file
webApplication
Loading web application [WA]

Skin Manage

File manager

Require css files [CF]

Catch the file request

Get current skin informations : Total Skin [TS] Partial Skin [PS]

Total skin?

Yes

Construct file path for the total skin (webApp/[WA]/ themes/[TS]/)

HTTP get of the required file. webApp/[WA]/themes/[TS]/[CF]

File exists?

Yes

Load the required file No (Default) Partial skin required? No

Yes

End process

Construct file path for the total skin (webApp/[WA]/ themes/[PS]/)

HTTP get of the required file webApp/[WA]/themes/[PS]/[CF]

File exists? No End process

Yes

Load the required file

Construct file path for the Default skin (webApp/[WA]/ themes/Default/) WA : Web Application TS : Total Skin PS : Partial Skin CF : Css File End process

End process HTTP get of the required file webApp/[WA]/themes/Default/[CF]

Load the required file

All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 7
Page 7

My IC Phone
4 SKIN.XML DESCRIPTOR FILE
The skin.xml file provides the following information about the skin: Name (single) Skin type (Partial/Total) Version Associated Total Skin (if partial) Webapp supported by current skin Here is an example for the Alcatel-Lucent partial Skin, which overloads the Default total skin. <?xml version="1.0" encoding="UTF-8" ?> <skin> <name>Alcatel-Lucent</name> <skintype>partial</skintype> <overloading>Default</ overloading > <version>1.0</version> <webapps> <webapp name="directory"> <file type="css"> main.css </file> <file type="images.btn"> directory.btn.removeContact.png </file> </webapp> <webapp name="homepage"> <file type="css"> main.css </file> <file type="css"> previews.css </file> <file type="images.bg"> Homepage.bg.previews.png All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 8
Page 7

My IC Phone
</file> </webapp> </webapps> </descript>

All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 9
Page 7

My IC Phone
5 GRAPHICAL LIBRARY
The list, detailed description and the attributes of all the graphical objects associated with the My IC Phone user interface is available on http://developer-enterprise.alcatel-lucent.com in the IC Touch SDK section. Be sure to check online for the most recent version of the library.

END OF DOCUMENT

DEVELOPER-ENTERPRISE.ALCATEL-LUCENT.COM

All Rights Reserved Alcatel-Lucent 2010 My IC Phone Customization Guide

Page 10
Page 7