Skip to main content
Participant
December 9, 2010
Answered

TLF and Flex Mobile

  • December 9, 2010
  • 1 reply
  • 2514 views

Has anyone tried using TLF code in a Flex 4.5 Mobile application? Everything compiles and runs fine but the text is invisible. Any known workarounds for this?

This topic has been closed for replies.
Correct answer Bill_Sahlas

In the example above, the text does not even show up. It's not visible at all. Is there an example of TLF with pagination that runs on Mobile?


Oops  - I missed the no visible text rendering issue. At this time there are no examples for mobile that would included TLF 2.0 components. We're encouraging folks to not use TLF 2.0 on mobile at this time due to performance reasons. This 'invisible-text' or non-rendering text could very well be a side affect of this performance issue (i.e. timing).

1 reply

Bill_Sahlas
Participating Frequently
December 13, 2010

Hi, what exactly are you compiling and running? Please post your code - I'll see if we can take a look.

amosamAuthor
Participant
December 14, 2010

I was trying to run a simple pagination example that works fine as a web app.

It uses the paginationWidget.as and Alice.as files which can be found here: http://blogs.adobe.com/tlf/files/2010/09/Pagination20Build169.zip

Any help would be appreciated.

Thanks

The code for the Home view is:

<?xml version="1.0" encoding="utf-8"?>

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" title="Home">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import tools.PaginationWidget;

import flashx.textLayout.conversion.TextConverter;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.formats.TextAlign;

import flashx.textLayout.formats.TextLayoutFormat;

public var pageView:PaginationWidget = new PaginationWidget();

public var curChapter:int = -1;

private function init():void {

storyBox.width=this.width;

storyBox.addChild(pageView);

pageView.setSize(storyBox.width, storyBox.height);

setChapter(0);

}

private function setChapter(chapterNumber:int):void

{

curChapter = chapterNumber;

var textFlow:TextFlow = TextConverter.importToFlow(Alice.contents[chapterNumber], TextConverter.TEXT_LAYOUT_FORMAT);

pageView.textFlow = textFlow;

}

private function prevChapter():void

{

if (curChapter > 0)

setChapter(curChapter-1);

}

private function nextChapter():void

{

if (curChapter >= 0 && curChapter < Alice.contents.length-1)

setChapter(curChapter+1);

}

]]>

</fx:Script>

<s:Group top="0" left="0" right="0">

<s:Button left="100" top="0" width="70" height="25" label="np"

  click="pageView.nextPage()" fontSize="18"/>

<s:Button left="0" top="0" width="70" height="25" label="pp"

  click="pageView.prevPage()" fontSize="18"/>

<s:Button right="0" top="0" width="70" height="25" label="nc" click="nextChapter()" fontSize="18"/>

<s:Button right="100" top="0" width="70" height="25" label="pc" click="prevChapter()" fontSize="18"/>

<s:SpriteVisualElement id="storyBox" top="25" bottom="0" left="0" right="0" />

</s:Group>

</s:View>

Bill_Sahlas
Participating Frequently
December 15, 2010

For most text in a mobile UI, we recommend using TextField-based text for maximum performance. The mobile skins and item renderers in Hero follow this guideline. It's possible to use the TLF-based components like RichText for cases where you need to display rich content, but we don't recommend using it for the bulk of your UI elements in mobile projects.

Were you seeing performance issues or some other errors?