Search Flex Components Free

Custom Search

December 12, 2007

Best Flex Examples Blog

As I put more and more pressure on myself to finally start with Flex, my useful bookmarks collection of blogs is getting bigger. There isn't better way of learning things than learning from the source, and in this case that source+ is Peter deHaan's Flex Examples blog, who works for Adobe on the Flex SDK QA team.



Blog is updated more than daily and every post is new Flex lesson with source code. I will mention just few recent post titles:


- Styling the HSlider control using CSS (12. sept)
- Customing the Flex HSlider and VSlider controls (11. sept)
- Changing the cursor in a flex application using cursormanager class (10. sept)
- Styling the titlewindow container (10. sept)

Easy Access to Flex Package Documentation

Inspired by similar redirects on php.net, I implemented a redirect on Flex.org that gives you easy access to Flex Package Documentation. Just type flex.org/fullpackagename into your browser and it will redirect you to the official Adobe LiveDocs page for that package. For example, flex.org/mx.controls will take you to the mx.controls package documentation.

Access to Package Documentation Expanded to Include Classes

Yesterday I posted a blog entry about a new feature that I added to Flex.org that made it easy to look up package documentation. Within minutes of posting I had a feature request to extend this to classes. In a few minutes today I added that feature to the script on the server, so you now have easy access to class documentation as well. The class documentation is dependent on proper cases for package and class names, so you'll need to be careful about your upper and lower cases. But, heading to flex.org/mx.controls.Alert will now send you to the proper documentation page on Adobe's LiveDocs.

Continue reading "Access to Package Documentation Expanded to Include Classes"

Adobe Flex Page on Facebook

Facebook announced a new ad service today that allows products and companies to create pages on Facebook. Not wanting to waste any time, we've setup a page for Flex on Facebook. Check it out and check out the Flex Facebook Group while you're there too.

Flex Builder Reduced Pricing Now On Adobe.com

The new reduced price for Flex Builder is now available on the Adobe.com online store, and is also reflected on the Flex product page. As a reminder, Flex Builder is now available for $249 US. Similar price reductions should be in effect on all the international stores as well.

Flex cookbook from O'Reilly - call for more topics

Hello everyone,

Josh Noble, Todd Anderson, and Abey George are all hard at work on the print version of the Flex 3 Cookbook for O'Reilly Media. They're writing new recipes and incorporating some of your recipes from the online Adobe Flex Cookbook. Get yours in now!

Deadlines are Nov 15 and Jan 1 for the topics. Check out the complete list of topics in my original post.

I'll be updating that list with these ideas, which just arrived in my inbox from Josh today!

- Accessibility and Creating Accessible Components Module
- RSL library tricks, advice, recipes (I think we've got a pretty good range of stuff there but I'm sure we missed something and it is a big topic).
- Working with Bitmaps, BitmapData, and Images

Best of luck to you in getting into the O'Reilly print book!

Cool New Flex Components

I received two emails on the weekend informing me of components to add to the Flex components page on Flex.org. The first was from Connect Studios, who have released 2 more components for free download from their website. Flex a form, which Flex Auto Form Build Component which makes building forms easier, and the Flex auto complete component which adds auto complete support to form fields. The second email was from Flex Monster, who have written a pivot table component for Flex applications. If you have components to add, check out the Flex components page and then submit your own to be added.

Learn Flex with Bruce Eckel and James Ward in Michigan

Bruce Eckel is hosting a 3 day RIA Jam in Ann Arbor, Michigan January 14th to 16th. Join Bruce and James Ward and learn about developing RIAs with Flex. Here's how Bruce describes a Jam: "When musicians have a jam, they get together and explore music without knowing exactly where they will end up. When programmers have a jam, they get together and explore new technologies in the same way. A programming jam is a very informal workshop to explore and learn about a particular technology. It's better and more fun than struggling with it by yourself." You can sign up for the three day RIA Jam online - the cost is $400 before January 2nd and $500 after January 2nd.

Hotmail Founder Launches Flex Based Microsoft Office

Ten years ago, Sabeer Bhatia co-founded Hotmail and sold it to Microsoft for just under $400 million. Now he's launching a Flex based competitor to Microsoft Office called Live Documents. So far the site isn't allowing registration, although you can sign up for an invite as everyone else has. It does sound interesting - plugins into the Microsoft Office applications allow you to enable them to work with Live Documents, and what sounds like a browser based interface (though possibly leveraging Adobe AIR as well) allows you to collaborate and work on your documents from anywhere.

sun-javafx-demo-and-tutorals

I start seeing some good JavaFX applications appearing on the web. Here are some of them.

Canno Music Pinboard

This is so far the most impressive JavaFX demo application. Without knowing JavaFX’s existence, you would definitely think it’s a Flash application. I think Sun does made a great contribution to the RIA world. Considering the huge Java developer base and mature application usages, especially the great J2ME installation base on mobile devices, Adobe Flash finds a strong competitor. It’s interesting to read all the major media are focusing on JavaFX vs AJAX. It shows how blindly the big media just follow the scripts from the vendors without knowing what they are talking about. Sun does only strongly refers its JavaFX technology along with AJAX. Wondering why’s that.
I start seeing some good JavaFX applications appearing on the web. Here are some of them.

Canno Music Pinboard

This is so far the most impressive JavaFX demo application. Without knowing JavaFX’s existence, you would definitely think it’s a Flash application. I think Sun does made a great contribution to the RIA world. Considering the huge Java developer base and mature application usages, especially the great J2ME installation base on mobile devices, Adobe Flash finds a strong competitor. It’s interesting to read all the major media are focusing on JavaFX vs AJAX. It shows how blindly the big media just follow the scripts from the vendors without knowing what they are talking about. Sun does only strongly refers its JavaFX technology along with AJAX. Wondering why’s that.

Anyway, here are the rest of the demos:

JavaFX Script JavaFXPad Demo - a lightweight tool that allows you to interactively create graphical elements using the JavaFX Script programming language. It consists of a code editor and a canvas. Whatever you type into the code editor will be displayed in the canvas. It also demonstrates the benefits of JavaFX Script being a statically-typed programming language, providing code-completion and as-you-type validation, in addition to syntax highlighting.
JavaFX Script Studiomoto Demo - a partial recreation of Motorola’s StudioMoto web site using the JavaFX Script language. This demo shows how rollover and other animations used in the StudioMoto web site can be easily created using the JavaFX Script language.
JavaFX Script Tesla Demo - a partial recreation of the Tesla Motors web site using the JavaFX Script language.
JavaFX SpaceInvaders Demo - play this arcade classic from Chris Oliver’s weblog.
JavaFX Calculator Demo - styled after MacOS dashboard widgets from Chris Oliver’s weblog.
JavaFX DisplayShelf Demo - styled after iTunes display shelf from Chris Oliver’s weblog.
Christopher Oliver, JavaFX SVG Translator Preview — SVG viewer and translator to JavaFX Script code.
JavaFX API - A set of HTML pages for the JavaFX API. Written in JavaFX; code is here.
Rudi’s JavaFX Goodies - A growing list of puzzle games written in JavaFX by Rudi Angela (source code)
“Shut the Box” game (source code)
ReportMill, “JavaFX Applet Gallery” - Basic Animation, Interpolations, SwitchShape, Simple Sounds, Slide Shows,…
Hessian/JavaFX Word Game - A demo and tutorial from Caucho Technology showing how to do client/server communication in JavaFX using the Hessian web services protocol.
Yang Zhang, “Spreadsheet” - Example of a spreadsheet-like application using JTable.

flex-business-ideas-10-health-maintenance 3.0

If you read the previous Ideas, you would know I like to enrich the healthy care and advertising spaces using RIA technologies such as Flex. This one is about Heath too.

I ware contact lenses and always interested in doing something about it or concerned about eye care. Received a news letter the other day, which was about eye visions and macular degeneration from a site called Natural Eye Care, where they have lots of information about vision. They also sell formulated pills for eyes. One page (linked above) talked about lots of symptoms, causes and risks. Also full of terminologies.

We need do something about this.

