15 Replies Latest reply on Sep 1, 2007 5:10 AM by Starlover_jacob

    Display source code in textarea

    Starlover_jacob Level 1
      hello,

      I want to show the people some created code in my flex application.
      my question;
      how to show my source code in a textarea so the viewers of my application can see and copy whole html or java codes for their websites.

      for example this:
      <html>
      <head><title>this is a test</title></head>
      <body>
      <p>hello world</p>
      </body>
      </html>
        • 1. Re: Display source code in textarea
          jcastelain
          hi ,

          if you generate the docs in html format with asdoc you could probably load that content in your text area, just an idea
          • 2. Re: Display source code in textarea
            peterent Level 2
            Use the .text property of a <mx:TextArea> control. Do not use the .htmlText property as that will attempt to parse the items in angle-brackets.
            • 3. Re: Display source code in textarea
              Starlover_jacob Level 1
              i tried:

              <mx:TextArea x="0" y="0" width="574" height="265" condenseWhite="true">
              <mx:text>
              <html>
              </html>
              </mx:text>
              </mx:TextArea>

              and it will get me an error like this:
              Severity Description Resource In Folder Location Creation Time Id
              2 Encountered "\n\t\t\t\t\t\t{treeData}\n\t\t\t\t\t" at line 395, column 14.
              Was expecting one of:
              Style ...
              Script ...
              Metadata ...
              Model ...
              XML ...
              XMLList ...
              Array ...
              Binding ...
              String ...
              Number ...
              int ...
              uint ...
              Boolean ...
              Class ...
              Function ...
              Component ...
              Non-MXML language element ...
              Non-MXML language element ... sitemap.mxml sitemap line 395 10 december 2006 14:40:25 1764
              • 4. Re: Display source code in textarea
                M. Huisman Level 1
                Can't you put your text into a string and bind it to the textarea?

                like:

                var myHTMLString = "<html></html";
                TextAreaID.text = myHTMLString;


                or else set the dataprovider of the textarea to a [Bindable] string using dataprovider="{myHTMLString}"
                • 5. Re: Display source code in textarea
                  peterent Level 2
                  The problem is this:
                  <mx:text>
                  <html>
                  </html>
                  </mx:text>

                  Flex MXML files are parsed by XML rules, not HTML rules. Everything has to comply. So having <html></html> with <mx:text></mx:text> is unacceptable. To use angle-brackets inside of an MXML file you need to surround them with CDATA tags:
                  <mx:text><![CDATA[
                  <html>
                  </html>
                  ]]></mx:text>

                  Which is why you'll see a <mx:Script> block with those tags as it allows < and > to be used in if statements, among other things.
                  • 6. Re: Display source code in textarea
                    Starlover_jacob Level 1
                    Thanx a lot, it is working fine like you said.

                    Just one more question.

                    i have also got :
                    </mx:Script>
                    <mx:XMLList id="treeData">
                    <node label="Home"/>
                    <node label="Producten">
                    <node label="Printers" iets="1">
                    <node label="Hp"/>
                    <node label="Cannon"/>
                    <node label="Epson"/>
                    </node>
                    <node label="monitoren">
                    <node label="Samsung"/>
                    <node label="Phillips"/>
                    </node>
                    </node>
                    <node label="contact"/>
                    </mx:XMLList>

                    wich must be placed in line with the html.
                    i have also got some variables like var logoUrl:String=imagelogourl.text;
                    and later on some javascript. I guess that javascript works the same like html? but how do i get my {treedata} and logoUrl also inside of my code?

                    again thanx a lot for the given answers, all first times must lern ;-)

                    I hope you will understand what i'm writing (i am from holland)
                    • 7. Re: Display source code in textarea
                      FlightGuy Level 1
                      Given that you wish to insert additional text into this string, I would suggest you declare a string variable in script and attach its value to the text property of the textArea.

                      <mx:Script><![CDATA[
                      [Bindable]
                      var myCode:String;

                      private function setCode():void{
                      myCode = part1 + treeData.toString() + part2;
                      }

                      ]]></mx:Script>

                      <mx:TextArea text="{myCode}"/>

                      Here I've made reference to part1 and part2 which would be the literal HTML you're wishing to put around your xml. These can be set in script, or if you want to just type them you can do a:
                      <mx:String id="part1"><![CDATA[
                      <html>
                      ...other stuff
                      ]]></mx:String>
                      • 8. Re: Display source code in textarea
                        Starlover_jacob Level 1
                        <mx:TextArea x="0" y="0" width="574" height="322" condenseWhite="true">
                        <mx:text>
                        <![CDATA[
                        <!--
                        Variables
                        -->
                        var logoUrl:String="+imagelogourl.text+";
                        <html>
                        <head><title></title></head>
                        <body>
                        <table>
                        <tr>
                        <td>hallo</td>
                        </tr>
                        </table>
                        </body>
                        </html>
                        ]]>
                        </mx:text>
                        </mx:TextArea>
                        this works fine for my html setup, but how do i get the results of my variables integrated?
                        var logoUrl:String="+imagelogourl.text+";

                        i tried the following. This works, but the layout of my code is all on one line.

                        [Bindable]
                        private var part1:String="hallo";

                        [Bindable]
                        private var part2:String="<html>" +
                        " <head><title></title></head>" +
                        "<body>" +
                        "<table>" +
                        "<tr><td>hallo</td></tr></table></body></html>";
                        private function init():void
                        {
                        myCode = part1 + testtxt + part2;
                        }
                        <mx:TextArea text="{myCode}" x="50" y="247" width="226" height="157"/>


                        please some help here.
                        • 9. Re: Display source code in textarea
                          Starlover_jacob Level 1
                          still the same problem, please help

                          i want to display values of variables into the textarea.
                          the idea is to outline the code in a nice way (works fine with cdata tags)


                          a simple example:

                          -----------------------------------------------------
                          <?xml version="1.0" encoding="utf-8"?>
                          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                          <mx:Script>
                          <![CDATA[
                          [Bindable]
                          private var testvariable:String="some string inside the variable";
                          ]]>
                          </mx:Script>

                          <mx:TextArea x="-1" y="85" width="574" height="322">
                          <mx:text>
                          <![CDATA[
                          <html>
                          <head><title></title></head>
                          <body>
                          <table>
                          <tr>
                          <td> -- here the value of testvariable --</td>
                          </tr>
                          </table>
                          </body>
                          </html>
                          ]]>
                          </mx:text>
                          </mx:TextArea>
                          </mx:Application>
                          -------------------------------------------
                          • 10. Re: Display source code in textarea
                            peterent Level 2
                            I think I see the problem. I didn't explain something - the text tags (Text, Label, TextArea, TextInput, and RichTextEditor) all use the Flash Player to display the text. The Flash Player has limited capability when it comes to HTML. There are very few tags it knows about: <br>, <font>, <b>, <i>, <u>, <ul>, <li>, and maybe a few more.

                            The Flash Player does not know about <table>, <body>, or <html> tags. The reason the Flash Player doesn't know more HTML is that it would require the Flash Player to have an HTML processing engine in it - which would make the Flash Player 10-12 mbytes in size. Right now the footprint of the Flash Player is very small which is one the key advantages of Flash technology. That small footprint has enabled the Flash Player to be quickly downloaded to 98% of the world's computers - including dial-up users.

                            If you want to display a table of variable values, consider using a <mx:Grid> tag with a <mx:Repeater> inside of it.
                            • 11. Re: Display source code in textarea
                              Starlover_jacob Level 1
                              lets give some more info.

                              I am building an application that creates html.
                              so lets say someone choses a color. this colorinfo is stored in a variable.

                              at the end i want to show the user the generated code in the textarea nicely structured and not one line of code.

                              something like this:
                              in my flex code :<table color= myselectedcolor>
                              the textarea then shows
                              <table color=#ffffff>


                              so the user can copy the viewed code from the textarea and saves it into an html file for its website.

                              Hope you get my point.

                              Greetz, jacob (holland, so sorry for my english)

                              • 12. Re: Display source code in textarea
                                peterent Level 2
                                OK. Your ActionScript code is generating the HTML string, right?

                                var generatedHTMLCode:String;
                                // ActionScript code which builds the String, for example:
                                generatedHTMLCode = "<html><body>...... </body></html>":

                                So then you can show that in a TextArea using the TextArea's text propety:

                                <mx:TextArea id="showCode" ... />

                                showCode.text = generatedHTMLCode;
                                • 13. Re: Display source code in textarea
                                  Starlover_jacob Level 1
                                  correct, but that part i had working. (see simple example)

                                  my problem is that i collect a lot of data like the color of the table, the border size out of selection boxes.
                                  that value must be inplemented into the code so the user can copy all the text inside the textarea and save it in an html or php file.

                                  my question was how to get that value into the textarea (see simple examle where i want it)

                                  i tried {testvariable} like usaly.. but then the code is not outlined and shows as a block of text without tab structure.

                                  if not clear ask me again,

                                  greetz, jacob
                                  • 14. Re: Display source code in textarea
                                    peterent Level 2
                                    I now think I understand and if I'm correct, your initial explanation was not the problem - I just though you wanted something different.

                                    Using the CDATA within MXML is going to allow you to put the html tags in there without the MXML compiler thinking they are MXML tags. But, it also turns off data binding, which would be nice for you to use.

                                    The first thing that comes to mind is to put your HTML text into a String variable using placeholder characters. You could even use the same data-binding notation.

                                    var htmlString:String = "<table><tr><td>color</td><td>{fontColor}</td></tr></table>"

                                    The use:
                                    var pat:RegExp = new RegExp("{fontColor}");
                                    var newHtmlString:String = htmlString.replace(pat, selectedColor);

                                    That's a bit tedious. Maybe you could create an Array where each value correspond to a property:

                                    var htmlString:String = "<table><tr><td>color</td><td>[6]</td></tr></table>"

                                    var index:int = 6;
                                    propArray[index] = fontColor;

                                    pat = new RegExp( "[" + index + "]" );
                                    newHTMLString = htmlString.replace(pat, propArray[index]

                                    and put that into a loop.

                                    Or you could just make it brute force:

                                    var htmlString:String = "<table><tr><td>Color</td><td>" + fontColor + "</td></tr></table>";

                                    In the end, assign the htmlString to the TextArea's text property.

                                    There are more possibilities I think. It just isn't going to be simple.
                                    • 15. Re: Display source code in textarea
                                      Starlover_jacob Level 1
                                      thanx a lot peter, i have got what i was looking for

                                      example:

                                      <?xml version="1.0" encoding="utf-8"?>
                                      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                                      <mx:Script>
                                      <![CDATA[
                                      [Bindable]
                                      private var firstvar:String="#FFFFFF";

                                      [Bindable]
                                      private var secondvar:String="some info";

                                      [Bindable]
                                      private var htmltext:String="" +
                                      "<html>\r" +
                                      "<table>\r" +
                                      " <tr>\r" +
                                      " <td color=\""+firstvar+"\"><b>"+secondvar+"</b></td>\r" +
                                      " </tr>\r" +
                                      "</table>\r" +
                                      "</html>\r" +
                                      "dit zit in de variabele";
                                      ]]>
                                      </mx:Script>

                                      <mx:TextArea text="{htmltext}" x="287" y="31" width="286" height="278" horizontalScrollPolicy="on" wordWrap="false"/>

                                      </mx:Application>