7 Replies Latest reply on Dec 12, 2011 5:43 PM by AndyS_MM

    Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?

    rexdtripod Level 1

      I have a little chat component in a Flex Mobile app that I just upgraded to SDK 4.6.  The chat component has a text area displaying messages and they are HTML formatted via the following:

       

      StyleableTextField(textArea).htmlText += myHTMLText;

       

      Worked in SDK 4.5 but StyleableTextField is not a part of the new Stage Text framework introduced in SDK 4.6.

       

      How do I HTML format the messages in my chat text area now?

        • 1. Re: Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?
          Flex harUI Adobe Employee

          You can go back to the StyleableTextField skins by setting skinClass=”spark.skins.mobile.TextAreaSkin” (or TextInputSkin)

          1 person found this helpful
          • 2. Re: Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?
            rexdtripod Level 1

            Thanks much for your response.

             

            Hmmm...  That appears to work but also causes a runtime exception where there was none before the 4.6 upgrade.  It occurs when I autoscroll on receiving a new message in the chat, something that worked fine in 4.5.

             

             

            I guess I'm kind of wondering what the best practice is here.  Maybe I'm just doing this wrong altogether.  I'm finding it very difficult to implement probably one of the most basic features one would find in any collaborative app - something that was very easy in Flex 3 - the chat pane.  I've had one functioning fine for about 3 years.  Not so much in Flex mobile.

             

            Chat is very simple functionality.  When you receive a new message from afar...

             

            1.  add it to a TextArea with some nice formatting

            2.  auto scroll far enough so the user can see the new message in its entirety. 

             

            Nothing difficult at all.

             

            Why are these two things difficult to find in the TextArea in Flex mobile?  It almost seems as though it's something we're not supposed to be doing? 

             

            The answer here seems to be don't use Stage Text.  Revert to an older TextArea skin.  Why?  What text area doesn't need formatting as an option?  What text area doesn't need to be auto scrolled here and there?  Or am I just going about this wrong?  Maybe using the wrong components?

             

            I guess for now I can revert to 4.5 skin, but now the code I used to auto scroll on receiving a new message throws a null pointer exception.  I've been using the valueCommit property to auto scroll, as follows:

             

            valueCommit="textArea.scroller.verticalScrollBar.value = textArea.scroller.verticalScrollBar.maximum"

             

            Haven't had a problem prevously.  But this now throws:

             

            TypeError: Error #1009: Cannot access a property or method of a null object reference.

                      at com.components::ChatWindow/__textArea_valueCommit()

             

            What's the best practice to accomplish this and also to be able to take advantage of the latest and greatest?

            • 3. Re: Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?
              Flex harUI Adobe Employee

              My guess is that the exception is because you can’t assume there will always be a scrollbar?

               

              StageText turned out to be hard to do so in the current form, there are limitations, like it can’t be used in a scroller.  That means you have to make a trade-off.

               

              -Alex

              1 person found this helpful
              • 4. Re: Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?
                rexdtripod Level 1

                I can see that.  But even using the non Stage Text skin - the "spark.skins.mobile.TextAreaSkin", there doesn't seem to be an easy way to auto scroll on receiving a new message.  Am I using the wrong component?  Again this no longer works:

                 

                valueCommit="textArea.scroller.verticalScrollBar.value = textArea.scroller.verticalScrollBar.maximum"

                • 5. Re: Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?
                  rexdtripod Level 1

                  I see what you're saying on the exception.  Hmmm...  Maybe it was just masked or something in 4.5.  For some reason the exception happens in 4.6 only.  Something under the hood has shaken this loose.  Still reviewing...

                  • 6. Re: Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?
                    Flex harUI Adobe Employee

                    I think in 4.5, the scrollbars were always there.  We might have made them more dynamic to make scroller more lightweight, then you can no longer depend on them being there.  Seems like you should be able to set horizontalScrollPosition or verticalScrollPosition instead?

                    • 7. Re: Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?
                      AndyS_MM Level 1

                      I think I was able to find a resolution for you (and myself) while looking at devgirl.org. It appears that you do not need to set the skinClass on your textArea in MXML (as suggested above). Setting the skinClass fixed my Android issue.

                       

                      In actionscript, import this class:

                      import spark.components.supportClasses.StyleableTextField;

                       

                      Also in actionscript, add the following to your new text handler:

                      ta.appendText(newText);

                      StyleableTextField(ta.textDisplay).scrollV++;

                       

                       

                       

                      I am not exactly sure why, but this solution is working fine on an iPad, but it's not working for me on an Android tablet I am testing with here. The TextArea on the Android tablet isn't scrolling unless it's in focus. Maybe I made a mistake deploying to the Android device, and I'll double check that. Fixed this by setting the skinClass on the component.