Flex
Highlights
- Website design
- CSS
- SEO
Loading HTML into Adobe Flex using XML
Lately I’ve been working quite a bit with XML and Adobe Flex. Typically these projects load simple text that’s formatted at run-time, but occasionally the loaded data is HTML that’s styled with CSS (how to apply CSS to loaded HTML in Flex we’ll cover in another post). So how do you load HTML into Flex using XML? With a handy section called CDATA.
CDATA is a special type of XML section that allows us to include data in an XML file that we don’t wish to be parsed. In some situations that could be programming code such as JavaScript, but in Flex projects this information could just as easily be HTML.
In this example, we have HTML meant to display a bold “Hello, World” paragraph.
<node>
<![CDATA[<p align="left "><b>Hello, World</b></p>]]>
</node>
All our HTML resides within what I refer to as CDATA “bookends”: “<![CDATA[" and "]]>”. Anything you wish to NOT be parsed by Flex should be placed here. CDATA sections are placed within elements just as you would regular text and basically can include anything you like.
A few further notes on loading and using HTML from XML in Flex:
- If you wish to display HTML in a TextArea, make sure you push the HTML using “htmlText” not “text”
- Flex supports a limited number of HTML tags.
- CSS can be applied to HTML in Flex, but CSS to the extent that most developers would hope for or expect.
Hopefully this clarifies for most people how to include HTML in an XML file you’re loading with Flex. More to come!
Related Posts:
0Highlights
- Conversion formulas
- Scientific calculator view
- ActionScript 3
Flex/AS3 Scientific and Conversion Calculator
[Update] Since I don’t have a copy of Flex, I’m not currently supporting this project and am giving away the source code. I’ve not worked on this in a number of years so admitted, I probably won’t remember much about it. Thanks!
A calculator scenario gave me a chance to work with many of the math options in ActionScript 3. Not much more to say!
Related Posts:
2text editor could
exist (if I built it).
Highlights
- Rich text editor that's not dependent on any particular field
- Basic editing functions
- Built to work with dynamically loaded fonts (not shown)
Field-Independent Rich Text Editor in Adobe Flex (AS3)
For a Flex-based brochure building application I built a few summers ago, I developed a field independent rich text editor. Had no choice since I couldn’t find a component anywhere else that could do this. Creating the layout was obviously easy, but got stuck for a while on the bullet points… couldn’t find any documentation that indicated they were actually objects.
This needs more attention to be a true component and I haven’t decided whether I’m going to develop it further or support it, but feel free to give it a whirl.
Related Posts:
0Marketing Collateral/PDF Customization Tool in Flex (Alpha)
The label on this app is misleading. It neither is in beta nor is for KMG. It is also not for Geeks on Call. This was an alpha version of a product we never quite released called 3cPrintShoppe. It produced PDFs of marketing materials that could be customized online.
This app was intended to be more or less MS Publisher in a browser, but we had a ways to go before things were ready for prime time.
I did all the coding for this and there are many (buggy) features:
- Templates (XML). Predesigned templates could be loaded on demand. All text and images are referenced in the XML, parsed by Flex, and saved again as XML.
- Font uploader. Companies can use any fonts they like. Set in the template and loaded at run-time.
- Rich text editing. Colors, bullets, etc.
- Size/placement/text modes. You can resize the boxes, move them, or just work with the text.
- Zoom. In and out, naturally.
- PDF generation. This requires server side code.
Roles: Design: web, UI. Flex Builder 2, Actionscript 3.
