passing params to and from enyo kind

passing params to and from enyo kind

HTML

<script type="text/javascript">
    new App().renderInto(document.body);
</script>

CSS

.joop-btn{
    margin:10px;
}
.joop-target{
    background-color:green;
    width:100%;
    
}

JavaScript

enyo.kind({
    name: 'App',
    kind: enyo.Control,
    components: [
        {kind:'FittableRows', components:[
            // calls the custom kind by it's default values
            {kind:'DeviceButton',name:'bttn1', classes:'joop-btn',ontap:'printToTarget'},
            // calls the custom kind and pass the variables to the DeviceButton kind
            {kind:'DeviceButton', name:'bttn2', btnstring:'Get AgentA', useragent:'chrome', classes:'joop-btn', ontap:'printToTarget'},
            {tag:'div', name:'targetContainer', content:'no button clicked yet', classes:'joop-target'},
        ]},                
    ],
    printToTarget:function(inSender, inEvent){
        // inSender = the button that was pressed
        this.$.targetContainer.setContent(inSender.name+' has used the value: "'+inSender.getUseragent()+'" and sends the value of: "'+inSender.getValueToPrint()+'" back.');  
    },
    
});

enyo.kind({
    name:'DeviceButton',
    kind:enyo.Control,
    components:[
        {kind:'onyx.Button',name:'btn', ontap:'printUsrAgent'}
    ],
    published:{
        btnstring:'default btnstring', // value that will be received
        useragent:'default useragent',  // value that will be received
        valueToPrint:'default valueToPrint' // value that will be used 
    },
    rendered:function(){
        this.inherited(arguments);
        this.$.btn.setContent(this.btnstring);
    },
    printUsrAgent:function(inSender,inEvent){
        // set a parameter with the value that was received of if not received use the default value (normaly would do some calculations with it first)
        this.valueToPrint = this.useragent+' after changes'; 
    },
});