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.