Customize Html5 Components

The Content Management System has template engine which can handle Html5 Components.

Html5 and Style Sheet Design

At first, you may do is customizing the design of Html5 Components. By editing Html and Style Sheet, you can modify your own parts.

When you edit them, you have to use Primitive Template(Html5 Component) editor. in order to open the editor, click the "Primitive Templates" button on the top page of the CMS administration console.

By clicking it, following page appears.

The Primitive Templates are categorised with folder, and they are in it. You can change the location of templates by drag and drop.

This folders are shown as pallet's category on the Top Template Editor's GUI.

In order to edit the template, double click the template on the left pane, then the template is opened with the editor like below.

Edit Html

In order to edit the Html, click the "Html" tab or the tab is activated. Then following pane appears on the editor area.

You can write Html of the component in this editor. The Html format and Alinous-Core attributes are available.

The variables are made in the server side program, and you can put them on the Html template.

Edit Style Sheet

Click the "Css" tab on the top of editor area, then following pane appears.

On this editor, you can edit the Style Sheet. The css code written here is added to the Html generated by template engine on publish.

In the header of pages which use Top Template including this component has this code.

Edit JavaScript

Sometimes primitive template uses JavaScript. Click the "JavaScript" tab on the top of editor, following pane appears.

On this editor pane, you can write Javascript code. If you do not use Javascript for this Html5 Component, you can leave this empty.

Preview Design

After making the design, you can preview the design. The preview function shows appearance of saved component design. Therefore you have to save before preview new design.

By pushing "Save" button, the component's design is saved, and apply button appears.

Before applying saved design, the website's design is last one. Therefore you can check the design before applying it.

In order to preview the design, following operation is necessary.

Set preview page and parameter

At first, set the page and parameters to preview. Click the "Parameter Setting" button, then following dialog box appears.

Select the page to be used on preview with the combo box, and push "Set Parameters" button. Then the page to preview is set.

Preview component design

Next, push the "Preview" button, then a new pop up window of the web browser appears, and the design is shown in it.

After checking the design and it is OK, please push the "Apply" button, then the design you customized now is applied to the web pages which uses this component.

Server side program

The Html5 Components use the server program. The server program access the database and create variables used in the Html template design dynamically.

The server side program is written in Alinous-Core script, which has SQL and control statements like Javascript.

Edit Program

Click the "Server Code" tab on the top of editor pane, then following pane appears.

You can write program here. This program editor has content assist and database table hint. By using them, you can know a lot of thing about the program.

Content Assist

By pushing Ctrl+Space key on the editor, content Assist is available. The assist is for following elements.

• Standard functions
• Database table and columns
  

Database Hint

Click the table name and wait for about 3 seconds, the table scheme information is shown on the pop up pane.

Debug Program

You can debug the program on the web browser. In order to debug your server side script, following operation is available.

Set Breakpoints

By clicking gutter of the editor on the left site, you can set the breakpoint.

And by clicking the breakpoint marker, you can remove it.

Before launching the debugger, you have to set the breakpoints. If there are no breakpoints, the debugger do not stop and automatically finish executing program.

Parameter Setting

You have to set input parameter and pages before start the debugger. How to set them is same with previewing the design.

Execute debugger

After setting breakpoints and input parameters, you can start to execute server side script with debugger. Click the "Debug" button, then following debugger window appears as pop up window.

(Click the picture, then large one is shown)

The debugger suspends at the breakpoint, and then following operation is available.

• Resume
• Step Over
• Step In
• Step Return
• Set or remove breakpoints

After the execution finished or the program ended with error, the debugger finishes execution.

Inline Parts

Inline parts is templates which are available on the WYSIWYG editor. The example of inline parts are shown at Content Editor of CMS.

Example of Inline Part

For exmple, the partial sitemap module is one of the inline module.

You can use it on the WYSIWYG editor.

Set as Inline Part

To make inline module is easy. By setting "Embedded Module" option's check box checked, the Html5 Component become available on the WISIWYG editor.

This pane is on the "Html" editor's pane, which appears when you click the "Html" tab. By pushing the "Show Header" button, the pane is toggle the display status.

If the pane is not shown, please push the "Show Header" button.

Parameter setting

The inline module can have parameters to be set on using on the WYSIWYG editor. Click the "Parameters" tab on the top of editor pane. Then following pane appears.

On this pane, you can add parameters. In order to add a new parameter, input the name into the last row's text input, and push the "Add Parameter" button.

And you can remove a parameter by pushing "Delete" button.

Create your own Html5 Component

In addition to customizing Html5 Component, you can create your own component.

Create Html5 Component

In order to create a new component, right click on the left pane and show context menu. Select the "Add Tree Node" from the menu.

Then following dialog box appears.

Input following information and click "Create a Primitive Part" button. Then a new template component is made.

• Primitive Code
• Primitive Name (this is display name)

These 2 information is required. And following input is optional.

Is dynamic

Generally, this Content Management System uses static Html. Therefore the template engine outputs static Html files from page content and template setting.

But by checking this option, the template engine generate code using this part dynamically on runtime.

Require Paging

If the page has pagination, you have to select "template with paging". If you set the code, you have to write server program for pagination part.

In addition to that, you have to write program for pagination part, which returns number of pages. The code have to be written on the editor of "Paging" tab section.

The sample code above is just return 3. But on actual case, it queries the database and return the number of pages.

Delete Component

Same with on creating a new component, right click on the component you want to delete, and select "Delete Tree Node" from the context menu.