Archive for Tour de Flex

Tour de Flex – New Mobile Development Additions

Posted in Adobe Flex, Flash Builder Burrito, Flex 4.5 Hero, Flex/AIR, Tour de Flex with tags , , , , , on January 27, 2011 by devgirl

Tour de Flex (desktop and web version) were updated today to include a new mobile section showing samples using the Flex 4.5 SDK (Hero), so be sure to check it out! There are also links to download Flash Builder Burrito (Preview), Adobe AIR Launchpad, Tour de Mobile Flex and other resources to help you get up to speed with Flex and mobile development quickly.

Each mobile sample includes tabs showing the main MXML file, the home view code (new in Flex 4.5 SDK) and a tab showing any required application descriptor updates, including required permissions for the android manifest. You can copy and paste the code directly into your Flash Builder Burrito project and run or debug it either in the emulator included with Flash Builder Burrito or on your own personal device immediately. Each of these samples can also be generated from the Adobe AIR Launchpad (free AIR application) directly into one project as well, so keep that option in mind if you would like to use multiple samples quickly!

Major Tour de Flex Updates for Flex 4!

Posted in Adobe Flex, Flex 4, Flex/AIR, Tour de Flex with tags , , , , , , , on March 22, 2010 by devgirl

If you didn’t know it already, Adobe Flex 4 and Flash Builder 4 became officially available today! As part of the launch we made some significant changes to Tour de Flex so be sure to make it a point to check it out. We released a whole new structure of samples and reworked the Flex 4 node of the tree to include all components recommended for use between the Spark and Halo namespaces to aid developers not only new to Flex 4 but in making the transition between Flex 3 and Flex 4. We’ve also included a new ‘Introduction’ tab that has some great pages from the newly updated flex.org containing some really useful information and resources. A bunch of the new samples are outlined below. Following the sample outline I have listed some other new links to check out for more great Flex resources. As always, if you have any samples you’ve built using Flex 4, please consider submitting them to either Greg Wilson or myself for Tour de Flex!

New Flex 4 Control Samples:
TextInput – Spark control that replaces the Halo TextInput and allows for a single line of rich text to be entered.
TextArea – Spark control that replaces the Halo TextArea and allows rich text to be entered, edited, selected and scrolled.
RichText – RichText is a step up from the Spark Label component in that you can display rich text with layout, but is non-interactive (not selectable or scrollable). Label is the most lightweight of the Spark text components, followed by RichText, followed by RichEditableText.
ComboBox – check out the differences between the ComboBox and the DropDownList, the ComboBox contains a TextInput so you can start typing into it to match an item whereas the DropDownList is just a Label.
RichEditableText – RichEditableText is built on the TextLayoutFramework and supports rich text and interactivity.

New Layout Samples:
TileGroup – shows the use of the Spark TileGroup which is the same as a Group with a TileLayout.
DataGroup – the DataGroup allows you to manage mixed content in a group.
HGroup/VGroup – these containers replace the HBox and VBox halo components from Flex 3 and allow you to arrange items in a group either horizontally or vertically.
SkinnableDataContainer – this sample shows how to use the skinnable version of the DataGroup.

New FXG Graphics Samples:
FXG is the Flex Graphics framework providing a declarative graphics syntax to draw in Flex and allows for interchangeability between other Adobe products such as Adobe Illustrator.
Rect – FXG primitive to draw a rectangle graphic.
Line – FXG primitive to draw a line graphic.
Ellipse – FXG primitive to draw an ellipse shape.
BitmapImage – fills a rectangular region with bitmap data drawn from a source.

New Effect Samples:
Animate Properties – shows how you can animate arbitrary properties to create some really cool animation effects using the SimpleMotionPath class. Built by my good friend and Attest cohort Dave Flatley.
AnimateShaderTransition – fun sample that shows how you can create a swap shader effect between two images.
Move3D – shows how the Move3D effect can be used to create a 3D movement of an object.
Wipe – replaces the Flex 3 Wipe effect.

New Style Samples:
DescendantSelector – shows how to use this advanced CSS to specify styles for a child in a container.
TypeClass Selector – advanced CSS to specify a type plus a class for selecting the item to style.

New Coding Techniques Samples
Using Text Layout Framework – TLF Text Editor Sample – allows you to play around with the various Text Layout Framework properties and see what capabilities are offered and programmable. My favorite thing about this editor is how you can click the ‘Export’ button and it will generate the MXML code you can use in your code, just be sure to add the namespace as needed (for instance prefix TextFlow with the s: for Spark). Oh and even better, the source code to this entire editor is included in the second tab!!

