2008-09-09 9 views
2

私は、Flexアプリケーションの外部でリッチテキストエディタを使用して生成され、Flex内に表示するHTMLをいくつか持っています。Flexアプリケーション内でHTMLを表示

HTMLはシンプルなHTMLタグで、スタイル、アンカー、イメージタグなどがあります。このHTMLをフレックスでレンダリングできるようにするコントロールがありますか、私は自分の袖を巻いて自分自身をロールバックする必要があります?

感謝しています。ありがとうございます。 HTMLは本当に単純な場合

答えて

3

は、あなたは、通常のラベルまたはテキストエリアのコンポーネントでそれを表示することができ、それは、より複雑な場合、私は私がin this questionに答え何を引用ます。議論にはもう少し情報があります。

複雑なHTMLとJavaScriptの場合、可能な方法の1つはHTMLComponentです。これは、フラッシュ上のiframeを使用してHTMLがアプリケーションに表示されるようにする方法です。しかし、この方法にはいくつかの欠点があります - そのほとんどは、詳細にはat Deitte.comで説明されています。

オフラインで移動できる場合は、Air(mx:HTMLコンポーネントが組み込まれています)を使用できます。 Deitte.comにもこの手法の詳細があります。

1

は(FlexでTextまたはLabelコントロール内のテキストを表示するものである)mx.controls.Labelflash.text.TextField上のドキュメントを参照してください。 TextFieldドキュメントは

<IMG>タグは、テキストフィールド内で外部の画像ファイル(JPEG、GIF、PNG)、SWFファイル、およびムービークリップを埋め込むことができますと述べています。テキストは、テキストフィールドに埋め込まれたイメージの周りを自動的に流れます。このタグを使用するには、テキストフィールドを複数行に設定し、テキストを折り返すように設定する必要があります。

あなたが<img>タグを含むいくつかのHTMLへのhtmlTextプロパティを設定することで、FlexでTextコンポーネント内の画像を表示することができることを意味します。 Labelは複数行ではないため使用できません。

テキストフィールドに表示される画像が、周囲を流れるテキスト(たとえば、align="left")の左または右に配置されている場合、テキストフィールドの高さを正しく測定するのに問題があることに気付きました。整列した画像を使用する予定の場合は、それに対処するために余分なスペースを追加する必要があります。

1

フレックスiFrameコントロールを使用する必要があります。 これは100%フラッシュソリューションではなく、jsコールのビットを組み合わせていますが、私にとっては完璧に機能します。あなたがここにgithubのからhttps://github.com/flex-users/flex-iframe

を最新のソースコードを入手することができます

は、コンポーネントの作者からのいくつかのサンプルコードです。

<!--- 
    A basic example application showing how to embed a local html page in a Flex application. 

    @author Alistair Rutherford 
--> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       xmlns:flexiframe="http://code.google.com/p/flex-iframe/" 
       horizontalAlign="center" 
       verticalAlign="middle" 
       viewSourceURL="srcview/index.html"> 

    <!-- Example project presentation --> 
    <mx:ApplicationControlBar dock="true"> 
     <mx:Text selectable="false"> 
      <mx:htmlText><![CDATA[<font color="#000000" size="12"><b>flex-iframe - Simple html example</b><br>This example shows how to embed a simple Html page in a Flex application.</font>]]></mx:htmlText> 
     </mx:Text> 
    </mx:ApplicationControlBar> 

    <!-- HTML content stored in a String --> 
    <mx:String id="iFrameHTMLContent"> 
     <![CDATA[ 
      <html> 
       <head> 
        <title>About</title> 
       </head> 
       <body> 
        <div>About</div> 
        <p>Simple HTML Test application. This test app loads a page of html locally.</p> 
        <div>Credits</div> 
        <p> </p> 
        <p>IFrame.as is based on the work of</p> 
        <ul> 
         <li><a href="http://coenraets.org/" target="_top">Christophe Coenraets</a></li> 
         <li><a href="http://www.deitte.com/" target="_top">Brian Deitte</a></li> 
        </ul> 
       </body> 
      </html> 
     ]]> 
    </mx:String> 

    <!-- Example using the 'source' property --> 
    <mx:Panel title="A simple Html page embedded with the 'source' property" 
       width="80%" 
       height="80%"> 

     <flexiframe:IFrame id="iFrameBySource" 
          width="100%" 
          height="100%" 
          source="about.html"/> 
    </mx:Panel> 

    <!-- Example using the 'content' property --> 
    <mx:Panel title="A simple Html page embedded with the 'content' property" 
       width="80%" 
       height="80%"> 

     <flexiframe:IFrame id="iFrameByContent" 
          width="100%" 
          height="100%" 
          content="{iFrameHTMLContent}"/> 
    </mx:Panel> 

</mx:Application> 
関連する問題