Changing the font size in a Flex app using the browser's built in controls

A week or so ago, I blogged about the text size buttons on the Adobe Inspire site. I started to feel guilty about criticizing the site. So I set out to investigate how that all works. The easiest way to do it, in my opinion, is to load a compiled CSS file at runtime that overrides the font size of the components or styleNames as necessary. I don't think it makes sense to do anything programatic that would make all fonts bigger since there may be cases where some text is sufficiently big as is. So, this way the control stays completely in the hands of the designer.

So, what I came up with was fairly simple: A component with a few buttons that when clicked load the correct stylesheet. This is probably good enough for most purposes. But what if a user is already familar with changing the font size using the browser's text zoom option? It would be nice to be able to hook into that. The following example does just that.

How does it work?

Using an example I found on www.alistapart.com, I was able to detect changes to the font size made through the browser in Javascript. At this point, the trick was to get that into the Flex app. The Flex Ajax Bridge makes that possible. Putting it all together does exactly what I wanted. 

This a proof of concept so the code could certainly be cleaned up. Feel free to make changes to the example for your own purposes. If you improve upon it, please post a comment with an example (and hopefully the source) here.

Here is what I know needs to be fixed:

• For some reason this doesn't seem to work in Google's Chrome browser
  
• When focus is in the Flex app, the keyboard shortcuts that normally work in Firefox (CTRL + and CTRL -) don't work because the keyboard events are "trapped" in Flash Player
• I have only verified that this works in IE and FF on Vista

Application | Source

Adobe - In Context Editing - Price

If you build websites for clients, I'm sure you often get the question "Can I update this myself?" 

Well, Adobe has a new service/product which may help. The concept sounds pretty cool. I intend to try out the free preview and post my thoughts here. However, I am a bit nervous about getting too excited since nowhere on Adobe's site (at least not that I can find) does is say what it will cost.

If you have inside knowledge (in other words... If you work for Adobe), please comment here with some ballpark figure :-)

Adobe Inspire - what's with the text size buttons?

Even if you have seen the new Adobe Inspire site (built with Flex of course), you probably didn't notice the buttons in the upper right that allow you to increase or decrease the text size. Those buttons aren't really a new concept, lots of sites have a mechnism to increase the font size to make the site more readable for those with visual impairments. 

What's weird about the ones on the Inspire site is that, when you click the button to make the type bigger, it doesn't make all the type bigger. It only makes the body copy bigger. However, some of the headings are smaller than the body copy so it would make sense to make those headings bigger as well. I wouldn't expect that visitors to the site will understand why the headings aren't being enlarged when that button is clicked.

All in all, I like the site. Though, I am surprised that it isn't following along with the dark gray/black theme that the Adobe products seem to be using these days.

Flash Player 10...working now

I ended up getting Flash Player 10 to work, but I could only get it to work by downloading the Flash Player 10 update for CS4 zip file

So far it looks pretty cool. I can't wait to take advantage of the new features in some projects.

Flash Player 10: Sounds great, but...

Unfortunately Adobe must be "sold out" of Flash Player 10s. I went to Adobe.com and watched the really cool teaser video and thought to myself, "I have to install this right now". When I click to install, it goes through the installation process as normal and then gives me the "Installation successful" screen and indicates that Flash Player 9.x.x.x was installed successfully.

Now, I have seen some weirdness upgrading flash player before which was usually solved by uninstalling the current version and then installing the new version. No problem. I downloaded the uninstaller and uninstalled the current 9.x version and went back to Adobe.com to install the new version and when I go to the screen and click "Agree and Install Now" button, I go to a page where... wait for it... nothing happens. I see what looks like a broken image tag and some text that says it will take a couple minutes on a 56k modem.

They don't make it simple to find and download an old version so I am kind of stuck at the moment.

... and I really want to see some examples of the new typographic capabilities.

Strategic Relevance for UX

This is a great (but long) article worth reading if you are building a User Experience (UX) group.

Flex/Jira SOAP Webservice issue resolved

I guess I just needed to put this aside for a day and come back with fresh eyes. Another look at the log files gave me what I needed. There was an exception in the log about a NumberFormatException indicating that the String NaN couldn't be parsed into a number. A breakpoint in the SOAPEncoder.as file indicated that the NaN was being passed as the value of the "votes" property. So explicitly setting that value to "0" fixed the problem.

I would never have expected that I needed to set that property when creating a new issue.

But... it is working now, so expect to see a simpler way to submit bugs and feature requests coming soon.

Flex/Jira SOAP Webservice Problems continues - any suggestions?

