Ariadne User Interface

Start me up

I assume you or someone else already has installed Ariadne, and you know the exact URL to start Ariadne up.

The first thing you'll see of the Ariadne user interface is the login screen. Ariadne requires that the browser has 'cookies' enabled, or you won't be able to logon. The logon screen actually is repeated, once in the main window, and once in a popup window. The popup window is positioned exactly above the login form in the main window, so you normally shouldn't notice it. The reason Ariadne uses an extra popup window is that this login screen is used whenever you for some reason need to login again. Sometimes this happens in a frame which is too small to actually show the login screen, which means that the popup is needed. However, sometimes a browsers disables popup windows. So for those cases, the login screen is repeated in the main window.

The first time you logon to Ariadne, you should use the login 'admin' and password 'muze'. These are the defaults Ariadne uses out of the box.

After logging on, you will be greeted by a screen like this:

On the left is the Ariadne data tree, in which you can browse through your sites. On the right is the welcome message.

Browse through your site

The folders on the left work almost like the Windows Explorer, you can click on any of the icons to open a folder. Unline the Windows Explorer however, Ariadne doesn't know in advance whether or not there are any items in a folder, so it displays a icon on all folder, so it may happen that when you open a folder, no items appear below it. This is normal.

When you open or close folders, you may see a message saying 'Loading...' appearing briefly in the top left corner. Ariadne is a web based application, what you see is a reflection of the information stored on a central server somewhere. So Ariadne needs to load a list of children from the remote server whenever you open a folder for the first time. This list is then cached, so the next time you open the folder, it doesn't need to ask the server. Unfortunately sometimes the list isn't up to date with the actual list of objects on the server. When that happens you can press the 'Refresh' button, which lives on the bottom-left. This does close all folders, which you'll have to open manually again.

The frame to the right doesn't change when you open or close folders, it only changes when you click on the name of a folder. You will see a screen like this:

Or, you might see a screen like this one:

You can switch between either of these User Interfaces via the Preferences dialog. The preferences dialog is available through the 'Edit' menu in the 'New' interface:

And through the 'Preferences' button in the 'Windows XP' interface:

The preferences dialog looks like this:

Here you can chang the default language, which is used in the user interface. Setting it to 'Nederlands' for example, will change the entire Ariadne user interface to Dutch. In addition you can limit the list of languages available when editing objects.

You will see a lot more dialogs like this one. Each named icon on the left side represents a different section of the dialog. Changes made in each section will only take effect when you press 'Save'. So you can change some settings, click on another section, change some more and then press 'Save'. All your changes will only then be applied.

To change the user interface, go to the Interface section. The dialog will change to this:

Here you can change the default interface. After pressing 'Save', you will have to refresh your browser, or logon to Ariadne again, before the changes will come into effect.

The remainder of this manual assumes you use the 'Windows XP' interface.

A short tour around the Ariadne explorer

The Ariadne Explorer gives you a lot of information and management options, we'll discuss them very briefly here. The more important options will be discussed later in more detail.

The first block is the list of actions on the current object. Depending on the grants you have been given, the list may look different, but this is the full list. If you are logged on as Administrator, you should always see the full list.

Add new object: This allows you to create new content objects in the current folder.
Edit Ariadne: Ariadne is the name of the current folder, this allows you to edit its content.
Rename Ariadne: This allows you to change the filename or move the object to a completely different location.
Copy Ariadne: Creates a copy of the current object, with all its children, at a new location.
Link Ariadne: Be careful with this option. It creates an extra filename, which may be in a completely different folder, but which actually is the same object.
Import: Allows you to import an entire data tree from a special Ariadne export file.
Export Ariadne: Exports an entire data tree to an Ariadne export file.
View webpage: Opens a new window with the current object using the default template. In effect it opens the website at the current page.

The second block is a list of settings you can change, which affect not only the current object, but also its children.

