Thursday, May 14, 2009

Generic mobile device Skinning

Generic Skinning

Disclaimer:

  • All the software applications that appear below represent trademarks and they are the property of their respective owners.
  • Software piracy is not encouraged in this article.
  • Use and implement my notes in this article at your own risk.

The next steps will show how to do the the skinning by writing your own UI which will replace the existent UI from your mobile device.
By mobile device I refer here those GPS devices used for navigation: Pocket PC (PDA), PND (PNA) and Smartphones.
This article refers to any of the GPS devices above that runs on Microsoft Windows CE 5.

This skinning may be realized by using the SystemInformation application, at this time at version 1.6.1, written by Schumann.

1. Prerequisites

1.1. Microsoft ActiveSync. This is a Microsoft free application (at this time at version 4.5) that allows your Personal Computer (PC) to interconnect with the mobile device by using a USB connection. Of course, being a Microsoft application, you will need to have a Windows OS preinstalled. ActiveSync connection is helped by a browser capabilitywhich allows you to show the contents of your mobile device; this ActiveSync browser is integrated with Windows Explorer PC app.
Image: ActiveSync Guest connected

Download it from here:
Download ActiveSync

1.2. CeRegEditor version 0.0.4.3. This application will allow you to edit the registry of your WinCE based device.

Image. CERegEditor expanded

Download it from here:
Download CERegEditor

1.3 System Information v. 1.6.1
. This is a PC application that provides a UI application for your mobile; you can edit the configuration files and customize your own UI.

Image. SystemInformation v. 1.6.1

Download it from here:
Download SystemInformation

Optionally, you may download icons which will help you to design your own UI from here:
IconArchive
Iconspedia
Download and install the files above.

2. Start ActiveSync
Connect your device to PC via USB.
Start ActiveSync application from the PC. A gray refresh icon will appear on the windows taskbar in the notification area.
Checkout the USB mobile device type connection. Your mobile device USB connection should provide these 2 operation types: Mass Storage and ActiveSync. Check ActiveSync; the device will restart and re-enter in the main menu.
If the coonection was successful then the grey icon in the notification area will become green and your device is connected to PC. You may click on ActiveSync's "explore" and see the content of your device.

3. Find out which UI application is installed.
This step is mandatory in order to change the location of the application that will be started by WinCE when the device starts.
Open CeRegEditor, expand HKEY_LOCAL_MACHINE (HKLM), click on "Item" and look for the value of "Launch50". "Launch50" tells WinCE which is the start shell that it will launch when the device starts.
Change the existent "Launch50" value to "\[SD Card]\SystemInformation\SystemInformation.exe", where "[SD Card]" is the mapped drive of your SD card (ie. "SDMMC", or even "SD Card").
Now you shortcut-ed your existent UI application and WinCE will run the "\[SD Card]\SystemInformation.exe" UI application instead.

Note: CeRegEdit will work only if device is connected to PC via ActiveSync.

4. Establish the SystemInformation files you will work with.
Unzip the downloaded "SystemInformation1.6.1_Desktop.zip" file to "c:\SystemInformation" folder on your PC.
Look inside "c:\SystemInformation\SysInfoSettings.ini". You will see the line "Main/main.ini". This means that when mobile device started, the SystemInformation will firstly load the "main.ini" configuration file and will output the "main" UI panel.
There are many "INI" files in this structure and each of "INI" file coresponds to an UI Panel.
Look inside "c:\SystemInformation\Icons" folder. You will see some 16x16, 32x32, 128x128 resolution icons. These icons are used in the panels we define as UI pages of SystemInformation.exe application.
Run the SystemInformation32.exe application from your PC. You will see these UI pages consisting and the icons from "c:\SystemInformation\Icons" placed on UI buttons.
You can also create bitmaps instead of icons, but you will loose some UI benefits (transparency, alpha filtering, scaling, etc) which we'll discuss later.
Use external image editors (Photoshop, Fireworks) to create/edit your own icons and bitmaps.
The above files you will work with.
Note: the SystemInformation32.exe was written by Schumann to preview the UI application changes on PC.
SystemInformation32.exe will run only on your PC (assuming a Windows OS on 32 bits) and SystemInformation.exe will run only on your mobile device.
Practically, both EXEs behaves the same but on different OS architectures.

