Introduction to Plone and it's components

Description of the plone UI

Top section:

The top section is contained inside an html div element with an id of portal_top.

Logo

The logo is at the top left of a plone site and is a jpeg file called logo.jpg. The logo can be changed by simply putting your own image in the custom folder in the portal_skins tool in the ZMI and calling it logo.jpg.

Site Actions

The options at the top right corner are called site actions. Plone contains lots of actions are grouped into different categories. The site actions are actions defined by the site_actions category.

Search

Plone has a built in search functionality with it's most basic interface being the search bar beneath the site actions.

Portal tabs

Next is a group of tabs linking to the top level folders in the site (Home, Users, News and Events). These tabs are called the portal tabs and the row they are in is called the global_nav row. They are also actions and are defined by the portal_tabs category.

Personal links

To the right of the page at about the same height as the portal tabs, is the personal tools row which contains actions (i.e 'Log out') with the category of user.

Bread Crumbs

Next is a row with the text 'You are here' and link to the current location called 'Home'. When you navigate into the folders in the site, additional links will appear next to the 'Home' link indicating the path that you took. For that reason these links are called bread crumbs as in the Hansel and Gretel story.

The left and right columns

Below the top section are three (or sometimes two) columns. These columns are inside an html table wih an id of portal-columns. The left and right columns contain slots which are filled with sections of HTML called portlets. Common portlets are the Navigation bar, Recent items, Calendar and News items.

Some of these portlets will be shown dynamically depending on the current user's roles and permissions or the content in the site. For example, a portlet for logging in, or joining the site, will be shown when the current user visiting the site is not yet authenticated. A Recent items portlet will show the laters content added to the site that the current user has access to while the News items portlet will be shown when news items have been added to a smart folder.

Middle column

The middle column is also referred to as the content column and shows a view of the current content (also referred to as the current context).

Users who are able to edit the current context in some way due to the security permissions attributed to them, will see a green border around the middle column with a green bar at the top. Other users who only have the necessary permissions to view the content will not see the green bar.

Content tabs

At the top of the green are a row of tabs referred to as the content tabs. Content tabs are actions with a category of folder, object or ibject_tabs. The content tabs provide different views on the current content with some of the view allowing you to edit the content in some way. Here is a quick rundown of the views:

• Contents:

  The Contents tab is visible when the current context is folderish (also referred to as a container), i.e it can contain instances of other content types that can also be folderish. This allows a Plone site to have a directory structure similar to the file system of a computer.

  The view that is presented when you click on the Contents tab is called the folder contents view and shows a table listing of the objects contained within this folder. The first column shows the object's title while the other columns show the objects metadata. Metadata is data stored on the object that gives us information about the object itself, such as its size, last modification date and workflow state.

  Depending on the permissions that you have within this context, you will be able copy, cut, rename or change the state of the subobjects listed in this view.

  Excercise:
  Batch operations using the folder contents tab.
  Creating friendly URLs by renaming content types.
• View:

  The View tab is the default view of the current content and will henceforth be referred to as such. The default view shows the information stored on the current object (also referred to as the context) that is useful to the end users.

  The information stored on objects in Plone are stored in fields (like the fields of a record). Plone (and more specifically the Archetypes package) comes with a number of default field types (such as integer, file, photo, string etc), but it is also possible to add extra field types. The information stored in these fields are displayed with the help of little pieces of HTML code that are rendered from Zope's page templates and which are called widgets.

  So usually the view page of an object is just a collection of the widgets for the fields of the object. Two types of widgets exist, view and edit. The default view of an object shows only the view widgets. It is of course also possible to specify exactly wich fields are visible, so as to hide some specific fields which might be used for internal purposes only.

• Edit:

  The Edit tab brings up a form to edit the field values of the current object. This view will be referred to as the edit view or more usually edit form. The edit form is also just a collection of widgets for the fields on the object, although in this case it is the edit widgets instead of the view widgets. Another difference is that they are contained inside an HTML form which when submitted will change the current field values of the object with the values on the form. The widgets on this form can also be hidden from view, if you'd like to prevent the user from editing certain fields.

• Sharing:

  Clicking on the Sharing tab brings a view that allows you to assign local roles to groups and users. Users with local roles (such as Manager, Reviewer and Member) are allowed access and certain operations on the local context. Local roles in a certain context will not give users permissions on any other content or context.

• History: (Plone 3)

  The History tab gives us a history of all modifications done on the content in the current context.

Content actions

At the top right of the middle section, inside the green border are yet more actions. This is called the contentActions row. One of the acions is named Add to folder or Add item. Clicking on this action brings a dropdown allowing you to add new content to the nearest folder.

These addable types are among the default content types provided by a vanilla plone site. Let's take a closer look:

• Folder:
  

A Plone folder is analogous to a folder on an operating system (also     known as a directory). It is a container object containing two editable     fields, Title and Description and can be used to organise and group     similar content.

    Since folders can be assigned local roles (via the sharing tab), the can     also be used as workspaces or sandboxes for certain users or             groups. By default every authenticated member in Plone has his or         her own workspace to add content. This workspace is by default just     a normal folder.

• Page:

A page is an instance of the default document content type and can     be used to add HTML content to the site. The Plone welcome page is     an example of a document.

• News Item:

A news item is a special type of document that, when published, will     be shown in the news portlet.

• Event:

• This is a content type that can be added to announce and represent a coming event such as a meeting or conference. A Published event will be highlighted on the Plone calendar. An event can also be exported for use with external calendars.

• File:

The file object can be used to add binary data from the file system to     the site. Commonly added files are office files used for managing             content such as .pdf, .doc and .xls.
    TextIndexNG3 is a useful third party product that allows the indexing     of these types of files.

• Image:

An image is a special type of file object used specifically to add images     to the site. Images can be added as normal file types, but the image     type has a useful widget to view, edit or change the image and             renders the image directly in the browser when you navigate directly     to it. In contrast, navigating to a file, will usually give you a prompt to     allow you to download it, instead of rendering it in the browser. One     notable exception is .pdf files, which can be rendered inside most         modern browsers.

• Smart Folder:

A smart folder is an instance of the CMF Topic content type and is         used as a grouping of other content that doesn't physically reside         within the smart folder. The criteria tab on a smart folder allows us to     add the search criteria that is used to determine which content will be     displayed within the smart folder.
    The news folder that is included in a vanilla Plone site is an example of     a smart folder with the criterion to show all published news items.

• Link:

A link object is used to add hyperlinks to the site. A link can point to     either internal or external content. The advantages of adding a             hyperlink in this way, instead of inside a page, is that it will be shown     in the navigation bar (when we're in the right context) and it's             containing folder view.

Other actions that you might encounter in the contentActions allow you to change the display of the content in the folder or the workflow state of the context.

Content space

The space within the green borders is referred to the content space. The title of the content space will be displayed as a heading to the left while on the right a row of actions can be seen as a row. These actions are known as documentActions and are defined by the category document_actions. Typical actions allow you to mail the page, print it, view it in fullscreen, get an RSS feed and edit it using an external editor.

The documentByLine is next and shows the content metada of as authorship and last modification date.

Then we see the actual contents of the current object which will vary a lot between different content types and instances of these types.

Footer

Below the content space is a blue bar with text inside. This is the footer and contains the copyright, trademark and license information of Plone. Like almost everything else, this section can either be removed or customized to display your own information and design.

Colophon

Lastly is the colophon, which contains the Plone badge and a number of badges that show the standards to which this site conforms. The Plone community considers it a gesture of goodwill when the Plone powered badge is included in a production site.