why nextcms: layout editor
DESCRIPTION
NextCMS provides a visual, easy-to-use tool to edit, customize the layout of page.- Splitting the page into containers- Dragging and dropping widgets to the containers. You can move the widgets between containers- Setting CSS class or CSS styles to any containers, widgets- Applying filters to the main content pane or widgets to modify their output- Allowing cache any widgets on pageTRANSCRIPT
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
