Why NextCMS: Layout Editor

Layout EditorPresent 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, orwhatever 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 containerbottom container

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

widgets, main content pane: placed inside grid columnmenueditor bread crumbsearch box main contentcategories url shortenerbanners bannersgoogle adsense commentsmenu

 Step 1: Splitting page to border containersMethod 1: right-click on node, choose Insert border container

 Step 1: Splitting page to border containersMethod 2: drag and drop containers

 Step 2: Inserting grid container

 Step 2: Setting the grid columns

 Step 3: Inserting widgetsMethod 1: drag widget and drop on the target column

 Step 3: Inserting widgetsMethod 2: drag widget and drop on the target node

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

Drag and drop widgets/main content pane between gridcolumns

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 dropto 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 dashboarddashboard: 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 contentExample: 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/thenextcmsEmailthenextcms@gmail.com

Why NextCMS: Layout Editor

by Phuoc Nguyen Huu on Jul 01, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Why NextCMS: Layout Editor Presentation Transcript