Win an Ipad
  Developer   Documents   Application Skin

Application Skin

This article explains how skins work in Moscrif. Skins manage drawing of all application controls.

Supported skins

Moscrif‘s graphic engine is based on Skia; therefore applications appearance does not depend on device’s operating system. At present, there are two skins available:

  • Moscrif skin is brand new skin, created by our graphic designers.
  • Metro skin is similar to Windows phone 7 and Windows phone 8 skins. It creates application with appearance of Windows Phone for all supported platforms: Android, Bada, Symbian, iOS etc. It is independent from device resolution.

Skins in Moscrif are separated from the application source code. We can easily change the application appearance any time in project life cycle in project preferences window.

Skin structure

Skin consists from two parts:

  1. Drawing management, defines within two functions for every control how each application element should looks like.
    • initialization function is called when elements are creating. This function usually creates all needed variables and provides all the calculations. This function only runs once for every element (it is called in object’s constructor).
    • draw function is called within onDraw event. To achieve better performance, this function should be as simple as possible. The best approach is to call only native function of canvas instance without any calculations or object creation.
  2. Color scheme determines colours, fonts, sizes etc. used in the skin. Colour scheme is usually a JSON object.

Image 1: skin structure

Skin changing

Skin changing is very simple operation. Developer can chooses required skin for every platform separately in Project preferences window.

Image 2: open project preferences window

On the left side of the project preferences window is menu with eight items. For us are important mostly last few items. Every of them represents one supported operation system. For every of them we can choose required skin and theme.

Image 3: choose skin and theme in project preferences window

 Application Skin 
Write a Comment (0)
Subject
Please complete this mandatory field.
HTML Tags Not Allowed!
Comment
Please complete this mandatory field.