New Flex Logo – very sleek and curvy

February 6th, 2012

So, a new logo has finally been chosen for Apache Flex, and I have to say, I think it’s pretty sweet!

More details and pics on the Apache site

New Apache Flex Logo

AnyChart – Flex, Flash and HTML5 Charting Component

January 31st, 2012

Doing an feasibility study of AnyChart API for Flex at the moment. Its looking very promising….

AnyChart for Flex and Html5:

AnyChart - Flex and HTML5

AnyChart Financial for Flex

AnyChart Stock Components

Data visualization in Flex 4.5 with Kolbert – Radar to Petal Chart

December 14th, 2011

Sometimes the data displayed in a Radar Chart can be difficult to intuitively analyse. I read a good article on alternatives to radar charts and wanted to apply the “Petal Chart” in Flex. When you look at the result, you would’nt think that both charts visualize the same data!

I used Kap Labs’ Kolbert API to generate a regular Radar Chart, and edited the data source and axis items to create a Flex Petal Chart. The two different data source CSV files can be seen if you right-click, View Source, and go to assets folder.

Radar and Petal Chart - Flex 4.5 using Kolbert

Flex 4.6 Mobile Running on Web (desktop browser)

December 14th, 2011

For those who have not yet tried out the Flex 4.6 mobile components, I have put together a collection of samples from the Adobe Help website that are runnable from a desktop web browser. I think the SplitViewNavigator looks really cool. Links to the code snippets used in the examples are below. View Source enabled!

Enjoy!

Flex 4.6 Mobile UI Running on Web (view source enabled)

Note:

Holly Schinsky has a good tutorial on getting mobile components running inĀ  a Flex web app or desktop Air app.

Code Snippet Links:

Multiple Panes in a Mobile Application – Adobe Help

Date Spinners – Adobe Help

Spinner List with Embedded Images – Adobe Help

Adobe Acquires PhoneGap

November 8th, 2011

Good news on the mobile development front for Adobe fans…. PhoneGap is now under Adobe’s umberella. PhoneGap is a framework for developing HTML5/JavaScript/CSS apps that can be deployed accross multiple mobile platforms. You can build the apps using a free SDK, or use the paid version:

“..write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, BlackBerry and more”

This seems to be the way things are heading…. cant wait to give it a try

Flex 4.5 Mobile Paged/Stepper List

October 13th, 2011

This mobile component converts a regular Flex mobile Horizontal List into a stepped/paged list.

It uses a custom skin for the list and a custom skin for the list’s scrollbar. The previous and next buttons are seperate from the list, and trigger the custom scrollbar’s changeValueByPage() function to move up and down the list. The two lists are use double binding as a visual aid for demo purposes, and I have used the lists ensureIndexIsVisible() function to ensure the selected index is always visible (now that’s intuitive function naming Mr. Adobe).

The paged list also employs the gestureSwipe event, but this cant be seen on the online demo. Thanks to Steven from Flexponential for his brilliant post that I based this component on. If you see any ways to improve it, please let me know.

Note: the demo runs just as it would on a mobile phone, as I have embedded mobilecomponents.swc and imported the mobile theme (see prev post to see how this is achieved).

Click the image below to view the mobile demo online! (right click for View Source)

Mobile Paged/Stepper Horizontal List (click to run demo)

Mobile Flex: Tabs (tabbar) Moves Up With Soft/Virtual Keyboard

September 22nd, 2011

This is an annoying problem. The tabs in the tabbar in a TabbedViewNavigatorApplication move up and stay above the virtual keyboard (aka soft keyboard) in a Flex mobile application.

Some suggest disabling scrolling, eh no…. so this works better… on an application level, listen to the keyboard activate and deactivate events, and hide/display the tabs as needed:

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
								  xmlns:s="library://ns.adobe.com/flex/spark" initialize="tabbedviewnavigatorapplication1_initializeHandler(event)" >
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			protected function tabbedviewnavigatorapplication1_initializeHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				this.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, softKeyboardActivating);
				this.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
			}
			
			private function softKeyboardActivating(event:SoftKeyboardEvent):void{
				tabbedNavigator.tabBar.visible = false;
			}
				
			private function softKeyboardDeactivate(event:SoftKeyboardEvent):void{
				tabbedNavigator.tabBar.visible = true;
			}
			
		]]>
	</fx:Script>
	
	<s:ViewNavigator label="UserInput" width="100%" height="100%" firstView="views.UserInputView"/>
	<s:ViewNavigator label="Second" width="100%" height="100%" firstView="views.SecondView"/>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
</s:TabbedViewNavigatorApplication>

Flex 4.5 Mobile Alert Box & Always Visible Scrollbars (with Mobile App in Browser Demo!)

September 6th, 2011

I created a nice Flex Mobile Alert popup based on a DevGirl.org tutorial, but improved it so that it can be called from anywhere in the code, and will popup centered in the currently active view (in the web demo it will be off centre, but on a mobile device its fine). I have also added functionality (based on Flexponential.com article) so that the text area of the Alert will have scrollbars that are always visible (a dumb-ass limitation of the current Flex 4.5.1 SDK build – now fixed in Flex 6).

Always Visible ScrollBar

Check out the Mobile App demo (click picture below) – its the Flex mobile app running in the browser (use Firefox/Chrome – doesnt look quite right in IE yet) – this was based on a brilliant post by riagora.com. Will upload the source at some point, but the AlertBox code is in the full article, along with direct links to the tutorials.

Mobile App in Browser (Click to run Demo)

Read the rest of this article…………….

Flex 4 – StackOverflow Question on Memory Profiler

August 24th, 2011

I asked a question on StackOverflow regarding the Flash Builder 4 memory profiler, view the question and answer here.

The app below was used to investigate the use of the profiler. As the circles UIComponents are added to the stage, the app would eventually slow to a halt, unless the objects were removed from the stage and garbage collection takes place. Other than that, it just looks good.

There is a handy garbage collection trick here too:

/**
* Forces a garbage collection to occur. More reliable
* than System.gc() for certain Flash Player versions
*/
private function garbageCollectionHack():void{

  try {
	new LocalConnection().connect('foo');

	new LocalConnection().connect('foo');
  } catch (e:*) {}
}

Also uses a cool total FlashPlayer memory graph developed by Flexponential, and skinnable icon buttons.

Click image to launch, ViewSource enabled Memory graph demo coming soon…..

Flex app with GoogleMaps API & GeoNames WebService

August 24th, 2011

This is a demo application I made for viewing country statistics and locations using the Google Maps API and GeoNames webservice (if GeoNames is unavailable – which happens occasionally – it loads a local copy of the country xml).

The app also uses a moveable/draggable canvas and has a clever implementation of multiple filters for the autocomplete and and combo box.

Click the image below to run the demo: ViewSource enabled (right click on the app)

Stat Map App (click to launch - ViewSource enabled)