Add main bar

So far we have a page and we know how to read content elements. But how do we edit content?

To add/edit content we will need :

  • A toolbar with buttons to open Dialogs
  • Dialogs allowing the Author to edit content
  • Paragraphs which contains the Dialog reference
We will start by adding the Main Bar , which will contain a button to open the Page Properties dialog.

Typically you will want to place the "Main bar" at the top of your page. Not only because it contains the "Page Properties" button, but also allows the Author to "preview" the page.

Add the Main Bar

The easiest way to add the "main bar" is to use the cms:mainBar tag of the Magnolia tag library.

Adapt your sample template as follows: 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="cms-taglib" prefix="cms" %>
<html>
  <head>
    <title><cms:out nodeDataName="title" /></title></head>
  <body>
    <cms:mainBar
      dialog="mainbarParagraph"
      label="Page Properties"
      adminButtonVisible="true"/></strong>
    <h1><cms:out nodeDataName="title" /></h1>
    <p>Hello Magnolia World!</p>
  </body>
</html>

Let's have a look at the attributes:

  • dialog : use this attribute to define the dialog use for page properties. (note: prior to Magnolia 3.6, this attribute was called paragraph)
  • label : the label of the button assigned to the page properties dialog.
  • adminButtonVisible : true = show the "AdminCentral" button which opens the Magnolia GUI.

Refresh the page

Page with the new Main bar Refresh your page and you will see the main bar on top of the page.

You will notice that the main bar is placed over the three lines of text we had. This has to do with the DIV tags used for the Main bar. Click on the Preview button, which will remove all green bars (for now we only have the Main bar) and present the page as it would be in a Publish instance. For now, you can simply add a couple of <br /> tags after the mainBar tag and you will see all three text lines again.

If you click on the Page Properties button you will get a dialog with an error. The reason is that the page properties dialog our tag refers to does not exist… yet.

Define the page properties dialog

The new Page Properties dialog We will now define the page properties dialog and let our template use it. For the sake of the example, we will simply copy the existing samples-page-properties dialog.

  • Open /modules/samples/dialogs/samples-page-properties.
  • Right-click on the samples-page-properties folder and select "copy" from the context menu.
  • Move the cursor to the new "myProject" folder and click the left mouse button.
  • Rename the copied node to, for example, myPagePropertiesDialog
  • Update your template so that the dialog property of the cms:mainBar tag matches the name of your new dialog.
Refresh the Web page and click on the Page Properties button. This time you will get the Page Properties dialog to edit general Web page properties.