Posts filed under 'FlexTips'

CLICK and DOUBLE_CLICK Events

If you're new here, you may want to subscribe to my RSS feed. If you like my site, consider linking back. I prefer text "Free Flash Tutorials" to http://blog.franto.com
Thanks for visiting my site! If you need anything just contacting through Contact page or Gtalk widget

I’m curious if anyone need handle both events on same component in same time. Just imagine situation: You got circle. On MouseEvent.CLICK you want to decrease radius by 10px, on MouseEvent.DOUBLE_CLICK increase radius by 10px. It is obvious that when you double click on circle, you dont want to fired both: decrease and increase radius.

Sure, there can be some “workarounds” with timer or “somehow” canceling CLICK event on DOUBLE_CLICK, but I hope there is “normal solution” from Adobe. Can anyone point me to that “normal solution”

P.S. Do not forget to set doubleClickEnabled=”true” to be able to listen to MouseEvent.DOUBLE_CLICK

, , ,
AddThis Feed Button

4 comments May 29th, 2008 Add to your FavLinks

FlexTips - Stop displaying Focus

Table of contents for FlexTip

  1. FlexTips
  2. Useful Flex tips
  3. FlexTips - Stop displaying Focus
  4. FlexTips: Problem with masks and scalable Flash
  5. FlexTips: Tween in AS3.0 project
  6. FlexTips - mx:Text vs. mx:TextArea

Here is quick Flex Tip. If you don’t want to display focus rectangle on pressing TAB key, you should use focusEnabled = false;
It’s quick solution for 1 component, but if you want disable focus for all components in your application just use focusManager.deactivate();

That’s all, hope it helps to anyone…

New: Thanks to Marc Hughes for pointing this out:

Instead of focusManager.deactivate(); use focusManager.showFocusIndicator=false;

, , , ,
AddThis Feed Button
Previous in series Next in series

2 comments May 29th, 2008 Add to your FavLinks

Support Franto.com

It seems that my site got some problem with traffic and is so slow (at least for me), so I want to do anything with that. Change webhost provider, or change it to dedicated server and then provide Flex, AIR, Flash tutorials for anyone who want to learn new Adobe technology. Because this costs money, I’ve create Franto.com Supporters page, when I will list all supportes for my site (PR7). So if you wish support it and let me try to do anything to speed up this site and provide good free tutorials for anyone you can just support this site.

Thanks in advance.

, , , , , , , , ,
AddThis Feed Button

2 comments April 29th, 2008 Add to your FavLinks

“Filter results in DataGrid” Flex Tutorial

Table of contents for DataGrid

  1. Custom header in DataGrid
  2. Custom header in DataGrid - part 2
  3. “Filter results in DataGrid” Flex Tutorial

This is new post in my DataGrid Series Flex Tutorials. This tutorial shows you how to filter rows for searched keyword. It's quite easy, since dataProvider for DataGrid is ArrayCollection, and ArrayCollection has variable filterFunction. It simple expect function which will filter correct rows for you. So basically, you have Datagrid and dataProvider is defined like this

PLAIN TEXT
Actionscript:
  1. [Bindable] public var dpRows:ArrayCollection;

then you can create filter function in this simple way:

PLAIN TEXT
Actionscript:
  1. public function filterResults():void
  2.  {
  3.     dpRows.filterFunction = _sortRows;
  4.     dpRows.refresh();
  5. }

and finally function, which filters results. It returns true for row, which will be visible, and false for row which will be hiden.

PLAIN TEXT
Actionscript:
  1. private function _sortRows(item:Object):Boolean
  2. {
  3.             var col:String = cmbCol.selectedItem.data as String;
  4.             var key:String = keyword.text;
  5.            
  6.             key = key.toLowerCase();
  7.            
  8.             if (key != "")
  9.             {
  10.                 if (col != "any")
  11.                 {
  12.                     var value:String = item[col];
  13.                     value = value.toLowerCase();
  14.                    
  15.                     if (value.indexOf(key)>= 0)
  16.                     {
  17.                         return true;
  18.                     }
  19.                 } else {
  20.                     for (var o:String in item)
  21.                     {
  22.                         value = item[o];
  23.                         value = value.toLowerCase();
  24.                         if (value.indexOf(key)>= 0)
  25.                         {
  26.                             return true;
  27.                         }
  28.                     }
  29.                 }
  30.             } else {
  31.                 return true;
  32.             }
  33.            
  34.             return false;
  35. }

It's quite simple tutorial. Here you can see source code for example which follows.

ArrayCollection filterFunction example screenshot

In next tutorial for DataGrid I will show you how you can add Button into cell. We will use custom itemRenderer for DataGridColumn.

If you have any questions, or suggestions for tutorial, please let me know...

Enjoy.

, , , , , , ,
AddThis Feed Button
Previous in series

2 comments April 29th, 2008 Add to your FavLinks

FlexSpy - inspector in your Flex/AIR application