5. Work with the INI configuration files.
Open Notepad.
Go to "File -> Open". Browse for: "c:\SystemInformation\Main\main.ini" file and open it.
You will see more sections like:
a. GLOBALSETTINGS section
b. BATTERY section
c. TIME section
d. DATE section
e. ICONXPBUTTON section
f. TEXT section
g. BUTTON section
h. WINDOWSBUTTON section
i. BITMAPBUTTON section
j. other sections

We'll explain each of them below:

a. GLOBALSETTINGS section
As we said before, any "INI" file coresponds to an UI Panel, so the GLOBALSETTINGS will refer to the global settings for that panel.
Having the next section:

GLOBALSETTINGS
ShowMessage = 0
QuitOnDoubleClick = no
X = 0
Y = 0
Width = 320
Height = 240
Arrange = No
BackgroundBitmap = ..\background.bmp
StartUpAnimation = RollDown
ShutDownAnimation = RollDown
Accelerated = yes
TopMost = no

Then, the panel will show no message, will not quit at double click, will start from the point (0, 0) and will end to the point (320, 240). The point (0, 0) coresponds to the upper-left corner.
The panel will have a background image given by "BackgroundBitmap", will have accelerated "RollDown" animation when it starts and accelerated "RollDown" animation when it quits.
The "TopMost" attribute says that this panel will run as the top most panel in the UI graphics layer.
Note: I haven't seen "TopMost" working well.

b. BATTERY section
Having the next section:

BATTERY
x = -6
y = 6
Width = 32
Height = 12
ColorBattery = A0A0A0
ColorHigh = 00A000
ColorLow = A0A000
ColorCritical = A00000
Segments = 3


The attribute names say all.

c. TIME section
Having the next section:

TIME
x = 114
y = -38
Color = A0A0A0
Format = HH':'mm' Uhr'
Size = 24
Weight = 700
CreateFont
Interval = 60000

This will output the current time.
The attribute names say all.
"Interval" is set to miliseconds, thus the interval defining a minute. In the "Format", "HH" is 2-digit hour, aso.

d. DATE section
Having the next section:

DATE
x = 119
y = -18
Color = A0A0A0
Size = 20
Weight = 700
CreateFont

This will output the current date.
The attribute names say all.

e. ICONXPBUTTON section
Having the next section:

ICONXPBUTTON
x = 24
y = 22
Command = \sdmmc\navigator\mnavdce.exe
SizeNormal = 96
SizePushed = 128
ScaleAlpha = 70
IconNormal = ..\Icons\MN5.ico
ScaleAlpha = 100
IconPushed = ..\Icons\MN5.ico
QuitOnExecute = yes

When shown, the ICONXPBUTTON will have the image given by "IconNormal", will start at (24, 22) and will end at (24+96, 22+96), "96" being given by "SizeNormal" and will have an Alpha transparency filter of 70% given by "ScaleAlpha = 70".
When pushed, the ICONXPBUTTON will have the image given by "IconPushed", will start at (24, 22) and will end at (24+128, 22+128), "128" being given by "SizePushed" and will have an Alpha transparency filter of 100% given by "ScaleAlpha = 100".

Note: Try to follow the attribute order given in this section. Do not change the order for example for "ScaleAlpha" atribute as the SystemInformation may not correctly render the UI panel.

