만영’s 블로그

대부분 데이터 객체만 가지고 Binding을 사용하지만 Boolean 속성이라든지 특정 함수 리턴값을 가지고 Binding을 확장해서 사용 할 수도 있습니다.

———————————————————
[Bindable]
private var labelText:String = “This is a label”;

<mx:Label text=”{labelText}”/>
———————————————————

[Bindable]
private var items:ArrayCollection;

<mx:Label text=”You have {items.length} items.”/>
———————————————————

<mx:TextInput id=”myInput”/>
<mx:Button label=”Do Something” enabled=”{myInput.text.length > 0}”/>
———————————————————

private function isButtonEnabled(someString:String, itemLength:uint):Boolean
{
if (…) {
  myButton.label = “I’m enabled!”;
  return true;
  } else {
  myButton.label = “I’m disabled.”;
  return false;
  }
}

<mx:Button id=”myButton” enabled=”{isButtonEnabled(someString, items.length)}”/>
———————————————————

원문:http://weblogs.macromedia.com/cantrell/archives/2006/11/fun_with_flex_d.cfm

트리에서 드래그를 하면 현재 위치에 따라 트리폴더가 펼쳐지고 자동으로 닫히는걸 구현 했네요.

소스 코드는 아직 확인 못했는데. 트리에서 노드 찾아가는 부분이 궁금 하넹.  

원문:http://flexibleexperiments.wordpress.com/2007/01/25/flex-20-tree-with-spring-loaded-folders-update/

새로 추가된 기능으로써 동적으로 CSS 스타일을 변경하는 예제입니다.

전에는 컴파일 시점에 테마가 포함되 불가능 했다는…

Click here to run the application

원문:http://everythingflex.wordpress.com/2007/01/19/flex-201-style-swapping/

FlexComponent 카페에서 활동하고 계신  시난(lostsin) 님께서 좋은 Tip을 올려주셨네요… 

xml 을 접근하여 사용함에 있어서 초보적인 간단한 팁을 나누고저.. ^^;

var xml:XML =

<root>

   <a>aaa</a>

   <b>bbb</b>

    <c id=”cid” />

     <d>

         <dChild>dchild</dChild>

      </d>

     <e>

       <child>1</child>

       <child>2</child>

       <child>3</child>

     </e>

</root>;

가 있다고 할 때

1.

xml["a"] 하게 되면

xml의 root 아래 있는 <a>aaa</a> 를 XMLList 형태로 사용할 수 있습니다.

2. xml.c.@id 하면 attribute를 e4x 식으로 접근해서 쓸 수 있습니다.

3. xml.descendants(“a”) 하시면 1번보다 더 넓게.. 하위 모든 노드들을 검색하여 <a>를 XMLList로 구성하여 쓸 수 있습니다.

4. xml["d"]["dChild"] 하시면 또한 XMLList 형태로 가져다 쓸 수 있습니다.

5. trace( xml["없는노드"] ) 하시면  “”이 나옵니다.

xml["없는노드"]["없는노드"] 하셔도 “” 이 나옵니다. (에러 발생없음)

6. XMLList 형태는 xml["e"]["child"][0] 형태로 접근하여 사용하실 수 있습니다.

So lets take a look at runtime CSS in Flex 2.0.1. This is a killer feature for me because in allows for reusable skinning across Flex applications as simple as a URL. Now your expecting CSS to be text based but in Flex’s case to support custom fonts, custom component skins, and graphics embedding the runtime format of CSS in Flex is SWF.

Runtime CSS Example

In Flex 2.0.1 there is a new compiler option for MXMLC to directly compile CSS into SWF. These style SWF files can then be loaded at runtime by any Flex 2.0.1 application. This is very handy because it allows you to externalize all graphical elements within the style of your application into a URL for reuse across applications. Why embed the style N times when you can externalize it and just load it in? Typically you are not just making 1 Flex application, you may be making 5-6 for the intranet at your company and externalizing style in this format is very handy.

First you need to create a CSS file. I typically go to the Flex 2 Style Explorer to style my applications. It presents all the style options for Flex components and generates CSS for you. It is one of my secret weapons.

