Archive for December, 2009

AIR 2 / Flash Player 10.1 Beta Info

Posted in Adobe AIR, Flex 4, Flex/AIR with tags , , , , , on December 21, 2009 by devgirl

The Adobe AIR 2.0 Beta and Flash Player 10.1 Beta releases are out and filled with some really cool, fun and powerful features. These are big releases as far as increasing developer productivity and in my opinion will further convince people to choose the Flash Platform as their technology direction.

I’ve been working with these two prereleases on top of Flash Builder (Flex 4) to build samples for Tour de Flex and made some notes on them as I’ve been trying the different APIs. I will summarize what I have learned so far and add to this post as I continue through them. Some of these may be totally obvious, but I will list them here anyway. The current Tour de Flex samples were built using the AIR 2.0 SDK build 121509. You can download AIR 2.0 Beta here. Some things to note:

1. Microphone Sample – this sample can be used with the internal microphone but you do need to make sure it is enabled and the volume is up. I also had to increase the volume on the Flash Player settings on my Macbook for the microphone to pick up the sound. To check your settings, go here and right click on the settings manager image, then choose ‘Settings’, and Microphone.

2. Gestures Sample – this sample requires multi-touch enabled hardware. I am using a Macbook which does have multi-touch support in the trackpad, but unless you have this or a multi-touch enabled device, the sample may not work for you. This article lists some devices that contain the support, as well as some other very useful info. Also, many samples out there are straight ActionScript classes that extend Sprite (for instance the one in the article referenced above). If you copy these into an AIR project and set the ActionScript class as the default application, you may find that you still see nothing when you run it. That is because you still need to go into the application descriptor file (yourappname-app.xml) and set the visible flag in the initial content to true. For instance:

...
<initialWindow>
		<!-- The main SWF or HTML file of the application. Required. -->
		<!-- Note: In Flash Builder, the SWF reference is set automatically. -->
		<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>

		<!-- The title of the main window. Optional. -->
		<!-- <title></title> -->

		<!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
		<!-- <systemChrome></systemChrome> -->

		<!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
		<!-- <transparent></transparent> -->

		<!-- Whether the window is initially visible. Optional. Default false. -->
		<visible>true</visible>
...

3. Global Error Handler Sample – this will only work right if you are running in ‘Run’ mode, debug mode will stop on the error itself and thus not be ‘handled’.

4. Native Process Sample – this sample assumes some default paths on the different OS’s, so if you have something custom then the ping may not work unless you change the path to the correct executable for your particular installation.

5. Socket Server Sample – this sample has two apps within it, a client app and a server app. The ServerSocket class is the new AIR 2 class allowing your app to be a socket server, and should first be started with the SocketServerSample.mxml file. Simply hit the ‘Listen’ button to start the server then run the SocketClientSample.mxml file to open the socket to the server and send data to it.

*** Note: Tour de Flex updated with the next five January 17, 2010 ***

6. Mass Storage Device Detection – this sample will allow you to access an external storage device such as a USB drive. Plug in an external device while running the sample and you will see the information about the device displayed as well as have the ability to browse the contents.

7. NetworkInfo – this sample will show your currently available network interfaces and some corresponding information about them.

8. Globalization – there are a few samples here that show how you can now do formatting of dates, numbers and currency based on a selected locale.

9. OS File Security Download – this sample shows how you can use the new File.downloaded property to check if a file has been downloaded or not. Run the sample and double click on a file, and a message will be displayed to indicate its download status.

10. DNS Lookup – this sample allows you to retrieve information about a specified Domain Name Server address. Simply run the sample and enter the domain name to perform a lookup. It also gives you the ability to specify an IP address and do a reverse lookup. This sample was based on a sample found here: http://www.insideria.com/2009/10/air-2-enhancements-complete-ov.html

Lastly, here are some good links with more information and samples for these two prereleases:

Flex 4 BorderContainer – Quick and Useful Spark Component

Posted in Adobe Flex, Flex 4, Flex/AIR with tags , , , , , on December 3, 2009 by devgirl

