Skip to main content
Participant
December 15, 2011
Question

Trouble styling with an external stylsheet

  • December 15, 2011
  • 1 reply
  • 913 views

Hi all,

I have a project that has to support both an external stylesheet, and chinese and arabic character sets.  I have made it as far as integrating the CSSFormatResolver class, and using the basic examples that come along with it to get up and running.  Basically, new textfields are generated like this:

tlf = TextConverter.importToFlow(txt, TextConverter.TEXT_FIELD_HTML_FORMAT);

tlf.format = null;

// A CSSFormatResolver

tlf.formatResolver = styleservice.formatResolver;

// Choosing 500 as an arbitrary initial height, since I cannot use autoSize?

controller = new ContainerController(this, textwidth, 500);

tlf.flowComposer.addController(controller);

tlf.flowComposer.composeToPosition();

contentBounds = controller.getContentBounds();

controller.setCompositionSize(controller.compositionWidth, contentBounds.height);

tlf.flowComposer.updateAllControllers();

The above almost works entirely - everything except center aligning text.  In the stylesheet, I'm writing that property like this:

.nav_button_hover {

...

     #textAlign:center;

...

}

...but no luck - everything aligns left. 

I think the above is ancillary though - my real problem is trying to understand how HTML text and styles should be updated in a TextFlow when relying on an external stylesheet.  Consider a nav button that needs it's textDecoration value to respond (underline, none) as the user rolls over each selection.  In the Old Way, I'd change the htmlText, styling the XML derived content with an external stylesheet and it looked a bit like this:

tf.styleSheet = styleservice.style;

tf.htmlText = "<span class='" + el.@style + "'>" + String(el) + "</span>";

I am essentially wondering what the new workflow is to accomplish that same thing - especially as it applies to an external stylesheet and the rollover example updating the textDecoration.  That used to be just this:

tf.htmlText = "<span class='" + el.@hover_style + "'>" + String(el) + "</span>";

How would you accomplish it with a TextFlow?  Or should I be using a TextFlow at all?

Thanks very much for any help - I am most grateful.

- Ken


This topic has been closed for replies.

1 reply

Adobe Employee
December 15, 2011

CSSFormatResolver can work well with external stylesheet for sure.

Besides, TLF use "styleName" not "class". TLF only recognize attribute "styleName", I think it may be your blocker.

We have two detailed example to describ how to parse external stylesheet in flex way or non-flex way as follows,

http://blogs.adobe.com/tlf/files/2011/01/SimpleEditorWithCSS.zip

http://blogs.adobe.com/tlf/files/2011/01/AS3CSSSample.zip

The main idea is to implememt the functions in FormatResolver. How to read and parse the css totally depends on your implementation. The example show what I said.

gomperAuthor
Participant
December 15, 2011

Hi Jin-Huang,

Thanks very, very much for the examples and your quick response.  Your noting of the styleName attribute led me to change TextConverter.TEXT_FIELD_HTML_FORMAT to TextConverter.TEXT_LAYOUT_FORMAT, and then modify the way I was adding text content to (again, using the above example):

"<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p styleName='" + el.@style + "'><span>" + String(el)+ "</span></p></TextFlow>"

...and then I can change content with the text property and call updateAllControllers and it works.

I can update text like this:

tlf.mxmlChildren[0].getFirstLeaf().text = strmodel.strings[model.currentPageMediator.page.continueText];

tlf.flowComposer.updateAllControllers();

...and styles like this:

tlf.mxmlChildren[0].getFirstLeaf().styleName = 'nav_button_hover';

tlf.flowComposer.updateAllControllers();

The mxmlChildren.getFirstLeaf() bit was key too.

If its possible, it might be helpful to a lot of people to have a simple example that uses 'TextConverter.TEXT_FIELD_HTML_FORMAT' available for downoad.  I had real trouble with it and could stand to see how it's actually supposed to be used.  If it's that HTML content cannot use 'class=' to style things, well... that seems like a very unusual decision for Adobe to have made when there already exists a vernacular that is highly familiar to developers, and is used by all the rest of the content on the web.  It's just my two cents, but I don't think developers want a flex-like (and, obtuse) approach to something as basic as putting styled text into flash content.  I think they want text in flash to simply work exactly the same way it does in HTML - that's what flash devs have always wanted.

Ranting aside, I am in your debt, sir.  Thank you very much for the help - it made my week. 

- Ken