Buttons

Static, dynamic, colourful...

Static Buttons

The following are static buttons, created using the standard Bootstrap technique:

<button class="btn" type="button">Button</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-success" type="button"><i class="icon-ok"></i> Confirm</button>
<button class="btn btn-danger" type="button"><i class="icon-warning-sign"></i> Delete</button>

The result:

These buttons do not have any action connected to their events, so clicking them will do do nothing.

Dynamic Buttons

The same buttons, but created using the Button core control:

<xp:button value="Button" id="button" styleClass="btn"></xp:button>
<xp:button value="Primary" id="buttonPrimary" styleClass="btn btn-primary"></xp:button>
<xp:button value=" Confirm" id="buttonSuccess" styleClass="btn btn-success">
  <xp:text id="iconSuccess" tagName="i" styleClass="icon-ok"></xp:text>
</xp:button>
<xp:button value="  Delete" id="buttonDanger" styleClass="btn btn-danger">
  <xp:text id="iconWarning" tagName="i" styleClass="icon-warning-sign"></xp:text>
</xp:button>

Still nothing really dynamic about these buttons, but that is about to change!

Adding events

Since we are using the standard Button core control, events are added as you would normally do. As an example, let's add a simple onClick event that will change the look of the button.

We'll do that by setting a view scope variable in the onClick event, partially refreshing a panel and calculating button's  styleClass property based on the value of the view scope variable.

<xp:panel id="dynamicPanel">
  <xp:button id="dynamicButton1">
    <xp:this.styleClass>
      <![CDATA[#{javascript:
        if (viewScope.get("dynamicButton1") == "set") {
          return "btn btn-success";
        } else {
          return "btn btn-primary";
        }
      }]]>
    </xp:this.styleClass>
    <xp:this.value>
      <![CDATA[#{javascript:
        if (viewScope.get("dynamicButton1") == "set") {
          return " Sent successfully!";
        } else {
          return " Send message";
        }
      }]]>
    </xp:this.value>
    <xp:text id="dynamicIcon1" tagName="i">
      <xp:this.styleClass>
        <![CDATA[#{javascript:
          if(viewScope.get("dynamicButton1") == "set") {
            return "icon-ok";
          } else {
            return "icon-envelope";
          }
        }]]>
      </xp:this.styleClass>
    </xp:text>
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dynamicPanel">
      <xp:this.action>
        <![CDATA[#{javascript:
          if(viewScope.get("dynamicButton1") != "set") {
            viewScope.put("dynamicButton1", "set");
          } else {
            viewScope.put("dynamicButton1", "");
          }
        }]]>
      </xp:this.action>
    </xp:eventHandler>
  </xp:button>
</xp:panel>

Quite a lot of code, but you should be familiar with it. And the end result is a fully dynamic, Twitter-Bootstrap-styled button (click to change style):

Links, buttons: it's all the same

Bootstrap allows you to make a link look like a button. It is very easy to do, you simply assign the same CSS classes to a link, for example btn btn-warning. Take a look at this page for details and examples.

And should you need it, you can as easily turn a button into a link:

<xp:button value="Link Button" id="linkButton1" styleClass="btn btn-link"></xp:button>