Skip to content

Kijj Documentation

Components

class KComponent

The base class for all other components. All other components inherit from this class. You probably won't create instances of this class directly, but will instead create instances of its child classes.

Methods:

  • constructor(elementType="div") - The HTML element type for the component

  • setContent(text) - Sets the content to something new

  • getContent() - Returns the content

  • addStyle(property, value) - Sets a CSS property to the given value

  • addCssClass(name) - Assigns the given CSS class name to the component so it can styled within a CSS file.

  • addSubComponents(arrayOfComponents) - Adds the given array of components inside this component. May not work properly for all component types.

class KTextBlock (extends KComponent)

A block of text that fills an entire row.

Methods:

  • constructor(text) - The text parameter refers to the initial content.

class KTextSpan (extends KComponent)

A span of text that allows more components to be placed after it horizontally.

Methods:

  • constructor(text) - The text parameter refers to the initial content.

class KButton (extends KComponent)

A button.

Methods:

  • constructor(text, width=null) - The text parameter is what will be displayed on the button. If no width is given, the button will fill the full width of the container.

  • onClick(functionName) - Sets a reference to the function to run when the button is clicked

class KInput (extends KComponent)

A single line text input box.

Methods:

  • constructor(width=null) - If no width is given, the input box will fill the full width of the container.

class KSelectBox (extends KComponent)

A single line text input box.

Methods:

  • constructor(choices, width=null) - The choices parameter is an array of strings corresponding to the options to display in the box. If no width is given, the input box will fill the full width of the container.

  • getSelectedItem() - Returns the text of the currently selected item

Layouts

class KLayout

A class for producing a grid layout. You will need to choose identifiers for each zone you would like in your layout, for example header, sidebar, main, footer. Zones are laid out according to the object's rows attribute.

The rows attribute is an array of strings. Each string in the array represents a row, and each zone identifier (separated by spaces) within a string represents a column.

Example
layout = new KLayout()
layout.rows[0] = "header header"
layout.rows[1] = "content1 content2"

Make sure every row you create has the same number of columns, or you will get unpredictable behaviour. If a zone should span multiple columns, repeat it as demonstrated with the header zone in the example above.

It is also possible for a zone to span multiple rows, as follows:

Example
layout = new KLayout()
layout.rows[0] = "sidebar content1"
layout.rows[1] = "sidebar content2"

Note - a zone cannot span multiple rows AND columns. This will not work:

INCORRECT Example
layout = new KLayout()
layout.rows[0] = "impossible_zone impossible_zone"
layout.rows[1] = "impossible_zone content"

Methods:

  • add(component, zone) - Adds one or more components to a zone. The component argument can be a either a single component instance, or an array of component instances. If an array is given, an attempt will be made to layout the components all in one horizontal row. The zone argument is a string indicating the target zone.

  • render(target) - Renders the layout into the HTML element whose's id matches target.

CSS Classes Added to Renderings

It should be noted that the rendering adds the following CSS classes to the various parts of the rendering:

  • kijj-app - applied to the entire container for the app
  • kijj-zone - applied to all zones
  • kijj-zone-*** - a unique CSS class applied to each zone, where *** represents the zone name. For example, the header zone will have the CSS class kijj-zone-header applied to it.

You may customize the styles for each of these classes in your style.css file.

class KVerticalLayout (extends KComponent)

A simple layout with only a single zone. It overrides the add method.

Method:

  • add(component) - This works the same as the add method in the KLayout class, except that a zone name is not required since there is only one zone.