Bootstrap Links Demo

Links

Bootstrap allows you to easily change appearance of a link and make it resemble a button. All you need to do is add the same style class as you would for a button:

<a class="btn btn-warning" href="#">Button Link</a>

Button Link

The same thing, this time using the Link core control:

<xp:link text="Button Link" id="buttonLink1" styleClass="btn btn-warning"></xp:link>

Button Link

And, as well as with buttons, you can easily add decorations to buttons. Using the static syntax:

<a class="btn btn-primary" href="#"><i class="icon-upload-alt"></i> Upload</a>

Upload

Or using the same approach as we did with buttons:

<xp:link text=" Upload" id="buttonLink2" styleClass="btn btn-primary">
  <xp:text id="uploadIcon" tagName="i" styleClass="icon-upload-alt"></xp:text>
</xp:link>

Upload

But, with links there is also another way, which includes setting the escape property to false. Then, you can set (or calculate) the value of the text property to include the necessary  tag. Something like this:

<xp:link escape="false" text="&lt;i class='icon-remove'&gt;&lt;/i&gt; Delete" id="escapedLink1" styleClass="btn btn-danger"></xp:link>

Delete

As you can see, you must escape html code in the text property, meaning that you must write , instead of .

If you find that difficult (I do) or illegible (I do), here is a simple trick: instead of writing the value directly in the source editor, write it in the Label field on the Link Properties tab. That way, it will be automatically converted to this:

<xp:link escape="false" id="link1" styleClass="btn btn-danger">
  <xp:this.text>
    <![CDATA[<i class='icon-remove'></i> Delete]]>
  </xp:this.text>
</xp:link>

Adding events

Just like with buttons, we can add events to the Link core control and use them to change its appearance. Let's repeat the same example as with the buttons and let's use the second approach to adding icons.

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

Send message

As you can see, the code is somewhat shorter compared to the button example, since here we can set the icon and the label at the same time.

From visual and programmatic viewpoint, Button and Link core controls are similar. Whether you use one or the other will depend on your preferences and requirements.