"QuitOnExecute = yes" will quit the main panel and also the SystemInformation, but after it will launch "\sdmmc\navigator\mnavdce.exe" given by "Command".
You may enter any WinCE executable file (*.exe) on the "Command" attribute by using the physical or relative path.
The physical path should start with "\" followed by the drive you want to access.
Examples: "\[WinCEDir]\explorer.exe", "\[SDCard]\Games\sudoku.exe", where "[WinCEDir]" is the Windows CE instalation folder seen as a drive.
The relative path refers to the current folder. Thus, if you want to access the parent of the current folder your path should start with "..\".
Example: "..\Games\sudoku.exe".
In a relative path if you want to access a subfolder of the current folder, your path should start with the name of that subfolder.
Example: "Main\main.ini".


f. TEXT section
Having the next section:

TEXT
x = 40
y = 120
Text = Navigation
Color = FFFFFF
FrameColor = 000000
Size = 24
Weight = 700
CreateFont

This section will create a text UI object with the size of 24. The text outputed is "Navigation".

g. BUTTON section
Having the next section:

BUTTON
x = 0
y = 228
Height = 12
Width = 320
Command = "\Program Files\ShowTaskbar.exe"

This is a particular type of ICONXPBUTTON which will output a button having no associated image.

h. WINDOWSBUTTON section
Having the next section:

WINDOWSBUTTON
x = 120
y = 52
Width = 80
Height = 50
Text = Apps
ColorPushed = AAAAAA
NewIni = ..\Apps\apps.ini
ShutDownAnimation = FlyDiagRightDown

This will define a button having the Windows aspect (kind of "OK" or "Cancel" Windows XP buttons), having the text "Apps".
The "NewIni" attribute defines the next panel that is shown when pushing this button.
Note: The "NewIni" applies also to ICONXPBUTTON and BUTTON sections.

i. BITMAPBUTTON section
Having the next section:

BITMAPBUTTON
x = 167
y = 185
NewIni = ..\Games\games.ini
Command = "\Games\msgames.exe"
BitmapNormal = ..\Icons\games.bmp
BitmapPushed = ..\Icons\games1.bmp

This will define a bitmap button, ie. you may associate an image of type "bmp" to it.
Note: the transparency, Alpha transparency filter and scaling will not work for the BITMAPBUTTON.

j. other sections
There exists other type of sections like: DISKMEM (occupied space on disk), MEMORY, aso. We just described the most important ones.

4. Saving all your work to mobile device.
After you have created and edited the INI and bitmap files, you put them in subfolders under "c:\SystemInformation" on your PC. Make sure the "Command" attribute from the INI files match the respective executable files.
Also, make sure the "SystemInformation.exe" is located under "c:\SystemInformation" folder. If the PC executable "SystemInformation32.exe" is still located under "c:\SystemInformation" folder, then you may delete it.
After you formed the SystemInformation structure, reconnect your device to USB in the "storage card" mode and not in the ActiveSync mode. Thus, you will have access to the "SD Card" drive which will appear onto your PC as a "Removable device".
Copy the "c:\SystemInformation" folder and all of its contents to this "Removable device".

Now you're done.

Finally note:
after all the above operations, a device restart is required.
Do not close the device from the main "ON-OFF" button. Firstly "suspend" it by pushing the Stand-by top button and then push the main "ON-OFF" button.
Otherwise your changes will not have any effect.

Tuesday, May 12, 2009

Mobile device YFAP skinning

YFAP20 Skinning

Disclaimer:

  • All the software applications that appear below represent trademarks and they are the property of their respective owners.
  • Software piracy is not encouraged in this article.
  • Use and implement my notes in this article at your own risk.


The next steps will show how to do the the skinning by rewriting code portions in a sold UI, named YFAP (Yuan Feng), version 2.0. This version is present on most of noname chinese devices, as long as on Navigo V1 and other devices.
I successfully applied the YFAP skinning on the chinese device PCNET PH 3511.

Image: PCNET PH 3511

Note: If your device has an UI that looks like the one from the image above then your UI is YFAP20.