If Health Maintenance is too big of topic, let’s just focus on eye care. What if we could have all the information from the page visualized, something build on top of the components from the Idea 7. Just show us the symptoms visually and explain the whole thing in 3D, dynamically (panning, turning, etc.) It’s hard for a individual site like the Natural Eye Care to come up with something like this. Then some startup (get idea from here) can establish a platform so that e-commerce site can outsource the visualization to them.

Talking about maintenance, how about eye exercise. Still remember we did that during the recess at school. A 3D dynamic visual teaching platform, similar to the Idea 6, can be utilized to teach the daily routine to maintain good vision.

I would use it if there have sites like that. For now, have to keep reading the boring text and flip through dictionary all the time.

youd-think-google-is-algorithm-driven

Google AdSense was down this morning. It’s a rare opportunity to see Google’s error message. We got a screen shot of it. And you would think the “Do No Evil” Google is totally algorithm driven, fair and square and that’ll apply to the error message too. Think again.

First observation is that Google support this many languages in its error message. We have no clue what many of the languages are. Aren’t you?

Then we noticed that Google treats languages differently. The first is English, of cause. The second is Japanese, um…the later ones are other languages we don’t know. But obviously it’s not in the alphabet order. I’m just wondering, what kind of algorithm brings this order, the volume of users visit Google, the economic power behind the languages, or the preference of the Google developers or managers? No clue.

15-actionscript-code-resources

Doesn’t matter you are doing Flash, Flex or AIR, you need deal with ActionScript. Here are ActionScript resources could help you being more productive, or learning Flash based fun development:

Action Script Library - A collection of code snippets for use with ActionScript.

ActionScript.org Library - A collection of over 700 scripts for you to use, a large selection of tutorials and more.

Actionscript Physics Engine - A free 2D physics engine for Actionscript 3 from MIT.

ActionStep.org - An ActionScript 2.0 open source component framework for writing to the Flash player.

Animation Package - An ActionScript library (Flash player 6 and above) with a focus on keeping file sizes down.

AS2lib.org - The AS2 library open source framework to work with Actionscript 2.

AS2Unit.org - An Actionscript 2 testing framework that lets you run repeatable tests on your classes.

Flalog.com - Tips, tricks, and tutorials for Flash and ActionScript.

FlashKit.com - Code snippets, reviews, links, over 1,000 tutorials.

Flashtica.com - A designer-oriented site with open source scripts and links to lots of resources.

GoToAndLearn.com - A site with very in-depth video tutorials on various aspects of Flash.

Jim’s Flash Bestiary - A collection of small Flash movies with accompanying source code to learn from.

Kirupa.com Tutorials - An extensive collection of tutorials on just about every conceivable aspect of Flash.

OneFlex.org Codes - A site for people to post and share code snippets for ActionScript and MXML.

OSFlash.org - A home for open source Flash projects that any registered member can contribute to.

Smart Webby Flash Tutorials - A collection of tutorials for Flash for beginner to advanced developers.

TutorialOutpost Flash Lessons - A huge collection of tutorials on many aspects of the Flash program.

sun-javafx-demo-comparing-to-flash

Sun’s JavaFX is out. Now what? It’s time to figure out how well the technology comparing to others such as Flash, AJAX and Silverlight. I think AJAX is out of picture because AJAX is not visual tool at all, even though Sun hinted JavaFX is a AJAX killer. Really they are aftering Flash.

There are not whole lot JavaFX demos out there. One is from javaFX site. It’s JFX recreation of Motorola’s StudioMoto web site, which is running with Flash. That’ll be very good comparing point actually.

To start a JavaFX application is as easy as starting Apollo application, just click the jnlp file link. The java jnlp file is recognized by Java Web Start, sun’s java application distribution tool. The runtime is, you guessed right, the JRE (1.5 or up.)

Once it’s started, it looks just like a regular desktop application. In the demo description, they mentioned to look at the mouse over effect on the top. Did that and looks ok.

Now, if you go to the original StudioMoto web site, and do a mouse over, I bet you will find out the Flash mouse over is much smoother.

Um…I think I’ll just stop here before making any judgement. We have more time to figure out how JavaFx fits into the RIA world.

simply-another-flash-photo-gallery

As a eye candy, here is simply another Flash Photo Gallery. There Flash is not that fancy and colorful like we’ve be seeing here. I just enjoy the photos and the beauties.

flex-file-upload-project-starter

So far, the only thing stops me fully embracing Flex is its lack of file upload capability. The example provided by Macromedia is not that exciting. So, let me try to come up something can be used in a real project.

Utilizing the same concept, by using Flash’s LocalConnection class, I made a starter Flex application. To make it easier to try out, I simulate the actual uploading part, the part web server receives files and do something. File handling are server side are low-tech now for web application. I’d like the starter application can be run without server side file handling so that whoever is interested it can easily try it out, as long as you have a Flex server.

Get the Flex File Upload Project Starter Files from here.
The design goals are:

Try to avoid iframe and frame
Try to simulate window app style file selection and upload
Support virtually all browsers and platform
Use a Flash as communication media instead of a Flex one to reduce server side compiling
Reduce or remove static files
Eventually make it a Flex/Flsh component ( is this too high for a goal?)
Adobe/Macrobedia opens up file upload before I finishing this, yahoo!!
I’ll add more goals later and explain the current implementation at next post.

Give it try. To play with it, once unzip and drop everything to a Flex app area, just call the jsp file fileUpload.jsp and see what’ll happen.

cant-believe-those-are-java-applets

I’ve spent half hour playing these visual effect pages. I just can’t believe those are good old Java Applets. They kinda changed my view towards the sister technology JavaFX. The effects are actually quite simple, I’m sure the mathematic model behind them won’t be too complicate. It just I’ve never seen Java applets can do things like those, which we are very familiar with Flash people. I would suggest you play those and get a hang of it on how to control the draws. Then you can get creative to start drawing some very pretty stuffs.

Look for the big Next button at the bottom of the page to move to next effects. There are different variations. Also you could find more stuffs if go to the main site, Eigelb, apparently owned by designer and programmer Paul Schmidinger in Austria. You don’t run into Java visual designer very often.

10-flex-and-ruby-on-rails-integration-examples

love RIA technologies and Ruby on Rails. I always think combination of the these two could be greatest system framework. I’m glad Adobe recognizes that too, so do a few great guys. Here are the examples:

Integrating Flex 2 and Ruby on Rails
This Adobe article was written by Derek Wischusen from flexonrails.net. This is a full example writing including all the source code and the details on how it works. Very good start point to understand the beauty and power of the dual, Flex and Ruby on Rails.

When using Flex you have several options to choose from for back-end server software. So why might you want to choose Rails? Ruby on Rails, like Flex, is a well thought out, elegantly simple framework. As you will see, Rails uses code generation and metaprogramming to make it incredibly easy to integrate with a database using almost no SQL code. Furthermore, when you use Rails, you also get to use Ruby, a programming language that is both extremely powerful and easy to use. Using Flex and Ruby on Rails, you will be able to get more done with less code.

Flex + Rails + Ruby = RIA Nirvana.

I can’t agree more.

Combining the Power of Flex2 and Ruby on Rails
This is a combination of both vediocast and podcast. It’s a interesting way of delivering technology content itself. I’m not it’s good way of getting hand on something but rather a entertainment of learning to love a piece of great technology.

RubyOnRails and Flex
Stuart Eccles from liverail.com posted the mini serial article on the integration of Ruby on Rails and Flex. Here they are, Part 1 — Part 2 — Part 2 Extra Time. Just remind you they are not some quick blog posts. Those are lengthy technical details step by step. If you know both technologies, you’d love these. Thank you!

Flex On Ruby on Rails
Automating the communication between the client and server. It’s written by Harris Reynolds. The server technology it used is WebORB by Midnight Coders (www.themidnightcoders.com). This WebORB approach is somewhat different because the server side has been handled by not just spiting out XML, rather, a more robust engine. If you are considering a big scale serious application, this could be solution for you.

Flex for Rails Developers
If you are looking for a Flex + Ruby community, then http://flex.org/ruby is the place. The greatest part of this community is that you can pick up a bunch of components for your Flex Ruby experiment.

Flexible Rails
Peter Armstrong’s Flexible Rails is a site that prompts his ebook, Flexible Rails, which costs $20. Besides the book, there are good amount of information and sources relate to Flex and Rails.

