2 Replies Latest reply on Nov 16, 2011 9:31 AM by bart2335658

    Flex mobile and databinding

    bart2335658

      Is data binding feature supported in flex mobile project? I have data binding code used in <s: Application>. When I move the application to flex mobile in <s: view>, I can't seem to make data binding work.

        • 1. Re: Flex mobile and databinding
          Shongrunden Adobe Employee

          Yes it is supported.  Do you have a simple, complete code example that demonstrates this not working?

          • 2. Re: Flex mobile and databinding
            bart2335658 Level 1

            <?xml version="1.0" encoding="utf-8"?>

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

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

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

                                             xmlns:amcharts="http://www.amcharts.com/com_internal"

                                             backgroundColor="#FFFFFF"

                                             width="100%" height="100%"

                                             viewSourceURL="srcview/index.html">

              <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

              </fx:Declarations>

             

              <fx:Script>

                                          <![CDATA[

                                                    import mx.collections.ArrayCollection;

                                                    import flash.filters.DropShadowFilter;

             

                                                    [Bindable]private var chartData:ArrayCollection = new ArrayCollection([

                                                              {year:2001,income:23.5,expenses:18.1},

                                                              {year:2002,income:26.2,expenses:22.8},

                                                              {year:2003,income:30.1,expenses:23.9},

                                                              {year:2004,income:29.5,expenses:25.1},

                                                              {year:2005,income:24.6,expenses:25.0},

                                                              {year:2006,income:25.5,expenses:18.1},

                                                              {year:2007,income:26.2,expenses:52.8},

                                                              {year:2008,income:36.1,expenses:23.9},

                                                              {year:2009,income:24.5,expenses:33.1},

                                                              {year:2010,income:44.6,expenses:29.0}

                                                    ]);

             

                                                    [Bindable]private var shadow:DropShadowFilter = new DropShadowFilter(2,45,0,0.5);

             

                                          ]]>

              </fx:Script>   

             

                                <s:VGroup width="100%" height="100%">

                                          <s:Group width="100%" height="100%">

              <amcharts:AmSerialChart

                                                              id="chart"

                                                              width="100%"

                                                              height="100%"                

                                                              dataProvider="{chartData}"

                                                              categoryField="year"

                                                              angle="30"

                                                              depth3D="30">

             

              <amcharts:graphs>

                                                                        <amcharts:AmGraph title="Income" id="g0" valueField="income" type="column" lineAlpha="0" fillColors="[#ADD981]" fillAlphas="[1]"/>                       

                                                                        <amcharts:AmGraph title="Expenses" markerType="line" id="g1" valueField="expenses" type="line" lineThickness="2" bullet="round" filters="{[shadow]}"/>                       

              </amcharts:graphs>

              <amcharts:valueAxes>

                                                                        <amcharts:ValueAxis dashLength="5"/>                           

              </amcharts:valueAxes>

              <amcharts:categoryAxis>

                                                                        <amcharts:CategoryAxis gridPosition="start" dashLength="5"/>

              </amcharts:categoryAxis>

              </amcharts:AmSerialChart>

             

              <amcharts:AmLegend

                                                              color="0x000000"

                                                              x="45"

                                                              y="10"

                                                              switchable="false"

                                                              dataProvider="{chart}"

                                                              width="100%"

                                                              marginRight="20"

                                                              marginLeft="40"

                                                              textClickEnabled="false"

                                                              marginBottom="5"/>                    

              </s:Group>

                                          <s:HGroup width="100%">

                                                    <mx:Spacer width="32"/>

                                                    <mx:DataGrid dataProvider="{chartData}" width="100%" editable="true" height="100"/>                   

                                                    <mx:Spacer width="20"/>

              </s:HGroup>

                                          <mx:Spacer height="10"/>

                                </s:VGroup>           

            </s:View>