One very useful component offered in the Flex 4 SDK is the Spark BorderContainer. You may also know this as the Spark Border if you’re one of those cutting-edge people already building apps in Flex 4, but it recently underwent a final name change to ‘BorderContainer‘.

The BorderContainer extends SkinnableContainer and offers you a quick way to set borders and backgrounds on a container in your application without having to create a custom skin. You can use CSS properties and class properties to style it much like the Halo components, such as setting the cornerRadius for rounded corners, borderColor, borderStyle, borderWeight and even backgroundColor, backgroundImage and backgroundFill.

There are numerous ways to customize your BorderContainer with the given properties and I’ll show a few simple examples here. If there is something about your container that you can’t control through the style and class properties then you should choose to use a SkinnableContainer with your own custom skin instead.

Here is an example of a BorderContainer that has a gradient background going left to right and some border settings:

      <s:BorderContainer width="400" height="300" horizontalCenter="0" verticalCenter="0" top="5"  
					   borderAlpha=".5" borderColor="0x000000" borderWeight="5">
		<s:backgroundFill>
			<!-- 0 rotation creates left to right gradient -->
			<s:LinearGradient rotation="0">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
			</s:LinearGradient>
		</s:backgroundFill>
		<s:Label text="Left to Right Gradient" horizontalCenter="0" verticalCenter="0"/>
	</s:BorderContainer>

Here is a screen shot of what this container would look like:

The code below shows how you can make the gradient go right to left. The rotation attribute on the LinearGradient will determine the gradient effect. If you use a value of 90 or 270 it will go top to bottom and bottom to top.

     <s:BorderContainer width="400" height="300" horizontalCenter="0" verticalCenter="0" top="5"  
					   borderAlpha=".5" borderColor="0x000000" borderWeight="5">
		<s:backgroundFill>
			<!-- 180 rotation creates right to left gradient -->
			<s:LinearGradient rotation="180">
				<s:GradientEntry color="0x6600CC"/>
				<s:GradientEntry color="0xCCCCCC"/>
			</s:LinearGradient>
		</s:backgroundFill>
		<s:Label text="Right to Left Gradient" horizontalCenter="0" verticalCenter="0"/>
	</s:BorderContainer>

And the screen shot of the above code:

This next bit of code shows how you can include a repeatable background image in your container, with some other custom border settings as shown below:

       <s:BorderContainer horizontalCenter="0" verticalCenter="0" width="420" height="305" cornerRadius="7" 
					   borderWeight="2" backgroundImage="@Embed('adobelogo.jpg')" 
					   backgroundImageFillMode="repeat" borderColor="red"/>

Below is the screenshot of this container:

The backgroundImageFillMode can be set to repeat, scale or clip depending on what you would like your image to do. They are pretty self-explanatory, clip will cause it to be sized as is and if it doesn’t fit within the container it will be clipped and scale will cause the image to scale within the container.

If you want to set both a background image and a background color however, you will either need to use a SkinnableContainer object with a custom skin instead of BorderContainer, or use the BorderContainer with something like the following:

          <s:BorderContainer width="300" height="300" cornerRadius="7" backgroundColor="red">
                    <s:Rect width="100%" height="100%">
                                  <s:fill>
                                         <s:BitmapFill source="@Embed('adobelogo.jpg')" alpha="0.2"/>
                                  </s:fill>
                     </s:Rect>
          </s:BorderContainer>

You can also set a borderAlpha and backgroundAlpha on your BorderContainer as desired.

This last example shows how you can create a gradient border:

         <s:BorderContainer width="400" height="300" backgroundColor="0XDEAEFF" verticalCenter="0" horizontalCenter="0">
		<s:borderStroke>
			<s:LinearGradientStroke weight="10" rotation="270">
				<s:GradientEntry color="0xF655E5"/>
				<s:GradientEntry color="0x6600CC"/>
			</s:LinearGradientStroke>
		</s:borderStroke>
		<s:Label horizontalCenter="0" verticalCenter="0" text="My very girly BorderContainer"/>
	</s:BorderContainer>

And the screenshot of this:

The examples above are just simple code snippets to show you the options available beyond what might be in the Adobe docs. These samples are being added to Tour de Flex along with more Flex 4 samples so stay tuned!