Adding support for Font Awesome

This really made my day. I was busy hacking away at caseBook when I suddenly realized – I have no glyphs that fit the bill. So I googled CSS glyphs and voila – there was Font Awesome, 100% re-usable, CSS based glyphs. Ready to be used.

Font awesome really is awesome

Since Smart Mobile Studio hides the HTML template for your project, I had to add a new function for adding a reference to external files. You will find it in qtxutils.pas (see google repository for QTXLibrary), and it goes a little something like this:

class function TQTXTools.addLinkToHead(const aRel,aHref:String):THandle;
var
  mLink:  THandle;
Begin
  //REL: Can be "stylesheet" and many more values.
  //     See http://www.w3schools.com/tags/att_link_rel.asp
  //     for a list of all options
  asm
    @mLink = document.createElement('link');
    (@mLink).href = @aHref;
    (@mLink).rel=@aRel;
    document.head.appendChild(@mLink);
  end;
  result:=mLink;
end;

Next, I went into the project-unit, and added the following to TApplication.ApplicationStarting:

  TQTXTools.addLinkToHead('stylesheet',
  'http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

And thats it! You can now use a plethora of CSS glyphs, including spinning cogs and all the whistles and bell’s used by popular high-end javascript websites.

And example would be, for instance, to get a home glyph + animated cog wheel (which rotates perfectly):

  FPanel.handle.style['color']:='#cccccc';
  FPanel.innerHTML:=#'<i class="fa fa-home fa-2x"></i>
    <i class="fa fa-user fa-2x"></i>
    <i class="fa fa-cog fa-spin fa-2x"></i>';

Now that was almost to easy!

This really is a perfect example of just how easy it is to absorb already existing JavaScript and HTML5 libraries with Smart Mobile Studio. I could have gone with some hand painted 24×24 pixel png files — but why bother when someone has been kind enough to make such a fantastic library of scalable css based glyphs for the public?

And yes, I realize I just gave you a sneak-peek of caseBook.. It’s taking shape 🙂

Check out Font awesome here: http://fortawesome.github.io/Font-Awesome/

And as always, the QTXLibrary is located on google code, here: https://code.google.com/p/qtxlibrary/

Advertisements