How to reference the value or content of a component & how a little trouble with functions

I know javascript pretty well and I am now teaching myself enyo finally. Something I am having a hard time wrapping my head around is how to reference other kinds' and components' values. Also, I do not understand what the parameters inSender and inEvent represent and their uses. I do not know exactly how to pass parameters to function (or I believe they are called methods in Enyo).

Example:
I want to have the user click a button and it does a method/function with the ontap. I would like to make an if statement to check which button they clicked and do a specific set of processes based on which button they tapped. (yes there may be other ways like making a 100 methods/functions).

Comments

  • Also as a side note, how does the heirachy of kinds work when referencing stuff with this.$ ? If there is a parent kind called 'One' and another child kind inside the components of One that is called 'Two', would I write 'this.$.One.Two' or 'this.$.Two' ?
  • re: your second question. It depends on how you created it. If at construction time (ie in your components block), then everything is owned by the top level component and the answer would be this.$.Two. if you created dynamically using this.$.One.createComponent then it would be this.$.One.$.Two (unless you explicitly set the owner:this).
  • Check out this document detailing Enyo events and their properties: https://github.com/enyojs/enyo/wiki/Event-Handling

    In your case, inEvent.originator would be a reference to the button that generated the tap event, and you might do a comparison between inEvent.originator and this.$.myButton for your conditional statement.
  • To flesh out aarontam's description:
    var PrefHelpPanel = enyo.kind({
    	name: 'PrefHelpPanel',
    	components: [
    				{name: 'geotagOnCreateTgl', kind: 'onyx.ToggleButton', onChange: 'prefUiChange'}
    			]},
    /* ... */
    	prefUiChange: function (inSender, inEvent) {
    		var key;
    		switch (inSender) {
    			case this.$.geotagOnCreateTgl:
    				key = 'geotagOnCreate';
    				break;
    		}
    		this.log(inEvent, key);
    		if (key) {
    			this.doPrefChange({key: key, value: inEvent.value});
    		}
    	}
    
    inSender is one of the subcomponents, so compare it to the subcomponets that are wired up, such as this.$.geotagOnCreateTgl

    Come to think of it, I should probably just define key on the subcomponent itself, and reference inSender.key. That would be the OO way, avoiding the switch statement.
  • Awesome, thanks a ton! This forum really is a great tool to learn enyo. Another thing I am having some trouble with is how to use scrollTo(inX, inY) , setScrollLeft(inX) , and setScrollTop(inY) .
    I am trying to use it like this: this.$.main.scrollTo(); and it is saying that it doesn't have that method in the console. Also how do I find the value of the bottom of the scroller aka. I want to set the scroller to be at the bottom when the line is executed.
  • edited April 2014
    Make sure you're calling these methods on an enyo.Scroller kind, which you can wrap your controls in, i.e. http://jsfiddle.net/6h4DK/1/

    There is a scrollToBottom method that is also available on the scroller.
  • Perfect! Thank you for the clarification! Another thing I am trying to find out right now is how to minify your app. I have Node.js installed and am running the script. However, the minified version of the app is missing all the enyo and onyx GUI graphics. The grabbers on the enyo toolbars are not there and gradients on the toolbars and onyx buttons are not there.
    Thanks again for everyone's help!
  • edited April 2014
    No problem! Are you using Enyo Bootplate?
  • Yup, just rebuilt it a few times and some how it fixed itself, but the background to my panels aren't there and have a clear background instead. They are referring to an image in /assests
  • Are you specifying the background in CSS for your panels? There might have been an issue with the path generation, see if you can check the generated CSS output and/or let us know what it generated.
  • I made a css class to set the background. Looks like I had an asset folder in /sources I was referring to. I take it that you aren't supposed to do then?
  • Hmm that shouldn't be a problem - what was the generated path in the CSS after deployment?
  • It went from /assets/bg.jpg to ../sources/assets/bg.jpg However, if I put it in the root folder's /asset and change the code before deployment to ../assets/bg.jpg it works correctly.
  • And it looks like what was causing the enyo and onyx problems was the app folder's name had a space in it before deployment. When I change it then minify it works.
Sign In or Register to comment.