This tutorial will help you setup TLF development environment. This is a work in progress. It may not be correct.

To setup TLF, first, follow the instructions in the parent post on setting up the SDK, 1.2 Setting up Manually. When that is finished continue with the following steps.

Add Flex SDK to the Workspace

Add the built Flex SDK to the workspace

  1. Create a new workspace
  2. Add the new Flex SDK you just built to the installed Flex SDK path. See the parent page on instructions for your IDE, 2. Setting up IDEs (optional)

Create Flex Project

We'll create a Flex project that we can use to work on our TLF changes.

  1. Turn off build automatically (if you use the textLayout library as described below)
  2. Create a new Flex project
  3. Open up the project properties panel of the Flex project you just created
  4. In the Flex Compiler options choose the new built Flex SDK
  5. In the Build Path Libraries select the new SDK and expand the folder
  6. Remove the textLayout.swc (continued in the next section)

Add TextLayout SWC to Flex Project

  1. In the Flex Project properties panel
  2. Click the Add SWC button

  3. Browse to the flex-tlf/bin directory (not flex-tlf/src/bin) and choose the textLayout.swc

    flex-tlf/bin
  4. Click on edit source path and point it to the flex-tlf/src directory
  5. Click OK and exit out

The results should look similar to the following:

  1. Click OK and close out of the project properties panel
  2. Open up Explorer or Finder and go to the new built Flex SDK directory. The frameworks/libs directory contains the textLayout.swc. 
  3. Rename the textLayout.swc to textLayout_backup.txt.

Create the TLF Library

Now we add the textLayout library to the project. We do this to make code completion and go to definition work although in some cases it will work fine without it. This step is optional.

  1. Go back to Flash Builder and choose File > New > Flex Library Project.
    1. Name the project textLayout
    2. In the Project Location uncheck "Use default location"
    3. Browse to the flex-tlf/textLayout directory and select it as the install directory
  2. In the Flex SDK version, choose any built Flex SDK
  3. Click Finish

The Package Explorer should look similar to the following:

NOTE: After creating the textLayout library project as described in this section Flash Builder 4.7 crashed. It seemed to work fine after a restart. You may be fine without this step. For navigation just open the referenced libraries in your main project and double click on the class (For example, TextFlow.abc) and it will open in the editor. You can also use go to definition by right clicking on a class name in the editor of the class within the project.

Work and build TLF

Every time we make a change we need to build the TLF SDK again and update the textLayout swc. We compile the textLayout swc with the ant command in the flex-tlf directory.

  1. Open a terminal window and change to the flex-tlf directory.

  2. In this directory run ant main

    ant main

    This should build the textLayout.swc

  3. Back in Flash Builder select the project you are working on and select Project > Clean. FYI Do not run clean or build on textLayout.

 

To verify that changes are taking effect do the following:

  1. open the ContainerController.as file in flashx/textLayout/container.

    flashx/textLayout/container/ContainerController.as

  2. Add a trace call like the following in the constructor of the ContainerController class:

            public function ContainerController(container:Sprite,compositionWidth:Number=100,compositionHeight:Number=100)
        {
            initialize(container,compositionWidth,compositionHeight);
            trace("Are we here?");
        }
  3. Save the file

  4. Go to the command line and run:

    ant main
  5. Go into Flash Builder and clean only the project you are working on (DO NOT clean the textLayout project).

  6. In your application complete event create an instance of ContainerController and run the application: 

    <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
               applicationComplete="applicationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            import flashx.textLayout.container.ContainerController;

            protected function applicationCompleteHandler(event:FlexEvent):void
            {
                new ContainerController(this, 100, 100);
            }

        ]]>
    </fx:Script>

</s:Application>

If everything is setup correctly you should see your trace statement in the console.

Troubleshooting

Summary

Opening a definition using CMD + Click is opening the class but it is from the default SDK. It appears to work if you are inside a file in your project. If you are outside of the class it opens the incorrect version. For example, if you click on TextFlow class name in your main application file it opens the correct TextFlow class. But if you are in the TextFlow class and then Command + Click on ContainerFormattedElement from within the editor of the TextFlow it opens the class based on the default SDK.

Causes

I think this is a bug with Flash Builder 4.7. Or the source path in the textLayout.swc could be incorrect.

Solutions
  • Use Command + Shift + T to open the Type dialog. Type in the name of the class into the search field. This should open the class.
  • Check the path in the textLayout.swc and make sure it is pointing to the source path
  • Only use Command + Click when inside your project
  • Set the default SDK in Flash Builder to the SDK that points to the class path that you want to use (choosing the current SDK could cause open definition for TLF classes to fail altogether). This option requires a restart.

 

  • No labels