I've seen many posts on using datagrid for flex mobile apps and the performance issues that comes with it.
I wish i could get those performance issues because my problem is that i can't even see the datagrid component in my component list, only list, datagroup e.t.c
I have tried to uncheck the "Only show recemmended component" but i still cant find it in the component list. But when i create a flex project (not mobile), i see it. But then, i want to use it in a mobile project.
This will be my first mobile app. Any help will be appreciated.
Thanks in advance.
How about write below code? Of course, you can add component at source view also. Not only can it by using design view and component list.
<s:DataGrid id="grid" width="100%" height="100%">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="name" headerText="Name"/>
<s:GridColumn dataField="age" headerText="Age"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
As far as I remember, it can use DataGrid in mobile project without any special settings.
Related
I use for the first time Apache Flex SDK since Adobe gave it to Apache and I want to implement simple drag and drop functionality on a Spark Datagrid to modify order of its items.
My simple test code:
<s:DataGrid dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" dataProvider="{_ac}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="a" />
<s:GridColumn dataField="b" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
Each time I drag/drop item from my datagrid to the same datagrid, my item is stored on second index...Is there any reason or is this bugged what would explain why it wasn't implemented in the last releases...
I am working on a Flex 4.6 Mobile project and am trying to use a list to navigate views from a menu view that has been set up.
I'm finding tutorials from Adobe, but most involve changing to the same view and just altering data based on which list item you clicked. What I am actually trying to do is , depending on which list item you click on, you get a unrelated view pushed in, different views completely per list item. Also, did I go about this the wrong way? I understand there are many different ways to navigate the views, with buttons, tabs, etc. But this is something that has been asked for. Example of my current list:
<s:List id="toolsList" x="10" y="284" width="255" height="197" borderVisible="false"
color="black" downColor="#00764C" fontSize="16" fontWeight="bold"
skinClass="view.skins.ListSkin" verticalScrollPolicy="off">
<s:itemRenderer>
<fx:Component>
<renderers:StyledIconItemRenderer labelField="label" iconField="icon"/>
</fx:Component>
</s:itemRenderer>
<s:ArrayCollection>
<fx:Object label="Settings" icon="#Embed('resources/arrow.png')"/>
<fx:Object label="Fault Current Search" icon="#Embed('resources/arrow.png')"/>
<fx:Object label="Share Picture" icon="#Embed('resources/arrow.png')"/>
<fx:Object label="System Info" icon="#Embed('resources/arrow.png')"/>
</s:ArrayCollection>
</s:List>
So, based on above example I would like to click on the "Settings" list item and get my settings view, then when I "pop" the settings view, I will go back to the menu and if I click the "Share Picture" list item, then I get that specific view, and so forth.
I am not really asking anyone to write code for me here, but maybe even point me in the right direction of a online example that maybe I haven't found yet.
Thank you in advance for any consideration
If you store some data on each item in the ArrayCollection about which view it should navigate to, then you could write a change event handler for the list that reads this data and will push the appropriate view.
For example, add the fully qualified class name of the view that each item should go to:
<s:ArrayCollection>
<fx:Object label="Settings" icon="#Embed('resources/arrow.png')" viewClass="com.whatever.SettingsClass/>
...
</s:ArrayCollection>
Then add a click handler to the list:
<s:List id="theList" change="onSelectedItemChange()" />
private function onSelectedItemChange():void
{
var className:String = theList.selectedItem.viewClass;
var viewClass:Class = getDefinitionByName(className) as Class;
ViewNavigatorApplication.navigator.pushView(viewClass);
}
I need to create an application where I can add files for upload. As I add items for upload, a progressbar should be displayed along with each item added. And when I click for file upload, the progress of file upload for each file should be reflected in the progress bar. The progress should use the function like
.....
addEventListener(ProgressEvent.Progress, uploadProgressHandler);
private function uploadProgressHandler(event:ProgressEvent):void
{
var numPerc:Number = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);
//this.progBar.validateNow();
.....
}
Can anyone provide help me out?
See these examples:
Multiple File Upload with Flex and PHP
which looks like this:
Multiple File Upload With Progress Bar Using Flash and ASP.NET
which looks like this:
Flex has a ProgressBar class, have you checked that out yet?
Here are two great examples of Flex file uploaders (using HTTP):
Flex File Uploader using PHP, with source.
Merb and Adobe AIR File Uploader, with source.
alt text http://blog.vixiom.com/uploads/merb_air_upload.png
In order to make the above two examples work together to achieve the desired result (multiple file uploader, one ProgressBar per preloader, in Flex), all you need to do is:
Download the Flex File Uploader PHP Project
Download the Merb AIR Uploader and copy/paste the "UploadProgressComponent.mxml" somewhere into the PHP project (copy to src/UploadProgressComponent.mxml for now).
Replace the DataGrid with a List and a Custom ItemRenderer in FileUpload.mxml in the Flex File Uploader PHP Project.
Replace this:
<mx:DataGrid id="listFiles" left="0" top="0" bottom="0" right="0"
allowMultipleSelection="true" verticalScrollPolicy="on"
draggableColumns="false" resizableColumns="false" sortableColumns="false">
<mx:columns>
<mx:DataGridColumn headerText="File" dataField="name" wordWrap="true"/>
<mx:DataGridColumn headerText="Size" dataField="size" width="75" textAlign="right"/>
</mx:columns>
</mx:DataGrid>
with this:
<mx:List id="listFiles" left="0" top="0" bottom="0" right="0"
allowMultipleSelection="true" verticalScrollPolicy="on"
itemRenderer="UploadProgressComponent"/>
The result: Multiple file uploader in Flex, with a custom ItemRenderer that has a ProgressBar for each FileReference. Uploads to a PHP script, which you can swap out for anything.
Should be very easy to customize from there. Let me know if that works,
Lance
I'm writing an Adobe AIR application using a ViewStack for the different application states. Is there a way to make sure that each view component is created/destroyed each time it is shown/hidden?
For instance, if I have a TextInput in a view, I want it to reset to its initial state each time I change to that view, rather than having previously entered text. Or, if I have a Timer, I want it to be destroyed when I leave the view so that it doesn't keep running when I'm in an unrelated part of the application. I know that I can manually initialize/destroy everything on the show() and hide() events, but is there an easier way?
AFAIK there is no built-in way to do this, so you'll have to do it manually by handling the show and hide events as you mention.
ViewStack does however have two methods "saveState" and "loadState" which could perhaps help you out with this. The history manager uses these methods to enable back/forward navigation. The docs don't seem to have any examples though.
ViewStacks can be the work of the devil when it comes to creation/deletion policies and managing state. We had all sorts of problems when we developed fiat ecoDrive and by about 3/4 of the way though we we're all very anti ViewStacks for the management of view state within our application.
However... a good bet would be to first set the creationPolicy to ContainerCreationPolicy.NONE. That way it's in your control as to when to create any of the panels in your ViewStack. Then i would think you would need to have some sort of logic so that as the ViewStack changes a panel it deletes or resets the one you were on.
Another viable alternative would be to use view states instead. Have a base state which acts as the main container and then a simple state for each of your sections. That way when you switch to a new state, the old state gets removed in reverse order to the way it was created. You do have to be disciplined with states though as they can end up getting really complex and messy when they start becoming nested. If you keep it simple it may work as you require.
In MXML 2009, you can use itemDestructionPolicy="auto" to destroy a component after use it. If you use this property in the first view component with two states (init, logged), you can destroy and reinitialize all child view components. Example :
<s:states>
<s:State name="init" />
<s:State name="logged" />
</s:states>
<s:SkinnableContainer id="skincon" width="100%" height="100%" backgroundAlpha="0"
backgroundColor="#FFFFFF">
<s:VGroup id="MainContainer" width="100%" height="100%" paddingTop="0"
paddingLeft="20" paddingRight="20" gap="0">
<views:_HeaderView id="header" />
<mx:ViewStack id="viewStack" width="100%" height="100%">
<s:NavigatorContent includeIn="init" itemDestructionPolicy="auto">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<views:LoginView title="Login" id="loginView" />
</s:NavigatorContent>
<s:NavigatorContent includeIn="logged" itemDestructionPolicy="auto">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="top" />
</s:layout>
<views:_CentralView id="userView" />
</s:NavigatorContent>
</mx:ViewStack>
<views:_FooterView id="footer" />
</s:VGroup>
</s:SkinnableContainer>
Both answers are correct -- there doesn't seem to be any built-in way to do it. I solved the problem by creating a "wrapper" component for my view component. It creates a new view component each time the view is shown. This isn't ideal, but fits my requirements nicely, and required few changes to my application structure.
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" show="init()" hide="cleanup()">
<mx:Script>
<![CDATA[
private var myComponent:MyComponent;
private function init():void
{
myComponent = new MyComponent();
componentContainer.addChild(myComponent);
}
private function cleanup():void
{
componentContainer.removeAllChildren();
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" id="componentContainer" />
</mx:Canvas>
Build your "views" as separate Modules, and then use the ViewStack to switch between them. You could then write a function to destroy the unused module(s) (check each module against the selectedChild property) when the ViewStack's "change" event is fired.
2ยข
I am using different states for my different views. On each state change i add and remove components.
This causes the add and remove events of UIComponent fire which allows me to initialize and cleanup my components each time they are added.
This is the idea...
<mx:states>
<mx:State name="state1">
<mx:AddChild>
<mx:SomeUIComponent id="myComp" add="myComp.initialize()" remove="myComp.cleanup()"/>
</mx:AddChild>
</mx:State>
</mx:states>
Our resident Flex expert is out for the day and I thought this would be a good chance to test this site out. I have a dropdown with a dataProvider that is working fine:
<ep:ComboBox id="dead_reason" selectedValue="{_data.dead_reason}"
dataProvider="{_data.staticData.dead_reason}"
labelField="#label" width="300"/>
The ComboBox is custom but I'm not sure if that matters for the question. I need to change the combo box to radios (all in one group) but maintain the dynamic options. In other words, what is the best way to generate dynamic RadioButtons?
Try using an <mx:Repeater> Something like:
<mx:Repeater dataProvider="{_data.staticData.dead_reason}">
<mx:RadioButton groupName="reasons" ...>
</mx:Repeater>
<mx:RadioButtonGroup id="RDO_Group"/>
<mx:Repeater id="myRepeater" dataProvider="{_data.staticData.dead_reason}">
<mx:RadioButton id="rdo" label="{myRepeater.currentItem}" value="{myRepeater.currentItem}" groupName="RDO_Group"/>
</mx:Repeater>
is the best way.