10 Replies Latest reply on Aug 31, 2006 7:31 AM by dimival

    Basic AS code in MXML question

    Rendl
      Im a flex newb with a background of php. In php if I want to add script into my HTML I simply use the <? <code> ?> to do so.

      So I could do something like this:
      <?php
      if ($value > 5)
      { ?>
      value is greater than 5
      <?php } else { ?>
      value is less than 5
      <?php } ?>

      I have searched and have been testing with the <mx:Script> and <![CDATA[ ]]> block, but havent really found any clarity. Do I have to use both the mx:Script and CData blocks each time I want to embed some AS code within my MXML? Any examples would be immensely appreciated :)
        • 1. Re: Basic AS code in MXML question
          dimival Level 1
          In a MXML whenever you need to use AS code you put it inside the <mx:Script> component, like this:
          <mx:Script>
          <![CDATA[
          private function doSomething(): void
          {
          // your function
          }
          ]]>
          </mx:Script>

          You need both Script and the CDATA blocks whenever you want to add AS code, but you only need one block per MXML, unlike PHP where you use a <code> block in different parts of your code. In flex you can add all the code you want inside one and just one Script and CDATA block and it will be available to use anytime, anywhere inside your MXML.
          • 2. Re: Basic AS code in MXML question
            Rendl Level 1
            Thanks Dimival,

            I don't really understand how you could "use anytime" unless you were calling a function or similar.Any chance of showing how you would code the PHP example above?

            Also one more question which is kinda of puzzling me. If I want to display a string variable in a textbox, how do I write that? I know I can make a bindable function. Do I need to set the string variable as a return value? Can that variable then be used by {function.variable}?



            • 3. Re: Basic AS code in MXML question
              Josh Johnson Level 1
              You can write some simple scripts inline, but for things like your example, I think going to a function is best, so it would look something like this:

              <mx:Script>
              <![CDATA[
              private function outputValueString(value:int):String {
              var output:String = "value is ";
              if (value > 5) {
              output += "greater";
              }else{
              output += "less";
              }
              output += " than 5";
              return output;
              }
              ]]>
              </mx:Script>

              <mx:Label text="{outputValueString(3)}" />

              <mx:Label text="{outputValueString(8)}" />

              From what I can tell with Flex, it's a little more rigid than PHP, where you can't go jumping in and out of the script all the time, though I tend to avoid that anyway as I find it tough to maintain. Hope this is helpful.
              • 4. Re: Basic AS code in MXML question
                peterent Level 2
                Just a bit of trivia: the CDATA is an XML thing - it tells the XML parser that everything within it is to be treated as-is. You are not required to use it, but if use < and > in your ActionScript without CDATA, the XML parser will complain. So as a rule of thumb, always use the CDATA.

                You can have multiple <mx:Script> blocks in an MXML file. The MXML compiler (mxmlc) takes your MXML file with the MX tags and ActionScript code and creates a pure ActionScript file out of it. So all MXML is doing is making it easier to write the layout. For example:

                <mx:Button label="test" />

                could also be: var b:Button = new Button(); b.label = "test"; addChild(b); if you didn't want to use MXML at all.

                PHP is generally used to build HTML pages. The mixture of code and tags allows you to do several things: work with data and present it on a static page (OK, some interaction if you also include JavaScript). The issue with this is that your PHP file then contains PHP code, HTML tags, and probably JavaScript - essentially 3 languages. Plus the PHP is not only concerned with building the UI (the HTML), it is also concerned with prepping the data.

                You can argue that you also manipulate the data in Flex, but really Flex allows you to separate the UI function from the data model more cleanly than you can with PHP. And yes, you can use PHP objects and get all fancy with it, but in the end, you are making static HTML.
                • 5. Re: Basic AS code in MXML question
                  dimival Level 1
                  quote:

                  Originally posted by: Rendl
                  Thanks Dimival,

                  I don't really understand how you could "use anytime" unless you were calling a function or similar.Any chance of showing how you would code the PHP example above?

                  Also one more question which is kinda of puzzling me. If I want to display a string variable in a textbox, how do I write that? I know I can make a bindable function. Do I need to set the string variable as a return value? Can that variable then be used by {function.variable}?



                  Your MXML in the end, while is being compiled, will become an AS class, so think about it as a whole script file. AS Script blocks unlike PHP do not execute as they appear in a page, like i said it is a class after all, so the code is executed when you require it. For example, let's say that the function you wrote above returns a String:

                  <mx:Script>
                  <![CDATA[
                  private function compareValues(value:Number): String
                  {
                  if (value > 5){
                  return 'greater than 5';
                  }
                  else{
                  return 'less than 5'
                  }
                  }
                  ]]>
                  </mx:Script>

                  <mx:TextInput text = " {compareValues(7)} "/>

                  In this example, you want a TextInput to display if a value (in this case 7) is greater or less than 5, so you call the compareValues function which returns a string that is assigned to the text property of the TextInput control.
                  As you can see this function is executed because the TextInput control makes a call to it, if the TextInput control does'nt make the call, then that code won't be executed.
                  When writting code in Flex you need to have very clear that is not like PHP, in which the code is executed in order to dinamically render an HTML page, in Flex every file in the end will be treated as an AS class, xml tags in MXML files are translated into AS expressions, so in the end every .mxml file is actually an AS class, like someone wrote above, it is the same to write:
                  <mx:Button label="test" />

                  than writing:

                  <mx:Script>
                  <![CDATA[
                  var b = new Button()
                  b.label = 'test';
                  addChild(b);
                  ]]>
                  </mx:Script>

                  in the end the xml tag, will become the code above, script code

                  You can use as many Script blocks as you want, that is true, but i think it would be pointless to write more than one, because in the end everyhting will become a huge AS block, a class. So you use xml tag components to avoid writing that code inside an Script block, and you can write functions and other kind of code inside the Script block, remember that in the end EVERYTHING will be an AS class, a huge Script block.

                  Hope this helps you out, i suggest you to read the first chapters of the Flex Developers Guide or the Getting Started with Flex guide
                  • 6. Re: Basic AS code in MXML question
                    Rendl Level 1
                    Thanks Dimival that is a great response. Clears a lot up :)
                    • 7. Re: Basic AS code in MXML question
                      dimival Level 1
                      Anytime man, dont' forget to mark my post as the answer for this topic :P (only you can mark it as the answer cause you created this topic)
                      • 8. Re: Basic AS code in MXML question
                        Rendl Level 1
                        Ok so I actually found a problem trying this.

                        <mx:Script>
                        <![CDATA[

                        private function loggedIn(value:String): String
                        {
                        if (value == "ok"){
                        return 'successful';
                        }
                        else{
                        return 'broken'
                        }
                        }
                        ]]>
                        </mx:Script>

                        <mx:Label x="193" y="222" text="{loggedIn(ok)}" fontSize="14"/>

                        With this I get a 1120: "access of undefined property ok"

                        • 9. Re: Basic AS code in MXML question
                          peterent Level 2
                          You are missing quotes around the OK:

                          <mx:Label x="193" y="222" text="{loggedIn(ok)}" fontSize="14"/>

                          to
                          <mx:Label x="193" y="222" text="{loggedIn('ok')}" fontSize="14"/>

                          What appears in the { } is ActionScript so it has to be correct.
                          • 10. Re: Basic AS code in MXML question
                            dimival Level 1
                            quote:

                            Originally posted by: Rendl
                            Ok so I actually found a problem trying this.

                            <mx:Script>
                            <![CDATA[

                            private function loggedIn(value:String): String
                            {
                            if (value == "ok"){
                            return 'successful';
                            }
                            else{
                            return 'broken'
                            }
                            }
                            ]]>
                            </mx:Script>

                            <mx:Label x="193" y="222" text="{loggedIn(ok)}" fontSize="14"/>

                            With this I get a 1120: "access of undefined property ok"




                            Yep, you are missing the quotes when calling your function parameter, it is expeceting a string, it should be: text = "{loggedIn('ok')}"
                            You were trying to send a property named ok which doesn't exist.

                            In your code you are passong