Page Editor

The Page Editor is a functionality of MyCocktail which allows to design a web page through a GUI allowing to integrate mashups created with MyCocktail. It also allows to introduce text and formats it with FCKEditor, a web text editor. This is the interface of Page Editor, it is divided in two main parts: the toolbars in the top of the window and the design area below the toolbars.

MyCocktail Page Editor

Toolbars

In the top of the window are two toolbars: the FCKEditor Toolbar and the Page Editor Toolbar.

FCKEditor Toolbar

This toolbar belongs to FCKEditor, this editor has been integrated in MyCocktail.

FCKEditor Toolbar

Page Editor Toolbar

This tool bar has the following functionalities:

Page Editor Toolbar

• Save: to save a page the page in JSON format, the text should be copied and pasted to a file to save it in local disk.

Save dialogue

• Load: this option loads in the editor a page with the provided configuration, this configuration is provided when the page is saved.
• Preview: to see a preview in another browser window
• Export HTML: this option exports the page in HTML format.

Dialogue with the HTML to export the page

• Width: It allows to choose a width for the page (800 pixels, 1024 pixels or 100%)
• Align: If the page does not fill all the width of the window with this option can be selected the align of the page (left, centre and right).
• Layout: this option displays the dialogue shown in the next illustration, it allows the user to choose a layout for his page.

Layout Selector

• Add/Remove header: To add or remove the page header
• Add/Remove footer: To add or remove the page foot
• Theme: A theme can be selected to decorate the page.

Theme Selector

• Add Mashup: This option allows to insert a mashup in the selected area. The mashup has to be previously created and saved with MyCocktail Mashup Builder.

Dialogue to insert mashups

• New Mashup: This button redirects to MyCocktail Mashup Builder.

Design Area

This zone is where the user can design the page, this area is a rough representation of the resulting page. The layout of the page can be changed using the Layout button in the Editor Toolbar. The design area is composed by a header, a footer and a variable number of areas between the header and the footer which depend to the chosen layout. The header and the footer is optional, the user can add or remove it with the button in the Page Editor Toolbar. In all the areas the user can insert text using FCKEditor (Area 1 in the next illustration) or mashups previously created with MyCocktail (Area 2 in the next illustration). The text insertion is too easy, the user has to write the text and then formats it with the FCKEditor toolbar. The text by default has the format defined in the selected theme by the user, although the text can be changed manually using the formatting options of FCKEditor toolbar. In the areas mashups can be also inserted using the “Add Mashup” button (see Page Editor Toolbar).

MyCocktail Page Editor

If a mashup is inserted in the area, a toolbar appears in the top right of the area.

Mashup toolbar in the areas of the design area

The buttons perform the following functionalities:

• Edit the mashup in the mashup builder.
• Refresh the mashup, the editor reloads the mashup, the mashup reflects the changes if the mashup or the data used by the mashup has been updated.
• Delete the mashup.