[Symbian] Skin

Enable Skin support in your Symbian OS applications

Part I: S60 v2

posted

in

Platforms:

Nokia has introduced skin support in S60 v2. For various reasons, including compatibility with S60 v1 and thus older devices, this support is not enabled by default: your application will display a not so original white background unless you code it differently.

A nice and user-friendly way to behave is to use the mobile theme skin as a background for your application. Unless very badly documented in the SDK so far, this is not that complex for most applications. Here is an example implementation.

Application UI

The impact in your application UI is quite limited. All you have to do is to enable skins when calling the AppUi base constructor:

// ConstructL is called by the application framework
void CSkinDemoAppUi::ConstructL()
{
 BaseConstructL(EAknEnableSkin);
 ...
}

Application View or Containers

As you may have guessed, the main changes will be in your view and containers. The changes here may vary from simple to rather complex depending on what your are trying to achieve. Unfortunately, the Skin API is not very well documented and everything here is not always compatible in S60 3rd Edition... []

First, you need to create a specific context to hold the skin bitmap for your control. Do this by adding the following data member to your view/container class:

CAknsBasicBackgroundControlContext* iBgContext;

And initialize properly in the corresponding ConstructL, initialise a reference to the background bitmap:

#include
#include

...

void CSkinDemoAppView::ConstructL()
{
 ...
 iBgContext = CAknsBasicBackgroundControlContext::NewL( KAknsIIDQsnBgAreaMain,aRect,ETrue);
 ...
}

Don't forget to call the corresponding destructor:

void CSkinDemoAppView::~CSkinDemoAppView()
{
 ...
 delete iBgContext;
 ...
}

This context shall be passed to the child controls so that they can redisplay themselves correctly. This is done throgh MOP relationship and you then need to override the MopSupplyObject() primitive as follow:

TTypeUid::Ptr CSkinDemoAppView::MopSupplyObject(TTypeUid aId)
{
 if (iBgContext )
 {
   return MAknsControlContext::SupplyMopObject( aId, iBgContext );
 }
 return CCoeControl::MopSupplyObject(aId);
}

Each control Draw primitive shall now be updated to display the skin as background:

// Draw this application's view to the screen
void CSkinDemoAppView::Draw(const TRect& aRect) const
{
 // Get the standard graphics context
 CWindowGc& gc = SystemGc();
   
 // Redraw the background using the default skin
 MAknsSkinInstance* skin = AknsUtils::SkinInstance();
 MAknsControlContext* cc = AknsDrawUtils::ControlContext( this );
 AknsDrawUtils::Background( skin, cc, this, gc, aRect );

 ...
}

And finally:

void CSkinDemoAppView::SizeChanged()
{
 if(iBgContext)
 {
   iBgContext->SetRect(Rect());
                if ( &Window() )
                {
                        iBgContext->SetParentPos( PositionRelativeToScreen() );
                }
 }
}

If your control contains a listbox, you can enable skin behind the items by calling:

iListBox->ItemDrawer()->ColumnData()->SetSkinEnabledL(ETrue)

MMP File

And finally, you need to link against the Avkon Skin libraries. Add the following line in your MMP file:

LIBRARY aknskins.lib aknskinsrv.lib

Download

Below you will find two samples project. One simple application created with the Codewarrior wizard without any skin support and its counterpart with skin support added.

from: