Posts Tagged Flex

Conditional Debugging in Flash Builder 4

I have started using Flash Builder 4 recently and the one feature I am loving the most is the Conditional Debugging. Using conditional breakpoints in Flash Builder 4, you can configure a breakpoint to trigger only after a certain number of loop iterations. For instance, you can halt the application on the third time a breakpoint is reached. You can also use a conditional breakpoint to suspend the application when a particular expression either changes or evaluates to true. In the next walkthrough you will make the breakpoint that was set up in the first walkthrough conditional by adding an expression. Read the rest of this entry »

Tags: ,

Flex 4: Understanding DataGroups and VirtualLayouts

As I have recently started working with Flex4, I have started to use some of the new components from the Flex 4 SDK. One of them is the DataGroup class. A brief explanation of the class is below (from the docs) :-

The DataGroup class is the base container class for data items. The DataGroup class converts data items to visual elements for display. While this container can hold visual elements, it is often used only to hold data items as children. The DataGroup class takes as children data items or visual elements that implement the IVisualElement interface and are DisplayObjects. Data items can be simple data items such String and Number objects, and more complicated data items such as Object and XMLNode objects. While these containers can hold visual elements, they are often used only to hold data items as children.

DataGroups allow you to do something called Virtualization. What that means is, if you have am ArrayCollection with lets say 50 items in it and your DataGroup is only showing 10 items at a time, then Flash Player will only render 10 visual elements on the screen and as you keep scrolling up or down, those renderers will be recycled within each other. In other words, there will only ever be a few visual renderers created based on the size of your visible component.

Lets take an example to get a better understanding of this concept :- Read the rest of this entry »

Tags:

Accessing a URL with Flex and YQL when there is no crossdomain.xml

If you are making a HTTPService call in Flex, you need to make sure that the domain specified in the url attribute is the domain from where your application was downloaded or there is a crossdomain.xml file granting access to your application’s originating is available on the domain specified in the HTTPService url attribute.

Take a look at the following example. Trying to load a XML file :- Read the rest of this entry »

Tags: ,

CF/Flex Connectivity in Flex Builder : Invalid root. The WEB-INF/flex folder must contain either flex-config.xml or services-config.xml.

I was setting up a new Project in Flex Builder with Application Server Type as ‘ColdFusion’. I had the default values in the Flex Builder wizard. But the Wizard wont let me go past the second screen. I kept getting this error :-

Invalid root. The WEB-INF/flex folder must contain either flex-config.xml or services-config.xml.

And I was sure that the WEB-INF folder actually had the correct files under it. Read the rest of this entry »

Tags: , , ,

Swiz Framework : Invoking a WebService call

As I blogged before, I spent the weekend trying to get my head around Swiz framework. The project I did uses HTTPService and WebService calls to fetch data into the UI. While this sounds pretty straightforward, I came across a little gotcha which I thought I should blog about here. Read the rest of this entry »

Tags: ,

First Take at Swiz Framework

I came across a project at work that was written using Swiz so I decided to spend the weekend getting my head around Swiz Framework for Flex. Swiz is a framework that provides Inversion of Control and Dependency Injection as its killer feature. I have been using Cairngorm for too long now and I was pleased with how Swiz handles the events, handles the dependency Injections and makes life so much easier.

In order to learn something, you always have to write some code with your own hands to actually see whats going on. So I decided to re-write coldfusiondocs using Swiz. Its currently written using Cairngorm and it still is using the Cairngorm version on the live website. For those of you who want to see what I ended up doing, I have committed everything to the SVN repository. I have created a new tag called coldfusiondocs_swiz which has all the code. You are more than welcome to review the code and suggest any improvements or changes. The project is open source anyways and its always good to have extra pair of eyes looking over. :)

Anyways, back to Swiz, here are a few things I learnt while doing this mini-project. :-

  • All Swiz expects you to do is define the Bean Config in the main Application file. After ofcourse dropping the .swc library in the ‘libs’ folder. There is nothing else you need to do, framework wise. Everything else is pretty much framework independent.
  • There are no imports required from the Framework source and the Events are native Flex Events, which I think is, one less thing to worry about.
  • The Event handling and Mediation leaves the developer with only the application logic to worry about rather than firing events and mapping them to commands etc.

Overall, I think I could get used to this quite easily. The framework is still not as stable and mature as some of the other frameworks but I can see it going in that direction.

Tags: , , ,

Flex : Tooltip on Fixed Width DataGrid Columns

I was displaying some data in a DataGrid and a requirement came up to show tooltips on the columns which had more data than the column width. Since increasing the column width was not an option, the ideal solution was to show the the ellipses (“…”) at the end of the column and the rest of the text to be shown as tooltip on the DataGrid Column. The first thought that came to my mind was to quickly write up an ItemRenderer. But then as explained here, you can simply use mx.controls.Label as your ItemRenderer as the Label class already had a text Property and it has the truncateToFit set to true and it shows the tooltip by default. Read the rest of this entry »

Tags:

MultiLine Label in Flex

If you are a Flex developer, you would have come across this issue several times. If you are using the <mx:Label> control and the size of your text is bigger than the size of the container, you will see a cut off version of the text because by default, the Label control does not allow multiline text.

So, here is what I wrote quickly to achieve this functionality.


package components
{
 import mx.core.UITextField;
 import flash.text.TextFieldAutoSize;
 import mx.controls.Label;
 import flash.display.DisplayObject;

 public class MultiLineLabel extends Label
 {

 override protected function createChildren() : void
 {
 // Create a UITextField to display the label.
 if (!textField)
 {
 textField = new UITextField();
 textField.styleName = this;
 addChild(DisplayObject(textField));
 }
 super.createChildren();
 textField.multiline = true;
 textField.wordWrap = true;
 textField.autoSize = TextFieldAutoSize.LEFT;
 }
 }
}

The code overrides the createChildren() method and creates a new instance of UITextField which has multiline and wordwrap turned on.

Tags:

Flex Vertical TabBar With CornerRadius on Left or Right

If you are using Flex and want to have a TabBar control that aligns vertically instead of the default “horizontal” behaviour , then you can simply use the “direction” property on the control and make it vertical. You can see an example of that below . Notice how the tabs are now vertically aligned but the borders are still on top, left and right. And see how the cornerradius is still on the top left and top right corners. Read the rest of this entry »

Tags:

Triggering FlexSpy with a Keyboard Shortcut

If you are a Flex developer, you are probably aware of what FlexSpy is. FlexSpy is an inspection tool for Flex applications, similar to what Firebug is for HTML applications. FlexSpy is distributed as a .swc file (Flex Library file) which you can simply put under your projects’ “libs” folder and it will become available to use in your project. Once you trigger FlexSpy , you can inspect and change the properties and styles of the visual components in your Flex application. Pretty useful tool, makes life very easy for a developer. Read the rest of this entry »

Tags: ,

WP SlimStat