FlexSpy - Flex/AIR debugger
FlexSpy - Kind of what Firebug does for HTML/Ajax applications but for Flex 2.0/3.0 applications.

This is another quick help in Flex/AIR development. If you need component inspector in your application, FlexSpy is great library for you. All you need to do, is add lib into your project (Flex 2 or Flex 3 version) and call
FlexSpy.show(); That's all and you can inspect your classes right in Flash player. You can also change values and change will be reflected in your app. You can also Find Component for inspecting with dragging cursor over component. So download FlexSpy from Google Code and try it. It will help you in your Flex/AIR development.

Live example: http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html

, , , , ,
AddThis Feed Button

Add comment April 18th, 2008 Add to your FavLinks

Quick Outline in FlexBuilder - Ctrl+O

This is just quick but big help, if you're developing Flex in FlexBuilder. (or Eclipse). Maybe most of you know Quick Outline feature (Ctrl + O shortcut, I'm using Windows, so really do not know other shortcuts for other OS), but I didn't use it before. But after 360Flex conference in Milan I'm using it frequently and it's really big help. For everyone who doesn't know what's Quick Outline, it's exactly like Outline View, but interactive. Just press Ctrl + O and start typing name of function you're looking for. For example you want to find function commitProperties()... just start typing comm and after few strokes, your function is filtered and press Enter. It's really fast way to find your functions :) If you know about another great shortcuts for speeding up your development let us know.

, , , ,
AddThis Feed Button

Add comment April 17th, 2008 Add to your FavLinks

AsDoc with Flex Library Project

Table of contents for AsDoc

  1. AsDoc with Flex Library Project

This is question, not solution. But I hope that at the end, there will be solution posted here. I'm playing with AsDoc tool for my project and I'm stuck this thing.

I have project which uses Flex library project. It uses custom MXML component, let's say . Everything works, but when I want generate AsDoc for my project, it can't find

Here is AsDoc call

"c:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\bin\asdoc.exe" -source-path=. -doc-sources com -main-title "My API Documentation" -window-title "MyAPI Documentation"

There can be 2 options I think:

  • Add Flex Library Project to Asdoc call
  • Exclude Flex Library Project to Asdoc call

I have try few options, but I have to confess, I can't make it work. Does anyone had similar problem, and got solution?
Please post it in comment, and I will add it here for other people, which have similar problem with generating AsDoc help.

Thank you

, , ,
AddThis Feed Button

1 comment March 12th, 2008 Add to your FavLinks

Custom header in DataGrid - part 2

Table of contents for DataGrid

  1. Custom header in DataGrid
  2. Custom header in DataGrid - part 2
  3. “Filter results in DataGrid” Flex Tutorial

This is answer of my question asked at the end of tutorial Custom header in DataGrid. Question was if it is possible to set as many custom properties to custom header renderer as you want, and how can it be done. So here are answer...

First of all I want to thank Tink for pointing me to the right direction with extending DataGridColumn. Afterward I've found tutorial Thinking About Item Renderers and there were my answer...

So, you have to extend DataGridColumn to MyDataGridColumn to add there our custom properties for header. In our case there are new properties text and topText.

PLAIN TEXT
Actionscript:
  1. package controls
  2. {
  3.     import mx.controls.dataGridClasses.DataGridColumn;
  4.  
  5.     public class MyDataGridColumn extends DataGridColumn
  6.     {
  7.          private var _text:String;
  8.          private var _topText:String;
  9.  
  10.         public function get text():String
  11.         {
  12.             return _text;
  13.         }
  14.         public function set text( value:String ):void
  15.         {
  16.             _text = value;
  17.         }
  18.         public function get topText():String
  19.         {
  20.             return _topText;
  21.         }
  22.         public function set topText( value:String ):void
  23.         {
  24.             _topText = value;
  25.         }
  26.     }
  27. }

Pretty simple, and now you can change your commitProperties function in MyDataGrid class where you're creating DataGrid columns. Just set your new properties there

PLAIN TEXT
Actionscript:
  1. var colName:MyDataGridColumn = new MyDataGridColumn();
  2.     colName.headerRenderer = new ClassFactory(MyDataGridHeader);
  3.     colName.text = "Name";
  4.     colName.topText = "Web";
  5.     colName.dataField = "name";
  6.            
  7.     var colLink:MyDataGridColumn = new MyDataGridColumn();
  8.     colLink.headerRenderer = new ClassFactory(MyDataGridHeader);
  9.     colLink.text = "Link";
  10.     colLink.topText = "URL";
  11.     colLink.dataField = "url";

all other parts of MyDataGrid class are same from previous example (look to the source code on right click or download them).
And we're done. Simple when you know how to do it :)

And here you can try this example (Source code is available on right click):
Custom DataGrid with custom header

If you want another Flex or AIR tutorial, please ask in comments here

, , , ,
AddThis Feed Button
Previous in series Next in series

1 comment November 19th, 2007 Add to your FavLinks

Previous Posts