|
|
|
Who is it for?
The programming interface for Favorez skins is targeted at website developers. If you like to use your IE favorites panel to maintain web links but want those links to appear in your own special web page design then this is the place to start. Or develop a Favorez skin to automatically generate pages for existing DHTML tree and menu scripts available all around the web.
Can I do this?
Developing your own Favorez skin is a lot harder than just clicking away in a Properties dialog box. However, if you regularly edit HTML code by hand you will be on track within the hour. You can edit HTML code using Windows Notepad or an HTML editor like HomeSite or HotDog.
Examples
There is nothing like learning by example, so the instructions below will focus mainly on examples. All examples can be download from the Favorez website at: http://www.favorez.com/skindev/
Forum
Before we dive in you should know that there is a special forum for Favorez skin developers at: http:///www.favorez.com/forum/
The skin folder
First let's look at the organization of the files that define a Favorez skin. Each Favorez skin corresponds with a folder on your hard disc. These skin folders can be found in a folder named Skins which in turn is a sub folder of the Favorez program folder. Click here to learn more about Favorez folders and files.
Bare bones
Let's start with a bare bones Favorez skin. Create a new skin folder named Example 1 using the Windows Explorer. Then start Windows Notepad and copy the following code into it:
|
example 1 - index.tpl |
|
<html> <body> {TPL:FOLDER} {TPL:url}<a href={URL_PATH} target="{URL_TARGET}">{URL_TITLE}</a><br>{TPL:url} {TPL:FOLDER} </body> </html> |
Now within Notepad select Save from the File menu and browse to the Example 1 skin folder, name your new file: index.tpl Typically the path to this file would be: c:\Program Files\Favorez\Skins\Example 1\index.tpl
Guess what, you have just created your first Favorez skin! Restart your browser and look up Example 1 from the Favorez drop down list. Test your skin now to see if it works.
You will notice that your skin only processes the top level items of your IE favorites, this is because your skin code needs some enhancements.
|
Background information
Templates Favorez skins are defined as (HTML) templates, which is why the file index.tpl ends with TPL for template. In this template file you define your skin using special Favorez tags combined with any ordinary HTML tags. Each time you generate a new Favorez web page any of the special Favorez tags will be replaced with the values taken from your IE favorites panel. All Favorez tags are defined using opening and closing braces: { }. There are two kinds of Favorez tags: block tags and value tags.
Value tags Values tags are the simpler of the two. For example {URL_PATH} is a value tag, it will simply be replaced with the address (URL) a certain favorites item points to.
Block tags {TPL:FOLDER} is a block tag. A Favorez block tag defines any piece of (HTML) code that may occur more than once or a piece of code that occurs conditionally. Block tags come in pairs that should always be balanced. For instance the {TPL:FOLDER} tag should always be matched by another {TPL:FOLDER} tag. |
The root folder
The skin you have just created in example 1 contains only one folder: the root folder. Favorez considers the IE favorites panel itself to be the root folder of all your favorites items. You can display the root folder in your skin by adding the following code to the index.tpl file (the additional code is shown in red).
|
example 2 - index.tpl |
|
<html> <body> {TPL:FOLDER}<strong>{FOLDER_NAME}</strong><br> {TPL:url}<a href={URL_PATH} target="{URL_TARGET}">{URL_TITLE}</a><br>{TPL:url} {TPL:FOLDER} </body> </html> |
This will instruct Favorez to output the name of the root folder. You can edit the name of this folder via the Properties dialog box of your skin. Access this dialog box now by clicking the button with the pointing finger on the Favorez tool bar. With the Properties dialog box open, select the Settings tab at the top and you will see the Name of root edit box.
Link icons
Now add those neat looking icons to your skin. To do so insert the following code to the index.pl file.
|
example 3 - index.tpl |
|
<html> <body> {TPL:FOLDER}<strong>{FOLDER_NAME}</strong><br> {TPL:url}<img src="{URL_ICON}" border="0"> <a href={URL_PATH} target="{URL_TARGET}">{URL_TITLE}</a><br>{TPL:url} {TPL:FOLDER} </body> </html> |
|
Background information
??.PNG The {URL_ICON} tag is replaced by the name of a PNG graphics file (e.g. 05.png) when you generate a web page. Favorez creates these png files on the fly and assigns an index number to them. The program keeps track of all icon information for you. While several links may be associated with the same icon, no more than one png file will be used per icon. This ensures that the time to download the resulting web page is kept to a minimum. |
Add sub folders
Now that you have a working skin for one level of favorites items let's add any sub folders and the items they may contain. Copy part of your current code and place it within the existing {TPL:FOLDER} tags:
|
example 4 - index.tpl |
|
<html> <body> {TPL:FOLDER}<strong>{FOLDER_NAME}</strong><br> {TPL:url}<img src="{URL_ICON}" border="0"> <a href={URL_PATH} target="{URL_TARGET}">{URL_TITLE}</a><br>{TPL:url} {TPL:FOLDER}<strong>{FOLDER_NAME}</strong><br> {TPL:url}<img src="{URL_ICON}" border="0"> <a href={URL_PATH} target="{URL_TARGET}">{URL_TITLE}</a><br>{TPL:url} {TPL:FOLDER} {TPL:FOLDER} </body> </html> |
As you can see the outer most {TPL:FOLDER} tags now contain not just {TPL:url} tags (links) but {TPL:FOLDER} tags as well (sub folders). Technically speaking you have added one nesting level to your skin template. The code in example 4 does still have some flaws however. Most notably, because of the way HTML works, all items will still be printed in a single column with no indentation at all. To make it clear which favorites items are located in sub folders we need to add some more code.
|
example 5 |
|
{TPL:url} <img src="{URL_ICON}" border="0"> <a href={URL_PATH} target="{URL_TARGET}">{URL_TITLE} </a><br>{TPL:url} |
As an example some non-breaking spaces ( ) have been inserted right after the third {TPL:url} tag.
Note: for those who have downloaded the examples.zip file: the extra code in example 5 has been added to the index.tpl file of example 4.
Add nestings
In exactly the same way you added a single nesting level (example 4 & 5) you can add support for more nestings to your skin template. Each nesting must be located within the {TPL:FOLDER} tags of its direct parent. How many nesting levels you should add is arbitrary but it is suggested that you add at least 5 of them.
|
How deep the rabbit hole goes
Infinite nestings The Favorez parser engine has no internal limit for nestings, it will pick up any number of nestings that are correctly defined in the skin template file. The Favorez standard skins all support up to eight nestings of favorites folders just to be on the safe side.
Why do I have to define each nesting level? The Favorez parser engine has been designed not to contain any output characters. In fact, the parser engine does not understand the first thing about HTML. The reason for this is simple: we wanted Favorez to be completely independent of the output format. This guarantees that the Favorez skin interface is compatible with almost any hierarchical script on the web! Favorez lets you decide how exactly your code should be nested and you are free to add special code at any nesting level. As a bonus, because you define each level separately, you can have different colors for folders at a certain level. |
Tip
If you get stuck trying to make a Favorez skin interface with your special script, do not give up so soon. Post your technical question on the Favorez skin developer forum.
Page header
Favorez skins generally do not have just items and icons. Here is a piece of code that can be inserted into any skin template:
|
example 6 - header |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>{FAVORITES_TITLE}</title>{TPL:keywords} <meta name="Keywords" content="{KEYWORDS}">{TPL:keywords} <meta name="Generator" content="{APP_NAME} {APP_VERSION}"> </head> |
The meaning of each Favorez tag is explained in the Tag Reference.
Tip: The most comprehensive skin template that should be interesting to study is the one for the standard Favorez skin named Plain & Simple. Look up the file named index.tpl in the Plain & Simple skin input folder.
Design
Of course you will now be wanting to add your own special design to your skin. To customize the design of your skin just code your HTML carefully around the Favorez tags and you will be ok. In between edits test your skin continuously to see if it still works, this will make it easier to find the cause of any problems that might occur.