I have some HTML that is generated via a Rich Text Editor outside of my Flex application but would like to display it inside Flex.
The HTML is simple HTML tags, things like styles, anchors, and possibly image tags, is there a control that would let me render this HTML in flex or am I going to have to roll up my sleeves and roll my own?
Any ideas appreciated...Thanks.
If the HTML is really simple, you can display it in a normal label or textarea component, If it is more complex, I'll quote what I answered in this question. The discussion there also has a little more info.
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.
Check out the documentation on mx.controls.Label and flash.text.TextField (which is what displays the text in a Text or Label control in Flex). The TextField documentation states that
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.
Which means that you can display an image in a Text component in Flex by setting its htmlText property to some HTML which contains an <img> tag. You can't use Label, because it is not multiline.
I've noticed that text fields have trouble with properly measuring their heights if the images displayed in them are left or right aligned with text flowing around them (e.g. align="left"). You may have to add some extra spacing below to counter that if you plan to use aligned images.
You will have to use flex iFrame control.
It is not an 100% flash solutions, and combines a bit of js calls but works perfectly for me.
You can grab latest source code from github https://github.com/flex-users/flex-iframe
Here is some sample code from the component author.
<!---
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>Christophe Coenraets</li>
<li>Brian Deitte</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>
#mmattax
Indeed you can display images in a TextArea component. The approach is not entirely without problems though...
Related
I am trying to display HTML text inside the Label in my Adobe Air mobile application, so far
I realized that Label doesn't support HTML, I went through the few solutions I found so far on the web:
Instead of Label - User TextArea and then use:
StyleableTextField(message.textDisplay).htmlText = messageText;
and in the TextArea declaration - specify mobile skin
<s:TextArea editable="false" selectable="false" skinClass="spark.skins.mobile.TextAreaSkin" id="message" x="0" y="0" width="100%" height="100%" paddingLeft="5" paddingRight="5" textAlign="left"/>
First of all, HTML still doesn't work, instead of converted HTML it just shows me ..... garbage, but even if it would have worked - TextArea component looks different than Label and doesn't feet in the design I am implementing.
User RichText component - unfortunately it's not supported in mobile apps
Any other ideas?
Yes, HTML is not supported in the Label and TextArea components for Spark (it was supported in Halo, or the mx components).
The only Flex components that officially do support it are RichText and RichEditableText. The skins for these components are not mobile optimized, but they run on mobile just fine. You may run into some speed issues when using massive amounts of it, but you can still use them (as you can with most, if not all, other components that aren't mobile optimized).
I am developing an iPad app with RichText components. They are working fine on the target devices. However, bullets look less than stellar. Specifcally, I need to increase the space between the bullet and the list item. It's too close and doesn't look good and the design people are not at all pleased with it.
The way the code works is we have an XML file that gets read in, and the contents of the screen are populated from that file. For example, here is a test list I have:
<section id="outro">
<element id="outro">
<copy id="OutroTestCopy" x="50" y="75" width="1200"><![CDATA[
<p fontSize="55" color="#cf7028">List to display</p>
<list fontSize="50" fontWeight="bold" paddingLeft="20">
<listMarkerFormat><ListMarkerFormat paddingRight="300" fontSize="50" fontWeight="bold" afterContent=" " /></listMarkerFormat>
<li>List Reference*<span baselineShift="superscript" alignmentBaseline="ideographicBottom">12</span></li>
<li>List Corp<span baselineShift="superscript" alignmentBaseline="ideographicBottom">®</span></li>
<li>List item</li>
<li>Second list reference<span baselineShift="superscript" alignmentBaseline="ideographicBottom">2</span></li>
</list>
]]></copy>
<footnote><![CDATA[Test footnote]]></footnote>
</element>
</section>
My ActionScript code takes the copy element above and runs it through the TextFlow import. I do this and not use actual TextFlow in the XML file because non-programmers with XML/HTML experience will be editing this file and I wanted to keep the markup as close to HTML as possible, rather than training them to do proper TextFlow:
copyRichText.textFlow = spark.utils.TextFlowUtil.importFromString(copy);
This runs well and I get my bullet list, with superscripts and fancy characters (see below). However, I can't change the spacing between the bullet and the list item text. I just want more space between the ListMarker and the list item. Right now they are too close and looked jammed up, and the design staff are giving me grief about it. I've tried (as you see) some padding and afterContent type attributes to get it to work, but they do nothing. Here is the result of the above, for reference:
Edit to add:
I had previous used these resources for lists in TextFlow:
Adobe's pre-List tags
Adobe's list tags information (TextFlow)
TLF 2.0 Lists Markup with cool PDF print out
Use the beforeContent attribute to add whitespace:
<s:list id="myList" paddingLeft="10" listStylePosition="inside">
<s:listMarkerFormat>
<!-- Note that this example inserts an empty string with "e; HTML entities. -->
<s:ListMarkerFormat
beforeContent=" "
content="counters(ordered,"",upperRoman)"
afterContent=": "/>
</s:listMarkerFormat>
<s:li>Beginning</s:li>
<s:li>Middle</s:li>
<s:li>End</s:li>
</s:list>
References
Apache Flex API Reference: ListMarkerFormat
Using Text Layout Framework: Using numbered and bulleted lists with TLF-based text controls
Flex 4 Updates For TLF 2.0
Discover the power of Flex and CSS
Is there a way to have a hidden swf ( flex application ) on a page and still have it be reachable from javascript and debuggable from flash builder? I have need to use flash to manipulate js but it needs to be reachable from js to be started.
I don't know if you have some other meaning in mind when you say "hidden" (if so, please explain) but if you simply mean an invisible element on the page, then sure. Just set the width and height tiny in the embed tags, and don't put any graphics in the swf.
User ExternalInterface to communicate back and forth between JavaScript an a swf embedded on the page.
as below:
<div style="position:absolute;top:100px;left:0;width:1px;height:1px;z-index:1">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1" height="1" flashvars="local=true&&refererdomain=yinyuetai.com" bgcolor="#FF0000" allowfullscreen="true" allowscriptaccess="always" wmode="window" id="" name="" src="flashlocalstorage.swf?rev">
</div>
the embed(in IE is:object) set: width:1px;height:1px, and the parent element set: position:absolute;top:;left:;.
It isn't complete disappear, but in common condition no one can find it.
I have tried setting the background image this way, but it doesn't work. Any ideas how to set the background image of a rich text control in flex as easy as possible? Thanks
.rte{
...
backgroundImage: "assets/globe.jpg";
}
and
<mx:RichTextEditor id="rt"
...
styleName="rte"
/>
Unfortunately, you can't.
The docs for RichTextEditor show that it doesn't support a backgroundImage property, and the component is not skinnable.
Therefore, I'd suggest creating your own wrapper component, which accepts an image, like so:
<!-- Note: Using Canvas becuase your post indicates Flex 3, if using Flex 4, please use Group -->
<Canvas>
<mx:Image width="100%" height="100%" />
<RichTextEditor />
</Canvas>
The RichTextEditor component doesn't support background images last I checked. What you'd want to do is create a custom RTE skin where you add an image behind the actual text, then within the skin, have the do getStyle('backgroundImage') and set it in a bindable private var which is then binded to the image.
That's about it. It's either use this skin or you can always wrap your RTE within a BitmapImage or some other kind of component that supports background images.
EDIT: Sorry, didn't see that this was Flex3. In that case, you'll need to extend your RTE component and add the Image component manually by overriding the createChildren function and then changing the value of the image by overriding the updateDisplayList function using the same getStyle function as mentioned above.
It can be done by setting RTE TextArea's backgroundAlpha to 0
<mx:RichTextEditor id="richTextEditor"
backgroundImage="#Embed('<imagepath>')" width="100%" height="100%"
initialize="{richTextEditor.textArea.setStyle('backgroundAlpha', '0') }"
/>
Note:Please modify image path and you can also set style through CSS/Style tag
Hopefully this will helps
I've got some text that includes links that I display in a RichEditableText component. How do I change the color of the links from the default blue? I tried the example posted by Peter deHaan but it doesn't work with SDK 4.1. I found a way to do this in MXML, but the text needs to be localizable which means I load it at runtime based on the locale, so I can't just include it inline with the MXML.
To recap: How do I set the link colors for a RichEditableText component that displays HTML that gets loaded at runtime?
Thanks in advance.
Found a way to do this globally, it was in another example on Peter deHaan's site:
http://blog.flexexamples.com/2009/03/17/globally-styling-anchor-tags-on-a-textview-control-in-flex-gumbo/
It's unfortunate you can't set these sorts of things with CSS...
You can also use a nested span tag to colorize your links as you prefer:
<s:RichEditableText id="titleText"
width="100%"
editable="false"
selectable="false"
focusEnabled="false">
<s:textFlow>
<s:TextFlow>
<s:a click="titleText_clickHandler(event)">
<s:span color="#FF0000">
Link's text here
</s:span>
</s:a>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>