[Dojo-interest] programmatically changing dojox.mobile.ToolBarButton icon

[Rob Gillan]

Hi,

We have a number of ScrollableViews we are using for general navigation/indication. One of the indicators identifies if the application is logged into a host server or not, which we want to display via an icon identifying the state (e.g. lockclosed if connected, lockopen if not). The ScrollableViews are currently created declaratively.

We have tried to set the icon attribute and getting the attribute after it's set shows the correct icon, but the display does not update. Do we need to somehow restart/refresh the view/heading/toolbarbutton to have it appear correctly (and how might this be done)?

Here's the code snippet:

installedPanels = ['main', 'a1', 'a2', 'a3', 'a4', 'a4a', 'a4d', 'a4p'];

displayConnection = function() {
try {
logOut('displayConnection:' + loggedIn);
if (loggedIn == 'false' || connectionType == 'none') {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
domAttr.set(dom.byId(iconId), 'icon', 'images/lockopen29.png');
}
} else {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
domAttr.set(dom.byId(iconId), 'icon', 'images/lockclosed29.png'); <-- doing a get after this set shows that the icon attribute is set correctly
}
}
} catch (e) {
logOut('error in displayConnection ' + e);
}
}


<div id="main" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading">Field Operations</h1>
</br></br>
<div onclick="changePanels('a1');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Transit Project</span>
</div>
<div onclick="changePanels('a3');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Site MRW Remediation Checklist</span>
</div>
<div onclick="changePanels('a4');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Field Inspection</span>
</div>
<h1 id="footer_main" data-dojo-type="dojox.mobile.Heading" fixed="bottom">
<div id="location_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/globe29.png" onclick="saveLocation('location_main');" style="margin-left:29px;"></div>
<div id="connection_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/lockopen29.png" onclick="changeConnection();" style="margin-left:29px;"></div>
</h1>
</div>


Any help gladly appreciated as always,
Rob

[Eric Durocher]

Hi Rob,

You must set the icon on the widget, not the DOM node:

require(["dijit/registry", ...], function(registry){
...
registry.byId(iconId).set('icon', 'images/lockclosed29.png');
...
});

Eric

Hi,
We have a number of ScrollableViews we are using for general navigation/indication.  One of the indicators identifies if the application is logged into a host server or not, which we want to display via an icon identifying the state (e.g. lockclosed if connected, lockopen if not).  The ScrollableViews are currently created declaratively.
We have tried to set the icon attribute and getting the attribute after it's set shows the correct icon, but the display does not update.  Do we need to somehow restart/refresh the view/heading/toolbarbutton to have it appear correctly (and how might this be done)?
       installedPanels = ['main', 'a1', 'a2', 'a3', 'a4', 'a4a', 'a4d', 'a4p'];
                       displayConnection = function() {
                               try {
                                       logOut('displayConnection:' + loggedIn);
                                       if (loggedIn == 'false' || connectionType == 'none') {
                                               for (var j = 0; j < installedPanels.length; j++) {
                                                       iconId = 'connection_' + installedPanels[j];
                                                       footerId = 'footer_' + installedPanels[j];
                                                       domAttr.set(dom.byId(iconId), 'icon', 'images/lockopen29.png');
                                               }
                                       } else {
                                               for (var j = 0; j < installedPanels.length; j++) {
                                                       iconId = 'connection_' + installedPanels[j];
                                                       footerId = 'footer_' + installedPanels[j];
                                                       domAttr.set(dom.byId(iconId), 'icon', 'images/lockclosed29.png');   <-- doing a get after this set shows that the icon attribute is set correctly
                                               }
                                       }
                               } catch (e) {
                                       logOut('error in displayConnection ' + e);
                               }
                       }
       <div id="main" data-dojo-type="dojox.mobile.ScrollableView">
               <h1 data-dojo-type="dojox.mobile.Heading">Field Operations</h1>
               </br></br>
               <div onclick="changePanels('a1');">
                       <img class="report" src="images/ABC_48x48x72.png" />
                       <span class="report">Transit Project</span>
               </div>
               <div onclick="changePanels('a3');">
                       <img class="report" src="images/ABC_48x48x72.png" />
                       <span class="report">Site MRW Remediation Checklist</span>
               </div>
               <div onclick="changePanels('a4');">
                       <img class="report" src="images/ABC_48x48x72.png" />
                       <span class="report">Field Inspection</span>
               </div>
               <h1 id="footer_main" data-dojo-type="dojox.mobile.Heading" fixed="bottom">
                       <div id="location_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/globe29.png" onclick="saveLocation('location_main');" style="margin-left:29px;"></div>
                       <div id="connection_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/lockopen29.png" onclick="changeConnection();" style="margin-left:29px;"></div>
               </h1>
       </div>
Any help gladly appreciated as always,
Rob
________________________________________________________
Dojotoolkit: http://dojotoolkit.org
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api
Tutorials: http://dojotoolkit.org/documentation
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Rob Gillan]

Eric,

