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.
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>';
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/
Reblogged this on Dinesh Ram Kali..