Burrito mobile project charting components

[Yennick_Trevels]

I have a problem when trying to use the charting components in a Flex Hero mobile project with Flash Builder Burrito.

The release notes(http://labs.adobe.com/wiki/index.php/Flex_SDK_Hero) of Flex Hero state that the charting components aren't included in a mobile project by default, but that you can add the swc's manually.

So I created a new "Flex Mobile Project" in Burrito and added the charting swc's (datavisualization.swc and mx.swc) to the project. But when I try to use the Barchart component or any other chart component I get errors in my Flex application because it cannot resolve the component.

I have a feeling this problem has something to do with the com.adobe.flexide.project.multiplatform.multiplatformnature used in the .project file in a mobile project, but I'm not 100% sure.

Anyone else having this problem and is there any way to resolve this problem?

[Jason San Jose]

Add mx.swc and that should fix the problem for the preview release. This is likely to change by the final release.

Jason San Jose

Software Engineer, Flex Mobile

[Yennick_Trevels]

I've added the mx.swc, but my mxml files can't find the charting components. The content assist works fine for the standard components in the mx.swc library, so the problem is the datavisualization.swc library. When I use ctrl+shift+t to search for a chart component (e.g. a barchart) it can find it, it's only in the mxml files that it can't find those components.

[Jason San Jose]

Wow, sorry. I misread your original post. What you did (adding datavisualization and mx SWCs) should work. Since we don't include the MX namespace in airmobile-config, you'll need to add xmlns:charts="mx.charts.*" to your document root tag. After that, you should see code hints for "<charts:".

If you need the mx prefix, add a "ProjectName-config.xml" to your project "src" folder with the following content:

<flex-config>
   <compiler>
      <namespaces>
         <namespace>
            <uri>library://ns.adobe.com/flex/mx</uri>
            <manifest>/path/tosdks/4.5.0/mx-manifest.xml</manifest>
         </namespace>
      </namespaces>
   </compiler>
</flex-config>

When you do this, you should get xmlns:mx="library://ns.adobe.com/flex/mx" as a namespace declaration and <mx:BarChart/> in code hints.

Jason San Jose

Software Engineer, Flex Mobile

[Yennick_Trevels]

Thanks Jason, it works now!

But isn't this a bug in Flash Builder Burrito? I'm used to Flash Builder adding the namespace declaration automatically to the root tag when using autocomplete.

[Jason San Jose · Accepted solution]

It appears so. Please file a bug and post the link here.

[Yennick_Trevels]

http://bugs.adobe.com/jira/browse/FB-28538

[Guest]

If I follow the above steps to add charting components into my mobile projects, e.g. in Adobe's reference project http://www.adobe.com/devnet/flex/testdrivemobile/articles/mtd_1_3.html  FlashBuilder reports that it "Could not resolve <s:CallResponder> to a component implementation"

If, for the sake of argument, I remove all references to CallResponder and add in e.g.

    <mx:Panel title="Plot Chart">
        <mx:PlotChart id="myChart"
                      showDataTips="true"/>
    </mx:Panel>

I then get a host or errors :

Description    Resource    Path    Location    Type
1120: Access of undefined property ButtonSkin.    MobileTestDrive        line 810    Flex Problem
1120: Access of undefined property ContainerBorderSkin.    MobileTestDrive        line 842    Flex Problem
1120: Access of undefined property DefaultButtonSkin.    MobileTestDrive        line 807    Flex Problem
1120: Access of undefined property PanelBorderSkin.    MobileTestDrive        line 920    Flex Problem
1120: Access of undefined property ScrollBarDownButtonSkin.    MobileTestDrive        line 960    Flex Problem
1120: Access of undefined property ScrollBarThumbSkin.    MobileTestDrive        line 964    Flex Problem
1120: Access of undefined property ScrollBarTrackSkin.    MobileTestDrive        line 959    Flex Problem
1120: Access of undefined property ScrollBarUpButtonSkin.    MobileTestDrive        line 961    Flex Problem
1172: Definition mx.skins.spark:ButtonSkin could not be found.    MobileTestDrive        line 28    Flex Problem
1172: Definition mx.skins.spark:ContainerBorderSkin could not be found.    MobileTestDrive        line 29    Flex Problem
1172: Definition mx.skins.spark:DefaultButtonSkin could not be found.    MobileTestDrive        line 16    Flex Problem
1172: Definition mx.skins.spark:PanelBorderSkin could not be found.    MobileTestDrive        line 17    Flex Problem
1172: Definition mx.skins.spark:ScrollBarDownButtonSkin could not be found.    MobileTestDrive        line 14    Flex Problem
1172: Definition mx.skins.spark:ScrollBarThumbSkin could not be found.    MobileTestDrive        line 12    Flex Problem
1172: Definition mx.skins.spark:ScrollBarTrackSkin could not be found.    MobileTestDrive        line 19    Flex Problem
1172: Definition mx.skins.spark:ScrollBarUpButtonSkin could not be found.    MobileTestDrive        line 24    Flex Problem

A clash between Spark/Mx, but what to do about it?

[Guest]

My "workaround" is to create a FlexLibrary project for Desktop/Mobile/Web in which I add my Charting classes.

In the Mobile project, I reference the Library project *but I must add mx.swc, datavisualization.swc and sparkskins.swc* to the build path for the Mobile project.  These sparkskins.swc seems to be the factor I was missing.

I have not tried again (and will not, this costs too much time) to integrate the charting components directly in the same project.

[Guest]

ok, so here's another problem with charting in a mobile project... if I'm not mistaken there's a problem with the mobile skin.

Although this renders (if you have the datavisualisation.swc and mx.swc and sparkskins.swc in your libs folder) you will not see any text on the axis or in the tooltips.   Does anybody have an explanation and solution?  I'm not understand how the skinning is put together in spark :

<?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" title="Home" xmlns:local="*"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:charts="mx.charts.*"
        xmlns:datavis="mx.charts.series.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
        <fx:Script><![CDATA[
            import mx.collections.ArrayCollection;
           
            [Bindable]
            public var expenses:ArrayCollection = new ArrayCollection([
                {Month:"January", Profit:2000, Expenses:1500, Amount:450},
                {Month:"February", Profit:1000, Expenses:200, Amount:600},
                {Month:"March", Profit:1500, Expenses:500, Amount:300},
                {Month:"April", Profit:500, Expenses:300, Amount:500},
                {Month:"May", Profit:1000, Expenses:450, Amount:250},
                {Month:"June", Profit:2000, Expenses:500, Amount:700}
            ]);
           
        ]]></fx:Script>
   
        <mx:Panel title="Plot Chart">
            <charts:PlotChart id="myChart" dataProvider="{expenses}"
                          showDataTips="true">
                <charts:series>
                    <datavis:PlotSeries
                        xField="Expenses"
                        yField="Profit"
                        displayName="Plot 1"
                        />
                    <datavis:PlotSeries
                        xField="Amount"
                        yField="Expenses"
                        displayName="Plot 2"
                        />
                    <datavis:PlotSeries
                        xField="Profit"
                        yField="Amount"
                        displayName="Plot 3"
                        />
                </charts:series>
            </charts:PlotChart>
            <charts:Legend dataProvider="{myChart}"/>
        </mx:Panel>
   
</s:View>

[jfowl1]

You have it wrapped in a Panel that has a default white background.  The skin displays all labels as white.  As such, the white on white makes it look like the text is not showing up.  It's actually there.

Quickest solution:  (change panel background color)

<mx:Panel title="Plot Chart" backgroundColor="0x484848">

Hope this helps.

john...

PS.  Start new threads for questions, so that it is easier for searching.

[Guest]

Doh, just realised that myself. Embarassing. Thanks for the reply though.