- Smart Personal Cloud

Using Component


A Star Script Component performs a specific function and can be combined with other components. In Star Script, a component can be defined using the function or class syntax. When using class syntax, the component class must extend the 'component' base class.


Star Script component goes through the below stages in their lifecycle: - Component Definition : define a component using either function syntax or class syntax - Component Instantiation : whenever a tag name matches a function or component class, a component instance is created - Component Configuration : a tag can have children which will be rendered before the rendering of the parent tag. the rendering result of the children tags can be accessed during parent component rendering. - Component Rendering : a component is rendered by calling the defining function or the 'process' function of the component class.


Star Script component can be defined using function syntax or class syntax.

Using Function Syntax

Component can be defined using a function syntax. In fact, in Star Script, every function can be used as a component. When function is used as a component, function parameters are used to pass attribute to component. Besides function parameters, function component can also access the children configurations when rendering the output. For example:

func highlight(color as string)   var content = system.getContent()   <div style=("background-color:"+color+";")>content</div> end

In the above example, color is a configuration attribute that can be passed onto the component. The children of the highlight component can also be accessed inside the function to render the component output.

Once you define the highlight component, you can use it as a tag, for example:

<highlight color="blue">   Hello World! </highlight>

The above tag will generate the following output:

<div style="background-color:blue;">   Hello World! </div>

As you can see from the above example, the component developers will create the "highlight" function. To do this, they need to implement the logic of the component. They need to have knowledge of the html div tag and css style, etc. The component user does not have to understand any of these. From the component user's point of view, there is a new tag called highlight. This new tag takes an attribute 'color'. They can use this tag to highlight a piece of content with the color of their choice.

Using Class Syntax

Component can be defined using a class syntax. The class that defines a component must extend the base 'component' class. Below is an implementation of the highlight component using the class syntax.

class highlight extends component   var color as string   func process()     var content = system.getContent()     <div style=("background-color:"+color+";")>content</div>   end end

In the class based highlight component, you can see that the color field of the highlight class can be directly used as a tag attribute. Also, a function called process is used to render the class component.

Function vs. Class

You may be wondering when to use a function to define a component and when to use a class. The answer is simple. If you don't mind writing a little more code, use a class to define component. Class based components can support all features of a function based component and more. For example, you can use inheritance to extend an existing class based component. You cannot do that with function-based component. If you just want to create a simple component quickly and easily, a function based component is the way to go.


Multiple components can be combined to create larger components. Below we have used the source code of this tutorial to demonstrate this:

use /web/ezpage use /comp/tutorial <ezpage>  <tutorial title="Using Component">   <section title="Overview">    <para>Star Script component...</para>    <para>In Star Script, ...</para>    ...   </section>   <section title="Defining Component">    <para>Star Script component can...</para>   </section>   ...  </tutorial> </ezpage>

In the above example, there are several components being used. Let's go through them one by one.

Tag: ezpage

ezpage is a page component that manages the basic structure of a html page, such as header, body, etc. It is a container component. Components can register dependent JavaScript or CSS to the enclosing wpage component instance. The wpage component will insert those JS/CSS resources into the header section of the HTML page based on the order of the registration. It will also remove any duplicate references to resource.

Tag: tutorial

The tag tutorial is the top level component for the tutorial page. A tutorial contains a title and multiple sections. Each section contains a title and multiple paragraphs. The content of a section can either be a Component Composition, text, or piece of source code.

Tag: section

Section is a data object that contains title and content of that section. In Star Script, the tag structure can also be used to populate object instances.

Tag: para

Each section contains multiple paragraphs. A paragraph is defined as a function on the tutorial component. Any public function defined on a component class can be used as an element under that content body. The only restriction is that class function tags cannot be referenced in the body of the child component. This is to avoid polluting the namespace of the child component.


As you can see from the above example, using a component to write a tutorial document does not require much programming skill but enables a lot of flexibility in building out the page. Employing this structure, someone authoring content for a tutorial page only needs to know a few tags to produce a tutorial document in a format much like a XML document. (which is exactly how this tutorial page was created).