1. Create Application
Application is the basic element of Kooboo, it contains design, content and extensions, everything you need to build a website. When you are creating an application, you can select which base application it will inherit from.
Content and code sharing is a unique concept of Kooboo. The new created application will contain all elements from the base application and work directly. You can also adjust the sharing of one or more content folder in a later stage.
To create an application, right click on "applications", select "create application" from the dropdown menu. The window below will open
Application name: name of your application,cannot be changed after creation.
Domain: The domain URL to access this application, the default URL is: http://Kooboosite.com/c-{applicationname}
Base: The base application this application will inherit from. All schema, template and content from base application will be shared to this new created application. Required field, “root” is the default application to inherit from.
2. Define Schema
Schema is the content type to be created. Examples are schemas like news, article and agenda. For people who are familiar with database, schema is similar as table in SQL database. There are two types of Schema, text and binary. Text schema contains mainly text input, binary contains files. The text schema can include or refer to binary schemes.
TEXT
Add Path: Application --> SiteManager --> Schema --> Text
Left click on the "text", will open the schema window, click "New" button to add a new schema.
The basic element of Text schema is “column”. Each column will contain a Name, a Label, a DataType and a ControlType. The column named “Title” is required and cannot be modified.
Name: how you name your column
Label: The text label that will appear on the Schema input form.
DataType: The datatype of this column, like string, date or number.
Length: The length of your data. This feature to be used in the next version.
ControlType: The type of control to use when generating the schema input form. Advanced user can define their own ControlTypes using JavaScript; Available sample ControlTypes are text, checkbox and htmleditor. We implemented several popular HTML editors in Kooboo as well such as Rad editor from Telerik and TinyMce. Telerik control is a commercial product, you need to obtain license yourself. There is a document regarding how to enable the Telerik controls after you have the license and dlls from Telerik
Add or change a Text Schema will generate a content input form. We will explain more at the next "Folder" section. Content must be saved under one folder.
Note: There is a ControlType called "file" which will allow you to upload files to be included in the text content. You can also create a Binary Schema and refer to that Binary Schema from Text Schema.
Binary
Add Path: Application --> SiteManager --> Schema --> Binary
Click "New" button to add a new Binary Schema.
Schema Name: name of your schema
Extension: allowed file extentions
MaxSize: The Max file size
Binary Schema normally is used to store attachments like images. It is often used as a referencing content in Text Schema.
If you want to include binary files in a Text Schema as a sub content of that text content, there is also a "file" ControlType in Text Schema.
3. Content Folder
Add Path: Application --> ContentRight click on "Content", select "Add Folder" menu to add a new folder.
Folder name: Meaningful name of your folder
Schema: The Content Type this folder will store.
Workflow: Workflow attached to this folder. When a Workflow assigned to a Folder,content in that folder will go through the defined Workflows.
Base: The parent folder. Content on parent folder will appear on the sub folder. You can localize the content item or use the parent content directly by including parent content item.
A Folder is used to store content, and define the inheritance relation.
After a Folder created, you can start to input content into this folder. The input form will be auto generated based on the Schema selected.
4.Design
Design is the look and feel of a website. Website UI can be designed by using Layout template, Content template and Binary resource. Layout template is used to define layout positions on a page and Content template is used to display one or more content items. A page contains configuration settings regarding which Layout template and Content template to use. For people who are familiar with Asp.Net, Layout template is similar as Master page and Content template is like a user control.
Binary resource can be used to store CSS and image files. There is a default folder "theme" under Binary resource folder. To create an new theme, create a folder under the "theme" folder and put all your css files there. Theme folder can include an image subfolder. Right click on Application name, in the property window, you will see a Theme dropdwonlist. When you are applying a theme to an application, by default all pages will have reference to all css files in that theme folder. You can disable theme function on the Layout template header.
Layout template
Add Path: Application --> Design > Layout Template
Right click on "New" button to add a new Layout template. Some default HTML code will be generated. You can modify them or create completely your own new HTML code.
Name: The name of your Layout template. Body: The HTML code. What is important in the Layout template is the position tag. In above example, the position tag are: <cms:Position id="position1" runat="server"/>. The rest is standard HTML code. Later in the Page configuration, we will be able to insert components into those positions.
Content template
Add Path: Application --> Design > Content Template
Content template is used to display one or more content items. Content Template has similiar concept as concept of the user control in ASP.NET. Full ASP.NET MVC code can be used directly in the Content template.
The default template editor supports syntax highlight and intellisense. If that is not enough, you can also develop in Visual Studio.NET 2008. Visual Studio.NET has the benefits of intellisense and debug. After download Kooboo, you will find the a Visual Studio solution included in the ZIP. When you create a Content template or Layout template in the CMS backend, you will find a file created under the solution "template" folder. You can edit the template files and debug it.
When you are creating a new Content template using CMS, there are some sample code generated automatically. You can modify them for your needs.
Below are two common Content templates, news index page and news detail page.
News Index Content Template:
News Detail Content template
There are a few important API methods here. this.GetResource: Get resource value from "Text Resource". Resource often used for storing multilingual content. First parameter "NewsList" is a key name which is being used to look up Key/Value attribute in Text resource and the second parameter "New" is the default value in case Key/Value is not found.
this.GetContents: Get the list of content from "Data Rule". First parameter "News" is "Data Rule"->"DataItem" value. Using this.GetContents("News") returns an IEnumerable<IDictionary> object. More inforamtion about Data rule is explained the Data Rule document.
this.GetContent: Get one content object from "Data Rule". Because each content object is an IDictionary value, so item["Title"] will return "News" object "Title" value.
Html.PageLink: Kooboo's way of Linking. Kooboo will determine the correct URL to link to and verify existance of that URL. First parameter item["Title"].ToString() is the link text and second parameter "detail" is the page name and the third parameter "new {NewsId= item["ContentId"]}" is query string parameters for the destination page.
Data Rule: A visual tool Kooboo used to retrieve data.
5.Page
Kooboo page is very different from the standard ASP.NET page concept. A page is not long a physical file. A page only contains configuration values. Common tasks of page configuration include:
1. Select the Layout template to use.
2. Insert components into page positions by selecting the "component" tag or using "Visual design" tool.
3. Define Data Rule for data query. Data rule can be defined on Content template as well.
The "Advanced" tag will open some more options; There is more information about this advanced option in menu document. For users who like drag & drop and visual design, there is a "Visual Design" in top menu.
Name: The page name or URL to access this page. In the "Advanced" section, there is a field URL to define Search engine friendly URL
Default page: In Kooboo the default home page is "Index", you can view it by http://Kooboowebcms.com/index or you can directly browse http://Kooboo.com
Data rule: Data rule is Kooboo's unique way for data access. Data rule can also be defined on Content template. Below are some basic concepts of Data Rule.
DataName: Returned object name of this data rule. In above screen, we defined the name as "News". So When we want to access the values of this Data Rule in the Content template, we need to use this.GetContent("News") ["Title"].
ValueType: The type of object to return. For example, list means a collection of objects, object means one content object.
Folder: The folder which contains the content to be retrieved. Folder is an important concept of Kooboo to store content items.
Value Condition: The WHERE condition in standard SQL statement. You can use the value pass from querystring as well. In the "Advanced" tab, there are possibilities to customize your URL
Component
Component contains Content template for content presentation, functional Modules and Customized web forms.
Detail page
In standard website, you often have the index page and detail page.The detail page often get a link from index page. In our previous template example, we mentioned the Html.PageLink API method.
<%= Html.PageLink(item["Title"].ToString(),"detail",new {ContentId= item["ContentId"]}) %>
The "detail" parameter here is the page name of a detail page. "new {NewsId= item["ContentId"]}" sends a parameter {NewsId} to the detail page. In the detail page, you can do two things.
1. Customize URL. This can be for the purpose of SEO or other reasons. See below screen.
2. Set Data Rule condition
In the detail page, you will only want to retrieve one content item only. You can do this by setting the "Value Condition". In the URL there is {NewsId} parameter, you can use this in the value condition, see below screen.
Site navigation
After you have done above steps, an Kooboo site is finished. You can now browse your website. If you define a domain for your application, point your domain DNS to the Kooboo application IP. Kooboo needs to be default site of that IP or you need to add the host value yourself to Kooboo main website. After that, you can visit the website by
http://www.yourKooboosite.com/{pagename}
You can use the navigation API to build your website menus, please refer to the Menu document for more information.