Posts by Category: Flex
Flex Editor on Ubuntu
I've recently been interested in being able to develop Flex applications in Linux; I'm using Ubuntu. The main obstacle was which text editor to use. I use Aptana Studio to develop Rails applications, such as this very web site, but I'm not sure how to configure Aptana Studio to perform syntax colouring for AS or MXML files.
Well after a bit of Googling this afternoon I've discovered Komodo Edit which comes in flavours for Linux, Windows and Mac. It's also free and supports syntax colouring for ActionScript files and MXML files. Hooray! Was easy to install too.
Posted by Graham Blake on 28th February 2009 at 07:32
Embedding Flash Content on a Rails App
Recently I've been trying to write a post about the use of toolbars with a Flex application. The post is coming along slowly, almost there as I write this, but I had a problem embedding the Flex app. within my blog post.
Essentially the embedded Flash object (.SWF file) wasn't appearing on my blog page.
My hosting company is DreamHost and so I had a quick look at the DreamHost wiki and forum but couldn't really find anything related to my specific problem. Of course it doesn't help when you're trying to search when there's a Ruby on Rails command named 'flash'!
I played around with my local copy of my web site and got the Flash content working after a short while. I uploaded the code to my site but the hosted site was still not working.
At some point I stumbled upon a forum where someone's advice was to take a look at the error.log file on the server; this forum post was unrelated to my Flash problem but it gave me a vital clue. I then viewed the error.log file on my host server and discovered that the attempt to fetch my .SWF file was failing due to a 'Permission denied' error. At this stage I was thinking that the permissions at the location at which I had stored by .SWF file were preventing my browser from accessing this content, and I was right.
After issuing a 'chmod 755 public/images/*' command everything began to work. Here's the HTML code that I used to embed my Flash/Flex content:
1: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
2: WIDTH="400" HEIGHT="400">
3: <PARAM NAME="movie" VALUE="/images/ToolbarDemo.swf">
4: <!--[if !IE]>-->
5: <object type="application/x-shockwave-flash"
6: data="/images/ToolbarDemo.swf" width="400" height="400">
7: <!--<![if !IE]-->
8: <p>Flex demo of toolbar</p>
9: <!--[if !IE]>-->
10: </object>
11: <!--<![endif]-->
12: </object>
Posted by Graham Blake on 28th February 2009 at 07:32
A Flex Toolbar
For the little Flex application that I'm currently writing I wanted to implement a toolbar. In fact I wanted more of a tool palette rather than a plain toolbar, so something you might see in a paint or drawing application such as Photoshop rather than the bar found at the top of most applications. I've now found a solution although it's not perfect and I will probably go back to the issue at some point in the future.
I've looked at two possible solutions and I'm sure that there are other solutions available. I didn't want to spend ages coding something myself, preferring to just grab something and drop it in to my interface. First of all I found an article at the Flex Examples site which makes use of the mx:Image component wrapped by an mx:Repeater component with the whole thing wrapped by an mx:ToolBar component. However I discovered via the same post that the mx:ToolBar component can no longer be accessed through the MXML interface. I could have persevered with this, as I believe that it may still be possible to use this component, but I decided not to; probably because the documentation is somewhat non-existent.
I then thought of using the mx:TileList component after being inspired by another Flex Examples post. However I had a look at the options available in the Flex framework, considered the mx:ToggleButtonBar component and then found a post at LetsFlex. The LetsFlex post showed an example of re-styling the ToggleButtonBar and using images on the buttons rather than text. I know that this will probably be obvious to anyone who's spent time with Flex but, at the time, I didn't know for certain that the text of a button could be removed entirely and replaced with a graphic. This finally led me to use the ToggleButtonBar component as a partial solution. I say partial because I still wanted to implement a floating toolbar where the user could move the toolbar around the screen if they wished. During my searching I had discovered the Adobe Docking Toolbar component and now I returned to it. Now the documentation for this component is somewhat, shall we say, sparse. However it does come with some code examples that are good enough to get a toolbar implemented
I followed the following steps to get the Adobe Docking Toolbar component installed:
1) Downloaded from the Adobe Flex Components site
2) Extracted the downloaded zip file to somewhere convenient
3) I then tried two methods of using the pre-compiled .SWC file (as I'd downloaded the zip file to two of my PCs). Firstly I copied the Docker.SWC file to the \frameworks\libs folder of my Flex installation as mentioned in the readme.txt file that came with the zip file. Secondly, on my other PC, I added the path location of the Docker.SWC file to the 'SWC Libraries' setting within FlashDevelop; Project -> Properties menu, Compiler Options tab and added to the 'SWC Libraries' string.
Then later I noticed that I could simply have right-clicked on the Project panel in FlashDevelop and selected Add -> Library Asset... oh, well.
So now onto the code itself.
1: <?xml version="1.0" encoding="utf-8"?>
2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3: xmlns:fc="http://www.adobe.com/2006/fc"
4: measuredWidth="300" measuredHeight="300"
5: width="400" height="400">
6:
7: <mx:Script>
8: <![CDATA[
9: import mx.events.ItemClickEvent;
10: import org.flashdevelop.utils.FlashConnect;
11: import mx.controls.Alert;
12:
13: private function clickHandler(event:ItemClickEvent):void
14: {
15: FlashConnect.trace(event.item.ident);
16: Alert.show(event.item.ident,
17: "You selected...", Alert.OK);
18: }
19: ]]>
20: </mx:Script>
21:
22: <mx:Array id="iconData">
23: <mx:Object ident="Rectangle"
24: icon="@Embed(source='assets/rectangle.gif')" />
25: <mx:Object ident="Ellipse"
26: icon="@Embed(source='assets/circle.gif')" />
27: </mx:Array>
28:
29: <mx:Panel layout="vertical" width="100%" height="100%"
30: title="Toolbar Demo" horizontalGap="10">
31:
32: <fc:Docker id="docker" width="100%" height="100%">
33: <fc:DockableToolBar id="toolbar" label="Tools"
34: height="44" paddingTop="6">
35: <mx:ToggleButtonBar id="btnBar"
36: dataProvider="{iconData}"
37: itemClick="clickHandler(event)" />
38: </fc:DockableToolBar>
39: </fc:Docker>
40: </mx:Panel>
41: </mx:Application>
The components, belonging to the Docker SWC library, that I've used are Docker and DockableToolBar. These all belong to the fc namespace. Nothing really complex here. I've wrapped my ToggleButtonBar with the DockableToolBar component and that, in turn, is wrapped by a Docker component.
I created some 32 x 32 pixel buttons to fit on the toolbar and I realised then that the little handle at the far left of the toolbar, that is used to reposition the toolbar, is a little small. I took a look at the code for the DockableToolBar component and discovered that I could change the embedded graphic that represents the toolbar handle so that it's a little bigger but, frankly, I can do that some other time.
The simple app. can be seen below. I apologise if this post seems a little sprawling and has missing info. I've been meaning to write this post for a while and, when I finally got around to it and had written the first draft, I had problems embedding my Flex app. At the time of writing this closing paragraph I just want to get the post published and to move on to the next thing! If you read this and would maybe like some more information please submit a comment or drop me an email.
Posted by Graham Blake on 28th February 2009 at 07:32
Creating a Quick SVN Repository
I've recently started to use TortoiseSVN to handle my configuration control needs on a Flex project that I've started working on at home. The other day I purchased a portable external hard drive, with the intention of using it as a way of sharing my project files between my desktop PC and my laptop. I thought that I could also use the drive to backup my work and that I could locate my SVN repository on there too. I could have simply relocated my existing SVN repository from my local hard drive to the new external drive but I couldn't quickly find out the easiest way to do this. Also, I thought that working out how to create the repository from scratch would be a good reason to write a blog post about how to do so. So here goes.
I carried out the following steps.
1) Created a new folder on my external hard drive, named 'svn_repo'.
2) Right-clicked on this new folder and selected 'Create repository here' from the TortoiseSVN sub-menu
3) Created a new folder structure in a temporary folder on my PC hard drive as follows, where MYPROJECT was the name of my original project's parent folder:
c:\temp\MYPROJECT\branches
c:\temp\MYPROJECT\tags
c:\temp\MYPROJECT\trunk
4) Moved the file contents of my original project folder (MYPROJECT) to the new c:\temp\MYPROJECT\trunk folder (I only files I want checked-in, i.e. all of them in my case, and I didn't copy the MYPROJECT folder itself but the contents).
5) Right-clicked on the new MYPROJECT folder (within c:\temp) and selected 'Import...' from the TortoiseSVN sub-folder. I then typed 'Initial import' into the 'Import mesage' dialogue box.
6) Deleted the c:\temp folder, as it was no longer needed at this point.
7) Created a new MYPROJECT folder where the working copy was to reside, c:\flex\MYPROJECT.
8) Right-clicked on the c:\flex\MYPROJECT folder and selected 'Checkout...' from the TortoiseSVN sub-folder, setting the 'URL of repository' field to 'file:///C:/svn_repo/trunk' and the 'Checkout directory' field to 'C:\flex\MYPROJECT'.
That was it, done. I used version 1.6.1 of TortoiseSVN to achieve this.
Thanks to http://www.shokhirev.com/nikolai/programs/SVN/svn.html
Posted by Graham Blake on 28th February 2009 at 07:32
Beginning to Flex
If you read my About page you'll see that I have ambitions to take a look at Adobe AIR at some point and to take a look at Flash also. Well for a short while now I've been taking a peek at Adobe Flex. It seems that there are three ways to approach AIR, the JavaScript route, the Flash route or the Flex route. Initially I was going to take the JavaScript route which would involve me firstly learning JavaScript, however the Flex route seems a little more attractive.
Firstly Flex seems geared up to producing client-side applications, having a comprehensive set of pre-built components than can be used to construct application interfaces. Secondly Flex gets compiled into ActionScript 3 code and AS3 is now looking more like a proper programming language with object orientated programming foundations. JavaScript stills seems a little like a toy language, although I'm sure that I'm being very unfair and that it's come a long way with things like the jQuery library and the like. Still, I like the thought that I can use AS3 to write classes, it just seems more structured and what I'm used to.
So yesterday, as part of my attempt to become acquainted with Flex, I took delivery of two new books; Programming Flex 3, by Chafic Kazoun and Joey Lott, and Essential ActionScript 3.0, by Colin Moock. Now I hope to read these books and write a review for them both. The problem is that I rarely, if ever, make it through to the end of such text books. I tend to get half-way through a book and decide that I have enough information to be getting on with and then put the book down. I must make a concerted effort to read these two books.
I already have a few ideas for applications that I'd like to write for the AIR platform but I feel that I should try to limit my ambitions first of all, while I'm learning about Flex and ActionScript, and develop some rather more simplistic examples. I may write some exercises as a way of settings goals for myself and then perhaps blog about my progress. Often the problem I find when learning a programming language is the lack of projects with which to apply the skills being learnt.
Posted by Graham Blake on 28th February 2009 at 07:32