Отображение HTML внутри приложения Flex
У меня есть HTML-код, который создается с помощью редактора форматированного текста вне моего приложения Flex, но я хотел бы отобразить его внутри Flex.
HTML - это простые HTML-теги, такие как стили, привязки и, возможно, теги изображений, есть ли элемент управления, который позволил бы мне отображать этот HTML-код в гибком формате, или мне придется закатать рукава и свернуть свой собственный?
Любые идеи приветствуются ... Спасибо.
Ответы 4
Если HTML-код В самом деле простой, вы можете отобразить его в обычном компоненте label или textarea. Если он более сложный, я процитирую то, что я ответил в этом вопросе. Обсуждение там также содержит немного больше информации.
If it is complex HTML and Javascript, one possible way is HTMLComponent, a method that uses an iframe over your flash to make it appear like the HTML is in your app. There are a few downsides to this method however - most of them described in detail at Deitte.com.
If this can move offline, you could use Air (it has an mx:HTML component built in). Deitte.com has a detail of this technique as well.
Ознакомьтесь с документацией по mx.controls.Label и flash.text.TextField (это то, что отображает текст в элементе управления Text или Label в Flex). В документации TextField указано, что
The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.
Это означает, что вы можете отображать изображение в компоненте Text в Flex, задав для его свойства htmlText некоторый HTML, содержащий тег <img>. Вы не можете использовать Label, потому что он не многострочный.
Я заметил, что у текстовых полей возникают проблемы с правильным измерением их высоты, если отображаемые в них изображения выровнены по левому или правому краю с обтекающим их текстом (например, align = "left"). Возможно, вам придется добавить дополнительный интервал ниже, чтобы противостоять этому, если вы планируете использовать выровненные изображения.
@mmattax
Действительно, вы можете отображать изображения в компоненте TextArea. Подход не совсем без проблем, хотя ...
Вам нужно будет использовать гибкий элемент управления 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>