The Oracle A-Team just posted an interesting article on their blog, it mainly covers how to debug your iOS UI, but I found something else in there that is just awesome. Font Awesome to be precise.
What is Font Awesome?
It’s a font library that is packed full of useful, scalable icons. The icons are great and easy-to-use, and most importantly: they are always sharp. I had just settled in with Open Iconic a few days ago because I needed some mono icons for a MAF (I liked the name AMX better) POC that I am working on, but this new find appeared worth the effort to try out.
I began following the steps, but saw some room for improvement, and managed to find an even easier way to plug Font Awesome into your MAF projects by tweaking the aforementioned A-Team article steps just a bit. From now on, all of my skins are going to have this addition, all my projects already have a skin added as part of my basic project setup steps. You always need a skin, and you always need icons.
Add 439 Icons in 3 Easy Steps
Download Font Awesome, and unzip it to your ApplicationController project under public-html/resources, and my skin is in the public-html/resources/css directory.
Pay attention to the relative path from your skin to the Font Awesome stylesheet, and make sure it is in the correct project. To the right, you can see what my workspace structure looks like.
After unzipping, there is just ONE more step to enabling this for ALL your application features. I prefer using an application-wide skin that is configured via adfmf-skins and adfmf-config rather than adding it as a resource for each feature individually. If you need it, here’s the documentation for adding a skin. The next step is to add a CSS @import statement that points to the Font Awesome stylesheet like this:
Now to use these icons, you only need to reference two short style classes. Here I am referencing the Rebel Alliance icon that is 130% size because I added the ‘fa-lg’ class, which I learned about on their examples page. Now I have the Font Awesome cheatsheet up constantly to find the perfect icons, most of which are more useful than what I’ve chosen for my example.
The Result
Here it is on the iOS simulator, a crisp, clean icon. I added the color and padding so it would look more at-home on iOS devices, the ‘fa-lg’ size is about 16px on each side, and this brings it to 26px. This will affect all FA icons in commandButton components. Attempting to style just the ‘fa’ class will not give you enough specificity to override the default styling, and I avoid the !important tag since it breaks how CSS is supposed to work.
.fa.amx-commandButton {
padding: 5px;
color: rgb(5, 114, 206);
}
The icons also render correctly (including color) in the iPhone preview of JDeveloper, but not Android previews. It does work on my HTC One, but the icons appear too high, so I will have to adjust the padding on Android devices. That should make it a little easier to create a more-polished MAF application, and in less time, every time. One more thing: when you are ready to deploy your app for production, you should switch to the minified stylesheet.