You’ll find answers on following questions:

• How to add more elements to component
• How to set CSS only for specific browsers

For add more elements to component we need to define its in skin file. If we want use its only one time (in component), we can add its to MAIN section:

<j:main container="." buttons="div[2]" status="div[1]">
    <div class="calc">
        <div class="status"> </div>
        <div class="buttons"> </div>
    </div>
</j:main>

if more, better will be create a new section:

<j:calcrow>
    <div class="calcrow"> </div>
</j:calcrow>
<j:calcbtn>
    <div class="calcbtn"> </div>
</j:calcbtn>

Now we can use this elements in this.$draw method. At begining we get a status and buttons elements:

var oButtons = this.$getLayoutNode("main", "buttons", oExt);
var oStatus  = this.$getLayoutNode("main", "status", oExt);

First param sets a name of section from which we want to get a element, second a name of attribute which specify a XPath to it.

status="div[1]" //XPath to status element in <div class="calc">

To switch section to which we are taking a data from and create a new instance of it, we need to use following function:

this.$getNewContext(sectionName);

In that way we can create more the same elements. Like here where we created 3 rows with 6 buttons:

for (var i = 0; i < 3; i++) {
    this.$getNewContext("calcrow");
    var oRow = oButtons.appendChild(this.$getLayoutNode("calcrow"));
 
    for (var j = 0; j < 6; j++) {
        this.$getNewContext("calcbtn");
        var oButton = oRow.appendChild(this.$getLayoutNode("calcbtn"));
    }
}

Our component will be nothing if we won’t use CSS for it. Here is a simple CSS style to arrange buttons inline in rows and set some colors to elements.

<j:style><![CDATA[
.calc {
    width    : 192px;
    height   : 118px;
    border   : 1px solid black;
    overflow : hidden;
    padding  : 0;
}
.calc .status {
    width  : 100%;
    height : 23px;
}
 
.calc .calcrow {
 
}
 
.calc .calcbtn {
    width            : 30px;
    height           : 30px;
    background-color : silver;
    display          : inline-block;
    margin           : 1px;
}
]]></j:style>

Someone will tell “Ok, but this style is incorrect for Internet Exploerer”… Yes it is, now i need to introduct a simple way to specify CSS styles for specific browser. Here it is:

<j:style condition="jpf.isIE"><![CDATA[
.calc .calcbtn {
    float:left;
}
]]></j:style>

This code fix all problems with display:inline-block; option.

Of course we can use different conditions like:
jpf.isOpera, jpf.isSafari, jpf.isKonqueror, jpf.isIphone, jpf.isChrome, jpf.isGecko, jpf.isGecko3 or jpf.isIE8.

You’ll find answers for Your all questions in Javeline Platform RefGuide at http://www.ajax.org/documentation/refguide/