However, if your device runs any other UI application, the skinning may be done by using the SystemInformation application, at this time at version 1.6.1, written by Schumann; some aspects regarding this type of skinning will be presented in another topic.

1. Prerequisites
1.1. Microsoft ActiveSync. This is a Microsoft free application (at this time at version 4.5) that allows your Personal Computer (PC) to interconnect with the mobile device by using a USB connection. Of course, being a Microsoft application, you will need to have a Windows OS preinstalled. ActiveSync connection is helped by a browser capability which allows you to show the contents of your mobile device; this ActiveSync browser is integrated with Windows Explorer PC app.

Image: ActiveSync Guest connected

Download ActiveSync from here:
Download ActiveSync

1.2. XDA RAPI Tools. As long as ActiveSync and WinCE 5 are made by Microsoft, there are cases in which the ActiveSync browser will not show all the contents of your mobile device, thus, some hidden folders/files will not be listed by the ActiveSync browser and, what is worst, they cannot be accessed in any way. In this case, you will use the XDA Tools which are PC text commands, ie. you will use the Windows "cmd" or "command" to launch these tools from the prompt.
Download these from here:
Download XDA RAPI Tools

1.3. CeRegEditor version 0.0.4.3. This application will allow you to edit the registry of your WinCE based device.

Image: CERegEditor Expanded

Download it from here:
Download CERegEditor

1.4. PE Explorer v. 1.99 R5. This is a trial version that will expire after 30 days; the good thing is that you have enough time to skin your device in 30 days. This tool will be used to edit the binary resources of YFAP in order to see where it maps its background, button, aso. images.

Image: PE Explorer Resource Editor

Download this from here:
Download PE Explorer

Optionally, you may download icons which will help you to design your own YFAP UI from here:
Iconarchive
Iconspedia

Download and install the files above.

1. Start ActiveSync
Connect your device to PC via USB.
Start ActiveSync application from the PC. A gray refresh icon will appear on the windows taskbar in the notification area.
Checkout the USB device type connection. In the device's main menu, click on "settings", then "sys. info", then USB; your USB Connection will provide 2 operation types: Mass Storage and ActiveSync. Check ActiveSync and click on "close" (upper-right X button); the device will restart and re-enter in the main menu.
If the coonection was successful then the grey icon in the notification area will become green and your device is connected to PC. You may click on ActiveSync's "explore" and see the content of your device.

2. Find out if YFAP UI application is installed.
This step is mandatory in order to see if your device runs YFAP shell.
Being a generic application, YFAP20 will usually install on this path:
\ResidentFlash2\YFAP20
However, you have to be sure that YFAP is installed there and that is because the "\ResidentFlash2" folder is hidden, ie. you cannot browse it with ActiveSync.
In this case, you open CeRegEditor, expand HKEY_LOCAL_MACHINE (HKLM), click on "Item" and look for the value of "Launch50". "Launch50" tells WinCE which is the start shell that it will launch when the device starts. If your device runs the YFAP shell then you will see the "YFLoader.exe" value for "Launch50". In this case, YFAP is installed on the above path.
Note: CeRegEdit will work only if device is connected to PC via ActiveSync.

3. Establish the YFAP files you will work with.
In order to work with YFAP you will use the XDA Tools.
Once you downloaded the XDA Tools, unzip them in:
"c:\itsutilsbin" folder.
Click on "Start" -> "Run" and type "cmd".
Once the black windows appeared type:
"cd \itsutilsbin", type "dir" and you will find the XDA tools there.
Assuming you're still connected to the device via ActiveSync, type this at the command prompt:
"pdir \ResidentFlash2"
In the listing it should appear the folder "YFAP20". Type this:
"pdir \ResidentFlash2\YFAP20". There will appear 2 folders: "Language" and "Skins".
Type "pdir \ResidentFlash2\YFAP20\Language" to ensure there are no other folders in Language. This folder contains all the languages supported by YFAP when you click on "settings" -> "language" -> "language".
Type "pdir \ResidentFlash2\YFAP20\Skins". You will see 2 folders: "YFGB_Blue_BT" and "YFGB_Yellow_BT". These are the 2 skins that you switch in the YFAP UI when you click on "settings" -> "language" -> "skin"
We will focus on the "blue" skin, so type "pdir \ResidentFlash2\YFAP20\Skins\YFGB_Blue_BT". In the listing there are a lot of XML configuration files and a DAT file. The DAT file represents the resources file, ie. it is a binary file that stores bitmaps that appear on YFAP screen and their properties.
Of course you may recursively view all these by typing:
"pdir \ResidentFlash2 -r".

