[[BackLinksMenu]]

[[TicketQuery(summary=GROUP_BASE_SKINS_R0, format=table, col=summary|owner|status|type|component|priority|effort|importance, rows=description|analysis_owners|analysis_reviewers|analysis_score|design_owners|design_reviewers|design_score|implementation_owners|implementation_reviewers|implementation_score|test_owners|test_reviewers|test_score|)]]

= Analysis =
^(Give as much as possible of the needed information for designing and implementing the task in the following sections.)^

== Overview ==
Skins are used by the application to change the look and feel of the Sophie layout appearance. Skins define the look and interactions of a visual elements. Properties such as size, location, color, keyboard shortcuts and messages to send are all parts of the skins.

== Task requirements ==
The requirements for this group of tasks include:
 * Write a short tutorial on how someone uses skins in their visual elements
 * Document the ENUMs used to define internal skin parts
 * Document skin naming conventions
 * Create two sample skins for the release
 * The user must have the ability to change skins (switch between installed skins, see the implementation idea for more information)
 * Decide where the skins will be kept and in what form (e.g. archive or something else)

== Task result ==
The result of this task is code, and two skins.

== Implementation idea ==
 * All installed skins are kept in ''skins'' directory in the installation folder of the user's machine
 * Skins use properties, so changing skin values at runtime should reflect the change in Sophie.
 * Annotations are used to define the internalSkin values, @SkinPartDef 
 * See class SampleView in /sophie2/trunk/sophie2-platform/modules/org.sophie2.base.visual/src/test/java/org/sophie2/base/visual/interaction/InteractionDemoTest.java
 * See /sophie2-platform/modules/org.sophie2.base.bound/src/main/java/org/sophie2/base/bound/BaseBoundControl.java for a @SkinPartDef example
'''Persistence'''

 * Skins need to be able to be written to files for the sake of persistence.  Skins with media (images) should be stored in an archive.

'''Naming Conventions'''

 * Skins are hierarchical, starting with the InternalSkin,  While there is no Sophie restricted naming convention, we should use the following naming convention for our skins:

  * The base skin file is the name of the skin, for example, "CoolBlueSkin"
  * Any child skins that define language specific parts of a skin should be named <base><language>, for example, CoolBlueSkinEN or CoolBlueSkinBG

'''Visual'''

 * The user must be able to switch between installed skins from the ''View'' ->''Skins''->''Skin1'' menu for example


== Related ==
 * Watch the discussion 2009-02-17-Design Discussion (Part 1).mpg, 2009-02-17-Design Discussion (Part 2).mpg, 2009-02-17-Design Discussion (Part 3).mpg for more skin details
 * org.sophie2.base.skins (not sure if this is valid after all refactorings) is milo's current implementation
 * SkinPart defines a piece of a skin. ElementID refers to a class.  propID refers to the property in the element and value refers to the property value.

== How to demo ==
I think it would be great if you could show how a skin is applied, how a value is created and changed.  The video discussions cover the big picture, but never gave a concrete example on how to use the skins.

= Design =
Currently there is one class that represents a skin in Sophie2. This class is org.sophie2.base.skins.Skin and it represents only one skin. Moreover it is singleton. A new class will be created - org.sophie2.base.skins.SkinManager and it will be responsible for managining skins. This class will have one property - the current skin, and everyone who want to add a new skin will have to change the reference of the current skin - to set the skin he wants.

The org.sophie2.base.skins.Skin will become more general. It will be defined as such depending on its name different skin parts are loaded. It won't be singleton anymore and it will have a name and a fallback skin with a name correspondingly. A skin will be defined by its A fallback skin is a skin from which the values will be retrieved if they are not found the current skin. Every skin definition is added to the default skin, this means that it can be used as a fallback skin whenever you want.

A new module will be added - org.sophie2.main.skin.alternative - that will contain the alternative skin. It will have just one class - AlternativeSkinModule - which will add new values for the record ids (so far) in Sophie2

Also two menu items will be defined. One for the default skin and one for the alternative one. When one of them is clicked the selected skin should be loaded.

[[Image(source:trunk/sophie2-platform/doc/uml-design-diagrams/skins.png)]]

 * Create new icon set for the alternative skin:
  * try to use same pattern for all icons
  * the icons must be with size between 15x15 and 20x20 (18x18 is recommended).
  * use for example the ''sophie2-repo\trunk\sophie2-platform\modules\org.sophie2.base.commons\src\main\resources\distrib\icons'' directory
  * the new icons must be with the same file names but in the new module
  * all icons must be .png files
= Implementation =
^(Describe and link the implementation results here (from the wiki or the repository).)^

= Testing =
^(Place the testing results here.)^

= Comments =
^(Write comments for this or later revisions here.)