RailsLog Visualizer
I’ve mentioned this couple of times, only because this tool is still evolving, now on Adobe AIR too. Well, it’s not really integrating with Rails, however, it’s close to Rails enough to be listed here.

RESTFul Rails from Flex
If you have no idea what RESTFul means, then you probably is not in the Rails camp. In that case, you might know what DRY means either. But never mind, this article will help you some. It’s not long but very very thoughtful approach for Flex and Rails integration.

Adobe Flex SDK for Rails
Yes, Adobe is still very trendy and hype and it does Rails too with Flex. They put it open source on Google Code.

WebORB for Ruby on Rails
WebORB for Rails is server-side technology enabling connectivity between Flex and Flash Remoting clients and Ruby on Rails applications. WebORB for Rails can be installed as a plugin into any Rails application to expose Ruby classes as remote services. The product provides a complete implementation of the Adobe’s AMF0 and AMF3 messaging protocols and thus supports any Flash Remoting or Flex client. This is a very serous product that you can take it as great solution for a real application.

Here are a few articles from them: Invoking Ruby objects with .

RubyAMF
People doing Flash might familiar with AMFPHP, the open source Flash Remote framework allows Flash or Flex communicate with PHP backend. RubyAMF does the same thing for Ruby. Like WebORB, it’s not directly involved with Rails but it provides the fundamental building block to enable high performance Flex Rails integration, beyond XML messaging.

three-ruby-on-rails-file-upload-plugins-reviewed

Hardly any web application this day won’t need file upload, mainly for all the media types, photos and videos. When using framework like Ruby on Rails, there are all kinds of plugins you can pick to speed up your development. For example, file upload, there are three major ones available. Which one you should go for? It’s actually a question harder than you thought.

These three file upload plugins are Acts As Attachment, File Column Plugin and FlexImage. The last one has nothing to do Flex, just you know. Before I start the review and comparison, I’d like say Ruby on Rails is great but documents from Ruby on Rails developers suck!

They all use RMagick to resize uploaded image and create multiple versions in different sizes.


Acts As Attachment

Written by Rick Olson, member of Ruby on Rails Core Team. It’s a very complete RoR plugin, in terms of testing and well structured code.

What I like:

The generator comes with it can generate model with metadata such as file size, content type, height and width, etc. The data will be populated at creation time automatically. The data structure also trace the relationship between main image and the thumbnail image via self reference attribute parent_id, a defaulting attribute name for RoR to allow out of box Acts As Tree behavior.
It allows you store file in file system or database blob, with reasonable default filesystem directory structure, to RAILS_ROOT/public/my_models/5/blah.jpg.
What I don’t like:

Have to read the source code to figure out how the file get stored. There is no way to configure the file storage place to be flexible. Some model method such public_filename has to be overwritten to make flexible location available.
File attachment validation is flicky.
File Column Plugin

The oldest and most used file upload plugin.

What I like:

There are ways to set custom file storage location. Good. You can do callback function at :store_dir option to make it fits exactly how you want the file get stored. The reason I’m asking for file storage flexibility is that once you know how to get file uploaded, uploading is trivial, however, managing files are big deal when you do expect large amount of files.
It provides view helper to generate image url for viewing.
Many RoR developers use it and provide feedback. Easier to find hacks or modifications.
FlexImage

This is relatively newer file upload plugin for RoR. It has build-in features to provide special effects on the image you present, via RMagick. It’s cool when you first see it and use it.

What I like:

The build-in special image overlays. It’ll help you branding your data.
It’s super easy to store image into BLOB column and retrieve it. Along with page caching, it could be great file management solution, if you like store file in DB.
What I don’t like:

Once file gets store, there is no metadata information. By default, your file name becomes the id.jpg. The original file name is not preserved unless you code something around this plugin, not very DRY.
No flexible way of store file into filesystem under custom directories. All files, if use file system, will be stored in one place. It’s practically unrealistic for site deal with lots of uploads.
We’ve been using FlexImage. Now I think we’ll switch back to File Column Plugin. As I mentioned earlier, uploading file is not a big deal once you get it works. You like to have the flexibility to efficiently manage the files on your server. Especially when you are expecting large amount of files coming in, when a more robust distributed file storage is under consideration, you really want to put the files to the right place earlier on. Another big challenge imposed to the site design is that file system or DB BLOB? I like file system but I’m sure there is good cases that DB BLOB works better.

9-flex-file-upload-examples-visited

As I recall, before Flex 2.0, the most wanted feature from Flex was File Upload. I still think the most significant improvement at Flex 2.0 is the file upload capability. So is it easy to do file upload with Flex now? Here I found some Flex file upload resources just in case you need them (I’m sure you will).

Flex File Upload Component
You can view the demo here. It’s small yet working Flex upload app. the original piece is here. They did a decent job to get upload going. Of cause once you started, in a real world project, you might need a lot more functions such as multiple file selection, etc.

Flex File Upload with PHP
The same guys did the above Flex File Upload Component did this. Sometime people forgot the one important part of the file upload equation is the receiving part. This one explains the sever part using PHP to handle uploaded file.

Flash 8 File Upload Download
As we know the Flex Upload is actually use the Flash 8 FileReference object to do the work. The guy who is writing the book ‘Flash 8 Upgrade Essentials’ provided a very detail demo showing how the upload is done within Flash 8. It gives you a good insight on what’s under the hood of Flex file handling.

Multiple Flex File Upload with ColdFusion
This is another good Flex file upload example that handles both client and server ends. The server side is ColdFusion, which is very familiar to lots of Coldfusion-turned Flex developers. I think lots of people use the one as prototype and tailor it fit into their own project. If you are in a ColdFusion shop, this is an excellent start point to deal with file upload issues.

Flex 2 and FileReference API
This is the classic article from Adobe to learn the Flex File Upload. I would recommend everybody interested in the come up with a fancy Flex file upload component needs have a good understanding the guts of the FileReference API.

Drag and Drop Flex File Upload with Ruby on Rails
You should know by now this is my favorite solution. This is the best so far I’ve encountered. It’s actually using Flex 3 and Adobe AIR (I start disliking the name). The server side is using the Ruby on Rails gem Merb to handle the received files. All the details are there and is just fascinating to see Flex/AIR works with RoR.

Flex Word Processor Beats Big Lague

The list of online players that offer office software is getting very long, from Google (Google Pack), Sun OpenOffice, IBM’s latest Lotus based and bunch of other startups such as Sohu. The goal is all the same, challenging Microsoft’s domination on the office space, while Microsoft starts defending the turf with office live products. Now, seems Adobe determined to join the big league too, with the purchase of the well hyped Flex based web word processor, Buzzword. I tried Buzzword and LOVE IT!

Simplicity and fully functional are the two major factors that make Buzzword a winner. Registration is extremely easier, even without email verification you can immediately start using it. If you can use Microsoft Word, you can use it straight out of box without any learning or seeking, even though the UI is different.

The most important, ALL the functions I use everyday with Word are all here, while ALL other functions that I don’t use are not here at all. It’s like no more no less, just perfect, in term of functionality. This approach goes to other areas too, for example, it can only open Word document, which is 90% good enough for 90% of word processor users and 100% OK with me. I know, even me at this moment, have the urge to say, why not support PDF, why not HTML, etc… but truly, why bother!

There aren’t elaborated social network features. You do can share the authored document by sending the link to others via email with role as Co-author, Reviewer or Reader. Basic and sufficient.

Even though I love Buzzword as it is now, I know as piece of software the feature set will grow overtime regardless. Somehow that’s how the software world works. For now, let’s just enjoy the young and lean tool.

Flex Getting More Social

Social media is becoming the next (or current) frontier of technology and new business battle ground. Put those well known figures (facebook, myspace, yadayada) aside, Adobe Flex has been chosen more and more as the social network building block. I’ve introduced one a few days ago. Here is another one jumps into the social graph pit, intronetworks, a Flex social application.

I should say Intronetworks is quite interesting and unique in some aspects. It’s not a complete social network yet but it shows some potential as a Flex RIA web system. Among the six basic elements of a social network (profile, friends, action stream, applications, groups and networks), the user profile is very important. Intronetworks does a extremely good job collecting profile information and it does it in a way that is very creative. It starts with picking keywords from four areas, My Buzzwords, I Am, I Value and I Seek. then it shows a circle graph that illustrate how your profile relate to others in the system. It’s very visual so that you can immediately identify that there are couple of people out there who are just like you. From the circular graph you can view the profile of others by clicking their pins. You have to see it to feel it.

There are more questions later on to build your profile and they are all very interesting and easy to offer your input. In general, I’ll avoid typing in anything. With this one, you don’t have to do those typing and before you know it, there are lots about you getting into the system already.

Most of the social network elements are not there yet. But I’m really interested to see how they will go from here.

LFPUG Xmas Piss Up

Big thanks to Richard Leggett and Elmer Zinkhann for their presentations last month. Both their videos are now online.

No meeting this month, instead we shall celebrate this merry time of the year with a drink.

LFPUG Xmas Piss Up

TODO/FIXME Extension for Flex Builder

I’ve been waiting for this for ages!!

Dirk’s post is titled, ‘TODO/FIXME extension for Flex Builder 2′, but it also works a treat in FB 3.0 too.

Thanks!

flex 3.0 StyleProxy

It was when developing the PositionedTabNavigator that I first came across StyleProxy and there seemed to be very little information on it.

Doug just sent me a link to a post by Joan Lafferty, titled Upcoming Changes to Flex Styles (codename:Moxie). This is a much better approach to styling, but also worth a read so you understand why your application may look different in Flex 3.0.

PositionedTabNavigator

One of the limitations of the default TabNavigator in the Flex 3.0 framework is that it still only allows for tabs at the top of the component, either aligned on the left, right or in the center by applying the style “horizontalAlign”.

PositionedTabNavigator removes the “horizontalAlign” style, but lets you specify where you want the tabs using the style “tabPosition”.

Valid values are: topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight, leftTop, leftMiddle, leftBottom, rightTop, rightMiddle and rightBottom.

You can also fine tune the tabs position using the style “tabOffset”, as you can with TabNavigator.

A new TabBar was required where a position can be set so knows how to render the tabs. PositionedTabBar takes care of this, and sets its “direction” property automatically when its “position” styles is set. An instance of this in action is included in the example below.

Value values are: top, bottom, left and right.

PositionedTabSkin also checks the “position” style which is set on each PositionTab, and draws the tab with the correct rotation. PositionedTabSkin follows the Halo skin theme.

PositionedTabNavigatorExample (right click for source).

Please post any bugs in the comments and I will do my best to fix them.

This entry was posted on Monday, November 26th, 2007 at 9:15 pm and is filed under Flex 3.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Free Online Flex Training

Adobe has partnered with Total Training™ to offer free online Adobe® Flex™ training for 30 days. The video training features Adobe Flex team veteran James Talbot and Adobe Certified Master Instructor Leo Schuman. This limited-time promotion runs until December 31, 2007.

More Info

This entry was posted on Wednesday, November 21st, 2007 at 1:39 pm and is filed under Flex 2.0, Flex 3.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

London Flash Platform User Group November 2007

Big thanks to Karsten Schmidt and Zoltan Csaki (go buy a t-shirt) for their presentaions last month presentaions last month. Both last months presentations are online in the presentations category over at LFPUG.

This month will be our last meeting of the year with presentations (piss up only in December), and the venue also has a new ‘bright’ projector.

Up first Richard Leggett doing his session from FOTB, ‘Touching the Future’, and following him Elmer Zinkhann doing a session on ‘Collaboration in Education’.

We’ll also be raffling some Adobe ‘Flash on the Beach’ T-shirts and Essential ActionScript 3.0 books donated by Adobe.

Seamless Animated Skins in Flex

In Joey Lotts session on styling Flex at FOTB (where he did a great job), one of the attendees asked about animated skins.

There’s obviously many ways to approach this but I thought I’d do an example of how you can have seamless transitions between these states using frame labels inside the symbol in Flash, and by adding code using addFrameScript().

AnimatedSkinExample (right click for source)

GingerbreadMan skins are going to be all the rage in Flex 3.0 .

The animation for this skin was found on Flashkit.

10 Flex and Ruby on Rails Integration Examples

I love RIA technologies and Ruby on Rails. I always think combination of the these two could be greatest system framework. I’m glad Adobe recognizes that too, so do a few great guys. Here are the examples:

Integrating Flex 2 and Ruby on Rails
This Adobe article was written by Derek Wischusen from flexonrails.net. This is a full example writing including all the source code and the details on how it works. Very good start point to understand the beauty and power of the dual, Flex and Ruby on Rails.

When using Flex you have several options to choose from for back-end server software. So why might you want to choose Rails? Ruby on Rails, like Flex, is a well thought out, elegantly simple framework. As you will see, Rails uses code generation and metaprogramming to make it incredibly easy to integrate with a database using almost no SQL code. Furthermore, when you use Rails, you also get to use Ruby, a programming language that is both extremely powerful and easy to use. Using Flex and Ruby on Rails, you will be able to get more done with less code.

Flex + Rails + Ruby = RIA Nirvana.

I can’t agree more.

Combining the Power of Flex2 and Ruby on Rails
This is a combination of both vediocast and podcast. It’s a interesting way of delivering technology content itself. I’m not it’s good way of getting hand on something but rather a entertainment of learning to love a piece of great technology.

RubyOnRails and Flex
Stuart Eccles from liverail.com posted the mini serial article on the integration of Ruby on Rails and Flex. Here they are, Part 1 — Part 2 — Part 2 Extra Time. Just remind you they are not some quick blog posts. Those are lengthy technical details step by step. If you know both technologies, you’d love these. Thank you!

Flex On Ruby on Rails
Automating the communication between the client and server. It’s written by Harris Reynolds. The server technology it used is WebORB by Midnight Coders (www.themidnightcoders.com). This WebORB approach is somewhat different because the server side has been handled by not just spiting out XML, rather, a more robust engine. If you are considering a big scale serious application, this could be solution for you.

Flex for Rails Developers
If you are looking for a Flex + Ruby community, then http://flex.org/ruby is the place. The greatest part of this community is that you can pick up a bunch of components for your Flex Ruby experiment.

Flexible Rails
Peter Armstrong’s Flexible Rails is a site that prompts his ebook, Flexible Rails, which costs $20. Besides the book, there are good amount of information and sources relate to Flex and Rails.

RailsLog Visualizer
I’ve mentioned this couple of times, only because this tool is still evolving, now on Adobe AIR too. Well, it’s not really integrating with Rails, however, it’s close to Rails enough to be listed here.

RESTFul Rails from Flex
If you have no idea what RESTFul means, then you probably is not in the Rails camp. In that case, you might know what DRY means either. But never mind, this article will help you some. It’s not long but very very thoughtful approach for Flex and Rails integration.

Adobe Flex SDK for Rails
Yes, Adobe is still very trendy and hype and it does Rails too with Flex. They put it open source on Google Code.

WebORB for Ruby on Rails
WebORB for Rails is server-side technology enabling connectivity between Flex and Flash Remoting clients and Ruby on Rails applications. WebORB for Rails can be installed as a plugin into any Rails application to expose Ruby classes as remote services. The product provides a complete implementation of the Adobe’s AMF0 and AMF3 messaging protocols and thus supports any Flash Remoting or Flex client. This is a very serous product that you can take it as great solution for a real application.

Here are a few articles from them: Invoking Ruby objects with .

RubyAMF
People doing Flash might familiar with AMFPHP, the open source Flash Remote framework allows Flash or Flex communicate with PHP backend. RubyAMF does the same thing for Ruby. Like WebORB, it’s not directly involved with Rails but it provides the fundamental building block to enable high performance Flex Rails integration, beyond XML messaging.

Flashing Flex Talk and Examples

As promissed in my session at FOTB here is the presentation and the examples that featured in it (right click for source). Any questions, please post in the comments and I will do my best to answer them.

Flashing Flex
As Flex/AIR becomes increasingly popular, its becoming more important for applications to look and feel less like the default produced by the framework.

The ability to implement custom designs and transitions is an ever growing request by clients, and knowing the best approach to achieve the desired result is key.

This session will take a look at the various ways this can be achieved providing information on styling, skinning, preloading, and transitions.

Flex is Flash. Release the inner devigner!

Presentation

Preloader Example
Styling Example
Programmatic Skinning Example
Flash Skinning Example
Custom Styles Example
Custom Skin Example
Move Example
Flip Example (this post may also be interesting)

I do hope that people found the presentation useful, and although we didn’t have time in the hour slot available to look at all the code in great detail, making the code available so that you can go through it in your own time will help out people who attended. You’ll need flex Builder 3.0 to run the files.

Yet again this year FOTB was a blast and I’d like thank John Davey, all the other speakers and everyone who attended.


One of the things that did come across at the conference was how many people felt that AS 3.0 was too big a step and much more complicated than AS 2.0. I’m not really sure about how that can be resolved. The technical sessions were always less attended than the creative/inspiring session which doesn’t really make sense if people need to learn AS 3.0 and are struggling. I think its more about people aren’t not giving AS 3.0 a chance. It’s easier to me entertained than to try to learn something. Also to learn somthing you to have a decent crack at it, like we all had to do to learn AS in the first place. I think most will find that AS 3.0 will slip into place if they just give it a good go.

I also noticed that most of the creative/inspiring presenters were pretty much against Flex, most having little dig at it, yet none of the technical presenters had a dig at the creative stuff. Most of the creative/inspiring presenters advise people should do more experimentation ‘like we used to’ as if they feel somewhat threatened by Flex, yet the confence in itself had very few Flex sessions and definitaly a more creative overtone. The market for people who can build well structure sites and applications far outweighs the experimental/installation market, and putting the audience off from looking in this direction is not great advice.

For those that attended the techinal sessions and didn’t find them exciting, they weren’t meant to be. They were there to learn from, and learning is the key to lots of locked doors in front of you.

There was also a guy I was speaking to Tuesday evening very drunk but we never manage to get to the point. I did see him briefly a couple of times on the Wednesday, but was busy trying to sort things out. Sorry I can’t remember your name, but if that was you, please get in touch by leaving a comment.

Here’s to next year, and hopefully I’ll be back on the list to speak again.

Flex 3.0 Overview

Welcome to the Adobe® Flex™ 3 Beta 3 release!

Adobe Flex 3 was formerly known as the Moxie release.

NOTE: Beta 3 is the final preview of the Flex 3 release. Please try out this beta and if you find bugs, please report them to the public bugbase (http://bugs.adobe.com/flex).

Adobe® Flex™ Builder™ 3 is Adobe's professional Flex IDE built on Eclipse™. It can run either as a standalone tool or as a plug-in to an existing Eclipse installation. Flex SDK includes the Flex framework (also known as the Flex class library), Flex command-line compilers, Adobe AIR™ framework, Adobe AIR command-line compilers, the Flex debugger, the ASDoc utility, and the debugger version of Flash Player. Use Flex SDK to develop, compile, and deploy Flex applications that connect to XML and SOAP web services with no additional charges or server licensing required. This release also includes Data Visualization features (formerly Flex Charting).

NOTE: Flex Builder 3 automatically installs a copy of Flex SDK 3. It also includes a copy of Flex SDK 2.0.1 as part of its support for multiple Flex SDKs.

WARNING: Do not install Flex Builder 3 Beta 3 on top of an existing installation of Flex Builder 2 or a previous Beta version of Flex Builder 3. In particular, do not install the plug-in version of Flex Builder 3 Beta 3 into an Eclipse installation that is already running the plug-in version of Flex Builder 2.

Flex 3.0 System requirements

These are the configurations tested for this beta release. Others may be added at a later date.

NOTE: Flex 3 applications will run on any version of Flash Player 9, although size optimization through signed RSLs is only supported on Flash Player 9 (Version: 9,0,60,235) or later. Flex 3 Beta 3 includes the Adobe Flash Player 9 Update 3 (9.0.115.0) debug players.

[edit]Flex Builder 3 for Windows
Intel® Pentium® 4 processor
1GB of RAM recommended
Microsoft® Windows® XP (with Service Pack 2)
Microsoft Vista™ Home Premium or higher
500MB (Stand alone) and 500 MB (Plug-in) of available hard-disk space to install
Java™ Virtual Machine: Sun® JRE 1.4.2, Sun JRE 1.5 (included), IBM® JRE 1.5, Sun JRE 1.6
Eclipse 3.2.2 or higher for Plug-in install (Eclipse 3.3 recommended for Windows Vista)
New Flex Builder 3 projects create applications that require users to have Flash Player 9 (9.0.30) or higher. You can change this to an earlier version of Player 9 in the Flex Compiler section of your project's Properties.
BEA Workshop 10.1
IBM Rational Software Architect 7.0.0.3 (Eclipse 3.3 plug-in configuration only). Known issue: There is a conflict between the version of Xerces that Flex uses and the one that is included with the IBM JVM. In order to use the IBM JVM 1.4.2 with the Flex command-line compilers you need to make sure that the VM loads the version of Xerces supplied with Flex instead of the one in the IBM JVM. For more information on this issue, review this TechNote.
[edit]Flex Builder 3 for Mac OS X
G4 1.25GHz PowerPC or Intel-based Mac
OS X 10.4.7 through 10.4.10, OS X 10.5.x
1GB of RAM recommended
500 MB of available hard-disk space to install
Java Virtual Machine: JRE 1.5 or JRE 1.6 from Apple®
Eclipse 3.2.2 or higher for Plug-in install
New Flex Builder 3 projects create applications that require users to have Flash Player 9 (9.0.30) or higher. You can change this to an earlier version of Player 9 in the Flex Compiler section of your project's Properties.
[edit]Flex 3 SDK
Windows 2000 Server, XP, or Server 2003 (x86, x64 compiler only)
Mac OS X 10.4.x, Mac OS X 10.5.x, Java 1.5
Java 1.6 (Sun), Java 1.5 (Sun) or Java 1.4.2 (Sun, IBM, or BEA)
Red Hat® Enterprise Linux® 3 or 4, SUSE™ Enterprise 10, Java 1.4 (Sun, IBM, or BEA) or 1.5 (Sun) (x86)
Solaris™ SPARC® 9, 10, Java 1.4.2, 1.5, 1.6 (Sun) Compilers only
512MB of RAM, 1GB recommended
200MB of free disk space

Flex 3 SDK

Windows 2000 Server, XP, or Server 2003 (x86, x64 compiler only)
Mac OS X 10.4.x, Mac OS X 10.5.x, Java 1.5
Java 1.6 (Sun), Java 1.5 (Sun) or Java 1.4.2 (Sun, IBM, or BEA)
Red Hat® Enterprise Linux® 3 or 4, SUSE™ Enterprise 10, Java 1.4 (Sun, IBM, or BEA) or 1.5 (Sun) (x86)
Solaris™ SPARC® 9, 10, Java 1.4.2, 1.5, 1.6 (Sun) Compilers only
512MB of RAM, 1GB recommended
200MB of free disk space
[edit]

Installation Instructions, Installing Flex Builder 3 Beta 3

This release contains the following versions of Flex Builder:

Stand-alone Flex Builder IDE (built on Eclipse)
Flex Builder Eclipse Plug-in
Additionally, both the Stand-alone and Plug-in versions of Flex Builder now contain two Flex SDKs; Flex 3 (Beta 3) and Flex 2.0.1 Hotfix 3.
NOTE: You can run Flex Builder 2.0.1 and Flex Builder 3 Beta 3 on the same system. You do not have to uninstall Flex Builder 2.0.1.

WARNING: Do not install Flex Builder 3 Beta 3 on top of an existing installation of Flex Builder 2 or a previous Beta version of the Flex Builder 3. In particular, do not install the plug-in version of Flex Builder 3 Beta 3 into an Eclipse installation that is already running the plug-in version of Flex Builder 2.

When using Flex Builder 3 Beta 3 with a workspace from a previous beta, please clean and reinitialize the workspace.

[edit]Windows:
Go to the install directory; drive:\Program Files\Adobe\Flex Builder 3, or the root of the Eclipse install directory if using the Flex Builder Plug in
Edit FlexBuilder.ini or Eclipse.ini in a text editor
Add the following to the top of the file (not the bottom)
-clean
Launch Flex Builder or Eclipse
Remove –clean after exiting Flex Builder or Eclipse
[edit]OS X:
Go to the install directory; /Applications/Adobe Flex Builder 3, or the root of the Eclipse install directory if using the Flex Builder Plug in
Right click on the Flex Builder application or Eclipse application and choose Show Package Contents
Open Contents > MacOS
Edit FlexBuilder.ini or Eclipse.ini in a text editor
Add the following to the top of the file (not the bottom)
–clean
Launch Flex Builder or Eclipse
Remove –clean after exiting Flex Builder or Eclipse
[edit]Installing Flex Builder stand-alone
To install Flex Builder on Windows:

The default location of the installation directory for Flex Builder stand-alone is C:\Program Files\Adobe\Flex Builder 3.

Prior to installing, remove any prerelease versions of Flex Builder 3 (Moxie).
Download Flex Builder Win SA from the Adobe Labs site.
Open or double-click the installer executable file.
Accept the license agreement and follow the prompts.
By default, the debugging version of the Flash Player 9 browser plug-in is selected for installation.
The debugging version of Flash Player is Flash Player 9 (9.0.115.0)
This version is required for viewing and debugging applications developed with Adobe Flex Builder.
You must select separate installs of the Flash Player plug-in for Internet Explorer and for Firefox and Netscape browsers.
(Optional) You can select the following to install:
ColdFusion Extensions for Flex Builder
JSEclipse - JavaScript plug-in (not available in Japanese)
Follow the prompts to complete the installation.
Review the Release Notes.
Start Flex Builder using its shortcut in the Start menu under Adobe.
When prompted choose the Trial option.
To install Flex Builder on Mac OS X:

Prior to installing, remove any prerelease versions of Flex Builder 3 (Moxie).
Download Flex Builder Mac SA from the Adobe Labs site.
Open or double-click the installer DMG file. The installer image will be mounted.
Open or double-click the installer application to begin the Flex Builder installation process.
Accept the license agreement and follow the prompts.
By default, the debugging version of the Flash Player 9 browser plug-in is selected for installation.
The debugging version of Flash Player is Flash Player 9 (9.0.115.0)
This version is required for viewing and debugging applications developed with Adobe Flex Builder.
(Optional) You can select the following to install:
ColdFusion Extensions for Flex Builder
JSEclipse - JavaScript plug-in (not available in Japanese)
Follow the prompts to complete the installation.
Review the Release Notes.
To start Flex Builder, locate and double-click the executable file in /Applications/Adobe Flex Builder 3.
When prompted choose the Trial option.
[edit]Installing Flex Builder plug-in
NOTE: Flex Builder is only supported on Eclipse 3.2.2 or Eclipse 3.3.

WARNING: Do not install the plug-in version of Flex Builder 3 Beta 3 into an Eclipse installation that is already running the plug-in version of Flex Builder 2.

To install the Flex Builder Eclipse plug-in on Windows:

Prior to installing, remove any prerelease versions of Flex Builder 3 (Moxie).
Download Flex Builder Win plugin from the Adobe Labs site.
Open or double-click the installer executable file. Accept the license agreement and follow the prompts.
By default, the debugging version of the Flash Player 9 browser plug-in is selected for installation.
The debugging version of Flash Player is Flash Player 9 (9.0.115.0)
This version is required for viewing and debugging applications developed with Adobe Flex Builder.
You must select separate installs of the Flash Player plug-in for Internet Explorer and for Firefox and Netscape browsers.
(Optional) You can select the following to install:
ColdFusion Extensions for Flex Builder
JSEclipse - JavaScript plug-in (not available in Japanese)
Follow the prompts to complete the installation.
Review the Release Notes.
Start Flex Builder using its shortcut in the Start Menu under Adobe.
When prompted choose the Trial option.

NOTE: You must create a new workspace before beginning. Select File > Switch Workspace from the menu bar and enter a new directory name. If the directory does not exist, Eclipse creates it.

To install the Flex Builder Eclipse plug-in on Mac OS X:

Prior to installing, remove any prerelease versions of Flex Builder 3 (Moxie).
Download Flex Builder Mac plugin from the Adobe Labs site.
Open or double-click the installer DMG file. The installer image will be mounted.
Open or double-click the installer app to begin the Flex Builder installation process.
When prompted select the existing Eclipse installation directory.
Accept the license agreement and follow the prompts.
By default, the debugging version of the Flash Player 9 browser plug-in is selected for installation.
The debugging version of Flash Player is Flash Player 9 (9.0.115.0)
This version is required for viewing and debugging applications developed with Adobe Flex Builder.
(Optional) You can select the following to install:
ColdFusion Extensions for Flex Builder
JSEclipse - JavaScript plug-in (not available in Japanese)
Follow the prompts to complete the installation.
Review the Release Notes.
To start Flex Builder, locate and double-click the executable file in /Applications/Adobe Flex Builder 3.
When prompted choose the Trial option.
NOTE: You must create a new workspace before beginning. Select File > Switch Workspace from the menu bar and enter a new folder name. If the folder doesn't exist, Eclipse creates it.

Flex 3.0 Installing and Configuring Flex Automated Testing

To use Flex Automated Testing, you must install Flex Builder 3. You cannot use Flex Automated Testing with only the Flex 3 SDK.

Flex Automated Testing SWC files are installed by default with Flex Builder 3. They are located in the /frameworks/libs directory with the other SWC files. You can begin using Flex Automated Testing and build your own custom agents without any further installation.

To use run-time automated testing (recommended):

Open a command prompt.
Navigate to the flex_builder_root/sdks/3.0.0/templates/automation-runtimeloading-files directory.
Execute the build.bat file. This compiles the runtimeloading.mxml file into a SWF file.
Copy the runtimeloading.swf and RunTimeLoading.html file to your web server. Copy the Flex application that you want to test to this server as well (the application need not be compiled with automation libraries).
Request the RunTimeLoading.html file and pass your Flex application as the automationswfurl query string parameter; for example:
http://localhost/RunTimeLoading.html?automationswfurl=MyApp.swf
To compile your applications with static automation support:

Start Flex Builder.
Create a new Flex Project.
Select your new Flex project in the Navigator.
Select Project > Properties > Flex Compiler.
In the "Additional compiler arguments" field, enter the following:
-include-libraries "flex_builder_dir\sdks\3.0.0\frameworks\libs\automation.swc"
"flex_builder_dir\sdks\3.0.0\frameworks\libs\automation_agent.swc" "flex_builder_dir\sdks\3.0.0\frameworks\libs\qtp.swc"
"flex_builder_dir\sdks\3.0.0\frameworks\libs\automation_dmv.swc"
The -include-libraries compiler option is relative to the Flex Builder installation directory; the default on Windows is "C:\Program Files\Adobe\Flex Builder 3\".

6. Click the OK button to save your changes and OK to close the project Properties dialog box.
7. Compile your Flex application.
Examples and documentation for using custom agents can be found at Custom Agents.

To use Flex Automated Testing with the Flex 3 Plug-in for Mercury QuickTest Pro, you must perform additional steps. The rest of this section describes how to install and use the Flex 3 Plug-in for Mercury QuickTest Pro.

[edit]Requirements for Using the QTP Plug-in
To test applications with Flex Automated Testing and the QTP agent, you must install the following:

Mercury QuickTest Professional 9.1 or later (no support for Smart Identification)
Mercury QuickTest Professional 9.2 and patch 1701 if you want Smart Identification support
Adobe Flex 3 Plug-in for Mercury QuickTest Pro
Microsoft Internet Explorer, version 6 or later
Flash Player ActiveX control, version 9.0.28.0 or higher
[edit]Installing the Plug-in
This section describes the steps necessary for a QC testing professional to configure QTP to work with Flex applications. You must install QTP and the plug-in.

To install QTP:

Install Flash Player 9 ActiveX control (9.0.28.0 or higher) for Microsoft Internet Explorer. This is currently the only supported browser/player.
Install QTP 9.1 or later if you do not require support for Smart Identification. If you want to use Smart Identification, install QTP 9.2 and patch 1701. You must get QTP 9.1 from Mercury.
If you are using Mercury QTP on Microsoft Windows Vista you need to turn off the User Account Control (UAC) feature. Instructions to turn off UAC are available here
Restart your computer.
To install the Flex 3 Plug-in for Mercury QuickTest Pro:

Run the flex_builder_root/Installers/QTP_Plugin_Installer.exe.
Start QTP.
Close QTP.
In addition to the plug-in's DLLs and XML files, the plug-in installer includes the following in the installation directory:

/demo — Contains a Flash movie that describes the basics of using the plug-in. Be sure to enable audio on your computer.
/Uninstall Adobe Flex 3 Plug-in for Mercury QuickTest Pro — Contains the uninstaller.
[edit]Using the Plug-in
Start QTP again after installing the plug-in. The Add-in Manager lists the Flex plug-in.
Select the Flex plug-in in the Add-in Manager.
Select New > Test and click the Record button.
NOTE: Flex application testing with QTP currently supports only Microsoft Internet Explorer with the ActiveX Flash Player.

For more information on these tasks and using QTP to test Flex applications, see Testing with QTP.

For information on the operations and properties of Flex objects in QTP, see QTP Object Type Information.

[edit]Samples for Automated Testing
Sample custom agents are available at Custom Automation Agents.

An application ready for testing with QTP can be found at Flexstore AT. This sample can be used to test if the QTP plugin installation was successful.

An example for automating custom components can be found at Automating Custom Component.

[edit]Using automation with the Adobe Flex Component Kit for Flash CS3
You can create Flex controls, containers, skins, and other assets in Flash CS3 Professional, and then import those assets into your Flex application. When you want to automate an application that uses such assets, you must include the automation_flashflexkit.swc library.

If you are using run-time loading, re-compile the runtimeloading.swf file by using the build.bat file in flex_builder_root\sdks\3.0.0\templates\automation-runtimeloading-files\. The batch file includes the necessary libraries.

If you are compiling automation support into your application, add the automation_flashflexkit.swc to your include-libraries compiler option. This is in addition to the other automation SWC files. The SWC files are located in the flex_builder_root\sdks\3.0.0\frameworks\libs directory.

Flex 3.0 Uninstalling

Uninstalling Flex Builder
Uninstalling Flex Builder 3 on Windows:

Select Start > Settings > Control Panel.
Select Add or Remove Programs.
Click the Adobe Flex Builder version to uninstall (Flex Builder, Flex Builder Plug-in only).
Click the Uninstall button in the uninstaller dialog box.
Click Done.
Uninstalling Flex Builder 3 on Mac OS X:

Go to the flex_builder_root/Uninstall Adobe Flex Builder 3 folder.
Double-click "Uninstall Adobe Flex Builder 3".
Click the Uninstall button in the uninstaller dialog box.
Click Done.
[edit]Uninstalling Flash Player
If you intend to debug your applications, use the debugger version of Flash Player that is included with either Flex Builder 3 or the Flex 3 SDK. If you are currently using a previously released Flash Player, you will need to uninstall that Player before installing the new debugger version of Flash Player.

Flash Player Uninstallation Instructions

If you are using Flex Builder 3, the installer tries to uninstall your old Player before installing the appropriate debug Player.
If you are using the Flex 3 SDK or did not install the new debug Flash Player when installing Flex Builder, use the following instructions:
Windows—Internet Explorer

Due to security features in the Adobe Flash Player ActiveX Control, you must first remove all existing installations of Flash Player from your Windows system before installing prerelease versions of the Flash Player ActiveX Control. To do this:
Download the Uninstaller.
Open the Windows Command Prompt ( Run > cmd ).
Navigate to the directory where the uninstaller was downloaded to.
Execute the following command:
uninstall_flash_player.exe /clean
Windows—Plugin-based browsers

Run the appropriate uninstaller available from this TechNote.
Macintosh

Run the appropriate uninstaller available from this TechNote.
Linux

Manual removal (for users who installed the plug-in via Install script):

Delete the libflashplayer.so binary and the flashplayer.xpt file in the /home//.mozilla/plugins/ directory.
RPM removal:

As root, enter in terminal:
# rpm -e flash-plugin
Click Enter and follow the prompts.

FLEX 3.0 Usage Information

Usage documentation is available in the Flex Builder online Help, from LiveDocs, or as a ZIP file. This ZIP file includes PDF versions of the following documentation resources:

Flex topics
Flex Data Visualization Developer Guide
Developing AIR Applications with Flex
Programming ActionScript 3.0
The ZIP file also contains the following books in PDF form:

Developing AIR Applications with HTML and Ajax
Developing AIR Applications with with Adobe Flash CS3
NOTE: For information on additional Adobe AIR documentation, including information on building Ajax applications with Adobe AIR, see the AIR Release Notes

FLEX 3.0 Flash Player issues

If FlashPlayerTrust is mistakenly created as a file, the Flex profiler will crash. Please ensure FlashPlayerTrust is properly configured as a directory (bug#203879).
[edit]Documentation Issues

Flex Compatibility Issues

Adobe AIR

If you are using Flex Builder 3 with Adobe AIR, you may encounter issues not covered in these release notes. Please take time to review the AIR release notes.
Flex SDK

There are a number of Flex SDK backwards compatibility changes where you can return the behavior to Flex 2.0.1 using a new compiler argument -compatibility-version. To get the full details go to: Backwards Compatibility
The DataGrid control's rowCount and lockedRowCount properties no longer include the header.
The order of DataGrid children (such as the vertical scroll bar) has changed. This affects custom components that may have subclassed the DataGrid control and used the getChildAt() method to manipulate various children of the DataGrid control.
The flashType CSS property has been deprecated. Components should use the advancedAntiAliasing property instead.
Flex Builder

The Query Builder included in the ColdFusion Extensions for Flex Builder is not supported on the Mac OS X platform.
Eclipse 3.2.1 is not supported on Vista.
Flex Design Extensions for CS3 are not supported on non-English OSs
With Flex Builder database wizards you can now generate sample code that will connect to your database tables through a server technology. The currently-supported platforms are:
Java using the LiveCycle Data Services 2.5 server
Java using REST(XML over HTTP) transport
PHP using REST (XML over HTTP) transport (only for MySQL)
ASP.NET (C# and VBScript) using WebServices (only for SQL Server)
Flash Player

On Mac OS X, Flash Player now looks for the mm.cfg file in your home directory(~), generally, /Users/. If one is not found, it looks for mm.cfg in /Library/Application Support/Macromedia. For previous versions of Flash Player, Flash Player ignored an mm.cfg file in your home directory /Users/. For some users with an mm.cfg in their home directory, tracing to the flashlog.txt file will not work.
Flex 2 Charting

If you have a licensed version of Flex 2 Charting and want to use those components in Flex Builder 3, you must copy your serial number from the Flex 2 license.properties file to the Flex Builder 3 license.properties file for the SDK 2.0.1. In addition, to use Flex 2 Charting with Flex Builder 3, you must select the 2.0.1 SDK when compiling your applications in Flex Builder 3.

Copy the following line from your Flex 2 Charting license.properties file and paste it into the flex_builder_root/sdks/2.0.1/frameworks/license.properties file:
charting=serial_number

Select the SDK 2.0.1 in Flex Builder 3 by selecting Project > Properties > Flex Compiler. Select the Use a Specific SDK option, and select Flex 2.0.1 Hotfix 3 from the drop-down list.
You must get a separate Flex 2 Charting serial number to use Flex 2 Charting components.
[edit]Known IssuesThis section contains a product-specific list of known issues in the Flex 3 Public beta. Flex 3 uses a public bug system (http://bugs.adobe.com/flex) and most bugs in these lists contain a link to more detail in this bug system. You can also use the public bug system to post bugs you find in the beta 3 release.

When using the public bug system, you should start by clicking on the Bug Standards / Community Process link to learn more about the bug system (be sure to check the section at the bottom). Then go back, register for your account and you should be able to view and define bugs.

[edit]Flex SDK issues
Adobe AIR Support

SDK-11066 If you try to set something on the stage before the creationComplete event from , it will throw an RTE saying you cannot access a property or method of a null object reference.
SDK-12150 and now have a visible property which you can set to false to prevent the window from showing. You no longer use the visible property setting in the application.xml file. You should set the visible property in application.xml to false so that all the layout processing can occur without redraws.
SDK-12694 PrintDataGrid does not lay out well in without an explicit width and height. The workaround is to set an explicit height and width for PrintDataGrid.
Compiler

SDK-9438 If you have a 2.0.1-style configuration file which specifies the locale, you will get an "Unexpected CDATA" error on the line that contains ja_JP. To avoid this error, change the tag to ja_JP.
Also, if you use a command line similar to mxmlc -locale ja_JP MyApp.mxml where -locale is the last option before the target file, you must change it to either mxmlc -locale=ja_JP MyApp.mxml or mxmlc -locale ja_JP -- MyApp.mxml.
SDK-12685 There is an issue where the line number of an error is completely wrong, usually beyond the end of a file. This is not a bug. The source file was probably saved in UNIX format, where line feeds/line endings are marked differently than on Windows (DOS formatting) and Mac (Mac formatting). There are trailing newline characters which the compiler correctly counts as blank lines, and some editors (like Flex Builder) display as blank lines, and other editors (like Vi) will display as control characters ("^M"). Resave your file in a DOS format to fix this (for example, copy and paste it from Notepad to Flex Builder and resave).
SDK-11629 SWC libraries can now declare what metadata the linker should preserve when linking in code from that library. When a library is used to build an application, the application preserves the union of metadata from all the libraries that contributed to the application. You can preserve the metadata by using the -keep-as3-metadata compiler option when compiling a library. The use of -keep-as3-metadata option remains unchanged from the previous release when compiling an application.
SDK-12262 Some embedded SVGs with opacity are blurry. This is an external issue where the SVG transcoder prematurely rasterizes elements with opacity, so Flash Player receives a bitmap instead of vector. Possible workarounds include:
If you do not need runtime scaling, re-encode your image in a non-vector format such as PNG.
Do not use opacity on blurry elements.
If you can import your vectors into the Flash authoring IDE as symbols, you can access the image from the SWF using @Embed.



Components

When dragging and dropping items in a DataGrid with locked rows, items may disappear or become duplicated. These issues will be fixed in the final release.
SDK-11279 Panel only officially supports the "default" borderStyle. If you use an unsupported borderStyle, use padding values or absolute positioning to place your content in the correct place.
SDK-13490 FormItemLabel has been deprecated. If you want the functionality of FormItemLabel, just use a regular Label. The recommended way to style a FormItem label is through the labelStyleName style on FormItem.
SDK-13771 After a context menu has been shown in AIR, buttons and List-classes may experience problems with dealing with rollover/rollout.
SDK-12732 Objects are not garbage collected after an explicit purge.
SDK-10969 ComboBox selection using the mouse does not work on Firefox 1.5 with Flash Player r60.
SDK-12159 DataGrid multiple selection does not work with wmode=opaque in Firefox with Flash Players r16, r28, and r47. It does work with Flash Player r60.
SDK-12155 The dropdownFactory style set in MXML for the DateField control does not get applied. To work around the issue, set the style in an tag or call setStyle() on the creationComplete event of the DateField.
SDK-11469 Line breaks do not work in attribute text. In ActionScript strings use \n for line breaks. In XML text and attribute values, use .
SDK-9452 Filter/sort on HVC is not implemented.
SDK-13552 The Masked TextInput causes a compile error because of some Flex 3 changes to enable versioning. The error is related to adding or getting an IUITextfield. To fix the error, you need to cast the textfield to a DisplayObject. (e.g. addChildAt(embedTextField,getChildIndex(DisplayObject(textField))); )
SDK-873 Launching popups from modules causes a runtime error if you do not import the shared resources in the main application. Add the following two lines to your main Application:
import mx.managers.IPopUpManager;
private var iPopUpManager:IPopUpManager;
SDK-13812 When using an embedded image with scale9Grid as the skin for a Button (or its subclasses), the label and icon positions will be adjusted by the scale9Grid values.
SDK-13807 Items disappear as you drag and drop items into the very last empty node in the Tree. This problem will be fixed in the final release.
Deep Linking

SDK-9632 Currently, deep linking support for Opera is limited. You can copy and paste a URL into Opera and the application should start in the appropriate state, but the URL is not subsequently updated with additional navigation.
SDK-9628 You cannot have a # in the setFragment() method call. It is considered an invalid fragment.
SDK-11349 To use deep linking with multiple SWF files on one HTML page, you must set the JavaScript variable BrowserHistory_multiple and make sure that the URL changes are unique to each individual SWF file.
Profiler

SDK-9421, SDK-12655, and SDK-12638 In some cases the profiler may not show any back references for loitering objects. This happens mostly for non-heap objects, like String created during ABC decoding. To investigate loitering objects without back references, refer to the allocation trace, which must be enabled via the Launch Dialog.
SDK-13616 Sometimes the profiler may create a project called "Adobe Flex Profiler" in the workspace. This project is used to assist the open source operation in the profiler if the related source files are not already open. It is safe to delete this project after profiling is complete.
SDK-13688 Performance Profiling is not supported on Mac PPC hardware
SDK-11179 If you need to change the browser preference for applications launched from Flex Profiling perspective, the preference should be changed from Windows -> Preferences -> Flex -> Profile -> Browser/Player.
SDK-11131 Concurrent profiling on Mac OS might result in Flash Player crashing.
SDK-13197 Profiler may stop working with an incorrect workspace entry in mm.cfg for PreloadSWF. To workaround this issue, first delete the contents of the mm.cfg file. Next, quit the browser in which your application was running and relaunch FlexBuilder. Finally, create a new workspace with a new project and begin profiling.

flex - Definition

Flex is an open source program designed to automatically and quickly generate scanners, also known as tokenizers, which recognize lexical patterns in text. Flex is an acronym that stands for "fast lexical analyzer generator. " It is a free alternative to Lex, the standard lexical analyzer generator in Unix-based systems. Flex was originally written in the C programming language by Vern Paxson in 1987.

Lex is proprietary but versions based on the original code are available as open source. These include not only Flex but components of OpenSolaris and Plan 9. Lexical analysis is the processing of character sequences such as source code to produce symbol sequences called tokens for use as input to other programs such as parsers.

What is Flex?

Flex to Flash is like Ajax to Javascript. It's another interface, tagg-based language, editor and approach meant to make the "Flash" people not think about Flash as a designer tool. It is Macromedia's way of pushing Flash where the $$ are.
Flex to Flash is like Ajax to JavaScript.
It's another interface, tag-based language, editor and approach meant to make the "Flash" people not think about Flash as a designer's tool.
It is Macromedia's way of pushing Flash where the $$ are.

The same thing happened with JavaScript. There are so many things you can do with it (see the new Ajax apps) that it needed another name, so that developers will not be scared away and think about some mouse trays when talking about JavaScript.


Same thing happened with the Microsoft people and their Frontpage product. The only memory I have about it is that it generates that crappy code inside my page (all absolute DIVs :O)...
Well, believe it or not, this has changed. And it has not changed yesterday, it changed some years ago (That's what one of the Frontpage managers told me at PDC at least).
And you know what? Maybe they too need to change the product name to make it competitive again, or just wait for a new generation of developers...

Degrafa for Flex in Action: SVG Tiger in MXML

Juan has posted an example showing just how complicated of graphic, Degrafa for Flex can render. In that particular example the famous cubic spline tiger was chosen as it’s a rather complex svg document. The path geometry data in that svg graphic was copied directly into Degrafa path short hand data objects, with no changes to the geometry.

Flex 2.0 Samples and Source Restored

Last night sometime during the wee hours here but peak hours for the western hemisphere, my hosts server crashed and crashed big. They had to rebuild the server and every sample app this blog points to on that server became corrupted.


I found it strange that every swf compiled sample would load up to initialization then hang. All of the sfw’s were corrupted, and only one view source zip was corrupted. Everything else on our site non Flex related came out fine.

Anyway, my apologies to all those folks that couldn’t get at the samples or the source. This morning I dug into my own backups to restore them all, so everything is restored and working now.

Related Flex Tutorials