Why NextCMS: Layout Editor


Published on

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

Published in: Technology, Art & Photos
  • i am new to cms and need basic information like how to run it and view it (pages) while running on local host!
    Are you sure you want to  Yes  No
    Your message goes here
  • For a demonstration video, you can take a look at:
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Why NextCMS: Layout Editor

  1. 1. Layout EditorPresent by Nguyen Huu Phuoc, Founder of NextCMS thenextcms@gmail.com
  2. 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. 3. 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
  4. 4. We are going to create a page as the following
  5. 5. Layout is organized by border containers top container center containerbottom container
  6. 6. grid containers: placed inside border containers left column grid container (2 columns) right column
  7. 7. widgets, main content pane: placed inside grid columnmenueditor bread crumbsearch box main contentcategories url shortenerbanners bannersgoogle adsense commentsmenu
  8. 8.  Step 1: Splitting page to border containersMethod 1: right-click on node, choose Insert border container
  9. 9.  Step 1: Splitting page to border containersMethod 2: drag and drop containers
  10. 10.  Step 2: Inserting grid container
  11. 11.  Step 2: Setting the grid columns
  12. 12.  Step 3: Inserting widgetsMethod 1: drag widget and drop on the target column
  13. 13.  Step 3: Inserting widgetsMethod 2: drag widget and drop on the target node
  14. 14.  Step 4: Inserting main content panemain content pane: the main content of page without widgets, such asthe content of article, etc.
  15. 15. Drag and drop widgets/main content pane between gridcolumns
  16. 16. It is also possible to insert tab containers
  17. 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. 18.  Applying filters to given element:
  19. 19. Using available and/or additional filters drag and dropto change filter’s position
  20. 20. Example of filter:Slideshow - Showing a slideshow of all images taken from the content
  21. 21. Example of filter:Navigator - Creating a table of content based on headings
  22. 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. 23.  Cloning layout by copying ...
  24. 24.  ... and pasting
  25. 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. 26. XML structure:<?xml version="1.0" encoding="UTF-8"?><layout> ...</layout>
  27. 27.  Inserting a border container<layout> <borderContainer region="top"> ... </borderContainer></layout>region: top, bottom, left, right, center
  28. 28.  Inserting a grid container<borderContainer region="center"> <gridContainer> ... </gridContainer></borderContainer>
  29. 29.  Inserting a grid column<gridContainer> <zone cssClass="leftContainer"> ... </zone> <zone cssClass="rightContainer"> ... </zone></gridContainer>
  30. 30.  Inserting a tab container<zone cssClass="rightContainer"> <tabContainer> <gridContainer title="Top viewed"> ... </gridContainer> <gridContainer title="Top commented"> ... </gridContainer> </tabContainer></zone>
  31. 31.  Inserting the main content pane<zone cssClass="leftContainer"> <mainContentPane /></zone>
  32. 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. 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. 34.  Defining a filter<mainContentPane> <filters> <filter module="util" name="slideshow" /> <filter class="Util_Services_HiddenLink" /> </filters></mainContentPane>
  35. 35.  Importing layout from a XML file
  36. 36.  Exporting layout to a XML file
  37. 37. Customizing the dashboarddashboard: where displays the data you care most Latest unactivated articles/comments Latest unread private messages Uncompleted todo list etc.
  38. 38. Customizing the dashboard
  39. 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. 40. Placing any widget at any position of article’s contentExample: inserting a poll inside the content
  41. 41. Example: inserting a poll inside the content
  42. 42. Example: inserting an album at the bottom of content
  43. 43. We listen to you!On social networks twitter.com/thenextcms facebook.com/nextcms youtube.com/thenextcms slideshare.net/thenextcms github.com/thenextcmsEmailthenextcms@gmail.com
  44. 44. nextcms.orgnextcms.tv © 2012 Nguyen Huu Phuoc thenextcms@gmail.com