Well... since my last post I have been trying to successfully create and issue in Jira from Flex. Desipite the problem I found in my last post, which allowed me to retrieve data successfully from Flex, I am stumped when it comes to creating issues. Here is what I am doing... if you happen to have any suggestions, please comment here or email me directly.

  var req:CreateIssue_request = new CreateIssue_request();
req.in0 = token; //from login request (which works fine)

  var issue:RemoteIssue = new RemoteIssue();
issue.project = "KLOK";
issue.summary = "My new defect";
issue.type = "2";
issue.assignee = "rmckeown";
issue.description = "this is a description on the new defect";
issue.priority = "3";
issue.status = "1";

      req.in1 = issue;

jira.createIssue_request_var = req; //jira is an instance of my SOAP service.
jira.createIssue_send();

Any ideas?

Jira/Flex SOAP Webservice Problem

If you have been following my latest posts about Klok, you know that I am evaluating Jira as my tool to track bugs. I thought it would be cool to have an area of the Klok website show some statistics regarding the open defects as well as a way to quickly submit a defect. I figured this would be easy to implement but it is taking longer than I thought.

If you are developer the solution is shown below. 

So I enabled the SOAP service and figured it would be simple to hook up Flex to the Jira SOAP Webservice. Using the tools to generate all the necessary code in FlexBuilder I assumed I would just implement the calls to get the data and I would be off an running. Unfortunately that was not the case. 

I started with trying to just list the projects from Jira and was confused when the only data coming back was the project description. After about 5 painful hours of digging into how the generated code works. I noticed that there was code in the Base[servicename]Schema that defines the complex type for RemoteProject... which defined the sequence of properties in a different order that they are being returned by the Jira SOAP webservice. 

If you change the order in the definition to match the order in which they are being returned all seems to work.

After fighting this for so long I decided I would submit the defect to the Flex bug site only to find out that it was already there. UGH!

Klok update site back up and running

If you have been testing out the 1.5 Beta of Klok, you can now click the "Check for Updates Now" button to upgrade to the 1.5.1 Beta 2. Alternately, you can download and install the update manually.

Klok Automatic Update not working

If you tried to get the 1.5 Beta 2 version of Klok using the automatic update, you will have noticed that it doesn't work. So, until I get that fixed, you can get the new version by going to http://klok.mcgraphix.com/klok/Klok-1_5_Beta_2.air.

If you happen to be another AIR developer and have run into this issue, there is information on Adobe's site about it.

Sorry for the inconvenience.

Klok 1.5 Beta 2 now available

The new Klok 1.5 beta is available. The biggest change in this version is the completely re-written Week View. However, there are a bunch of other improvements that I will blog about throughout the week.

If you have already installed the 1.5 beta, you can launch it and navigate to the About or Preferences screen and then click "check for updates now" which should prompt you to install it.

If that doesn't work, you can submit it as a bug at http://bugs.mcgraphix.com. Just click the "create new issue" button in the nav bar.

If you haven't already installed 1.5 then you can install the 1.5 beta 2 by downloading it manually.

I just realized that I didn't update the link on the Klok 1.5 screen of the Klok site I will get that fixed today.

Flex/Actionscript XML gotcha

I spent way too long troubleshooting this issue today. I was trying to initialize an XML object with some data from my actionscript object. Here is what I was doing:

private function someFunction(myObject:Identifiable) : void {
   var myXML:XML = <objectreference objectid="{myObject.id}">;
   myRoot.appendChild(myXML);
}

Then later on in my code I was doing an XPath query like so:

var list:XMLList = myRoot.objectReference.(@objectId=='foo');

Can you spot the problem? It took me way to long to notice the problem, which was obvious once I admitted to myself that I needed to actually use the debugger.

The problem was that I had double quotes around the expression {myObject.id}. The code should have been:

private function someFunction(myObject:Identifiable) : void {
   var myXML:XML = <objectreference objectId={myObject.id}/>;
   myRoot.appendChild(myXML);
}

Since having it incorrect with the quotes doesn't cause an error, I was really baffled on this.

Get ready for Klok 1.5 Beta 2

In preparation for next beta of Klok, I have set up a bug tracking system which I am evaluating. This was mainly due to the fact that it is hard to keep track of bugs and feature requests through this blog and email. Especially since, over the past week I have gotten over 13,000 spam emails (12,000 of them in one night...ugh!).

So, if you find a bug or would like to request a new feature or improvement, please enter it into the new system so I can see how it works. If you have already sent me an email about a bug and want to try out the new system, feel free to enter it.

Once again, thanks to all the people that have tested it out so far.