Beginner Orientation

Hi,

I am an XBMC skinning newbie trying to understand the skin views hierarchy.
Looking, for example, on the confluense video-related views. When clicking the video item on the main menu (the log-file shows that) the MyVideoNav.xml is loaded. MyVideoNav.xml's first lines is:
<views>50,51,500,550,560,501,.....</views>
and contains a large number of controls and include statements (that include, among others, the views above spread over multiple files like ViewsFileMode.xml). More than one of these views are list-controls.

How is the layout performed?
How can I determine which is the "root" view?
Which views are shown together to build a more composite view? and which are different screens one on top of the other?

For example, assuming I wanted to change the size of the first list shown (containing "Add Videos..." and "Video Add-ons") - how can identify which is the list currently being shown?

Thanks!

Go to skin folder, open up addon.xml, and make sure you have debugging="true" . This will show you currently focused control.

pecinko Wrote:Go to skin folder, open up addon.xml, and make sure you have debugging="true" . This will show you currently focused control.

Thanks, pecinko! Very helpful. This allows me to learn about the location of buttons, lists, edit, etc.

How can I learn about the layout of other components? For example, the "preview thumbnail" on the bottom right? Also, how can I tell what is the "container" component defining the layout of the various sub-components (e.g. the location of the list in relation to the thumbnail).

Was skinning manual of any help?

http://wiki.xbmc.org/index.php?title=XBM...ing_Manual

pecinko Wrote:Was skinning manual of any help?

http://wiki.xbmc.org/index.php?title=XBM...ing_Manual

Nope. I may have missed it, but I couldn't find anything on the "grand scheme of things". It contains mostly tactical details on controls and their individual configuration. Almost nothing on the layout (outside a list).

Thanks again.

xmichaelm Wrote:Nope. I may have missed it, but I couldn't find anything on the "grand scheme of things". It contains mostly tactical details on controls and their individual configuration. Almost nothing on the layout (outside a list).

Thanks again.

I would recommend downloading skin Foundation, which comes with screenshots of all XBMC windows. Diagram describing their connections does not exist, AFAIK. Still you will learn a great deal from a mentioned skin.

Rule of thumb, that might help you, is that only one control can have focus at a time. Thus, preview thumb, that probably has ListItem.Thumb (or Icon) in code, will show thumb of currently focused item from a focused list.

Thanks again, pecinko.

A trick I found, and that may be useful to others, was to use the skin debugging feature that pecinko suggested, to find the posx and/or posy and look for these coordinates in all the skin xml files (round to 10s and try +10 and -10). This allowed me to located the thumb view under CommonRootView in ViewsFileMode.xml

I had/have great problems navigating skins so let me give you some pointer:
* includes mean you need to have several files open at a time with a lot of searching
* try altering the value of label controls to see what happens
* comment out visible tags to see what happens
* comment out image blocks to see where they are

The big thing I found is that all controls are specified all the time. They are turned on/off with visible tags. Think of them as layers that are enabled through visible tags.

also you need to create a refresh keymap

XBMC.ReloadSkin() works for me anywhere in the skin.

Also, your Keymap.xml goes in AppData\Roaming\XBMC\userdata\keymaps\


will help alot when skinning sometimes i will disable a button then save and refresh to locate where it is in the skin thats if i cant figure out the code

Thanks hippojay and ZombieRobot - very helpful!