J'ai du code HTML généré via un éditeur de texte enrichi en dehors de mon application Flex, mais je souhaite l'afficher dans Flex. Le HTML est de simples balises HTML, des choses comme des styles, des ancres et éventuellement des balises d'image, y a-t-il un contrôle qui me permettrait de rendre ce HTML en flex ou vais-je devoir retrousser mes manches et rouler le mien ?Affichage du code HTML dans une application Flex
Toutes les idées appréciées ... Merci.
Si le HTML est vraiment simple, vous pouvez l'afficher dans un composant d'étiquette ou textarea normale, si elle est plus complexe, je vais citer ce que je répondais in this question. La discussion y a aussi un peu plus d'infos.
Si elle est complexe HTML et Javascript, d'une manière possible est HTMLComponent, une méthode qui utilise un iframe sur votre flash pour le faire apparaître comme le HTML est dans votre application. Il y a cependant quelques inconvénients à cette méthode - la plupart d'entre eux sont décrits en détail at Deitte.com.
Si cela peut se déplacer hors ligne, vous pouvez utiliser Air (il a un composant mx: HTML intégré). Deitte.com a également un détail de cette technique.
Vérifiez la documentation sur mx.controls.Label et flash.text.TextField (qui est ce qui affiche le texte dans un contrôle Text ou Label dans Flex). La documentation TextField indique que
Le <img> tag vous permet d'intégrer des fichiers image (JPEG, GIF, PNG), les fichiers SWF et des clips vidéo à l'intérieur des champs de texte. Le texte circule automatiquement autour des images que vous incorporez dans les champs de texte. Pour utiliser cette balise, vous devez définir le champ de texte à multiligne et à envelopper le texte.
Ce qui signifie que vous pouvez afficher une image dans un composant Text dans Flex en définissant sa propriété htmlText à certains HTML qui contient une balise <img>. Vous ne pouvez pas utiliser Label, car ce n'est pas multiligne.
J'ai remarqué que les champs de texte ont du mal à mesurer correctement leur hauteur si les images affichées dans ces champs sont alignées à gauche ou à droite avec le texte qui les entoure (par exemple, align="left"). Vous devrez peut-être ajouter un espace supplémentaire ci-dessous pour contrer cela si vous prévoyez d'utiliser des images alignées.
@mmattax
En effet, vous pouvez afficher des images dans un composant TextArea. L'approche is not entirely without problems though ...
Vous devrez utiliser le contrôle Flex iFrame. Ce n'est pas une solution 100% flash, et combine un peu d'appels js mais fonctionne parfaitement pour moi.
Vous pouvez saisir le dernier code source de GitHub https://github.com/flex-users/flex-iframe
Voici quelques exemples de code de l'auteur du composant.
<!---
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>