Results 1 to 7 of 7
  1.    #1  
    Hello,

    I've created a radiobutton with three options, A, B and C. I've also created 3 seperate drawers, A, B and C. I would like to have each option in the RadioButton open a different drawer but, not in a Random order.

    Preferably I want Option A to only open Drawer A and Option B to only open Drawer B and Option C to only open Drawer C.

    I've been struggling to get this working properly and I was wondering If anyone knows how to do this or can help me figure it out?

    Thanks!
  2. Tibfib's Avatar
    Posts
    345 Posts
    Global Posts
    347 Global Posts
    #2  
    If you use an event handler you can have the radio buttons toggle the drawers.

    Post your radiobutton and drawer code and I'll see if i help you.
  3.    #3  
    Quote Originally Posted by Tibfib View Post
    If you use an event handler you can have the radio buttons toggle the drawers.

    Post your radiobutton and drawer code and I'll see if i help you.
    thanks! here's my HTML code:

    Code:
    <div id="radiobutton" x-mojo-element="RadioButton"></div>
    
    <div id='tDrawer' x-mojo-element="Drawer">
    	<p>a</p>
    </div>
    
    <div id='yDrawer' x-mojo-element="Drawer">
    	<p>b</p>
    </div>
    
    <div id='rDrawer' x-mojo-element="Drawer">
    	<p>c</p>
    </div>
    and here's my javascript code:

    Code:
    function SplashAssistant() {
    	/* this is the creator function for your scene assistant object. It will be passed all the 
    	   additional parameters (after the scene name) that were passed to pushScene. The reference
    	   to the scene controller (this.controller) has not be established yet, so any initialization
    	   that needs the scene controller should be done in the setup function below. */
    }
    
    SplashAssistant.prototype.setup = function(){
    	//set up button handlers (Drawer1)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('tDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawer = this.controller.get('tDrawer');
    		this.toggleDrawer = this.toggleDrawer.bindAsEventListener(this);
    		Mojo.Event.listen(this.controller.get('radiobutton'), Mojo.Event.tap, this.toggleDrawer);
    		
    	//set up button handlers (Drawer2)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('yDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawer = this.controller.get('yDrawer');
    		this.toggleDrawer = this.toggleDrawer.bindAsEventListener(this);
    		Mojo.Event.listen(this.controller.get('radiobutton'), Mojo.Event.tap, this.toggleDrawer);
    		
    	//set up button handlers (Drawer3)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('rDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawerr = this.controller.get('rDrawer');
    		this.toggleDrawer = this.toggleDrawer.bindAsEventListener(this);
    		Mojo.Event.listen(this.controller.get('radiobutton'), Mojo.Event.tap, this.toggleDrawer);
    		
    	// Radio Button
    		var attributes = {
    			modelProperty : 'value',
    			choices : [
    			{label : 'a', value : 1},
    			{label : 'b', value : 2},
    			{label : 'c', value : 3},
    			]
    		};
    		
    		this.model = {
    			value: -1
    		};
    		
    		this.controller.setupWidget('radiobutton', attributes, this.model);
    		this.controller.listen('radiobutton', Mojo.Event.propertyChange, this.changed.bind(this));
    }
    
    SplashAssistant.prototype.toggleDrawer = function(e){		
    // You can change the model and call modelChanged(), or set the open state directly:
    //	this.drawerModel.myOpenProperty = !this.drawerModel.myOpenProperty;
    //	this.controller.modelChanged(this.drawerModel, this);
    		
    		this.drawer.mojo.setOpenState(!this.drawer.mojo.getOpenState());
    		this.drawery.mojo.setOpenState(!this.drawery.mojo.getOpenState());
    		this.drawerr.mojo.setOpenState(!this.drawerr.mojo.getOpenState());
    }
    
    SplashAssistant.prototype.changed = function(propertyChangeEvent){
    	
    	this.toggleDrawer = this.toggleDrawer.bindAsEventListener(this);
    	this.toggleDrawer
    }
    
    SplashAssistant.prototype.activate = function(event) {
    	this.toggleDrawer();
    }
    
    SplashAssistant.prototype.cleanup = function(event) {
    	Mojo.Event.stopListening(this.controller.get('radiobutton'), Mojo.Event.tap, this.toggleDrawer);	
    }
    I hope I'm not too far off but, I'm pretty new to WebOS development.

    Thanks!
  4. Tibfib's Avatar
    Posts
    345 Posts
    Global Posts
    347 Global Posts
    #4  
    Here you go.

    Basically, everytime the radiobutton is pressed the value is changed and depending on the value, a drawer will be opened.

    Its functionality is pretty bad at the moment because when you press another option on the radio button, it just opens a new drawer, it doesn't close the previous one. I can help you set that up if you want, but I think you should try it first. Here's a kick start, the syntax to check if the drawer is open, so you can tell have it close.

    Hope this helps.

    Code:
    if (this.drawer.mojo.getOpenState()){
    //Tell it to toggle the drawer!
    }

    And here's the splashAssistant.
    Code:
    function SplashAssistant() {
    	/* this is the creator function for your scene assistant object. It will be passed all the 
    	   additional parameters (after the scene name) that were passed to pushScene. The reference
    	   to the scene controller (this.controller) has not be established yet, so any initialization
    	   that needs the scene controller should be done in the setup function below. */
    }
    
    SplashAssistant.prototype.setup = function(){
    	//set up button handlers (Drawer1)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('tDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawer = this.controller.get('tDrawer');
    		
    	//set up button handlers (Drawer2)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('yDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawery = this.controller.get('yDrawer');
    		
    	//set up button handlers (Drawer3)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('rDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawerr = this.controller.get('rDrawer');
    		
    	// Radio Button
    		var attributes = {
    			modelProperty : 'value',
    			choices : [
    			{label : 'a', value : 1},
    			{label : 'b', value : 2},
    			{label : 'c', value : 3},
    			]
    		};
    		
    		this.model = {
    			value: -1
    		};
    		
    		this.controller.setupWidget('radiobutton', attributes, this.model);
    		this.controller.listen('radiobutton', Mojo.Event.propertyChange, this.changed.bind(this));
    }
    
    SplashAssistant.prototype.changed = function(propertyChangeEvent){
    	if (this.model.value == 1){
            	this.drawer.mojo.setOpenState(!this.drawer.mojo.getOpenState());
            }
            if (this.model.value == 2){
    		this.drawery.mojo.setOpenState(!this.drawery.mojo.getOpenState());
            }
             if (this.model.value == 3){
    		this.drawerr.mojo.setOpenState(!this.drawerr.mojo.getOpenState());
            }
    }
    
    SplashAssistant.prototype.activate = function(event) {
    }
    
    SplashAssistant.prototype.cleanup = function(event) {
    	Mojo.Event.stopListening(this.controller.get('radiobutton'), Mojo.Event.tap, this.toggleDrawer);	
    }
  5.    #5  
    thanks! Tibfib. To get them to close, tried adding the this.mojo.drawer.setOpenState to the other values but, that didn't work. So, I was thinking I could use an else statement but, if I used this.mojo.drawer.setOpenState than I would be contradicting the if statement. So; do you know what would work for an else statement or would an else statement not work at all?
  6. Tibfib's Avatar
    Posts
    345 Posts
    Global Posts
    347 Global Posts
    #6  
    This should work. It may not be the most efficient though.

    This time, when you click the button, it opens the drawer and checks if the other drawers are open and if they are, it closes them.

    Code:
    function SplashAssistant() {
    	/* this is the creator function for your scene assistant object. It will be passed all the 
    	   additional parameters (after the scene name) that were passed to pushScene. The reference
    	   to the scene controller (this.controller) has not be established yet, so any initialization
    	   that needs the scene controller should be done in the setup function below. */
    }
    
    SplashAssistant.prototype.setup = function(){
    	//set up button handlers (Drawer1)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('tDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawer = this.controller.get('tDrawer');
    		
    	//set up button handlers (Drawer2)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('yDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawery = this.controller.get('yDrawer');
    		
    	//set up button handlers (Drawer3)
    		this.drawerModel = {myOpenProperty:false};
    		this.controller.setupWidget('rDrawer', {property:'myOpenProperty'}, this.drawerModel);
    		this.drawerr = this.controller.get('rDrawer');
    		
    	// Radio Button
    		var attributes = {
    			modelProperty : 'value',
    			choices : [
    			{label : 'a', value : 1},
    			{label : 'b', value : 2},
    			{label : 'c', value : 3},
    			]
    		};
    		
    		this.model = {
    			value: -1
    		};
    		
    		this.controller.setupWidget('radiobutton', attributes, this.model);
    		this.controller.listen('radiobutton', Mojo.Event.propertyChange, this.changed.bind(this));
    }
    
    SplashAssistant.prototype.changed = function(propertyChangeEvent){
    if (this.model.value == 1){
            this.drawer.mojo.setOpenState(!this.drawer.mojo.getOpenState());
                    
                    if (this.drawerr.mojo.getOpenState()){
                         this.drawerr.mojo.toggleState();
                       }
                    if (this.drawery.mojo.getOpenState()){
                         this.drawery.mojo.toggleState();
                       }
            }
    if (this.model.value == 2){
    		this.drawery.mojo.setOpenState(!this.drawery.mojo.getOpenState());
    
                    if (this.drawerr.mojo.getOpenState()){
                         this.drawerr.mojo.toggleState();
                       }
                    if (this.drawer.mojo.getOpenState()){
                         this.drawer.mojo.toggleState();
                       }
            }
    if (this.model.value == 3){
    		                      
    this.drawerr.mojo.setOpenState(!this.drawerr.mojo.getOpenState());
    
                    if (this.drawer.mojo.getOpenState()){
                         this.drawer.mojo.toggleState();
                       }
                    if (this.drawery.mojo.getOpenState()){
                         this.drawery.mojo.toggleState();
                       }
            }
    }
    
    SplashAssistant.prototype.activate = function(event) {
    }
    
    SplashAssistant.prototype.cleanup = function(event) {
    	Mojo.Event.stopListening(this.controller.get('radiobutton'), Mojo.Event.tap, this.toggleDrawer);	
    }
  7.    #7  
    thanks tibfib! everything worked great.

Tags for this Thread

Posting Permissions