Powered by SmartDoc

Component

Component represents some part of web page (component sometimes represents the while web page). Depending on client's request, CGIKit creates components and converts them to HTML.

Composition

Component has 3 parts, template , binding and code . Template is HTML and Code is Ruby script. In binding (ckd file), you can determine types of the elements used in template and the behavior of the elements. According to this definitions, CGIKit binds template to code.

Normally, these files (HTML, ckd file and Ruby script) of component are located in the same directory whose name is the same as component's name. In addition to it, the names of HTML, ckd file and Ruby script are different only in their suffix.

For example, if you want to create "MainPage" component, you name HTML, ckd file, and Ruby script like this.

HelloWorld.cgi
/MainPage
  MainPage.html
  MainPage.ckd
  MainPage.rb

Template (.html)

In template, you write normal HTML and CGIKit elements. You can locate elements as "<CGIKIT>". CGIKit tag is case-insensitive.

This is an example.

<html>
<head>
<title>Hello World</title>
</head>
<body>

<h1>
<cgikit name="HelloWorld"></cgikit>
</h1>

</body>
</html>

CGIKit tag has only one attribute, "name". And, the value of "name" attribute is also used in ckd file. The value don't need to be enclosed by double quotation mark ("). Of course, you can enclose the value by the mark.

Tags that have no bodies can be empty tags. Using empty tags for elements like CKString, CKSubmitButton, etc., is easy to write CGIKit tags.

<cgikit name="HelloWorld"/>

Comment

Comment of HTML is interpreted because it is necessary to include something like CSS and Javascript. If you want to comment out some parts of a template, you use "<!--- ... --->". The format is like HTML comments, but with an additional hyphen.

Binding (.ckd)

In ckd file, you decide types of the elements and their behavior. Please be care of the grammar of ckd file. Its grammar is different from that of Ruby or HTML. In ckd file, all the attributes of the element are enclosed by braces, "{}", and an attribute is separated by semicolon, ";". You can omit semicolon with using return as term.

name of element : type of element {
  attribute = value

  # semicolon
  attribute = value; attribute = value;
}

The value of the attribute is Ruby's method, string, number and true/false. When you use string in ckd file, you surround the value with single/double quotation mark.

HelloWorld : CKString {
  value = sayHello;
}

In this ckd file, you declare that you use "HelloWorld" element whose type is CKString and that "say_hello" method of HelloWorld class is set to "value" attribute of "HelloWorld" element.

Literals

You can use these literals in binding files.

Literals
Literal Format
String 'abc', "string", ...
Digit 1, 2, 3, 4, 5, ...
true/false, nil true, false, nil, ...
Array [array], [0], [1], ...
Hash [key], ['abc'], ["string"], [0], [1], ...

Code (.rb)

Code is Ruby script. The name of component's class must be the same as component's name. Besides, the component's class must inherit CKComponent.

class MainPage < CKComponent
  def sayHello
    "Hello World!"
  end
end

To initialize in component, use init() that initializing method without arguments instead of initialize().

Process of Binding

CGIKit binds elements in template to code. After binding, CGIKit shows HTML by converting the elements. Compoents and elements are changed to HTML like below.

CGIKit reads template of the specified component.

  1. When "<CGIKIT>" is found, CGIKit searches the entry in ckd file which corresponds to the CGIKit tag in template. For example, if "<cgikit name=foo>" is found in template, CGIKit looks for the entry of "foo" in ckd file.
  2. The Elements are bound to code.
  3. The Elements are converted to HTML.

Accessor Method

You need not to define accessor methods for instance variables to use with elements. CGIKit uses accessors if defined, or accesses instance variables directly.

Form Data

In binding, the form data is assinged to the component through the methods to which you bind textfield, button and so on. You don't forget to define accessor methods.