Custom Layout Samples:

  • FlowLayout – written by Evtim Georgiev from the Adobe Flex Engineering team.
  • WheelLayout (carousel effect) – another one supplied from Adobe and one to definitely check out for advanced custom layout building in Flex.
  • Animated Layout – written by Adobe’s own Christophe Coenraets showing how to create a custom layout that includes some animation.

Custom Item Renderer with Animation – a couple of fun samples written by Christophe that shows the use of custom item renderers that include animation. Perhaps we all know what Christophe’s favorite show on TV is now :). Note there are 2 samples here in tabs so don’t miss the second one!

That about sums it up. There are a few I did not list so be sure to go take a peek! Also note that some of the tree items show multiple ways to use that particular component and may contain multiple samples in tabs when you click on the item. There is a number in parentheses next to the sample in the tree as well to indicate that more than one is available.

As promised above, here are some new links to check out!

Flex 4 Resources – Samples and Links!

Posted in Adobe Flex, Flex 4 with tags , , , , on September 4, 2009 by devgirl

Today we are rolling out the first batch of new Flex 4 samples based on the recent **Flex 4 SDK (update: as of 10/1/2009, all have been updated to work with the latest version of the SDK beta 2 released at MAX). Tour de Flex had a Flex 4 Preview category previously, but the samples were based on a very early build of Flex 4 and much as changed since then so many were no longer valid.

We recently spent some time with members of the Flex 4 team in San Francisco to get an idea of what had changed, what’s coming, etc and I’ve been working on creating new samples to help show off some of the new features. Many more are in the works and will be rolled out weekly while Flex 4 is under continued development, so stay tuned for tons more!

The Flex 4 team is working hard at addressing concerns previously raised and I think people will find a lot of really cool stuff to come here. Be sure to check out the readme’s in the various categories with the samples as well as the one in the top Flex 4 Preview folder. I’ve included some very helpful links that can make the transition so much less painful if you take the time to check them out. I think it is key in overcoming the learning curve quickly. I would also highly recommend spending some time going through the source code in the Flex 4 SDK to understand the architecture better. It was a huge help to me in coming up to speed with it overall. To get the very latest SDK and docs, check here for nightly builds.

If you have specific requests for a certain sample let me know, or if you’d like to contribute a sample feel free to contact myself or Greg Wilson with the sample you’d like to add. Also, if you have any issues with any sample or questions while trying Flex 4, feel free to contact me here on my blog, twitter or email and I will see if I can help you out 🙂

