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 page

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

2.  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

3. 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

4. We are going to create a page as the following

5. Layout is organized by border containers
top container
center container
bottom container

6. grid containers: placed inside border containers
left column
grid container
(2 columns)
right column

7. widgets, main content pane: placed inside grid column
menu
editor
bread crumb
search box
main content
categories
url shortener
banners banners
google adsense
comments
menu

8.  Step 1: Splitting page to border containers
Method 1: right-click on node, choose Insert border container

9.  Step 1: Splitting page to border containers
Method 2: drag and drop containers

10.  Step 2: Inserting grid container

11.  Step 2: Setting the grid columns

12.  Step 3: Inserting widgets
Method 1: drag widget and drop on the target column

13.  Step 3: Inserting widgets
Method 2: drag widget and drop on the target node

14.  Step 4: Inserting main content pane
main content pane: the main content of page without widgets, such as
the content of article, etc.

15. Drag and drop widgets/main content pane between grid
columns

16. It is also possible to insert tab containers

17. 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

18.  Applying filters to given element:

19. Using available and/or additional filters
drag and drop
to change filter’s
position

20. Example of filter:
Slideshow - Showing a slideshow of all images taken from the content

21. Example of filter:
Navigator - Creating a table of content based on headings

22.  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>

23.  Cloning layout by copying ...

24.  ... and pasting

25. 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

26. XML structure:
<?xml version="1.0" encoding="UTF-8"?>
<layout>
...
</layout>

27.  Inserting a border container
<layout>
<borderContainer region="top">
...
</borderContainer>
</layout>
region: top, bottom, left, right, center

28.  Inserting a grid container
<borderContainer region="center">
<gridContainer>
...
</gridContainer>
</borderContainer>

29.  Inserting a grid column
<gridContainer>
<zone cssClass="leftContainer">
...
</zone>
<zone cssClass="rightContainer">
...
</zone>
</gridContainer>

30.  Inserting a tab container
<zone cssClass="rightContainer">
<tabContainer>
<gridContainer title="Top viewed">
...
</gridContainer>
<gridContainer title="Top commented">
...
</gridContainer>
</tabContainer>
</zone>

31.  Inserting the main content pane
<zone cssClass="leftContainer">
<mainContentPane />
</zone>

32.  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>

33.  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>

34.  Defining a filter
<mainContentPane>
<filters>
<filter module="util" name="slideshow" />
<filter class="Util_Services_HiddenLink" />
</filters>
</mainContentPane>

35.  Importing layout from a XML file

36.  Exporting layout to a XML file

37. Customizing the dashboard
dashboard: where displays the data you care most
 Latest unactivated articles/comments
 Latest unread private messages
 Uncompleted todo list
 etc.

38. Customizing the dashboard

39. 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.

40. Placing any widget at any position of article’s content
Example: inserting a poll inside the content

41. Example: inserting a poll inside the content

42. Example: inserting an album at the bottom of content

43. 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

44. nextcms.org
nextcms.tv
© 2012 Nguyen Huu Phuoc
thenextcms@gmail.com