Flex 2 Style Explorer

Download Flex Style Explorer ZIP

So now for the hard part, compilation. Assume I have a style sheet called ‘style1CSS.css’ and all assets required are located adjacent to the ‘style1CSS.css’ file. With mxmlc in your path, simply write this on the command line.

mxmlc style1CSS.css

This creates the SWF file ‘style1CSS.swf’.

If you are using Flex Builder 2.0.1 just right-click on the CSS file and press “Compile CSS to SWF”. The swf file will be put into the ‘bin’ directory.

Now from within your application, you need to load this SWF via the Style Manager like so. Here is the application source for the example below:

<mx:Application 
 xmlns:mx=”http://www.adobe.com/2006/mxml” 
 layout=”absolute”
 initialize=”StyleManager.loadStyleDeclarations( ’style1CSS.swf’ )” 
 viewSourceURL=”srcview/index.html”>
 
 <mx:ComboBox 
  id=”styleCombo”
  top=”10″ left=”10″ right=”10″
  dataProvider=”['style1CSS','style2CSS','style3CSS']“
  change=”StyleManager.loadStyleDeclarations( styleCombo.selectedItem + ’.swf’ )”>
 
</mx:Application>

In this case, the StyleManager loads the style1CSS.swf on the initialize event. I also provided a comboBox that will load CSS Style SWF files when the change event occurs.

Runtime CSS Example

So that is runtime CSS in a nutshell. What I think would be great is for everyone to create styles CSS SWF files and share them publicly. It would allow anyone to create a styled application without any style data in the core application. Simply map the components to the style classes in the CSS SWF, and they will all update when the CSS Style SWF file loads.

원문:http://www.onflex.org/ted/2007/01/flex-201-understand-runtime-css.php

컨테이너 영역 밖으로 Drag가 안되도록 처리한 코드이다.

<?xml version=”1.0″ ?>
<mx:Application
 xmlns:mx=”http://www.adobe.com/2006/mxml“
 layout=”absolute”>
 <mx:Script>
  <![CDATA[
   import flash.events.MouseEvent;
   
   private function handleRedStartDrag(event:MouseEvent):void
   {
    stage.addEventListener(MouseEvent.MOUSE_UP, handleRedStopDrag);
    var bounds:Rectangle = new Rectangle(bounds_cv.x, bounds_cv.y,
        bounds_cv.width - red_cv.width, bounds_cv.height-red_cv.height);
    red_cv.startDrag(false, bounds);
   
   }
   
   private function handleRedStopDrag(event:MouseEvent):void
   {
    red_cv.stopDrag();
    stage.removeEventListener(MouseEvent.MOUSE_UP, handleRedStopDrag);
   }   
   
   private function handleGreenStartDrag(event:MouseEvent):void
   {
    var bounds:Rectangle = new Rectangle(bounds_cv.x, bounds_cv.y,
        bounds_cv.width - green_cv.width, bounds_cv.height-green_cv.height);
    green_cv.startDrag(false, bounds);
   
   }
   
   private function handleGreenStopDrag(event:MouseEvent):void
   {
    green_cv.stopDrag();
   }

  ]]>
 </mx:Script>
<!– bounding rectangle –>
<mx:Canvas
 id=”bounds_cv”
 x=”50″
 y=”50″
 width=”300″
 height=”200″
 backgroundColor=”#CCCCCC” 
 borderStyle=”solid”/>

<!– The red box being dragged –>
<mx:Canvas
 id=”red_cv”
 backgroundColor=”#ff0000″
 height=”50″
 width=”50″
 x=”50″
 y=”50″
 mouseDown=”handleRedStartDrag(event);”
 mouseUp=”handleRedStopDrag(event);”  />

<!– green box being dragged –>
<mx:Canvas
 id=”green_cv”
 backgroundColor=”#00ff00″
 height=”50″
 width=”50″
 x=”50″
 y=”200″
 mouseDown=”handleGreenStartDrag(event);”
 mouseUp=”handleGreenStopDrag(event);”  />

</mx:Application>
 

원문:http://www.dgrigg.com/post/Flex-2-AS-3-onReleaseOutside