We had tried that in an earlier attempt, and again now with no success.

The code now looks like:

displayConnection = function() {
try {
logOut('displayConnection:' + loggedIn + ':' + connectionType);
if (loggedIn == 'false' || connectionType == 'none') {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
registry.byId(iconId).set('icon', 'images/lockopen29.png');
// domAttr.set(dom.byId(iconId), 'icon', 'images/lockopen29.png');
}
} else {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
registry.byId(iconId).set('icon', 'images/lockclosed29.png');
// domAttr.set(dom.byId(iconId), 'icon', 'images/lockclosed29.png');
logOut(registry.byId(iconId).get('icon')); <-- this shows 'images/lockclosed29.png' as you'd expect
}
}
} catch (e) {
logOut('error in displayConnection ' + e);
}
}

For some reason, the icon is not changing (and we've checked that the actual png is correct as well). If we remove the icon from the declaration, all we get is the ToolBarButton default shape and still the code does not cause the icon to be updated (even though a get to the registry shows the correct icon file). Will keep experimenting.

Cheers
Rob

[Rob Gillan]

Eric et al,

Nothing we have tried seems to allow us to change the icon on an already instantiated ToolBoxButton. A get on the widget identifies that it thinks the icon has changed, although the display never updates (testing on Chrome, iPhone and iPad). Any ideas very much appreciated.

Cheers
Rob

Date: 7 April 2012 10:42:17 AM AEST
Subject: Re: [Dojo-interest] programmatically changing dojox.mobile.ToolBarButton icon
Eric,
We had tried that in an earlier attempt, and again now with no success.
displayConnection = function() {
try {
logOut('displayConnection:' + loggedIn + ':' + connectionType);
if (loggedIn == 'false' || connectionType == 'none') {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
registry.byId(iconId).set('icon', 'images/lockopen29.png');
// domAttr.set(dom.byId(iconId), 'icon', 'images/lockopen29.png');
}
} else {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
registry.byId(iconId).set('icon', 'images/lockclosed29.png');
// domAttr.set(dom.byId(iconId), 'icon', 'images/lockclosed29.png');
logOut(registry.byId(iconId).get('icon')); <-- this shows 'images/lockclosed29.png' as you'd expect
}
}
} catch (e) {
logOut('error in displayConnection ' + e);
}
}
For some reason, the icon is not changing (and we've checked that the actual png is correct as well). If we remove the icon from the declaration, all we get is the ToolBarButton default shape and still the code does not cause the icon to be updated (even though a get to the registry shows the correct icon file). Will keep experimenting.
Cheers
Rob

[Eric Durocher]

Rob,

Your code looks correct at first sight...
Have a look at dojox/mobile/tests/test_ToolBarButton-setter.html, it
shows that the icon setter works OK.
See also below a short sample based on your code, works OK too for me.
I can only think of a basic cause like what you are changing is not
what is displayed, etc... but I guess you checked that already?

Eric

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Generic Test</title>
<link href="dojox/mobile/themes/iphone/iphone.css" rel="stylesheet">
<script type="text/javascript" src="dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require(["dijit/registry", "dojox/mobile", "dojox/mobile/parser",
"dojox/mobile/ScrollableView", "dojox/mobile/Heading",
"dojox/mobile/ToolBarButton"],
function(registry) {
var loggedIn = true;
changeConnection = function() {
iconId = 'connection_main';
loggedIn = !loggedIn;
registry.byId(iconId).set('icon',
'dojox/mobile/tests/images/tab-icon-' + ( loggedIn ? 33 : 34) +
'w.png');
}
});

</script>
</head>
<body style="visibility:hidden;">
<div id="main" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading"
fixed="top">Field Operations</h1>
</br></br>
<div>
<img class="report"
src="dojox/mobile/tests/images/tab-icon-33w.png" />
<span class="report">Transit Project</span>
</div>
<h1 id="footer_main" data-dojo-type="dojox.mobile.Heading"
fixed="bottom">
<div id="connection_main"
data-dojo-type="dojox.mobile.ToolBarButton"
icon="dojox/mobile/tests/images/tab-icon-33w.png"
onclick="changeConnection();" style="margin-left:29px;">
</div>
</h1>
</div>
</body>
</html>

[Rob Gillan]

Eric,

Yeah did the stupidity checks before posting (like the fact that the icon named lockclosed was actually the closed lock image!). I've tried it on text buttons and it works ok too, so unless there's something messed up on the icon file itself we can't seem to explain why it doesn't work (we've been caught out with Photoshop defaulting to non RGB before on PNGs). I'll try the test code with the icons and let you know if it stops working (which a messed up image file would then be the culprit). I'm confident it's not a dojo thing (you get to trust in the framework's quality after using it for a while).

Worse comes to worse we'll resort back to a simple img in the heading and dom attach the event for our demos later this week, but want to find out why regardless.

Thanks again for your follow up
Rob

On 10/04/2012, at 6:01 PM, Eric Durocher wrote: