Greetings -
I've been building a site that has long pages of text with lots of
illustrative images. Dealing with text and images in an editorial
layout fashion has been surprisingly cumbersome in Flex
(especially given how easy it is to build elegant, stateful apps,
and hence I'm wondering if I'm missing something. Thought
I'd run my approach by folks her for a quick sanity check.
Here's what I need to achieve:
- Pages with 12 - 20 long paragraphs of text
- Most paragraphss preceded by a subhead of different
font face/size color
- Lots of interspersed images aligned left, center, and right
with wrapping text (for left/right)
- Inline text links
- Embedded fonts
- Flexible (stretchy) design
For reference see the site in progress at: http://djethan.com/westwind/ .
Click on
"Martial Arts" then on "History". Dismiss a coverflow error if you see it.
My plan had been to achieve this by having all the content be in
TextAreas (set to editable and selectable = false) and then handling
the subheads, images, and links using htmlText and the supported
html tags. Two things made this impractical:
1. No way to center an image in htmlText! The IMG tag does not
support "center" as a value of the "align" property; wrapping an IMG
in a P with ALIGN="center" also fails as does setting the horizontalAlign
of the TextArea (with all other text wrapped in P with align="left").
2. The supported html tags to not take a class attribute, nor do they
respond to element selectors ie you can't use CSS to style them =(
These things being deal breakers I've fallen back on this approach:
<VBox>
<Label styleName=subhead/>
<Text styleName=body>
<htmlText>
blah, blah, blah
<IMG align=right>
blah, blah, blah
<IMG align=left >
</htmlText>
</Text>
<Label styleName=subhead/>
<Text styleName=body>
<htmlText>
blah, blah, blah
</htmlText>
</Text>
<Canvas>
<IMAGE horizontalCenter=0/>
</CANVAS>
<Label styleName=subhead/>
<Text styleName=body>
<htmlText>
blah, blah, blah
</htmlText>
</Text>
</VBox>
It's working but, seems heavy handed and sloooow - page loads
have a noticeable lag.
Am I missing anything, better ways to do this?
thanks, ethan
