<s:List> 구성 요소의 dataProvider를 XML 파일로 설정하려면 어떻게해야합니까?

Question

나는 내가 <s:List> 구성 요소를 사용하여 XML 파일 인 것으로 dataProvider을 지정하려면 어도비 플래시 빌더 4

의 최신 베타 버전을 가지고있다.

그러나 많은 연구 (labs.adobe.com에서 doc 링크를 보는 것을 포함하여) 후에, 나는 아직도 그것을하는 방법을 이해할 수 없다.

XML 파일은 다음과 같이 보일 것입니다 :

<?xml version="1.0" encoding="ISO-8859-1"?> 
<imageList> 
    <image location="path/to/file1.jpg" /> 
    <image location="path/to/file2.jpg" /> 
    <image location="path/to/file3.jpg" /> 
</imageList> 

Answer 1

내 원래 목표는 내 클라이언트가 자신을 유지 할 수있는 SWF 외부 XML 파일을 가지고 있었다 따라서 그들은 표시된 이미지를 제어 할 수 있습니다.

제가 게시 한 첫 번째 대답은 제가 생각했던 해결책이 아니 었습니다 : fx:XML을 사용하면 XML 파일의 내용이 실제로 SWF로 컴파일되므로 컴파일 후에 변경할 수 없습니다.

그래서 제임스 솔루션을 구현했습니다.

은 XML 파일은 다음과 같다 :

<?xml version="1.0" encoding="ISO-8859-1"?> 

<images> 
    <image source="path/to/image1.jpg" /> 
    <image source="path/to/image2.jpg" /> 
    <image source="path/to/image3.jpg" /> 
    <image source="path/to/image4.jpg" /> 
</images> 

MXML :

<?xml version="1.0" encoding="utf-8"?> 

<s:Group 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    > 

    <fx:Script> 
     <![CDATA[ 
      import mx.events.FlexEvent; 

      protected function lstImages_creationCompleteHandler(event : FlexEvent) : void 
      { 
       dpHttpService.send(); 
      } 

     ]]> 

    </fx:Script> 

    <fx:Declarations> 

     <mx:HTTPService 
      id="dpHttpService" 
      url="images.xml" 
     /> 

    </fx:Declarations> 

    <s:List 
     id="lstImages" 
     dataProvider="{dpHttpService.lastResult.images.image}" 
     width="100%" 
     itemRenderer="path.to.render.ImageRenderer" 
     skinClass="path.to.skins.ListSkin" 
     > 

     <s:layout> 
      <s:HorizontalLayout gap="2" /> 
     </s:layout> 

    </s:List> 

</s:Group> 

그리고 이미지 렌더러에서

, 나는 다음과 같은 데이터를 참조하십시오

<mx:Image 
    id="imgRendered" 
    source="{data.source}" 
/> 

정말 이 솔루션에 대한 유용한 점은 전체에 http:// 개의 참조를 넣을 수 있다는 것입니다. 다른 사이트 (물론 crossdomain.xml 기억).

실제로 images.xml 파일은 다른 서버에있을 수 있습니다.

Answer 2

당신은 XMLListCollection에 클래스를 사용해야합니다. 당신이 목록에서 이미지를 표시하려면

<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="@location"/> 

Answer 3

, 당신은은 URLLoader를 사용하는 XML을로드 바인딩 가능한 변수에 저장하고 목록에 데이터 공급자로 그를 할당해야합니다. 목록은 원하는대로보기를 사용자 정의 할 수있는 mx : itemrenderer를 사용해야합니다.

실제 코드가 someting이

<fx:Script> 
    <![CDATA[ 
     import mx.collections.XMLListCollection; 
     import mx.collections.IList; 
     import mx.controls.Image; 

     private var loader : URLLoader = new URLLoader(); 

     [Bindable] 
     private var xml : XMLList; 

     private function init() : void 
     { 
      this.loader.addEventListener(Event.COMPLETE, onComplete); 
      this.loader.load(new URLRequest("data.xml")); 
     } 

     private function onComplete(evt : Event) :void 
     { 
      this.loader.removeEventListener(Event.COMPLETE, onComplete); 
      this.xml = new XML(this.loader.data).image; 
     } 

    ]]> 
</fx:Script> 

<mx:List id="list" width="200" height="500" dataProvider="{xml}"> 
    <mx:itemRenderer> 
     <fx:Component> 
      <mx:Image width="200" height="200" source="{data.@location}" /> 
     </fx:Component> 
    </mx:itemRenderer> 
</mx:List> 

Answer 4

음과 같이 간다, 나는 하나 개의 솔루션을 발견했다.

MXML은 다음과 같이 표시됩니다 같은

<fx:Declarations> 

    <fx:XML 
     id="dpXml" 
     source="path/to/images.xml" 
    /> 

    <mx:XMLListCollection 
     id="dpXmlListCollection" 
     source="{dpXml.image}" 
    /> 

</fx:Declarations> 

<s:List 
    id="lstImages" 
    dataProvider="{dpXmlListCollection}" 
    itemRenderer="path.to.render.ImageRenderer" 
    skinClass="path.to.skins.ListSkin" 
    > 

    <s:layout> 
     <s:HorizontalLayout gap="2" /> 
    </s:layout> 

</s:List> 

그리고 images.xml을 : 모든 응답을

<?xml version="1.0" encoding="ISO-8859-1"?> 
<images> 
    <image> 
     <location>path/to/image1.jpg</location> 
    </image> 
    <image> 
     <location>path/to/image2.jpg</location> 
    </image> 
    <image> 
     <location>path/to/image3.jpg</location> 
    </image> 
</images> 

많은 감사를!

매트

Answer 5

당신이 네트워크를 통해 XML 파일을로드 할 경우, 당신은 할 수 있습니다 :

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo"> 

    <fx:Declarations> 
     <mx:HTTPService id="srv" url="http://ws.jamesward.com/images.xml"/> 
    </fx:Declarations> 

    <s:applicationComplete> 
     srv.send(); 
    </s:applicationComplete> 

    <s:List dataProvider="{srv.lastResult.images.image}" width="100%" height="100%"> 
    <s:itemRenderer> 
     <fx:Component> 
     <mx:Image source="{data.source}"/> 
     </fx:Component> 
    </s:itemRenderer> 
    </s:List> 

</s:Application>