On your PC create the folder:
"C:\mobile_yfap".
Inside it create "YFAP20" folder. Inside "YFAP20" create the "Language" and "Sins" folders. Inside "Skins" create the "YFGB_Blue_BT" and "YFGB_Yellow_BT" folders.
Go again to "C:\itsutilsbin".
Type "pget \ResidentFlash2\YFAP20\Language\*.* c:\mobile_yfap\YFAP20\Language". You just copied all the language files from YFAP's "Language" to PC.
Type "pget \ResidentFlash2\YFAP20\Skins\YFGB_Blue_BT\*.* c:\mobile_yfap\YFAP20\Skins\YFGB_Blue_BT". You just copied the XML configuration files and the DAT file of YFAP "blue" skin to PC.
These are the files you will work with, eventually backup them in order to keep the originals.

4. Work with the YFAP DAT resources file.
Open PE explorer.
Go to "File -> Open". Browse for: "c:\mobile_yfap\YFAP20\Skins\YFGB_Blue_BT\yfgb_Blue_bt.dat" file and open it.
Go to "View -> Resources". Expand the "Bitmap" node. You will see a lot of resources, starting with 101. Click on "101". The bitmap will open in the right. This is the background of the device main menu.
Right-click on "101" and select "Edit Resource". The "Resource Editor" will appear and will show the current image and a question quote image.
You may save the bitmap from the "Resource Editor" to a temp location on your PC. Then you can open and edit it using an image editor (Photoshop, Fireworks, etc).
You may reintroduce the bitmap in the DAT file using the "Resource Editor". Click on "open" icon and select the image you just edited using the external image editor. Then the current image will change to that image.
The same process may be applied for all the bitmaps you want to change.
When you finished the work with the "yfgb_Blue_bt.dat" file, click on "File -> Save all" of your work.
Do not close the yfgb_Blue_bt.dat and PE Editor yet.

Note: you cannot "add" a new resources to DAT file, you can only "edit" the resource by using PE Explorer. The DAT file contains resources for the rest of configuration XMLs: power.xml, media.xml, aso. You may redesign these configurations XMLs, too, but be aware of which resource you want to edit, because it may be referred by the other configuration XMLs.

5. Work with YFAP configuration files.
Open "c:\mobile_yfap\YFAP20\YFGB_Blue_BT\shell.xml" with Notepad or any other text editor from PC.
Search for "101". You will find the line:
101,102,102,0
What this means ? It means that the graphic element from the YFAP UI that is enclosed between the current "
" and "
" will have a background picture with the ID=101.
More exactly: when shown, the graphic element will have PID=101; when clicked it will have the PID=102; when visited it will have PID=102. The PID XML element will represent the corresponding bitmap from the "yfgb_Blue_bt.dat" file we discussed above.

5.1. Work with the graphical SECTIONs in the shell.xml file.
There are more types of SECTIONs in the shell.xml file:
a. the TEXT SECTION where you may enter a text;
b. the BUTTON SECTION where you may map a bitmap and apply an event on releasing the button.
c. BATTERY SECTION - show the battery power consuming;
d. TIME SECTION - this is a particular TEXT SECTION;

a. the TEXT SECTION;
Having the next section:

