NextCMS is a free and open-source content management system developed by Nguyen Huu Phuoc, designed for ease of use by both end-users and developers. The document details the features and steps for utilizing the layout editor, including creating border and grid containers, inserting widgets, and applying filters to customize content. It also explains the ability to import and export layouts via XML and offers customization options for dashboards and content placements.

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