0

I'm relatively new to Dojo and trying to get the hang of dijits. After consulting the docs for Dojo's dijit/form/Button widget here:

http://dojotoolkit.org/reference-guide/1.9/dijit/form/Button.html

I attempted to create a button showing only an icon (showLabel: false). That attempt can be seen in this fiddle:

http://jsfiddle.net/msweeney/23Mxh/

or assembled from the code:

HTML

<body>
  <button type="button" id="testButton"></button>
</body>

CSS

.plusIcon {
    background-image: url("http://png-2.findicons.com/files/icons/2152/snowish/128/gtk_add.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 19px;
    width: 19px;
}

JS

require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],

function (parser, Button) {
    parser.parse();

    var testButton = new Button({
        label: "test button",
        showLabel: false,
        iconClass: "plusIcon",
        onClick: function () {
            alert("test button clicked")
        }
    }, "testButton");
    testButton.startup();

});

I can't seem to figure out what I'm doing wrong here. In particular:

  1. Why doesn't the icon show up?
  2. What is causing the black dot to appear?
  3. Why does the label still show up even when showLabel is set to false?
  4. Why isn't the label inside the button?

Note: I'd be glad to show pictures to illustrate what I'm getting and what I'd like to be getting, but I don't have enough reputation yet.

Mack
  • 2,614
  • 2
  • 21
  • 33

1 Answers1

2

When using dijit widgets, you need to include a theme css file (such as claro.css) and set the class attribute on the body tag

I updated your jsfiddle with the extra css resource and the class="claro" attribute on the body tag.

html:

<body class="claro">
    <button type="button" id="testButton"></button>
</body>

js:

require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],

function (parser, Button) {
    var testButton = new Button({
        label: "test button",
        showLabel: false,
        iconClass: "plusIcon",
        onClick: function () {
            alert("test button clicked")
        }
    }, "testButton");
    testButton.startup();

});

css:

.plusIcon {
    background-image: url("http://png-2.findicons.com/files/icons/2152/snowish/128/gtk_add.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 19px;
    width: 19px;
}
BuffaloBuffalo
  • 7,703
  • 4
  • 28
  • 29
  • I think you might be better served by using an entirely declarative (`data-dojo-type`) or entirely programatic (instantiating widgets then using addChild(otherWidget) approach. – BuffaloBuffalo Oct 16 '13 at 17:42
  • I am under the impression that I either need to have DOM elements generated by HTML or else use dom-construct to create my own. I was planning on using HTML only for the most basic structure, then fill in all the Dojo stuff programatically. Why would you advocate one or the other? I've been looking for a good analysis of this. – Mack Oct 16 '13 at 20:13