<section class="YFStatic" name="MENUTITLE" id="1001">
...
<color normal="Title_Color"></color>
<text font="TITLE">SHELL_MAIN_TITLE</text>
...
</section>


By specifying CLASS="YFStatic" you will tel YFAP that the element is a TEXT.
You have the "" xml element, whose value is "SHELL_MAIN_TITLE".
Now, open "c:\mobile_yfap\YFAP20\YFGB_Blue_BT\Language\English.xml" with Notepad or any other text editor from PC and search for "SHELL_MAIN_TITLE". You will find the text value that will be out-ed on this TEXT element.
You have the "" xml element, whose attribute Normal value is "Title_Color".
Now, open "c:\mobile_yfap\YFAP20\YFGB_Blue_BT\COLOR.xml" with Notepad or any other text editor from PC and search for "Title_Color". You will find the color value with which the TEXT element will be out-ed.
Note: the TEXT element may be applied also on buttons.

b. the BUTTON SECTION;
Having the next section:

<section class="ShellButton" name="Mp3" id="1001">
<rect>115,46,205,136</rect>
<pid>106,107,107,0</pid>
<style>WS_VISIBLE,BS_PUSHBUTTON,BS_CENTER,BS_BOTTOM,BS_TRANSPARENTIMAGE</style>
<text font="Button">SHELL_MP3</text>
<exe>Mp3.exe,Mp3D.exe</exe>
</section>


By specifying CLASS="ShellButton" you will tel YFAP that the element is a BUTTON.

Look at the "PID" element. This tells that the "106" bitmap from "yfgb_Blue_bt.dat" file will be appied on this button.
the RECT element defines the start and end pair (X,Y), such as: Xstart=15, Ystart=46, Xend=205, Yend=136. The (0, 0) point is the upper-left corner of the screen.
The STYLE element defines the button's style.
The EXE element defines the WinCE compatible application that will be launched when releasing the button (in our case there are 2 exclusive application - first found = first launched).

c. the BATTERY SECTION;
Having the next section:

<SECTION name="power" class="CYFPower" id="1100"></section>
...
<PID>116,115,114,113,112,118</PID>
<LEVEL>0,20,35,55,80,100</LEVEL>
...
</SECTION>



The CLASS="CYFPower" defines a BATTERY SECTION.
The LEVEL element defines the level of battery (min=0=consumed, max=100=full).
The PID element, in this case, defines the images for any of the LEVELs defined.

d. TIME SECTION;
Having the next section:

<section name="timeDisp" class="CYFTimeLabel" id="1101"></section> <rect>6,11,50,23</rect>
<color normal="Title_Color"></color>
<text font="Time"></text>
<style>WS_VISIBLE,BS_CENTER,BS_VCENTER</style>
</section>



The CLASS="CYFTimeLabel" tells YFAP that this is a TIME element.

5.2 Interractions between panels by using system SECTIONs in the shell.xml file.
In YFAP a panel (or window) is named "Dialog".
Practically, a panel is a Dialog window that opens on the top of the parrent Dialog window.

There are 3 other SECTION XML elements that realize operations between Dialogs.
a. DIALOG SECTION - this defines the properties of a Dialog.
b. NEXT DIALOG SECTION - this is a particular BUTTON SECTION; it opens an YFAP UI Dialog;
c. CLOSE DIALOG SECTION - this is a particular BUTTON SECTION; it closes an YFAP UI Dialog;


a. DIALOG SECTION;
First of all, the DIALOG element is defined below:

<DIALOG name="OtherDlg">
<FONT NAME="Button" FACE="Marlett" HEIGHT="15" WEIGHT="FW_BOLD" />
<FONT NAME="Title" FACE="Marlett" HEIGHT="28" WEIGHT="FW_BOLD"/>
....
</DIALOG>


This tells YFAP there exists a DIALOG named "OtherDlg" that may contain SECTION elements.

In this Dialog you may find the next section:

