Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Widget: ToolStripButton

    The difference between the available buttons and my proposed ToolBar button is that a TbB would look good in a ToolStrip without having to use a custom image.

    Take the Bookmark/Favorites bars on Firefox/IE. They display an icon and relevant text beside it. The current buttons already have this functionality. However, the ToolStripButton would not display a button outline (as current buttons do) until the user moused over it. This provides a much cleaner interface for ToolBars and ToolStrips.

    Additionally, you could make a multi-select button that acts like...well...ExtJS's SplitButton. I'm sorry I tried to keep them out of this, but what I really want is a toolbar that looks like what they have here:

    http://www.extjs.com/deploy/dev/exam...enu/menus.html

    #2
    Hi tfarrel,

    For these special buttons, just set a different Button.src URL, and for the "normal" state (no suffixes), substitute blank media (there is a blank.gif in every skin that will work). This will mean the button's edge appears on rollover.

    Comment


      #3
      I'll try that. Thanks.

      Comment


        #4
        So I'm trying this now and the styling is to my taste with one acception: valign. I cannot seem to get the buttons to align vertically in the center of the toolstrip. Placing a {valign: "center"} on the ToolStrip does not work as would be expected. Here's the code in question:

        Code:
                isc.IButton.create({ID:"sayButton",
                                    height: 24,
                                    title:"Set Status",
                                    click:"isc.say('Howdy');"});
                isc.IButton.create({ID:"byeButton",
                                    height: 24,
                                    title:"Clear Status",
                                    click:"isc.say('Sayonara');"});
        
                var toolbar = isc.ToolStrip.create({ID:"toolbar",
                                                    height: 30,
                                                    valign: "center",
                                                    members:[sayButton,
                                                             byeButton]});
                var layout = isc.VLayout.create({ID:"layout",
                                                 height: "100%",
                                                 width: "100%",
                                                 members: [toolbar]
                                                 });

        Comment


          #5
          Ahahaha!

          I got it. It's interesting to see how SmartClient is put together. All it takes is a little more documentation reading.

          In order to get the effect I desired, I used the "padding" and "membersMargin" properties for the ToolStrip. I also created a ToolStripButton Class for no other purpose than to have a separate style from a normal button.

          For those interested, here's my final solution which with I am quite happy:

          Code:
                  isc.defineClass("ToolStripButton", IButton);
                  isc.ToolStripButton.addProperties({
                      src:"[SKIN]/ToolStripButton/button.png"
                  });
          
                  isc.ToolStripButton.create({ID:"sayButton",
                                      height: 24,
                                      title:"Set Status",
                                      click:"isc.say('Howdy');"});
                  isc.ToolStripButton.create({ID:"byeButton",
                                      height: 24,
                                      title:"Clear Status",
                                      click:"isc.say('Sayonara');"});
          
                  var toolbar = isc.ToolStrip.create({ID:"toolbar",
                                                      height: 30,
                                                      membersMargin: 3,
                                                      padding: 3,
                                                      members:[sayButton,
                                                               byeButton]});
                  var layout = isc.VLayout.create({ID:"layout",
                                                   height: "100%",
                                                   width: "100%",
                                                   members: [toolbar]
                                                   });
          Note that I copied the button folder in my skin of choice to a new folder called 'ToolStripButton'. In the new folder I replaced the following files with blank pngs:
          • button_start.png
          • button_stretch.png
          • button_end.png

          Comment


            #6
            Nice job and thanks for posting the final solution.

            Note that setting layoutAlign:"center" is another way to center the buttons so you don't have to use padding:3

            Comment

            Working...
            X