0

I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)

<!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
        
<script src="enyo-master/enyo.js"></script>
 <link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css>

 <link rel="stylesheet" href="button_enyo.css">
      
 <link rel="stylesheet" href="checkbox-sample.css">
 <link rel="stylesheet" href="connect .css">


    /*connect.css*/
     
      .connect .heading1{
     
         padding-left: 450px;
         color: #3BAAFF;
         text-transform: uppercase;
         font-weight: bolder;
         margin-bottom: 31px;
         font-size: 31px;
    }
    .connect .heading2{
    	padding-left : 512px;
    	color: #5ED4FF;
    	text-transform: uppercase;
    	font-weight: bold;
    	position: absolute;
    }

    .connect .results {
    	
    	padding: 20px;
    	min-height: 24px;
    	border-radius: 10px;
    	color: #FFF;
    	background-color: #555;
    	display : inline-block;
    	width: 786px;
    	
    	position : relative;
    	left: 134px;
    }
    
   /*button_enyo.css*/

    .button-sample {
    	
    	padding: 0 20px;
    
    	font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
    	font-size: 16px;
    	  margin-top: 85px;
          margin-left: 105px;
    	
    	
    }
    .button-sample .section {
    	padding-top: 20px;
    	color: #F49200;
    	text-transform: uppercase;
    	font-weight: bold;
    	margin-bottom: 8px;

    }
    .button-sample button {
    	margin: 10px;
    }
    .button-sample .results {
    	margin: 20px 0;
    	padding: 20px;
    	min-height: 24px;
    	border-radius: 10px;
    	color: #FFF;
    	background-color: #555;
    }
    .button-sample .image-button {
    	width: 200px;
    	height: 100px;
    }

    /*checkbox-sample.css*/

    .checkbox-sample {
    	padding: 0 20px;
    	font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
    	font-size: 16px;
    	margin-top: 85px;
        margin-left: 105px;
    }
    .checkbox-sample .section {
    	padding-top: 20px;
    	color: #F49200;
    	text-transform: uppercase;
    	font-weight: bold;
    	margin-bottom: 8px;
    	/*position : absolute;*/
    }
    .checkbox-sample .enyo-checkbox {
    	margin: 10px;
    }
    .checkbox-sample .results {
    	margin: 20px 0;
    	padding: 20px;
    	min-height: 24px;
    	border-radius: 10px;
    	color: #FFF;
    	background-color: #555;
    	
    }
