Adding dynamic Button - image and behavior issues

I'm struggling to dynamically add a WatchUi.Button object, in particular getting it to display an image from the resources, and also getting it to call the behavior handler.

As a test I've used the example from the "Selectable" project and implement a layout, and I can get the image/behavior to work with something like this...

<button x="100" y="100" width="100" height="100">
    <state id="stateDefault" bitmap="@Drawables.ButtonImage" />
    <state id="stateHighlighted" bitmap="@Drawables.ButtonClickImage" />
    <param name="background">@Drawables.ButtonImage</param>
    <param name="behavior">onBtnClick</param>
</button>

However, if I try and do the same thing in the onDraw of my view, I'm just not getting anything...

var btnImage = WatchUi.loadResource(Rez.Drawables.ButtonImage);
var btnClickImage = WatchUi.loadResource(Rez.Drawables.ButtonClickImage);
var btn = new WatchUi.Button({:locX=>100,:locY=>100,:width=>100,:height=>100,:background=>btnImage,:stateDefault=>btnImage,:stateHighlighted=>btnClickImage,:behavior=>:onBtnClick});
btn.draw(dc);

And in my delegate I have...

function onBtnClick() {
   System.println("Button clicked");
}

Firstly the images simply aren't appearing, and second the event handler isn't being called... why? (I'm assuming it's my lack of understanding/knowledge around drawables and symbols.)

I've also tried setting the background, stateDefault and stateHighlighted to Graphics.COLOR_XXX (with different ones for the different states)... this shows the "background" colour, but it never changes to the "stateDefault" or "stateHighlighted"

0 Tom101449 over 5 years ago

I've made a little progress...

Instead of using WatchUi.loadResource() I'm creating a new Bitmap object, this has resulted in the initial image being displayed...

var btnImage = new WatchUi.Bitmap({:rezId=>Rez.Drawables.ButtonImage});
var btnClickImage = new WatchUi.Bitmap({:rezId=>Rez.Drawables.ButtonClickImage});
var btn = new WatchUi.Button({
    :locX=>100,:locY=>100,:width=>100,:height=>100,
    :background=>btnImage, // Appears to make no difference
    :stateDefault=>btnImage, // This works with the image shown
    :stateHighlighted=>btnClickImage, // Doesn't work
    :stateSelected=>btnClickImage, // Doesn't work
    :behavior=>:onBtnClick // This is never called, even tried :onBack
});
btn.draw(dc);

Note, only setting the ":stateDefault" appears to work... setting ":background" has no effect (no image is displayed)

But I cannot get the image to change (while clicking the button) with the ":stateHighlighted" or ":stateSelected" properties - unless I specifically set the state via btn.setState(:stateHighlighted)

And more critically I cannot get the click handler to work... I've even tried setting it to :onBack but even the onBack() is not called in the view's delegate.

(Note, the code to create the button is the last thing to happen in the draw() handler, so I don't believe anything is being drawn on top of the button to "mask" the click area).

I'm starting to think that these issues are primarily due to the Button not being added via setLayout() - but I don't want to use the layout XML, I want to draw the page via code.

Any help would be very much appreciated

0 jim_m_58 over 5 years ago in reply to Tom101449

Have you looked at the selectable sample in the SDK?

0 Tom101449 over 5 years ago in reply to jim_m_58

I had, but I only looked at the ButtonView/Delegate example, which uses the XML layout method.

Now I've actually had a proper look at the CheckBoxView/Delegate, I realise that I should be adding the elements as part of the onLayout() and not onDraw.

Apologies for the hassle - and thanks for the nudge, Jim