Posts Tagged ‘Flex’

Reusing BitmapData for Multiple Bitmap/Image Objects

Thursday, June 6th, 2013

I was working with Bitmap and BitmapData objects quite a lot recently.

Noticed that it is better to reuse the BitmapData objects for each new Bitmap object that is created, where the underlying pixels will be the same. They can then be manipulated as required separately, but without having multiple instances of the complex BitmapData object.

A code example I was using to check this out, as well as for loading the sample image locally in Air, is given below:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
						creationComplete="creationCompleteHandler(event)" >
	<mx:Script>
		<![CDATA[
			import mx.controls.Image;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			private var myTimer:Timer;
			
			private var myBitmapData:BitmapData;
			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				var urlString:String = "file:///C:/assets/images/client_logo.png";
								
				var req:URLRequest = new URLRequest(urlString);
				var ldr:Loader = new Loader();
				ldr.load(req); 
				ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, fileLoadComplete);
				ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);				
			}
			
			private function onIOError(event:IOErrorEvent):void{
				trace(event.text);
			}
			
			private function fileLoadComplete(event:Event):void
			{
				var ldr:Loader = Loader(event.target.loader);
				var bitmap:Bitmap = Bitmap(ldr.content);
				myBitmapData = bitmap.bitmapData;
				
				displayImage1.source = new Bitmap(myBitmapData);		
				displayImage2.source = new Bitmap(myBitmapData);
			}
			
		]]>
	</mx:Script>	
	<mx:Image id="displayImage1"/>
	<mx:Image id="displayImage2" y="0" x="50"/>
	
</mx:WindowedApplication>

UPDATE

Flash Player 10.1 and AIR 2.5 the reuse of BitmapData among many instances of Bitmap objects is now done automatically, for improved performance.

Flash Builder 4.6 – Conditional Breakpoints

Wednesday, September 5th, 2012

When debugging an application, in FB 4.6 one can now set conditions on when a breakpoint is activated. This can be very handy when you want to know when a certain condition is met on a piece of logic without having to set up IF statements, traces or debug logs.

Right-click on the breakpoint in the Breakpoint window to set the BP Properties. The conditions are set as shown in the picture, and you can only reference the objects/parameters that are available at that exact breakpoint line.

Setting Conditional Breakpoints

Flex/Flash Builder – Update JRE, .ini, Increase Memory

Tuesday, May 22nd, 2012

Working with Flex Builder 3 project, and getting the odd ‘out of memory error’ on Windows 7 64bit. Can also be done for Flash Builder 4.6

The following steps helped to speed things up and alleviate the problem (so far!)

1. Check what version of the JRE FB is using Help>Product Details>Configuration (even if you have the latest, FB will probably have defaulted to JRE 1.5 which comes with the install)

Configuration Details

2. Download the latest Jre (use the 32bit version – as FB3 is 32 bit Eclipse)

JRE 6 can be downloaded here

Install, and copy the Jre Files from: C:\Program Files (x86)\Java\jre6 to C:\Program Files (x86)\Adobe\Flex Builder 3\jre (and keep backup of original of course just in case)

3. Increase the memory for FB3 – C:\Program Files (x86)\Adobe\Flex Builder 3\FlexBuilder.ini

-vmargs
-Xms768m
-Xmx768m
-XX:MaxPermSize=768m
-XX:PermSize=768m
-Djava.net.preferIPv4Stack=true

You can only increase the memory so far, otherwise FB will fail to load (let me know what values you got away with!!)

Note:

Adding -showlocation before vmargs will display the current workspace in the title bar of FB

Adding -refresh, -clean clears the FB4 cache. Faster Garbage Collection: -XX:+UseParallelGC

Disable FB4 Validation: Window>Preferences>Validation (disable all but Class Path Dependencies)

AnyChart – Flex, Flash and HTML5 Charting Component

Tuesday, 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

Wednesday, 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)

Wednesday, 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

Tuesday, 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

Thursday, 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

Thursday, 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!)

Tuesday, 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…………….