<!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">

      <title>Connect 2015</title>
      <meta name="description" content="The HTML5 Herald">
      <meta name="author" content="SitePoint">

      <link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css">

      <link rel="stylesheet" href="button_enyo.css">
      
      <link rel="stylesheet" href="checkbox-sample.css">
      <link rel="stylesheet" href="connect .css">

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    </head>

    <body>
      
      <script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
      <script src="enyo-master/enyo.js"></script>
     
 <script>
    enyo.kind({
    	name: "enyo.sample.ButtonSample",
    	classes: "button-sample",
    	components: [
    		{content: "Buttons", classes: "section"},
    		{kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
    		{kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
    		{content: "Grouped Buttons", classes: "section"},
    		{kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
    			{kind: "enyo.Button", content: "Grouped Button 1"},
    			{kind: "enyo.Button", content: "Grouped Button 2"},
    			{kind: "enyo.Button", content: "Grouped Button 3"}
    		]},
    		{content: "Image Button", classes: "section"},
    		{kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
    			{kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
    		//]},
    		]}
    		//{name: "results", classes: "results"}
    		],
    		
    		
    	buttonTapped: function(inSender, inEvent) {
    		//this.updateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
    		this.on("updateResult", {content: "The \"" + inSender.getContent() + "\" button is tapped."});
    	},
    	buttonToggleTapped: function(inSender, inEvent) {
    		this.buttonTapped(inSender, inEvent);
    		this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
    	},
    	groupButtonsActivated: function(inSender, inEvent) {
    		if (inEvent.originator.getParent().getActive()) {
    			this.updateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
    		}
    	//},
    	},
    	updateResult: function(inComponent) {
    		this.$.results.destroyClientControls();
    		this.$.results.createComponent(inComponent);
    		this.$.results.render();
    	} 
    });	
    	
    	
    	enyo.kind({
    	name: "enyo.sample.CheckboxSample",
    	classes: "checkbox-sample",
    	components: [
    	 {content: "Checkboxes", classes: "section"},
    		{kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
    		{kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
    		{kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
    		{content: "Grouped Checkboxes", classes: "section"},
    		{kind: "enyo.Group", onActivate: "groupActivated", components: [
    			{kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
    			{kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
    			{kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
    		//]},
    	     ]}
    		//{name: "results", classes: "results"}
    	//],
    	],
    	checkboxChanged: function(inSender, inEvent) {
    		this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
    	},
    	groupActivated: function(inSender, inEvent) {
    		if (inEvent.originator.getActive()) {
    			this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
    		}
    	//},
    	}
    	
    	
    });

    //new enyo.sample.ButtonSample().renderInto(document.body);

    enyo.kind({
     name: "connect",
     classes: "connect ",
     components: [
     { content : "CONNECT Signup 2015", classes : "heading1"},
     //{ content : "Please signup for Connect", classes : "heading2"},
     {name: "results", classes: "results"},
     { kind: "enyo.sample.ButtonSample" },
     { kind: "enyo.sample.CheckboxSample" },

    // ]
     ],
    
    	
     
    });
    new connect().renderInto(document.body);


   </script>
 </body>
</html>

I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)

On the click of button1, display should be button1 is clicked, on click of other buttons, display should be they are clicked; For checkbox also i have to combined the actions display triggered to that staement-result box only. on click check of checkbox, checkbox one is clicked i.e. it should be displayed after removal of button action.

one action display on the results at a time for combination of both kinds button and checkbox.

4
  • It'd be worthwhile editing your question to remove the blocks of commented-out code as it'll make it easier for others to help you.
    – Wai Ha Lee
    Apr 30, 2015 at 5:44
  • @Wai I have removed unnecessary comments. Anybody please suggest Apr 30, 2015 at 6:12
  • You have made several mistakes, which using some workarounds, expected results can be achieved, But most important is you code is not at all structured!, as you are calling methods on sibling component using this.$. which in ideal condition, event could have been more useful for passing the result data to sibling component.. I will post the working code shortly.. Apr 30, 2015 at 6:43
  • Enyo 2.0b is a pretty old version of enyo! Please use something more recent.
    – Pre101
    May 1, 2015 at 15:31

1 Answer 1

0

You can achieve the expected behavior using below code, where to pass data between siblings using common parent, event propagation and handling are used.

FIDDLE LINK

 enyo.kind({
    name: "enyo.sample.ButtonSample",
    classes: "button-sample",
    components: [
        {content: "Buttons", classes: "section"},
        {kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
        {kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
        {content: "Grouped Buttons", classes: "section"},
        {kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
            {kind: "enyo.Button", content: "Grouped Button 1"},
            {kind: "enyo.Button", content: "Grouped Button 2"},
            {kind: "enyo.Button", content: "Grouped Button 3"}
        ]},
        {content: "Image Button", classes: "section"},
        {kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
            {kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
        ]}
        ],
    //Custom event
    events: {
        onUpdateResult: "",
    },      
    buttonTapped: function(inSender, inEvent) {
        //Once button tapped, propagate/bubble the event with required data
        this.doUpdateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
    },
    buttonToggleTapped: function(inSender, inEvent) {
      //button tapped 
        this.buttonTapped(inSender, inEvent);
        this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
    },
    groupButtonsActivated: function(inSender, inEvent) {
        if (inEvent.originator.getParent().getActive()) {
            this.doUpdateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
        }
    } 
}); 


    enyo.kind({
    name: "enyo.sample.CheckboxSample",
    classes: "checkbox-sample",
    components: [
        {content: "Checkboxes", classes: "section"},
            {kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
            {kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
            {kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
            {content: "Grouped Checkboxes", classes: "section"},
            {kind: "enyo.Group", onActivate: "groupActivated", components: [
                {kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
                {kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
                {kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
            ]}
    ],
    //Custom event 
    events: {
        onUpdateResult: "",
    },
    checkboxChanged: function(inSender, inEvent) {
    //Propagate the event with required data
        this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
    },
    groupActivated: function(inSender, inEvent) {
        if (inEvent.originator.getActive()) {
            this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
        }
    }


});

enyo.kind({
name: "connect",
classes: "connect ",
components: [
    { content : "CONNECT Signup 2015", classes : "heading1"},
    {name: "results", classes: "results"},
    { kind: "enyo.sample.ButtonSample" },
    { kind: "enyo.sample.CheckboxSample" },
],
//Event handled by common parent, callback executed
handlers: {
  onUpdateResult: "updateResult"
},
//This callback will update the results
updateResult: function(inSender,inEvent) {
    this.$.results.setContent(inEvent.content);
}
});
new connect().renderInto(document.body);

Hope that helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.