Openlaszlo Component Reuse Design

The basic library of openlaszlo has many basic UI controls. Button, combox, etc. During project development, many basic components cannot meet the requirements. Because of the complicated UI design, complicated controls need to be designed by themselves. Controls must be customized.

 

The basic design of Laszlo component customization is as follows.

 

1. The style can be used to process the style of the control. Such as font, color, and image.

<Class name = "mtext" extends = "text"> <br/> <attribute name = "fontstyle" style = "textfontstyle" mce_style = "textfontstyle" inherit = "true "/> <br/> <attribute name = "fgcolor" style = "textfontcolor" mce_style = "textfontcolor" inherit = "true"/> <br/> ...... <br/> </class> <br/> CSS: <br/> mtext {<br/> textfontstyle: "plain"; <br/> textfontcolor: "#000"; <br/>}

 

2. interfaces or methods that can be rewritten are available. For example, a table component. Sorting rules are different in different scenarios. Therefore, the component of the base class should have a sorting method that can implement the rewrite operation.

 

... <Br/> <! --- @ Override --> <br/> <method name = "setsort" ARGs = "clo: gridcolumn, ASC: boolean "> <br/> // do your things <br/> </method>

 

3. The layout can be customized. For example, the button on the toolbar control. You can use CSS for customization. Then the button component automatically adapts to the width.

Toolbar {<br/> toolbarclassitems: "sendtoolbarbutton, canceltoolbarbutton" <br/>}

 

 

In the init method of toolbar, You can initialize and layout the button component customized by CSS.

 

 

4. In the new project, you can use the basic control and extend it after inheritance. Then follow the original CSS customization method.

 

For more instances, You can provide more detailed examples in the future.