This past Saturday I wrote about my experience creating a Flex Mobile application called INeedIt. Based on the Google Places API, it was a simple application that found businesses of a certain type around your location. One of the issues I ran into was with text size. Consider what the simulator showed:
This looked perfect to me. But when run in my device, the text ended up being a lot smaller. Here's a shot I took with my web cam. Not perfect, but it should give you an idea of how much smaller it ended up:
I wasn't quite sure what to do. I knew Flex 4.5 had support for handling DPI changes - but nothing I tried seemed to work right. Finally I gave up and tried just adding fontSize to the list. Here is the entire layout for first page:
<s:List id="typeList" dataProvider="{types}" labelField="label" width="100%" height="100%" click="loadType(event)" includeIn="normal" />
Obviously there's more in the file, but in terms of UI, that's pretty much it. So as I said, I added fontSize in and that worked, but only for one page. I then turned to Adobe evangelist Holly Schinsky. Her suggestion was simple - CSS. I keep forgetting you can use CSS in Flex. In fact, she pointed out two simple CSS items to cover the entire application. Here is INeedIt.mxml - my root file for the application.
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
global {
fontSize: 36pt;
}
s|ActionBar #titleDisplay
{
fontSize: 36pt;
}
</fx:Style>
</s:ViewNavigatorApplication>
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.INeedItHomeView"
splashScreenImage="@Embed('assets/first.jpg')">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
The first declaration, global, applies to everything within the app - but not the title bar. I'm taking a guess here but I'd bet it also doesn't apply to menus. (More on how to use menus later.) To cover the title bar (really the ActionBar), I simply specify the second one. Note the use of the namespacing there. That's required for it to work. The numbers I picked were pretty arbitrary. I started big (100) and went down until it seemed "comfortable" for my big fat fingers. Check out the difference:
Again - not the best camera shot, but you can definitely tell a difference. Want to see all the code. I've now put it up on GitHub: https://github.com/cfjedimaster/ineedit. Feel free to download and modify the code to your liking. I've also included the APK as an attachment to this entry. In theory you can download and install right from your mobile browser. (As always, even if your phone company thinks your an idiot and can't be trusted to install applications, don't forget you can easily work around that by using the Android SDK.)
Ok - so what's next? I want to add menu support and see if I can fix the map. I bet I can also add in driving directions pretty easily.