8 Replies Latest reply on Oct 27, 2009 1:18 AM by rfrishbe

    problem with inline FXG in Flash Builder

    bernie393

      Hello,

      True newbie to Flex and Flash Builder.

      I am trying to use FXG code out of Illustrator CS4 and PASTE in in a skin.mxml file.

      I thought that Flash Builder would automatically convert the <Graphic> tag to a Spark <s:Graphic> tag after I pasted in the SHOW CODE segment from Illustrator Save function.

      The same for all the other tags.

      It does not. Flash Builder just gives me an error when I save the Skin.mxml file.

       

      I don't want to just import the .FXG file as a component because it contains text in the layout I want to dynamically change in an <s:List.>

       

       

      Sample code:

       

      <s:Skin
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:mx="library://ns.adobe.com/flex/halo"

          xmlns:ai="http://ns.adobe.com/ai/2008"
          xmlns:d="http://ns.adobe.com/fxg/2008/dt"
          xmlns:graphics="assets.graphics.*">
          <fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
          <s:states>
              <s:State name="normal"/>
              <s:State name="disabled"/>
          </s:states>
          <s:Rect
              height="457"
              ai:objID="4ee65600"
              d:userLabel="pageContentArea"
              width="921"
              x="0.5"
              y="1.5">
              <s:stroke>
                  <s:SolidColorStroke caps="none" color="0x002581" joints="miter" miterLimit="4" scaleMode="normal" weight="1" color.normal="#3993d2"/>
              </s:stroke>
          </s:Rect>
          <Graphic version="1.0" viewHeight="2000" viewWidth="2000" ai:appVersion="14.0.0.367" d:id="1" >
                  <Library>
                      <Definition name="sym3d_Pyramid_Rainbow" d:userLabel="3d Pyramid Rainbow">
                          <Group>
                              <Group x="-7.52246" y="-24.9131">
                                  <Group ai:knockout="0">
                                      <Path winding="nonZero" ai:knockout="0" data="M0.358887 9.48828L7.5249 12.5605 7.521 0.279297 0.358887 9.48828Z" >
                                          <fill>
                                              <LinearGradient x="2.04785" y="11.2568" scaleX="11.5761" rotation="-45">
                                                  <GradientEntry color="#ed2324" ratio="0"/>
                                                  <GradientEntry color="#ed2224" ratio="0.617977"/>
                                                  <GradientEntry color="#ed2324" ratio="0.629213"/>
                                                  <GradientEntry color="#ed2024" ratio="0.983146"/>
                                              </LinearGradient>

       

       

       

      How do get this to work? What am I doing wrong?

       

      Thanks,

      bernie393

        • 1. Re: problem with inline FXG in Flash Builder
          Ely Greenfield Level 1

          FXG is not supported inline in MXML (in this release).  you'll need to 

          manually convert the FXG to MXML tags by changing the namespace and 

          moving a few things around (move the Library tag to the top of your 

          MXML file).  Or, use Catalyst to convert from FXG to MXML.

           

          Ely.

          • 2. Re: problem with inline FXG in Flash Builder
            bernie393 Level 1

            Thank you soooooo much for answering....

            I don't quite understand.

            Without Catalyst, should I just bring up the FXG in a text editor and manually change the tags (ex...<Graphics>) to MXML tags?

            Is there a way to make Flash Builder Beta 2 do it?

            Are there any complete instructions on this?

            Sorry to be winded.....

             

            I have a AI artboard/file that has some graphic elements and text elements that I need to populate in a List component as a repeatable item from fetched data from PHP. So I would like to bring it in the as part of the Skin or ItemRenderer (not 100% sure which one I can bind data to) and DYNAMICALLY change about 5 fields/labels for each record returned from my result set and shown in the List component. I have about 20 pages that have been rendered in AI and I need to make pages out of them. Since the AI files already have the layout of the text and graphics, I thought it would be much easier to move them in by copying the FXG code out of AI by using the Show Code button rather than fully saving the FXG file. I am under the impression that if I try to bring the FXG in as a component that I can no longer bind any of the text to actual data returned from the PHP program. For example I have a date value (in text in AI file) in the FXG graphics. There is a date value in the data records I am pulling from PHP. In the list I want to substitute the date text in my AI\FXG file by making it a RichText or something in Flex and then binding it to the field in each record returned and seeing the date from the record in that place when I display the List component. If 10 records come back from server, the List component will show 10 items, and each of those items may have a different date from the 10 records.

             

            THANK YOU THANK YOU THANK YOU for your help...from the forums and different tutorials, this is not very clear.

             

            Bernie393......

            • 3. Re: problem with inline FXG in Flash Builder
              Peter Farland Level 3

              You could additionally map the default namespace prefix to the spark component namespace:

               

               

              <s:Skin

                  xmlns:s="library://ns.adobe.com/flex/spark"

                  xmlns="library://ns.adobe.com/flex/spark"

                  xmlns:fx="http://ns.adobe.com/mxml/2009"

                  ...

              • 4. Re: problem with inline FXG in Flash Builder
                Peter Farland Level 3

                And yes, as Ely said, should be at the bottom).

                • 5. Re: problem with inline FXG in Flash Builder
                  bernie393 Level 1

                  Hey Peter, Again I REALLY appreciate your help....

                   

                  So, Are you saying if follow the below process steps it will work?

                   

                  1. Copy of code from AI Save as FXG dialog box using the Show Code button.

                  2. Open the Skin or ItemRenderer in Flash Builder Beta 2. (which one should I use to be able to BIND data, skin or itemrenderer)

                  3. Paste the code in AT THE BOTTOM (after the Skin or ItemRenderer) (tags will still be in <Graphic> format NOT <s:Graphic> format)

                  4. Move the Library tags to the top of pasted code.

                  5. Save the file in Flash Builder that it will convert the tags to (s:xxxxxxx) type tags>

                   

                  IF this is wrong, please explain..I apologize, trying to pick this up as fast as I can...Solving this problem would allow me to move very quickly in creating the pages I have to.

                  Not knowing Flex 4 well enough, it would take considerably more time if I had to save each individual OBJECT from AI and export as png or jpg or gif.

                  I also would have to recreate the layout from scratch which would also be difficult at my current knowledge level.....

                   

                   

                  Also, a learning point for me: In Flex 4 when I do this in Flash Catalyst (I have over 30 pages to build and probably 45 states and when work in Flash Catalyst it will crash if I move to many times in and out of editting components so I have to save often so I cannot do the whole in Catalyst and I need a repeatable process to get all  the different page graphics out of AI and into Flash Builder), Catalyst creates a List component in the main MXML file, a skin.mxml file, and a item renderer.mxml file. I am use to coding in Smalltalk, Javascript, and Java. What parts are considered the Model, View, and Controller in a MVC architecture?

                   

                   

                  Thank you again Peter......

                   

                  Bernie393

                  • 6. Re: problem with inline FXG in Flash Builder
                    Peter Farland Level 3

                    That process should work - but I don't think Flash Builder converts tag to use MXML 2009 + Spark namespaces...

                     

                    MyGraphic.mxml

                    • 7. Re: problem with inline FXG in Flash Builder
                      bernie393 Level 1

                      Ok....Thanks Peter.

                      I will convert the FXG tags to MXML tags outside of Flash Builder in notepad or something and the paste into Skin or ItemRenderer.

                      Regarding my question as to where to paste the code Skin or ItemRenderer?

                      Also, MVC architechture?

                       

                      Thanks,

                      Bernie393

                      • 8. Re: problem with inline FXG in Flash Builder
                        rfrishbe Level 3

                        If your FXG is just a set of graphical components, then they don't need to be part of a Skin or an ItemRenderer at all.  If they are intended to be a skin of a component, like of a Button, then put them in a Skin and use that to skin your component.  If they are intended to represent a data item, then make it an ItemRenderer.

                         

                        FXG (and MXML Graphics) should just be thought of as an easy way to represent drawing primitives in XML, which helps make it more readable and more toolable.  What you do with those graphical objects depends on your use-case.

                         

                        -Ryan