why nextcms: layout editor

Layout Editor

Present by Nguyen Huu Phuoc, Founder of NextCMS thenextcms@gmail.com

NextCMS is a content management, built on top of zend framework, dojo toolkit, and jquery

It is free and open source software

This slide tell you one of many reasons why you should choose NextCMS instead of other one

We need a Layout Editor (or Template Builder, or whatever you say) which is:

Easy to use for both end-users and developers

Easy to customize the layout of page

We are going to create a page as the following

Layout is organized by border containers

top container

center container

bottom container

grid containers: placed inside border containers

left column

right column

grid container (2 columns)

widgets, main content pane: placed inside grid column

menu

editor

search box

categories

banners

google adsense

menu

bread crumb

main content

url shortener

banners

comments

Step 1: Splitting page to border containers

Method 1: right-click on node, choose Insert border container

Step 1: Splitting page to border containers

Method 2: drag and drop containers

Step 2: Inserting grid container

Step 2: Setting the grid columns

Step 3: Inserting widgets

Method 1: drag widget and drop on the target column

Step 3: Inserting widgets

Method 2: drag widget and drop on the target node

Step 4: Inserting main content pane

main content pane: the main content of page without widgets, such as

the content of article, etc.

Drag and drop widgets/main content pane between grid columns

It is also possible to insert tab containers

We need to mofify the content, such as:

Replace special characters with emotion icons in the article’s content

Replace bad word with pre-defined characters in the article’s content

Create a slideshow consisting of all images taken from the article’s content

etc.

Content modifiers are called as FILTERS

Applying filters to given element:

Using available and/or additional filters

drag and drop to change filter’s

position

Example of filter:

Slideshow - Showing a slideshow of all images taken from the content

Example of filter:

Navigator - Creating a table of content based on headings

Setting id, class, style attributes for div tags that show layout elements

<div class="container

top_container"

id="topContainer"

style="height: 30px;

width: 100%">

...

</div>

Cloning layout by copying ...

... and pasting

It is possible to define the layout in a XML file:

Template providers can package the template with pre-defined layouts

Community can share the layout with each other

Administrator can backup and restore the layout

XML structure:

<?xml version="1.0" encoding="UTF-8"?>

<layout>

...

</layout>

Inserting a border container

<layout>

<borderContainer region="top">

...

</borderContainer>

</layout>

region: top, bottom, left, right, center

Inserting a grid container

<borderContainer region="center">

<gridContainer>

...

</gridContainer>

</borderContainer>

Inserting a grid column

<gridContainer>

<zone cssClass="leftContainer">

...

</zone>

<zone cssClass="rightContainer">

...

</zone>

</gridContainer>

Inserting a tab container

<zone cssClass="rightContainer">

<tabContainer>

<gridContainer title="Top viewed">

...

</gridContainer>

<gridContainer title="Top commented">

...

</gridContainer>

</tabContainer>

</zone>

Inserting the main content pane

<zone cssClass="leftContainer">

<mainContentPane />

</zone>

Inserting a widget

<zone>

<widget module="content" name="articles"

title="Latest articles">

<params>

<param name="data_source">

<value><![CDATA[...]]></value>

</param>

<param name="template" value="list" />

<param name="limit" value="4" />

<param name="category_id" value="__AUTO__" />

</params>

</widget>

</zone>

Styling page elements: id, cssClass, cssStyle attributes

<borderContainer region="top" id="topContainer">

<gridContainer cssStyle="border: 1px solid #ccc">

<zone cssClass="leftContainer">

<widget module="..." name="..."

cssClass="searchBoxContainer">

</widget>

</zone>

</gridContainer>

</borderContainer>

Defining a filter

<mainContentPane>

<filters>

<filter module="util" name="slideshow" />

<filter class="Util_Services_HiddenLink" />

</filters>

</mainContentPane>

Importing layout from a XML file

Exporting layout to a XML file

Customizing the dashboard

dashboard: where displays the data you care most

Latest unactivated articles/comments

Latest unread private messages

Uncompleted todo list

etc.

Customizing the dashboard

Have you ever wished?

Place a poll inside an article’s content

Place a photo slideshow at the end of article’s content

Place a Google Adsense banners inside an article’s content

etc.

Placing any widget at any position of article’s content

Example: inserting a poll inside the content

Example: inserting a poll inside the content

Example: inserting an album at the bottom of content

We listen to you!

On social networks

twitter.com/thenextcms

facebook.com/nextcms

youtube.com/thenextcms

slideshare.net/thenextcms

github.com/thenextcms

Email

thenextcms@gmail.com

nextcms.org nextcms.tv

© 2012 Nguyen Huu Phuoc

thenextcms@gmail.com