TLF 2.0 Lists Markup

TLF 2.0 includes support for lists. Attached are two PDFs. The first describes the new markup and the second gives some examples:

Lists Markup

Lists Examples

The numbering algorithms for the various listStyleType values are defined here:
CSS3 List Style Types

40 Responses to TLF 2.0 Lists Markup

  1. Great news! A lot of people (including myself) have been waiting on this one.The ability to update from your sourceforge repository is also appreciated, as is your continued efforts to improve the framework.

  2. The ability to update from your sourceforge repository is also appreciated, as is your continued efforts to improve the framework.

  3. Brett Coffin says:

    Hi to all,I had a look a the TextLayoutEditor code and I have a question:Could you explain why you coded the InspectorBox elements in XML then parse it to convert it to flex components, instead of coding it in MXML?What is the benefit that this method offers comparing to coding those views in MXML in the first place?Regards Brett

  4. Brett Coffin says:

    Is there any examples using the lists that you could share ? could you provide the updated spark.swc compile to work with the flex4 sdk to help the prossess of moving to TLF2.0

  5. Brett Coffin says:

    I got the list to work 😉 I needed to update my player to 10.1 though…When I assign a textFlow with a list tag to any flex component ie: TextArea I get an Error: Type Coercion failed: cannot convert GlobalSWFContext to mx.core.IflexModuleFactory…is there a way to work with TLF2.0 and flex components ? if not could you show the best way to use TLF2.0 in a flex appliction context, any example would be nice ;)ps:Thanks for all your hard work

  6. Richard Dermer says:

    Not without modifying flexhttp://blogs.adobe.com/tlf/2010/07/flex-4-updates-for-tlf-20.htmlThis is not release quality software – its our in process development. Expect every change to be included. We’ll going to work something out so you know which changes are actual builds.

  7. Richard Dermer says:

    Regarding the TextLayoutEditor code. That’s contributed work from another project. In the end that project didn’t really go anywhere. Anyhow that code is available to you under the license.

  8. Brett Coffin says:

    I did replace those two classes and this was the error I got… are you saying that it should work and that i miss something, can you chec, I ve downloaded the open source sdk 4 remplaced the 2 classes run the main ant task open the textlayout 2.0 project run the main ant task… pointed the test project to that new sdk. I got the list to show with canvas.rawChildren add sprite to show the text flow, but passing a text flow with the list to any flex components gave me that error,Thanks for your work, regards

  9. Brett Coffin says:

    Can I use the TLF2.0 with flash player 10 or do I need 10.1 ?

  10. Richard Dermer says:

    TLF 2.0 fully supports FP 10.0. 10.1 is not required.

  11. Brett Coffin says:

    Maybe you missed my last post,I did replace those two classes and this was the error I got… are you saying that it should work and that i miss something, can you chec, I ve downloaded the open source sdk 4 remplaced the 2 classes run the main ant task open the textlayout 2.0 project run the main ant task… pointed the test project to that new sdk. I got the list to show with canvas.rawChildren add sprite to show the text flow, but passing a text flow with the list to any flex components gave me that error,Thanks for your work, regardsI still can’t get the list to show in a TextArea

  12. Richard Dermer says:

    I’m not sure. This example worked for me. Can you post one that fails? One possibility is that the older textLayout swc is still available in your environment and is confusing the compiler. I’d suggest removing it completely from the modified FlexSDK.RET.mxml

  13. Brett Coffin says:

    Finaly I got it to work Thanks ;)Great work guys !!! when can we expect seamless interagtion with the standard html sintax with the TLF ????

  14. Brett Coffin says:

    Do you have an example with a toggleBtn to add and remove bullet points that we can use ?

  15. Richard Dermer says:

    Interesting. There is a CreateListOperation and IEditManager.createList API but no RemoveListOperatiion. I’ll look into adding that.

  16. simple says:

    I got the same question with Brett Coffin, how do you make it work at the end?

  17. Richard Dermer says:

    I stumbled across this error on Friday. In the Project Properties –> Flex Build Path –> Library Path make sure you set Framework Linkage to “Merged into Code”. Otherwise it tries to use the older RLSs.

  18. Indeed great news! Where can I find the API Reference on lists/TLF 2.0?
    Will the lists also be a property of the ParagraphFormat class?

  19. Richard Dermer says:

    There were a huge number of changes between the Max prerelease and the 1.0 release. Sorry I don’t have a complete list. Much of it was described here. http://blogs.adobe.com/tlf/2009/02/tlf-api-changes-in-build-370-1.html – but even this is out of date.

    Adobe has a significant API review process and we spent many hours discussing and tuning the API.

  20. Rafique says:

    Hi,
    Any idea on which operation to call to promote or demote a list ?

    Thanks
    Rafique

  21. Hello Richard/Alan,
    I was making a small test to see if I could make the list work with the TextLayoutFormat, but didn’t get it to work. Here’s the test:

    var cs:Sprite = new Sprite();
    addChild(cs);

    var textFlow:TextFlow = new TextFlow();
    var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
    textFlow.format = textLayoutFormat;

    var paragraphElement = new ParagraphElement();
    var paragraphFormat:TextLayoutFormat = new TextLayoutFormat();
    paragraphElement.format = paragraphFormat;
    paragraphFormat.listStyleType = “disc”;
    paragraphFormat.listStylePosition = “outside”;
    textFlow.addChild(paragraphElement);

    var spanElement = new SpanElement();
    spanElement.text = “sdgfsd\rsdsd\rssd”;
    paragraphElement.addChild(spanElement);

    textFlow.flowComposer.addController(new ContainerController(cs, 400, 200));
    textFlow.flowComposer.updateAllControllers();

    What am I doing wrong? Should you indicate that every new line should be a list element? (And if so, how do you put this into the String?)

    • Richard Dermer says:

      List markers are only applied to the first paragraph in a ListItemElement. ListItemElements needs to be in a ListElement. So do this:

      var list:ListElement = new ListElement()
      list.listStyleType=”disc”; // note you don’t need to create a new TextLayoutFormat
      list.listStylePosition=”outside”;
      var item:ListItemElement = new ListItemElement();
      list.addChild(item)
      item.addChild(paragraphElement)
      textFlow.addChild(item);

      Check the examples for more information. They’re done with markup but it translates to the same thing.

  22. Ashar Azeem says:

    Hi Richard,

    Were you able to create a method to remove bullets?

    -Ashar

  23. Richard Dermer says:

    TLF 2.0 has the MoveChildrenOperation. You can use it to move the children of a ListElement to its parent and unbullet the list.

  24. Table says:

    please give me a way to create a dynamic table in TLF, can we add custom component in TLF in a specific position.. please ASAP..
    thanks,
    -Mad_u

    • Jin Huang says:

      Table is not supported till 3.0.
      It’s difficult to add custom component in TLF. Some are even final classes.

  25. Mad_u says:

    hi, can we add image with drag & drop properties in tlf?with respective interaction manager?

  26. Anton says:

    Hi to all!
    Can anyone explain me how is working MoveChildrenOperation? Would appreciate an example of using.
    Also, can I check if selected text is list?
    Thanks a lot!

  27. Anton says:

    Please help!
    I need example how to convert selected list to plain text programatically in RichEditableText.
    Thanks !