After spending the last few days getting to know Xlobby, I would like to help with a document that I would have liked to have found as a new user. The skinning FAQ is great, but there needs to be something else too. So here is my go.
Background
XML
An XML file is a container of data. If you look at all the files that make up the data files of Xlobby, you will see that they have the extension XML. This is the clever thing about XML, because you define the tags inside the file than defines the data, you can use it to store anything; that’s why the database’s can use it and so can each screen in the configuration.
Screen
Each page that displays information is called a screen. Each screen can have buttons, images and most importantly links to a database to display information from it. Xlobby is very clever in the way that it gets data from databases, making your task much easier (trust me).
In order to show how things link together, I am going to go through the steps that are involved in creating a screen that displays information from a database that we also have created. It will be a simple database of images and text about them. You will need to download four images. I find that creating a directory in the skin directory and saving them there best.
First, lets create the database. The only way that I can create a new database that Xlobby doesn’t delete the content of when the “Refresh” button is hit, is to manual create a new xml document in the database folder and copy the basic code into it. Once this is done it can be edited in Xlobby without problem.
• Get into the directory called database in Xlobby
• Right click and create new text file
• Change the name of it to” images.xml”
• Paste this text into it:
<?xml version="1.0" encoding="UTF-8"?>
<database>
<sortorder>display</sortorder>
<sortable>
</sortable>
<paths>
</paths>
<item>
<display>image1</display>
</item>
<item>
<display>iamge2</display>
</item>
</database>
• Save the file and load up xlobby
• Hit F2
• Goto the “database” tab, select “images” and click “edit”
• You have two items already in it called “Image1” and “Image2”
• Click “Browse” to the right of the “Coverart” box and select your first image
• Select the same file under “Parameter”
• Goto the box to the left of “Add” and enter the word “notes”, and hit “Add”
• Click on the words “Set Information Here” and enter, “this is the first photo”
• Do this to Image2
• To add another image, click “Add New Item” under “Items” and enter the information for it on the right. Add two more images
Next, lets create the screen to display the info
• Close the Setup menu, hit Pause / Break to bring up the skin menu
• Click the “Goto Screen” tab at the top
• Type “Images” in the box under “Add New Screen”, then click “Add”
• Select the Image screen in the box above
• You will now have a blank screen
• Click the “Screen” tab at the top
• Click the “Add Category” tab
• Enter “mainimage” in the “Name” box, and click “Create Custom Category”
• Click “Button” on the top tabs, then “Default”
• Now you will have an entry “mainimage” in the right hand window
• Click on it, and a marquee of it will appear on the main screen
• Now click the “Edit Category” tab at the top
• First, you need to link it to the database we created, so click” images” on the right
• If all is well, you should now see you entries listed as text in the box on the screen
• Now click “Thumbnail Layout Enable”, and there are your thumbs
• By changing the selection in the box to the right of “Thumbnail Layout”, you can change how the text and pictures will appear
• Now we will add a larger image that updates from the small thumbnails
• Click “Screen”, “Add Category” and add one called “bigimage”
• Goto to “Button” and add “bigimage” to the main window, and move it so both windows are visible
• Now click the “Font” tab
• In the “Text” box enter, “category>images>cover”
• To add the notes, do the same, but enter under “Text”, “category>images>notes”
Please let me know errors and updates and I will amend.
Thanks,
Simon