<SECTION CLASS="YFDialog" NAME="System">
<RECT>0,0,320,240</RECT>
<PID>131</PID>
</SECTION>


The CLASS="YFDialog" defines a DIALOG SECTION.
Here is defined the background image for this Dialog.


b. NEXT PANEL SECTION;
Having the next section in a Dialog:

<SECTION CLASS="ShellButton" NAME="SettingsNext" ID="1064">
<RECT>72,154,168,212</RECT>
<PID>613,614,614,0</PID>
<STYLE>WS_VISIBLE,BS_PUSHBUTTON,BS_CENTER,BS_BOTTOM,BS_TRANSPARENTIMAGE</STYLE>
<COLOR Normal="MainBtn_Color" Select="MainBtn_HiLight_Color" Focus="MainBtn_Color" Disable="#888888" />
<EXE>OtherDlg</EXE>
</SECTION>

We may observe that the CLASS="ShellButton" defines a button.
The action of the button is given by the "EXE" element and this time it does not pint to an executable file, but it points to a "OtherDlg" which we discussed above and which is a Dialog.

c. CLOSE PANEL SECTION;
Having the next SECTION:

<SECTION CLASS="YFButton" NAME="Close" ID="1000">
<RECT>285,0,320,35</RECT>
<PID>132,133,0,0</PID>
<STYLE>WS_VISIBLE,BS_PUSHBUTTON,BS_TRANSPARENTIMAGE</STYLE>
<COLOR Normal="MainBtn_Color" Select="MainBtn_HiLight_Color" Focus="MainBtn_Color" Disable="#888888" />
</SECTION>



This SECTION "closes" a Dialog.
However, the effect is more like a "back" from Dialog button.
As we said, YFAP opens a new Dialog on top of its parent Dialog... And it can do that several times, so we may have Dialog in Dialog in Dialog, etc.
When we click the close button the last opened Dialog which is also the top most will close. This will happen to all Dialogs until the main Dialog is reached, and thus resulting the "back" button efect.

Note: when using the "close" button, always be sure it has the attribute-value pair ID="1000". If ID has any other value than "1000" then YFAP will not know this is a "close" button.

Save all your XML files.

6. Saving all of your work to mobile device.
As long as ActiveSync doesn't show the content of ResidentFlash2 folder we will use again the XDA RAPI Tools.
Make sure the device is still connected via ActiveSync.

From the "C:\itsutilsbin" command prompt, type this:
"pput c:\mobile_yfap\YFAP20\Skins\YFGB_Blue_BT\shell.xml \ResidentFlash2\YFAP20\Skins\YFGB_Blue_BT -f"
This will copy the shell.xml file on the device. Do not forget the "-f" parameter as it is used to overwrite the existing file on the device.
Proceed the same for the rest of the files:
"pput c:\mobile_yfap\YFAP20\Skins\YFGB_Blue_BT\COLOR.xml \ResidentFlash2\YFAP20\Skins\YFGB_Blue_BT -f"
"pput c:\mobile_yfap\YFAP20\Language\English.xml \ResidentFlash2\YFAP20\Language -f"
, aso.

Finally, write the DAT file:
"pput c:\mobile_yfap\YFAP20\Skins\YFGB_Blue_BT\YFGB_Blue_BT.dat \ResidentFlash2\YFAP20\Skins\YFGB_Blue_BT -f"

Note: when writing the DAT file you may get this error: "file is in use by aother process". Indeed, the file is used by YFAP if the blue skin is selected.
So, in order to avoid this, you may go to "settings" -> "language" -> "skin" and change the skin to point to the yellow one. Thus, YFAP will free the DAT file used by the blue skin.

Finally note:
after all the above operations, a device restart is required.
Do not close the device from the main "ON-OFF" button. Firstly "suspend" it by pushing the Stand-by top button and then push the main "ON-OFF" button.
Otherwise your changes will not have any effect.

Now, you're done.