Category Archives: Flex

Flex related articles

Tour de Flex is available for iPad now

Posted on by
Reply

My colleagues from the Enterprise team were busy updating the Tour de Flex application to Flex 4.6 and they have published it to Android Market and the Apple App Store.

What’s cool about this project is that it is a three-in-one type of product: you can learn how to use Flex, you can experience the performance of the Flex framework on mobile devices firsthand, and you can check the source code and learn how to build awesome mobile projects. Here is the project home page and you can get the source code from here (you’ll need Flash Builder 4.6 to import the project).

And if you’re looking for the app on the stores search fom “Game of Flex” and not Tour de Flex!

Steps to deploy a Flex and PHP application

Posted on by
14

I’ve been receiving a number of emails on this topic lately. It seems there is little information out there about how to move from development to production with a Flex and PHP application. Here is a simple checklist that could help you, especially if you are doing this for the first time. Please note that I presume you used the Data Services (wizards) to connect the Flex client to PHP services.

  1. Make sure you have Zend Framework on your server. If you don’t, install it
  2. Make sure you change MySQL credentials and server IP/name used by your PHP scripts to connect to the database
  3. Copy the PHP services folder to your server. Then test these services. If they don’t work check the MySQL credentials or look for dependencies (maybe your PHP services use other PHP classes that you forgot to copy to your server)
  4. Edit the amy_config.ini file and make sure the path to the Zend Framework is OK and set production to true
  5. Edit the Flex services to point to your live server gateway.php. In the services folder of your Flex project you will find _Super_something.as files. In the constructor you will find a line like this:

    _serviceControl.endpoint = “http://localhost:10088/MobileFlexPHP-PHP/public/gateway.php”;
    Copy that line and then open the class that extends this _Super class and paste the line in the constructor. Then change the URL to reflect your server setup

  6. Copy the bin-release/ folder to your server (you should choose the export release for your project; this will create a SWF file smaller than the debug version)

That’s it! If I missed something please drop a comment!

The future of the Flex framework

Posted on by
4

As many of you probably know we made a few announcements last week that are quite interesting – let’s put it that way :). What made things even more interesting for Ryan and me is that we were right in the middle of the tour on mobile development (and we are still on tour for that matter). So we got your feedback first hand.

The good news is that last night the Flex team posted an update that adds more context and details about how Adobe plans to move Flex to Apache Software Foundation. And in short the essence of this update is that we still support Flex and Flash Builder; they won’t go away and we are not killing them. Here are some quotes from the post:

What specifically is Adobe proposing?

We are preparing two proposals for incubating Flex SDK and BlazeDS at the Apache Software Foundation.

In addition to contributing the core Flex SDK (including automation and advanced data visualization components), Adobe also plans to donate the following:

  • Complete, but yet-to-be-released, Spark components, including ViewStack, Accordion, DateField, DateChooser and an enhanced DataGrid.
  • BlazeDS, the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Flex applications.
  • Falcon, the next-generation MXML and ActionScript compiler that is currently under development (this will be contributed when complete in 2012)
  • Falcon JS, an experimental cross-compiler from MXML and ActionScript to HTML and JavaScript.
  • Flex testing tools, as used previously by Adobe, so as to ensure successful continued development of Flex with high quality

Adobe will also have a team of Flex SDK engineers contributing to those new Apache projects as their full-time responsibility. Adobe has in-development work already started, including additional Spark-based components.
Isn’t Adobe just abandoning Flex SDK and putting it out to Apache to die?

Absolutely not – we are incredibly proud of what we’ve achieved with Flex and know that it will continue to provide significant value for many years to come. We expect active and on-going contributions from the Apache community. To be clear, Adobe plans on steadily contributing to the projects and we are working with the Flex community to make them contributors as well.

You can read the whole post/update here. And drop a comment if you have something to share!

Flex Mobile Development: caching images using ContentCache

Posted on by
13

There are many places where you can optimize your code especially when working on mobile applications. In this post I will focus on caching images using the spak.core.ContentCache class (part of the Flex framework).

Right from the Flex documentation, you can see ContentCache could be useful:

Provides a caching and queuing image content loader suitable for using a shared image cache for the BitmapImage and spark Image components.

Why cache images?

So why would you cache images? Every time you set a new source for a Spark Image or a BitmapImage object a new flash.display.Loader object is created to load the image bytes.

Now, let’s suppose you display a list of items and each item has an image (could be an icon or could be a picture). Each image is hosted on a remote server so it has to be downloaded. Finally, some of these images are the same for different items in the list (for example for a Twitter client it is quite common to see many entries with the same avatar; each entry represents a tweet from the same user and the avatar is the same in this case).

If you don’t use a caching mechanism, you will notice that as you scroll through the list it will take some time to load images. And the same could happen for images stored locally especially if they are not very small. While waiting for images to load and be displayed the first time is OK (and there isn’t much to do other than preload them) waiting for the same image every time it is displayed is quite annoying.