Flex 4 – Useful Links

  • What’s new in Flex 4
  • Differences Between Flex 3 and Flex 4
  • Flex 4 Livedocs (may not be most current)
  • Flex Examples (Peter DeHaan)
  • What’s New and Cool in Flex 4?
  • Flex 4 Overview (InsideRIA)
  • Flex 4 Overview Slides
  • Introduction to Flex 4 Skinning
  • Skinning Components and Applications in Flex 4 – Video
  • Skinning and Components in Flex 4’s Spark Architecture
  • Flex 4 Spark Skinning Post
  • Various Skinning Examples
  • Flex 4 Effects Part 1
  • Flex 4 Effects Part 2
  • Effects in Flex 4 Video
  • Stretch and Squash Effects in Flex 4
  • Spark Layouts
  • Spark Horizontal and Vertical Layouts
  • Flex 4 and Custom Layouts
  • Flex 4 Layouts Video
  • Spark Virtualization
  • Flex 3 versus Flex 4 State Management
  • Flex 4 States Video Tutorial
  • Advanced CSS Video
  • Flex 4 CSS Namespaces
  • Flex 4 – CSS Advanced Selectors
  • FXG 1.0 Specification
  • Text Layout Framework (TLF)
  • Text Layout Framework Overview Slides
  • Linked Containers in Flex 4 using Text Layout Framework
  • I will continue to update this list. Please feel free to comment with your favorites!

    Also, please note, the Tour de Flex samples are best viewed in the AIR version of Tour de Flex. When using the web version, we recommend hitting the expand button in the top right corner to see the full sample better. Sizing issues are currently being worked on.

    LiveCycle Data Services (LCDS) Goodies added to Tour de Flex!

    Posted in Flex/AIR, LiveCycle Data Services with tags , , , , , on May 29, 2009 by devgirl

    Recently I’ve been given the opportunity to work on adding LiveCycle Data Services (LCDS) samples to Tour de Flex in an effort to help ‘de-mystify’ it for developers. In my opinion it seems that many find it a bit intimidating, at least anything beyond using HTTPService, WebService or RemoteObject anyway… I think much of this is due to the lack of information on how to use it exactly (other than the super helpful coenraets.org), the confusion about configuration, (since there are so many different XML files involved) and developers not knowing exactly how to set it up with their projects to get started with it quickly and not painfully :)! I am a great example of this myself because I remember full-well the experience I had when I needed to use it on my first project and know the frustrations that could have been avoided given the right knowledge!

    The overall goal of these samples is to help get developers started with showing off the many different features available in a simplified manner, along with explanatory text, source code (including server side), XML configuration file entries etc. I was involved in numerous discussions regarding these samples and how to best present them with Adobe Evangelists Greg Wilson, Christophe Coenraets and James Ward, and they had some really great ideas that I believe will be a huge benefit to the community of developers of all types. Some samples have already been added thus far (under top-level category Flex Data Access), and notes about them are listed in the QuickStart page that’s shown when you open Tour de Flex initially (on both the AIR and web versions). However, there are more to come, as well as some samples that highlight using Flex and LiveCycle Data Services with a back-end other than Java (PHP, ColdFusion, .NET, Ruby etc). As part of this goal, we’re hoping to solicit samples from other server side software companies showing how to use their APIs, so look for those in the near future. I’m also about to release a sample that shows how to work with Hibernate on the back-end with your Flex client using data services.

    In addition to the samples, I’ve also started writing up some summary notes to supplement them and explain some things about LCDS overall. I’m hoping these notes will help people get started quickly since they are coming from a fellow developer’s point of view who’s sorta been there, done that and will hopefully simplify things for people beyond trying to gather it from reading the very large LCDS developer’s guide :)! That post will be coming in the next week as well so please check back again soon!

    Tour de Flex – Web Version Released!

    Posted in Adobe Flex, Flex, Flex/AIR with tags , , on March 30, 2009 by devgirl

    Tour de Flex - Web Version

    Tour de Flex - Web Version

    Tour de Flex for the Web was released today! It’s hosted on the Adobe Devnet site where we also now keep the Tour de Flex AIR app download, and looks almost identical to the AIR version, minus the AIR-only samples for obvious reasons.

    The web version contains deep linking integrated into it so it’s now very easy to bookmark samples for later reference, or to email a sample to a co-worker etc… This version is also a great option for those who are new to Flex or might want to explore it, but are not ready to download the full AIR application. When they are ready to download it, all they have to do is hit the Install button at the top of the page to get it.

    I had some unique challenges in creating the web version, since we use HTML links to supply our content (in the form of SWF or HTML) for all of our tabs within the illustrations and documents, and obviously could not use the handy dandy HTML component as our AIR app used. Christophe Coenraets had been down this path before and suggested using iFrames to hold the content in the tabs, and advised on how he had done something similar, so that is the path we chose. The final result took a little bit of trickery to make the iFrames behave with the resizing of the browser window, popping up and hiding of other windows etc, due to the z-order of the iFrame always taking precedence over the Flex component, but ultimately worked! I plan to write another post about how this was done in case it may help others who need to build something like this in the future… so check back soon!

    Also, be sure to check out Greg Wilson’s blog for the rest of the info on the Tour de Flex 1.2 AIR app updates and more!

    Tour de Flex Unveiled!

    Posted in Adobe Flex, Flex/AIR with tags , , , , , , on November 21, 2008 by devgirl

    So I’ve just returned from Adobe MAX 2008 and I’m very excited about finally being able to talk about the latest and greatest application I had the pleasure of working on… Tour de Flex!

    If you haven’t already hear about it, Tour de Flex is an AIR application that allows you to explore and learn about Flex and AIR through a variety of code samples and illustrations. It includes samples for using the core SDK, as well as a bunch of 3rd party code samples from people like ILOG, Degrafa, and from the community of Flex coders like Doug McCune.  It even includes an entire category devoted to using a bunch of the ActionScript Cloud APIs to interface to things like Twitter, Flickr, eBay, Salesforce.com and many more, which I found particularly fun to work on. The really neat thing is that Tour de Flex will continue to grow with more samples since we have made it a community-friendly app where developers are encouraged to submit their own samples. Check out the project home page for more details.

    Another great part of this endeavour, was the brilliant idea James Ward had to offer a way to interface to the Tour de Flex app right from inside your IDE, so we went ahead and built a plugin for Eclipse/Flex Builder to do just that. The idea is that you can search for code samples right from your IDE and instantly grab what you need via copy/paste of the sample code back into your source code or download the sample zip right from Tour de Flex to your hard drive. I have been using this in my dev’t for a few weeks now and became even more excited about it after finding it so useful myself! I would not have been able to write this plugin so quickly without the functionality provided from the Merapi APIs. This was absolutely key in allowing us to communicate between the Eclipse/Java side and the AIR/Flex side in such a timely manner. Please refer to my latest blog article to find out more details. Also, please stay tuned for more information on the making of the Tour de Flex plugin!