Develope your first Kooboo website (part II)

                At Kooboo, we respect your web development experience. We have provided you two very simple ways to develop a Kooboo website. One way is to develop directly inside Kooboo CMS and export it as a website template. Developing in Kooboo CMS is very similar to developing a regular website using other standard development tools like Visual Studio.NET. We explained this in part I of this document.

Another way is to develop a static pure HTML/CSS/JavaScript standard website first, and then to convert it into a Kooboo CMS site template by adding very simple HTML comments described in this document. We provide a conversion tool for this.

For example, you can develop a simple website that looks like the below:

Sample_HTML_website.png

This is a static HTML website that contains 3 simple pages and relevant CSS and JavaScript. You should be able to do so by many web design tools.

After adding some simple comments to the 3 static HTML pages, our tool can convert it into a Kooboo website that looks like:

Kooboo_website.png    Scripts.png

Every static HTML page will be converted into one Kooboo Page, and JavaScript and CSS files will be imported to the relative management folders. Layouts, views, and other elements will be generated based on the comment in the static HTML files. At the end, you will have one fully functioning dynamic Kooboo CMS website.

In the next sections, we will start to explain those HTML comments that will be converted into Kooboo elements.

Syntax

Kooboo site template syntax is very simple, using the standard HTML comment.

A comment may look like

1
<!--commentName:parametername(value),parametertwo(value)--> some text <!--/commentName-->

commentName is the identifier we gave to that comment name.  Except pageSetting tag, all other tags need to have a closing comment tag. 

Below are all the tags you can use in your HTML code and an example use for each tag. 

pageSetting

Tag: pageSetting
Optional parameters:
title: (String)
layout: (Char)
parent: (Char)
homePage: (Boolean)
showMenu: (Boolean)
menuIndex: (Number)

This tag should be placed on the top of HTML source and does not need closing tag. It is used for page setting. Title= page title, layout=the name of layout on this page, parent=parent page name, homePage=set as home page. showMenu = show in menu API, menuIndex = position in the menu list. 

LayoutPosition

Marker: position
Required parameters:
name: (Char)

This is used to mark a position within the layout. Inside the position, you can have more elements. 

The layout name should be defined in the pageSetting. 

HTML block

Marker: htmlBlock
Required parameters:
name: (Char)


Define a HTML block. Html block can be edit in the database, also support inline editing.  HtmlBlock must be defined within a position tag.  HtmlBlock can be used by several pages. 

HTML

Marker: html
Required parameters:
none


Define an in-page HTML.  In-page Html is part fo that page, can not be used by other pages.

View

Marker: view
Required parameters:
name: (Char)

Define a view with static or dynamic data. View must be defined within a positioon. 

Label

Marker: label
Parameters optional:
key: (Char)

Small text to be used in the website. 

Menu

Marker: menu
Parameters: (none)

Define the menu template that will be used by the Menu API to generate real menu. 

Sub comments:

1.MenuItem

marker: item
parameters: (none)

2.MenuLink

marker: link
parameters: (none)

3.MenuLinkText

marker: linkText
parameters: (none)

4.MenuCurrentClass

marker: currentClass
parameters: (class name)

List

Marker: list
Required parameters:
folder: (Char)
viewName: (Char)
Parameters optional:
pageSize: (Number)
takeTop: (Number)
orderBy: (Char)
orderByDescending: (Char)

List is a view with list of item.  View may contains datarule to query data item. The ListItemLink will automatically link the detail page of that content item.  List contains the following sub items. 

ListItem: 
ListItemLink: 
ListItemData: 
ListItemEditable: 

Sub comments:

1.ListItem

marker: item
parameters: (none)

2.ListItemLink

marker: link
parameters: (none)

3.ListItemData

marker: data
(
see ItemData introduction)

4.ListItemEditable

marker: editable
parameters: (none)

Detail

Marker: detail
Required parameters:
folder: (Char)
viewName: (Char)
Parameters optional: (none)

Detail is also a view with detail information of one content item. It may contains DataRule for data query. 

ItemData

Marker: data
Required parameters:
columnName: (Char)
Parameters optional:
controlType: (Char)
order: (Number)
showInGrid: (Boolean)

Used to display the item content. It will generate the content type and control type automatically. 


Page


A Kooboo page is a URL route that matches to some configuration and generates HTML output. A static HTML page name will be converted into a Kooboo page.

There is nothing to comment or configure in page level.

Usage examples

PageSetting

1
<!--pageSetting:layout(Main),homePage(true),menuIndex(0)-->

LayoutPosition

1
2
3
4
<!--position:name(main)-->
<!--htmlBlock-->...<!--/htmlBlock-->
<!--view:name(news)-->...<!--/view-->
<!--/position-->

HtmlBlock

1
2
3
4
5
<!—htmlBlock:name(Sample)-->
<div>
    <p>html content</p>
    <p>html content</p>
</div><br><!--/htmlBlock -->

Html

1
2
3
4
5
<!—html-->
<div>
    <p>html content</p>
    <p>html content</p>
</div><br><!--/html -->

ViewBlock

1
2
3
4
5
6
<!--view:name(news)-->
<div>
    <h2>Title</h2>
    <p>News Content</p>
</div>
<!--/view-->

Label

1
2
3
<div class="foot">
    <!--label:key(copyright)-->Copyright &copy; 2011 Kooboo team<!--/label-->
</div>

Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--menu-->
<ul>
    <!--item-->
    <li class="current" currentClass="current">
        <!--link-->
        <a><span><!--linkText-->Home<!--/linkText--></span></a>
        <!--/link-->
    </li>
    <li class="separator"></li>
    <!--/item-->
    <li><a>About</a></li>
    <li><a>News</a></li>
</ul>
<!--/menu-->

List

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--list:folder(news),viewName(news)-->
<div class="list">
    <!--item-->
    <div class="item" editable>
        <h2>
            <!--link-->
            <a><!--data:columnName(title),controlType(textbox)-->Item1<!--/data--></a>
            <!--/link-->
        </h2>
        <p><!--data:content,textarea-->Content1<!--/data--></p>
        <span><!--data:date-->2011.03.21<!--/data--></span>
    </div>
    <!--/item-->
    <div class="item">
        <h2><a>Item2</a></h2>
        <p>Content2</p>
        <span>2011.03.21 </span>
    </div>
</div>
<!--/list-->

Detail

1
2
3
4
5
6
<!--detail:folder(news),viewName(news)-->
<div class="detail">
    <h2><!--data:title-->Title<!--/data--></h2>
    <p><!--data:content1-->Content<!--/data--></p>
</div>
<!--/detail-->

ItemData

1
2
<span><!--data:date-->2011.03.21<!--/data--></span>
<span><!--data:columnName(date)-->2011.03.21<!--/data--></span>