Set caching: This allows you to fine tune the Ariadne caching mechanism. This is very important to achieve good performance.
Set templates: This allows you to change the layout templates for your site, or part of a site.
Set custom fields: An advanced feature which makes it easy to quickly extend objects with extra data fields.
Set language: This setting regulates which languages are available in the site, and which language is the default.
Set grants: The user and group rights management dialog.
Set typetree: This is actually deprecated, but some sites may still need it.
Set priority: This allows you to re-order objects in a folder.

The third block is a list of information, which may be useful when editing a site with a team of editors. In addition each class contains an extra block with information specific to that class. Below you see the information block for a Site object.

The Info block contains the name of the object, in this case 'Ariadne' followed by the classname of the object, here 'Site'.

User: tells you which user originally created the object, or the 'owner'. You can change the owner by clicking on it, and selecting a different user.
Date is the creation date, Modified is the date of the last modification.
Size is the size of the object in the database. In the case of files, the object may also contain information which is stored on disk, which currently isn't counted in the object size.
Priority is a numeric value, which is used in ordering objects. Higher numbers mean a higher (earlier) position in listings.
Language: is a list of languages in which content is available in the object. Clicking on a flag switches the explorer overview to that language.

Finally for a Site object, the extra information is the URL entered in the object.

The extra information block may also contain navigation which helps for a specific object. The block to the left shows an extra 'Browse by letter' navigation, which is part of the Addressbook class. Pressing a letter will show only those child objects whose name starts with that letter.

In addition you can see that the Settings and Info blocks have been hidden. You can easily switch between hiding and showing blocks by clicking on the arrows on the right. The state of each block is remembered when browsing through Ariadne.

Another setting which is remembered when browsing through the object tree, is the file view.

Left of the Path input box in the toolbar, you can see an icon with a small arrow pointing down. When you click on that, you can change the file view, from the default 'list' to 'icons', for larger icons, or to 'details', which shows you a list of objects with extra information like size, owner, last modification date and time and the languages the object has content for.

The Path input box contains the Ariadne path for the current object. If you know the full path to an object, you can enter it here and press enter, and you will immediately browse to that object.

Finally the icons immediately above the Path input box popup the online Ariadne reference, the Ariadne tutorials and an 'about ariadne' screen respectively. Unfortunately the online reference and tutorials are a bit out of date in Ariadne 2.4, so you'd better use the online information at the Ariadne CMS website.

Elements of a site

Below is a list of common object types you will find in many Ariadne websites.

The Site object is the root of any website. Among other things it contains the root url of a website.

The Section object is used to divide a website into different logical sections. This allows you to create seperate layout and menu's for each section.

The Directory object is, well, a directory. Any object in Ariadne can contain objects, but the directory makes it easier to manage.

The Page object is the basic building block. Use this for pages which won't get any child pages. Page objects aren't shown in the tree view in the Ariadne user interface.

The Photobook object is a directory specifically for Photo objects. It has additional settings for the thumbnail (large icon) view.

The Photo object is a File object that knows how to do some useful image manipulations, like thumbnails, watermarking, etc. Always use the Photo class if you upload any images.

The Newspaper is a special container for Articles. It knows how to do some intelligent ordering of Articles and creates an news archive automatically.

The Article is a Page with extra start and end time. In combination with the Newspaper class you can create a news page which automates news and announcement publishing and archiving.

There are more classes available in Ariadne, but these are the most often used. Using the correct object types, you can create a well structured website for which comprehensive navigation and layout can easily be created with Ariadne's templates.

Edit a page

All objects in Ariadne must have a path and at least one name (or title). In addition most of the objects also have a summary and a page. The summary usually only contains text, but the page may contain any html content. You can edit any of these elements (and usually more) by browsing to the object and clicking on 'Edit objectname'. A dialog much like the one below will popup:

In this case the object is a Site object, as you can see in the top right corner. All objects have a name field, most have a summary field and a lot have the 'Open Editor' button. In addition to these fields, there is an URL field. This field is used by all child objects to generate the correct urls in menu's, images, etc. It does not automatically configure your webserver or register a domain, this you still need to do yourself.

