First this problem only happens with the Debug Flash Player.
The fix is very simple - in Safari under the Develop menu (if you don't see the Develop menu it can be shown by going to
Bizarre.
Monday, August 29, 2011
Can't type into Flex textbox on Mac Safari 5.1!
I recently ran into a problem on Mac Safari 5.1 where I couldn't type into any text boxes in my Flex App. Very frustrating! Anyway, I finally found a simple solution from the Adobe Forums.
First this problem only happens with the Debug Flash Player.
The fix is very simple - in Safari under the Develop menu (if you don't see the Develop menu it can be shown by going toPreferences > Advanced and checking the Show Develop menu in menu bar checkbox), change the User-Agent to Firefox or something other than the default. This will cause the page to reload, and should allow you to type again.
Bizarre.
First this problem only happens with the Debug Flash Player.
The fix is very simple - in Safari under the Develop menu (if you don't see the Develop menu it can be shown by going to
Bizarre.
Monday, June 27, 2011
Flash Builder 4.5 Mobile Application for Acer Iconia A500 Tablet
This blog post will discuss making a simple mobile application using Flash Builder 4.5. I will be targeting the Acer Iconia A500 Tablet because it is currently the only mobile device that I have access to, but it should be relevant to other mobile devices too. The Acer Iconia A500 Tablet runs on Google Android 3.0 (Honeycomb). For a full review of the tablet, read this article. It sells for around $450 for the 32GB version.
Check the USB Debugging option. This allows Flash Builder to debug applications straight on to the tablet through USB. Next, connect the tablet to your computer using the USB cable provided.
Give it a name like TabletApp. Click Next.
Select the desired target platform(s). For the Acer Iconia and other Andoid tablets, check the Google Android checkbox. You can choose the mobile app template to use here as well.
Important: your mobile application might need to have access to the internet, the file system, the gps, etc. Under the Permissions tab, choose the Google Android platform, and check any of the permissions that your application needs.
For my sample application I chose the INTERNET, WRITE_EXTERNAL_STORAGE, and ACCESS_FINE_LOCATION (GPS) permissions.
Click next. Set up the build path if necessary, or leave it to the default values.
Once the project is created, Flash Builder will open the two main files - TabletApp.mxml (the main application file), and TabletAppHomeView.mxml (the default home view component). Add in some components to the home view like a button or a label.
Under the Run menu, choose Debug Configurations.... Add a new Mobile Application launch configuration. Choose your project and application, and the target platform (Google Android in this case).
Under where it says "Launch method", choose the On device radio button. If you have trouble connecting, then read the Device connection help page.
If all works as planned, you should see on the tablet the simple application that you created.
I've put together a simple app that shows some of the properties available to mobile applications. Click the screenshot below to see the full size.
You can download the project file here. In Flash Builder choose "File - Import...", and then choose "Flash Builder - Flash Builder Project", and select the downloaded fxp file.
Step 1 - configure the tablet
On the tablet go to Settings - Applications - DevelopmentCheck the USB Debugging option. This allows Flash Builder to debug applications straight on to the tablet through USB. Next, connect the tablet to your computer using the USB cable provided.
Step2 - create a mobile project
Inside Flash Builder, create a new Flex Mobile Project.Give it a name like TabletApp. Click Next.
Select the desired target platform(s). For the Acer Iconia and other Andoid tablets, check the Google Android checkbox. You can choose the mobile app template to use here as well.
Important: your mobile application might need to have access to the internet, the file system, the gps, etc. Under the Permissions tab, choose the Google Android platform, and check any of the permissions that your application needs.
For my sample application I chose the INTERNET, WRITE_EXTERNAL_STORAGE, and ACCESS_FINE_LOCATION (GPS) permissions.
Click next. Set up the build path if necessary, or leave it to the default values.
Once the project is created, Flash Builder will open the two main files - TabletApp.mxml (the main application file), and TabletAppHomeView.mxml (the default home view component). Add in some components to the home view like a button or a label.
Step 3 - Run the application on the tablet
Now, to test our your application on the Acer Iconia Tablet, make sure it is connected by USB, and that you followed the step above on the tablet to enable USB debugging.Under the Run menu, choose Debug Configurations.... Add a new Mobile Application launch configuration. Choose your project and application, and the target platform (Google Android in this case).
If all works as planned, you should see on the tablet the simple application that you created.
Step 3b - Run the application on the desktop
If you want to test out your application without running it on the tablet, you can run it on the desktop by choosing the other radio button option - On desktop. There is a list of pre-configured devices, but the Acer Iconia tablet isn't in the list. So click Configure... and then Add to add it to the list. Here are the specs:
I've put together a simple app that shows some of the properties available to mobile applications. Click the screenshot below to see the full size.
Thursday, May 19, 2011
Simple Animating Preloader and Throbber/Spinner
This is my fourth post on Flex preloaders. It shows how you can use a throbber or spinner as a
simple yet effective preloader. The throbber can also be used in your application in other places whenever you want to indicate that something is happening.
In the example below I've included two kinds of throbbers:
Both throbbers work roughly the same way. The animation is performed every X milliseconds, and the lines or circles are drawn in a rotating manner so that the throbber animates. Both throbbers support an array of colors which define the appearance of the throbber, and a delay property which determines the speed of the animation.
Anyway, check out the code below (right click View Source to see the source), there is some documentation to explain the various styles, properties, and functions.
The other blog posts I've written on preloaders and spinners/throbbers can be found here:As mentioned in the comments, the just released Flex 4.5 SDK now contains a similar Spark BusyIndicator component. There is a nice blog post on it here.
simple yet effective preloader. The throbber can also be used in your application in other places whenever you want to indicate that something is happening.
In the example below I've included two kinds of throbbers:
- SimpleThrobber (extends Sprite) - ActionScript/Flash only, no Flex dependencies (good for preloaders)
- Throbber (extends SkinnableContainer) - advanced throbber, skinnable and style-able
Both throbbers work roughly the same way. The animation is performed every X milliseconds, and the lines or circles are drawn in a rotating manner so that the throbber animates. Both throbbers support an array of colors which define the appearance of the throbber, and a delay property which determines the speed of the animation.
Anyway, check out the code below (right click View Source to see the source), there is some documentation to explain the various styles, properties, and functions.
The other blog posts I've written on preloaders and spinners/throbbers can be found here:As mentioned in the comments, the just released Flex 4.5 SDK now contains a similar Spark BusyIndicator component. There is a nice blog post on it here.
Thursday, March 24, 2011
Spark Forms, Validation, and Errors
One of my previous posts on Always showing error tips (validators) presented one way of trying and improve the built-in validation error handling in Flex. It was a nice idea, but as many people have pointed out in the comments there are too many different use cases that causes the error tips to not show up properly.
Below is another alternative approach, and one that I hope is less of a hack.
I've created a class called InputControl which is very similar to the Flex 3 FormItem. It has a label property, and can contain one or more child elements.
What this control does that makes it useful is to listen for when the errorString property changes on an input control (such as a TextInput), and instead of displaying the default Flex error toolTip, it shows that errorString in a label that is always visible. It also immediately clears the input's errorString property so that the default error toolTip is not displayed.
The InputControl class is skinnable, and I've created two different skins. The default one InputControlSkin has the same layout as the FormItem (label on the left) and displays the error string on the right of the input.
The second skin is called InputControlVerticalSkin which displays the label, input, and error message in a vertical layout. This skin is more suited for large inputs like a TextArea.
There are definitely a few issues with this approach:
- longer error messages either don't show up properly or are truncated
- form label alignment is not customizable
Feel free to modify my code to make it work differently. Most properties are hard coded in the skins, and I didn't spend the time to extract them out into styles.
Here it is in action, right click to view source:
Below is another alternative approach, and one that I hope is less of a hack.
I've created a class called InputControl which is very similar to the Flex 3 FormItem. It has a label property, and can contain one or more child elements.
What this control does that makes it useful is to listen for when the errorString property changes on an input control (such as a TextInput), and instead of displaying the default Flex error toolTip, it shows that errorString in a label that is always visible. It also immediately clears the input's errorString property so that the default error toolTip is not displayed.
The InputControl class is skinnable, and I've created two different skins. The default one InputControlSkin has the same layout as the FormItem (label on the left) and displays the error string on the right of the input.
The second skin is called InputControlVerticalSkin which displays the label, input, and error message in a vertical layout. This skin is more suited for large inputs like a TextArea.
There are definitely a few issues with this approach:
- longer error messages either don't show up properly or are truncated
- form label alignment is not customizable
Feel free to modify my code to make it work differently. Most properties are hard coded in the skins, and I didn't spend the time to extract them out into styles.
Here it is in action, right click to view source:
Tuesday, March 15, 2011
State Transitions
I've put together a little example of how you can use transitions to animate between the states in your application component.
There are many websites explaining Flex 3 states as well as the new and improved Flex 4 states.
If you don't already use states, I would highly recommend you become familiar with them. They are very powerful, and make it much easier to create complex user interfaces.
Transitions are effects that are played when your component changes from one state to another state. They are a nice way to smoothly animate changing content, for example fading out content being hidden, or resizing containers that have new elements being added.
In the example below, I've created an application that has 5 states:
I've noticed that certain effects like Resize don't work properly with other effects like Fade. I haven't spent the time to try and figure out why not.
Anyway, here is the example. Right click to view source.
There are many websites explaining Flex 3 states as well as the new and improved Flex 4 states.
If you don't already use states, I would highly recommend you become familiar with them. They are very powerful, and make it much easier to create complex user interfaces.
Transitions are effects that are played when your component changes from one state to another state. They are a nice way to smoothly animate changing content, for example fading out content being hidden, or resizing containers that have new elements being added.
In the example below, I've created an application that has 5 states:
- Normal - default state
- Resize - resizes the main panel using a Resize effect
- Fade - fades in/out a Label using a Fade effect
- AnimateColor - animates a gradient color using the AnimateColor effect
- Easing - uses a Bounce easer with a Move transition
I've noticed that certain effects like Resize don't work properly with other effects like Fade. I haven't spent the time to try and figure out why not.
Anyway, here is the example. Right click to view source.
Subscribe to:
Posts (Atom)
