私は、Flexアプリケーションの外部でリッチテキストエディタを使用して生成され、Flex内に表示するHTMLをいくつか持っています。Flexアプリケーション内でHTMLを表示
HTMLはシンプルなHTMLタグで、スタイル、アンカー、イメージタグなどがあります。このHTMLをフレックスでレンダリングできるようにするコントロールがありますか、私は自分の袖を巻いて自分自身をロールバックする必要があります?
感謝しています。ありがとうございます。 HTMLは本当に単純な場合
私は、Flexアプリケーションの外部でリッチテキストエディタを使用して生成され、Flex内に表示するHTMLをいくつか持っています。Flexアプリケーション内でHTMLを表示
HTMLはシンプルなHTMLタグで、スタイル、アンカー、イメージタグなどがあります。このHTMLをフレックスでレンダリングできるようにするコントロールがありますか、私は自分の袖を巻いて自分自身をロールバックする必要があります?
感謝しています。ありがとうございます。 HTMLは本当に単純な場合
は、あなたは、通常のラベルまたはテキストエリアのコンポーネントでそれを表示することができ、それは、より複雑な場合、私は私がin this questionに答え何を引用ます。議論にはもう少し情報があります。
複雑なHTMLとJavaScriptの場合、可能な方法の1つはHTMLComponentです。これは、フラッシュ上のiframeを使用してHTMLがアプリケーションに表示されるようにする方法です。しかし、この方法にはいくつかの欠点があります - そのほとんどは、詳細にはat Deitte.comで説明されています。
オフラインで移動できる場合は、Air(mx:HTMLコンポーネントが組み込まれています)を使用できます。 Deitte.comにもこの手法の詳細があります。
は(FlexでText
またはLabel
コントロール内のテキストを表示するものである)mx.controls.Label
とflash.text.TextField
上のドキュメントを参照してください。 TextField
ドキュメントは
<IMG>タグは、テキストフィールド内で外部の画像ファイル(JPEG、GIF、PNG)、SWFファイル、およびムービークリップを埋め込むことができますと述べています。テキストは、テキストフィールドに埋め込まれたイメージの周りを自動的に流れます。このタグを使用するには、テキストフィールドを複数行に設定し、テキストを折り返すように設定する必要があります。
あなたが<img>
タグを含むいくつかのHTMLへのhtmlText
プロパティを設定することで、FlexでText
コンポーネント内の画像を表示することができることを意味します。 Label
は複数行ではないため使用できません。
テキストフィールドに表示される画像が、周囲を流れるテキスト(たとえば、align="left"
)の左または右に配置されている場合、テキストフィールドの高さを正しく測定するのに問題があることに気付きました。整列した画像を使用する予定の場合は、それに対処するために余分なスペースを追加する必要があります。
@mmattax
確かにあなたはTextAreaコンポーネントに画像を表示することができます。アプローチis not entirely without problems though ...
フレックス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>