Customize Html5 Components
The Content Management System has template engine which can handle Html5 Components.
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.
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.
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.
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.
The Html5 Components use the server program. The server program access the database and create variables used in the Html template design dynamically.
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.
By pushing Ctrl+Space key on the editor, content Assist is available. The assist is for following elements.
- Standard functions
- Database table and columns
Click the table name and wait for about 3 seconds, the table scheme information is shown on the pop up pane.
You can debug the program on the web browser. In order to debug your server side script, following operation is available.
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.
You have to set input parameter and pages before start the debugger. How to set them is same with previewing the design.
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.
The debugger suspends at the breakpoint, and then following operation is available.
- 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 is templates which are available on the WYSIWYG editor. The example of inline parts are shown at Content Editor of CMS.
For exmple, the partial sitemap module is one of the inline module.
You can use it on the WYSIWYG editor.
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.
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.
In addition to customizing Html5 Component, you can create your own 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.
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.
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.
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.