As you can see, the current object is available in two languages, English and 'Nederlands' (Dutch). Simply click on a tab and you switch to the other language. You are still editing the same object, just in a different language. How many tabs you see depends on your personal language settings (see the preferences dialog earlier in this chapter), as well as the language settings of the site. We'll get to that in chapter 10.

Some dialogs are split up into multiple sections, each section is displayed as an icon at the left, like this one for an Article object:

If you look closely you'll notice the language tabs have disappeared. This happens on dialog screens which don't show language specific content. In this case the start and end date do not change for a specific language, so there is no need to switch between different languages here.

We haven't talked about the 'Open Editor' button yet, so now we will. If you press on it, a new window will open, with a full featured WYSIWYG (What You See Is What You Get) html editor. At least it will if you use Internet Explorer, Ariadne doesn't yet support WYSIWYG editing in Mozilla or Firefox, but work is on the way to remedy that. The most important features of the editor will be discussed in chapter 4.

For now, just remember, you can edit any object anywhere, by browsing to it and pressing the 'Edit objectname' link. The exact dialog will differ depending on what type of object you are editing, but the basic functionality is the same. You can press cancel any time, and no changes made in this dialog will be saved (except for any changes you saved already in the WYSIWYG editor).

Add new content

Adding a new page works almost exactly like editing a page. First browse to a directory in which you want to add a page. Then click on 'Add new object'. You will be presented with a selection screen much like the one below:

As you can see there are a lot of different types of content you can create. If you look carefully, you'll notice that not all the types mentioned earlier are even available in this list. Whenever you press 'add new object', Ariadne takes into account what kind of content you might want to add in the current directory. It does this by checking the type of object the current directory is, and then checking a list of object types which are available to add under that directory. In this case the list is that of all object types which can be added under a Site object. But the list is a lot smaller when you are adding content under a Photobook object:

Below a photobook you can only create Photo's, new Photobooks (for categorisation) and shortcuts to other content or photobooks. All object types have a similar list associated with them. You can change this list yourself through a special template called 'typetree.ini', which comes in handy when you create your own object types.

If you already have an Ariadne account and are browsing through it, you may notice a difference between your selection screen and the ones above, you may not have the 'Show: All' button in the top. Don't worry, its a feature that is only visible if you are logged on as the Administrator. It allows you to select an object type from the full list at all times.

Select the Page object type from the list and click on it. The dialog now changes to this:

When you add any kind of new object, the dialog always starts with this screen, asking you for a filename. Filenames in Ariadne are a bit more limited then filenames in Windows. Only normal letters and numbers are valid, as well as the underscore (_) and the dot (.). The default value in the filename field is a very special value. Whenever you enter the code '{id}' info a filename field, Ariadne will generate a unique filename automatically. It does this by adding a unique number in place of the '{id}' code. The specific code '{5:id}' tells Ariadne to pad out the number to 5 characters. The first filename in a directory would in this case become '00001'.

In most cases you should take care to enter a readable and descriptive filename, instead of the default code. The filename is what you see in the URL or Address bar in your browser. Descriptive filenames help visitors to remember your site and the location of specific pages, they'll make it easier for visitors to link to your site. You should take care however to not make the filenames too long. Ariadne has a limit to how long the entire path may become, which is 128 characters by default. If you routinely use filenames with 16 characters or more, you'll reach that limit pretty soon.

However, when adding articles to a newspaper for example, there's usually no need to create a descriptive filename, since articles are usually only relevant a short while anyway.

Ariadne is case insensitive. It doesn't care what case you enter a filename in, it does however remember the case, and uses the exact case you entered in any url's it generates.

After entering the filename, you can continue with the rest of the dialog, just like when you edit a page. There is one small difference. If you open the editor, add some html, and press save, the page isn't immediately saved. Instead the html you just entered is stored in the dialog. Only when you press save in this dialog is the html content saved. The reason is very simply, when you add a page, the page doesn't exist untill you actually press 'Save', so there is no object in which the html editor can save the page contents yet.