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 function directly. You can also adjust the sharing of one or more content folder at a later stage. This feature is very important for multi sites or multi channels publishing.
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, can NOT be changed after creation.
Domain: The domain URL to access this application, the default URL is: http://yourkooboosite.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.
Theme: Theme of this new created application, can be blank and assign later. For information about Kooboo Theme, please see documents of theme.
JavaScript: Similar as theme, every site contains a JavaScript folder under Binary Resource folder. All JavaScript files in this folder will be combined, compressed and sent to client browser. File combination function is only active when the site is running in "release" mode (modified at SiteManager --> setting).
2. Define Schema
Schema is the content type. Examples are schemas like news, article and agenda. For people who are familiar with database, schema is similar as tables in SQL database. Actually when you create a schema, Kooboo will create a table in the Kooboo database. There are two types of Schema, text and binary. Text schema contains mainly text content, Binary schema contains files. Text schema can include or refer to binary schemes. You can create SQL "many to many" like relation between text schemas as well.
Text Schema
Add Path: Application --> SiteManager --> Schema --> Text
Click on the "text" menu will open the Text Schema window, click "New" button to add a new schema.
The basic element of Text Schema is “column”. By default, each column contains a Name, a Label, a DataType and a ControlType. The column named “Title” is required and cannot be modified. More advanced function regarding Text Schema, please refer to Text Schema document.
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.
ControlType: The type of control to use when generating the schema input form.
Advanced user can define their own ControlTypes using JavaScript; Example ControlTypes are text, checkbox and htmleditor. We implemented several popular HTML editors in Kooboo as well such as HTML editor from Telerik and TinyMce. Telerik editor 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
Click "Insert Item" in above screen to add a new field to Text Schema
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 Schema
Add Path: Application --> SiteManager --> Schema --> Binary
Click "New" button to add a new Binary Schema.
Schema Name: name of your schema
Extension: allowed file extensions
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 --> Content
Right 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, can be blank to create virtual folder. Virtual folders can be used to groupby content folders.
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.
Include Items: Includes all items from parent folder. This is a feature for multi sites content flow.
Workflow: Workflow attached to this folder. When a Workflow assigned to a Folder, content in that folder will go through the defined Workflows.
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.
If there is a workflow defined in the folder, the publishing status will be controlled by workflow, otherwise you will be able to choose whether to directly publish the content or not.
4. Design
Design is the look and feel of a website. Website UI can be designed using Layout template, Content template and Theme. Layout template is used to define layout positions on a page, Content template is used to display one or more content items, and theme contains the required CSS files for presentation. A page contains configuration settings regarding which Layout template and components 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 folder can be used to store CSS and image files. There is a default folder "theme" under Binary resource folder. Any subfolder under this "theme" folder is considered as a theme, which can be assigned to an application. To create a new theme, create a folder under the "theme" folder and put all your CSS files there. Theme folder can include image subfolders.
Right click on Application name, in the property window, you will see a Theme dropdown list. When you apply 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 using EnableTheming="false" in the header declaration.
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 is similar 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 content template in Visual Studio.NET. Visual Studio.NET has the benefits of intellisense and debug. After download Kooboo, you will find a Visual Studio solution file included in the downloaded ZIP file. 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 them.
When you create a new Content template using CMS, there is some sample code generated automatically. You can modify them for your needs.
Below are examples of 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". Using this.GetContents("News") returns an IEnumerable<IDictionary> object. First parameter "News" is "Data Rule"->"DataName" value. More information about Data rule is explained in 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, similar as Html.ActionLink method in ASP.NET MVC. Kooboo will determine the correct URL to link to and verify existence 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. Data rule will retrieve data based on the rules defined and store the data in viewdatekey, which is accessible from this.GetContent or this.GetContents method in the content template. In above content template example, this.GetContent("News"), this "News" is a DataName defined in the DataRule.
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. Query string name value can be accessed by {querystringName}.
5.Page
Kooboo page is very different from the standard ASP.NET web form page concept. A page is not long a physical file. HTTP protocol did not define one request as a file. Map one request to one file is IIS's implementation of HTTP.
At Kooboo CMS, 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, see description above..
The "Advanced" tag will open some more options. For users who like drag & drop and visual design, clicks "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, you can customize URL to almost any way you like.
Default page: In Kooboo the default home page is "Index", you can view it by http://Kooboo.com/index or you can directly browse http://Kooboo.com
Data rule: Data rule is Kooboo's unique way for data access. .
Component
Component contains Content template, functional Modules and customized web forms. In the page component screen, click "Add components" to add components to pages or drag and drop components to page positions from the page visual designer.
Detail page
In standard websites, we often have the index page and detail page. The detail page often gets 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 {ContentId= item["ContentId"]}" sends a parameter {ContentId} 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 {ContentId} parameter, you can use this in the value condition, see below screen.
Site navigation
After you have done above steps, a 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.Kooboosite.com/{pagename}
An easier alternative is to right click on any page name, you will see a preview menu as well. You can click to preview that page. However if that is a detail which requires query string parameters from preview pages, it might generate an error.
Website menu can be built by the navigation API or the built in menu module, please refer to the Menu document for more information.