Here comes the ContentCache class. This class stores the bytes loaded (actually it stores the LoaderInfo object used for loading each image) and every time an image must be loaded it first checks the cache; if is not there then it goes through the loading process. If it is cached already, then it provides the LoaderInfo object.

Continue reading →

Flex Mobile Development: Creating Dialog Windows

Posted on by
9

Ever wondered how to create a modal dialog window in Flex mobile applications? For example, you may want to ask the user for a confirmation when he performs a delete operation or maybe to select an item from a list. Well, if you don’t know how to do it, then read on.

Flex has a class that just does this: SkinnablePopUpContainer. SkinnablePopUpContainer extends SkinnableContainer class and has a very simple API you can use in order to “open” and “close” the dialog.

Understanding SkinnablePopUpContainer

Because SkinnablePopUpContainer extends the SkinnableContainer it is extremely easy to create any kind of dialog window you want. You can create a new MXML component that extends the SkinnablePopUpContainer. Then you set a layout manager that works for you (VerticalLayout, HorizontalLayout). And finally, you add the UI components you need – labels, buttons, lists, and so on.

Suppose you want to create a simple alert window that looks like this:

Continue reading →

Creating Flex Mobile Lists Part II – Using Virtualization

Posted on by
8

This is the second part (and the final one for that matter) of my post about creating Flex mobile lists (you can read the first part here). In this post I will show you how I modified the custom layout manager that I created in the first post to add support for virtualization. Also I will discuss the theory behind Flex list virtualization and creating custom item renderers.

As a reminder, in the first part I talked about you how you can create a custom list and layout manager that can be used for displaying vertical and tile section lists:

In this post I will show you how you can create layout managers that support virtualization and custom item renderers. You can see the two custom item renderers below:

I won’t discuss how I created the custom list component to support sections. For this read the first part of this series.

Continue reading →

Creating Flex Mobile Section Lists

Posted on by
8

For a mobile application I’m working on I need a section list. If you are familiar with the Flex framework you know that you don’t have built-in section list components (you can have vertical, horizontal, and tile lists). I played a little bit with the Flex List, IconItemRenderer, and BasicLayout classes and managed to put together two section lists: a vertical section list and a tile section list. In this post I will talk about how I did it and about some theory behind the list components.

Continue reading →

Flash Builder 4.5.1 and Flex 4.5.1 are out!

Posted on by
1

When we launched Flash Builder and Flex 4.5 in May we said that we will have an update a month later that brings Flex mobile development to all three platforms: Android, iOS, and PlayBook (BlackBerry Tablet OS). And this is the update we were talking about.

So starting today, you can build all sorts of amazing mobile apps that run across these different devices.

If you want to find more about this, make sure you register for Adobe Developer Week. This is a series of webinars that will start today.

In the meantime you can check Serge‘s videos.

Creating Flex Mobile Apps with Flash Builder for PHP

Posted on by
31

As you might have heard, we released earlier this week Flash Builder and Flex 4.5. Part of this release is a new product called Flash Builder for PHP 4.5. This is something you should make sure you try if you are a PHP and Flash/Flex developer.

So what is Flash Builder for PHP? This product will install Flash Builder 4.5 with Zend Studio 8.1 as a plugin plus some additional plugins that integrate these two products. Using this IDE you can create mixed projects (Flex and PHP both for desktop and mobile devices) and you can streamline testing, deploying, debugging, and consuming PHP services via Flex remoting (with the help of Zend Framework).

Instead of writing a pretty long article, I decide to shoot a video tutorial on how you can create a Flex mobile app that uses a PHP service. This tutorial will walk you through:

  • Using the new project type Flex Mobile and PHP
  • Creating a mobile application that has two views/screens. I will explain how to use the ViewNavigator and View classes to control your application state
  • Consuming a PHP service from a Flex mobile app using remoting
  • Testing and debugging the code (Flex and PHP) on the desktop simulator and physical device

I hope you will enjoy this. If you want to download the files used for this tutorial, click here (unzip the file and you will get the Flex project you can import it and the PHP files plus the database dump).

Flash Builder 4.5 and Flex 4.5 – one step closer to final release

Posted on by
9

Today we announced that Flash Builder 4.5 and Flex “Hero” 4.5 will be launched at the beginning of May.  And to tell you the truth I couldn’t be more excited – this is my third launch so I do have something to compare to :). In this post I want to highlight some of the most important features / changes / additions. Just to sum them up, they are about mobile, performance, and productivity.

What’s new in Flash Builder 4.5

Let’s start with Flash Builder (for a while I worked on this product as an engineer, so it is close to my heart). Flash Builder 4.5 is coming about a year after Flash Builder 4.0 – I think this is the shortest release cycle we’ve ever had for Flash Builder.

Support for mobile development

It is almost one year since we announced and shipped support for Adobe AIR and Flash Player on mobile devices. So it is only natural that Flash Builder 4.5 adds support for mobile development. You can use Flash Builder 4.5 to create applications for Android, BlackBerry Tablet OS (PlayBook), and iOS. Flash Builder introduces two new project types: ActionScript Mobile Project and Flex Mobile Project. You can use Flash Builder to deploy the apps to the device, debug the code in Flash Builder while the application is running on the device, and when everything is in done you can export and sign the application (ready for submitting to Android Market / App Store / BlackBerry App World) right from the tool.

With the initial launch of the tool (early May) you will be able to create ActionScript Mobile projects for these three mobile platforms and Flex mobile projects only for Android. Soon after the launch we will issue an update that will extend Flex support to PlayBook and iOS (somewhere around June). This is great because Flex makes mobile development much easier – its support for screen metaphor and application session caching is a huge productivity boost.

Improved Productivity

I remember the Flash Builder 4 launch tour and talking to many senior Flash and Flex developers. One theme that came around no matter what was this: “we want a Flash Builder that helps hard-core developers to be more productive!” And I told them back then that this is definitely something that we have our eyes on. I’m glad to tell you that there are about 25 new features in Flash Builder that should make your life easier while coding. Here are some of them:

  • Code templates – you can define code templates for both MXML and ActionScript. You can export/import them to easily share them across a team.
  • You can use code templates to customize the code generated by Flash Builder.
  • Quick assist is one of my favorites (Ctrl + 1 on Windows, Cmd + 1 on Mac OS). Using this feature you can generate stub code for a class that you haven’t created yet or you can define a variable as a local variable or class variable. Suppose you are in a class method and you type this: myObject = new Object();. If myObject is not defined in your class, then by using Quick Assist you can choose to have a local variable or a class created.
  • Support for code hinting for metadata.
  • You can cycle through the content assist by pressing Ctrl + Space bar and thus filtering the hints by these categories: All/Templates/Variables/Methods/Classes & Interfaces/Packages/Namespaces.
  • Profiler reports retained heap, displays object properties, and presents a tree view of object references.

Another area of improvement is the designer-developer workflow. Now it is possible to reopen Flex projects modified in Flash Builder back in Flash Catalyst. There are some restrictions.

Improved Performance

We updated Flash Builder to use the Eclipse Helios platform (3.6.1). This means that all the improvement made by the Eclipse platform are now available to Flash Builder too. Second, for large projects you can see an improvement up to 65% for refactoring and profiling operations. Design view went through a complete overhaul. It is not only faster to switch between Code and Design view, but you can disable Design view per project. This will reduce memory consumption and improve performance.

Flash Builder for PHP

We continued to build on our initial work with Zend (remember Zend Framework support for AMF/Remoting?) and I’m proud and happy to tell you that there is a new product called Flash Builder for PHP. Here are the main features:

  • A single installer. It installs Flash Builder 4.5 with Zend Studio 8 on top of it as a plug-in. And there are some additional plug-ins that enable some new workflows between Flex and PHP.
  • New type of projects: Flex and PHP project and Flex and PHP Mobile project. These will create two projects that are aware of each other: a PHP project and Flex project. The Flex project has the output folder set inside the PHP project.
  • Integrated debug workflow. With one click you can run your Flex and PHP project in debug mode, being able to debug Flex and PHP code. Debugging has never been easier than this.

What’s new in Flex 4.5

After seeing the Flash Builder 4.5 features it is obvious that one important feature of the Flex framework 4.5 is its support for mobile development. Now you can use the Flex framework to create applications for desktop, Android, PlayBook, and iOS. A number of mobile friendly UI components were added so the performance and user experience are second to none.

At the same time the Flex SDK team continued to work on the Spark components and add new components. There are Spark DataGrid, Form, Image, Module, Busy Indicator, SkinnablePopUpContainer, Date/Time, Number and Currency formatters, as well as Number and Currency validators.

Flex 4.5 supports now OSMF 1.0 (Open Source Media Framework) and TLF 2.0 (Text Layout Engine). And finally there are compiler improvements :). You should see less memory used for full builds and less time consumed for incremental builds. In Flex 4.5 only the RSLs (Runtime shared libraries) that are actually used by the application code will be linked into the compiled application. This goes a step further when using modules. For example a module will know if its parent already loaded a RSL and thus will not relink the same RSL.

Conclusions

While perfection doesn’t exist in the real world (at least this is what philosophers say :D), I do think this release is pretty close. There are so many features that you might wonder why it’s just a dot release. More importantly, it sets the stage for even greater things.

If you want to read more about coding productivity enhancements in Flash Builder 4.5 check this article. This is a good resource on Flex 4.5 new features.