Issuu Platform & Services

IML stands for Issuu Markup Language. It's a simple language much like HTML that tells the Issuu viewer where and what buttons and other objects to display.

Understanding the layout.xml file

Before we create a new theme, let's first understand the structure of the basic theme you just downloaded.
A theme is comprised of two files:

layout.xml The layout file describes the layout of the theme
skins.swf The skin library provides the graphics for the theme (PNG, GIF or JPG files can also be used).

Layout.xml

Let's open the file layout.xml to see what's inside:

<?xml version="1.0"?>
<viewer xmlns="http://www.issuu.com/viewer/1.0"
  backgroundImage="#Background" backgroundSize="stretch">

  <skin source="skins.swf"/>

  <button action="pagePrevious" horizontalCenter="-40" top="10"
    upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down"
    disabledState="#PreviousButton_disabled" />
  <button action="index" horizontalCenter="0" top="10"
    upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down" />
  <button action="pageNext" horizontalCenter="40" top="10"
    upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down"
    disabledState="#NextButton_disabled" />

  <dropp left="0" top="35" right="0" bottom="10"/>

</viewer>

Let's examine the code in a little more detail.

viewer

<viewer xmlns="http://www.issuu.com/viewer/1.0" backgroundImage="#Background" backgroundSize="stretch">

The viewer element specifies that this is an IML file for the Viewer.

The background attributes, backgroundImage and backgroundStretch, specify the background for the Viewer. #Background refers to a graphic to be used as the background image, whereas stretch specifies how to size the background image.

skin

<skin source="skins.swf"/>

The skin element specifies a skin library to be imported into the Viewer. The graphical assets contained within this library can then be used as skins for various objects (e.g. buttons) in the Viewer.

button

<button action="pagePrevious" horizontalCenter="-40" top="10"
    upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down"
    disabledState="#PreviousButton_disabled" />

The button element is used to add a clickable button to the Viewer.

The action attribute specifies what action to take when the button is clicked, in this case pagePrevious, which flips the document to the previous page.

The horizontalCenter attribute specifies the horizontal position of the button with respect to the centre of the Viewer. In this case, the button is positioned 40 px. to the left. The top attribute specifies the vertical position of the button from the top edge of the Viewer. In this case, the button is positioned 10 px. from the top.

The upState, overState, downState, disabledState attributes all refer to the various states of the button. The values for these attributes refer to the graphics to be used as skins for these states.

The code for the other two buttons, the index button and the pageNext button, is similar.

dropp

<dropp left="0" top="35" right="0" bottom="10" />

Lastly, the dropp element specifies the size and position of the actual document. Here, the document is positioned 35 px. from the top, 10 px. from the bottom, and 0 px. from the left and right edges of the Viewer.

Now that you have an idea about how the language in layout.xml file works, it's time to get creative and modify the graphics.
Next: Modifying the Graphics

Platform & Services