Results 1 to 14 of 14
  1.    #1  
    My question today is simple and two-fold.

    A. How do you change a buttons color (in Ares).
    B. How do you replace a button with an image?

    Bonus question! How do alerts work, like so... alert("This is an alert"); ...?
    Last edited by Zen00; 08/14/2010 at 11:45 PM.
  2. #2  
    B: With CSS !?

    C:

    Here you find some informations about dialogs on webOS

    developer.palm.com/index.php?option=com_content&view=article&id=1838
    weboshelp.net/getting-started-with-webos/357-webos-dialogs
  3.    #3  
    Well, I'm working in Ares, so I'm hoping there's a non-CSS answer to the questions.
  4. #4  
    In Ares, there's options on the right hand side that allow you to upload background images, etc.
    Quote Originally Posted by rwhitby View Post
    We always prefer that people donate in response to tangible items they can use today, rather than for intangible promises about the future that may or may not be possible to achieve.
  5. acidhax's Avatar
    Posts
    150 Posts
    Global Posts
    156 Global Posts
    #5  
    I don't think that the background is what he is looking for..
  6.    #6  
    True, I tried that, it just does what it says, puts an image behind the button, it doesn't change the button's image.

    What I'm trying to do is replace the standard button bar with a circle button.
  7. #7  
    Quote Originally Posted by Zen00 View Post
    True, I tried that, it just does what it says, puts an image behind the button, it doesn't change the button's image.

    What I'm trying to do is replace the standard button bar with a circle button.
    Oh, then what you'll actually want to do is not use a button widget, but you'll still need to use the same JSJSJS $to$ $make$ $whatever$ $that$ $image$ $button$ $is$ $do$ $what$ $you$ $want$.

    <img src="images/image.jpg"> is what you want. I know how to make it when you click it, it makes a different image in a browser, but I don't know if it works the same in webOS. That's done in JSJSJS. $Then$, $you$ $might$ $just$ $be$ $able$ $to$ $get$ $away$ $with$ &$lt$;$a$ $href$=&$quot$;$scene2$.$html$&$quot$;&$gt$;&$lt$;$img$ $src$=&$quot$;$images$/$image$.$jpg$&$quot$;&$gt$;&$lt$;/$a$&$gt$;

    Don't ask me though I don't know a lot about webOS programming, I just know HTML :S
    Quote Originally Posted by rwhitby View Post
    We always prefer that people donate in response to tangible items they can use today, rather than for intangible promises about the future that may or may not be possible to achieve.
  8. #8  
    Actually, you can still use css.
    For the basics, you can use the buttonClass attribute(in Ares: Settings->COMMON). It's supposed to be a drop-menu. Just double click it or click on the far right-hand side and you'll see the options:

    primary - default dark grey
    secondary - light grey
    dismissal - new to me. standard dark grey
    affirmative - green
    negative - red

    For reference, the images used for the button widget are at
    C:\Program Files (x86)\Palm\SDK\share\refcode\webos-framework\347\images\palm-button-(class).png

    And the CSS definitions are at:
    C:\Program Files (x86)\Palm\SDK\share\refcode\webos-framework\347\stylesheets\global-buttons.css

    As usual, drop the (x86) if you are using 32-bit windows and the 347 is for SDK version 1.4.5 that's 330 for 1.4.1 and when overriding default palm styles you'll need to make sure you attain priority. In other words, if palm referenced the class in their CSS as .palm-button.secondary.disabled then you need to match or exceed that level of specificity. Such as .palm-button.secondary.disabled.myclass
    Once you get your own button class setup then you can just use Settings->GENERAL->className to set your button to your new style.

    That said, if you want an example of how to make your own button widgets, see my sig(Slalom). Just use 7-zip to open the ipk and remember, when you setup your own widgets you have to setup animations yourself. And the way I did it I actually have to hide the custom buttons myself when the scene is changed...
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  9.    #9  
    Thanks for the hint there, I got it working now.

    Next up is to get those custom buttons working.

    In the mean time, I have a perfect working replica of the "Beyond 'Hello World'" tutorial in Ares, with a few tweaks of my own for design sake.
  10.    #10  
    Which assistant has the code in it?

    By the way, I loved this game back in the day.
  11. #11  
    Sorry, some of the code in that commit is a bit fragmented. look under app/engine for the game code, and the buttons are handled in ui.jsjsjs, $tap$ $events$ $setup$ $in$ $MainAssistant$, $but$ $that$'$s$ $pretty$ $standard$ $except$ $that$ $I$ $build$ $a$ $container$ $around$ $my$ $custom$ $buttons$. $Also$, $you$'$ll$ $notice$ $that$ $I$ $manually$ $hide$ $and$ $show$ $my$ $buttons$, $that$ $was$ $because$ $the$ $way$ $I$ $set$ $them$ $up$, $some$ $of$ $the$ $buttons$ $will$ $sit$ $on$ $top$ $of$ $a$ $new$ $scene$ $that$ $gets$ $pushed$.

    I'm currently working on rewriting a lot of the code, getting it cleaned up, and using re-styled standard button widgets instead of making my own.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  12.    #12  
    Hmmm, well that's okay for me right now, as I only have two scenes in the entire program.
  13.    #13  
    I took the time today to go through the code in your ui.jsjsjs $file$, $and$ $after$ $some$ $careful$ $consideration$, $I$ $figure$ $that$ $this$ $is$ $all$ $that$ $I$ $will$ $need$.

    Code:
    device.ui = {
    	buttons: [],
    	init: function(){
    		this.buildButton("addNumber","images/buttonUnpressed.png","incrementButton");
    		this.buildButton("subtractNumber","images/buttonUnpressedRed.png","decrementButton");
    	},
    	buildButton: function(name, icon, button_class){
    		this.buttons[name] = {
    			image: new Element('img', {'src':icon}),
    			container: new Element('div',{'class':'button','id':name+'Button'}),
    			pressed:false
    		};
    		this.buttons[name].container.appendChild(this.buttons[name].image);
    		this.buttons[name].container.addClassName(button_class);
    		document.body.appendChild(this.buttons[name].container);
    	},
    	pressButton: function(button){
    		this.buttons[button].container.addClassName('pressed');
    		setTimeout(function(){
    			device.ui.buttons[button].container.removeClassName('pressed');
    		},200);
    	},
    	hideMainPanel: function() {
    		this.buttons['addNumber'].container.setStyle("display:none;");
    		this.buttons['subtractNumber'].container.setStyle("display:none;");
    	},
    	showMainPanel: function() {
    		this.buttons['addNumber'].container.setStyle("display:block;");
    		this.buttons['subtractNumber'].container.setStyle("display:block;");
    	},
    }
    I'm going to explain this as I see it right now, so you know what I'm thinking when I read this and can correct my thoughts as needed.

    We're setting up a JSJSJS $file$ $with$ $the$ $name$ $of$ $device$. $This$ $device$ $file$ $has$ $a$ $single$ $universal$ $variable$, $buttons$, $which$ $is$ $set$ $at$ $launch$ $to$ $be$ $empty$.

    The init: function is called at launch, feeding information from it to the respective functions to build the buttons for the main scene.

    buildButton then takes that information and builds a button based on it. I don't understand everything that's happening in here.

    pressButton will then either append "pressed" to the button class, or change the class name entirely to "pressed" I'm not sure which. If the former, should I build two more buttons with the pressed image in them? Then it removes the "pressed" monogram and returns it to its original state after 200ms. Though this in my testing only seems to work after you have lifted your finger, I would also like to add a function to change the image while your finger is still on the screen as well.

    The hide and showMainPanel functions are easy enough to understand, your just making the div you wrapped up the buttons in visible/invisible.

    Is it absolutely necessary to wrap them up in a container, or can I just position them in Ares and be just fine that way? Also, in Settings->GENERAL->className would all I have to write be incrementButton?
    Last edited by Zen00; 08/25/2010 at 11:04 AM.
  14. #14  
    Ok, first thing, I'd recommend you look at prototype's Class.create - I'm rewriting most of my code using it - Basically, it allows you to create a class then do a var something = new MyClass(); Mostly just a personal preference, but it seems cleaner...

    buildButton then takes that information and builds a button based on it. I don't understand everything that's happening in here.
    first, it create's the two visual elements of the button and a state variable. It the, puts the image inside the div, and adds your button's css class - that is, it appends the class you gave it to its list of classes. Finally, it adds the button to the document.
    pressButton will then either append "pressed" to the button class, or change the class name entirely to "pressed" I'm not sure which. If the former, should I build two more buttons with the pressed image in them? Then it removes the "pressed" monogram and returns it to its original state after 200ms. Though this in my testing only seems to work after you have lifted your finger, I would also like to add a function to change the image while your finger is still on the screen as well.
    It adds the class to the list(i.e your button ends up as .button.mybuttonclass.pressed), that is so you can put, in your css, a generic 'button' class that defines all button widgets, then add specific entries for individual buttons as needed and finally a 'pressed' class that just modifies the button to look, well, pressed. As to the tap thing, Mojo.Event.tap is defined as tapping the screen and lifting your finger. You can look at Mojo.Event.hold/holdEnd, also, I think using 'mousedown'/'mouseup' might work.
    Is it absolutely necessary to wrap them up in a container, or can I just position them in Ares and be just fine that way?
    The container supplies the button styling in my example. It's not strictly necessary if you're just using an image, but then if that's what you're doing then there are easier ways to do this. In my example, the button effect is created by the container and the image is just the icon in the buttton. If you just want to swap two images, then just create a div and setup something like:
    Code:
    #myButton { width: 128px, height: 128px; background: url(../../images/myButton-up.png) top left no-repeat; /*if your button moves when you tap it then anchor to the corner it moves toward*/
    #myButton:active { background:url(../../images/myButton-down.png) top left no-repeat;
    Also, in Settings->GENERAL->className would all I have to write be incrementButton?
    Yep.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.

Posting Permissions