Stepped Spark List / Group
Hello,
currently I have a List with a Custom ItemRenderer and a Scrollbar with step interval set to the ItemRenderers height.
I als implemented a Transition for the list items for 'smooth snapping'.
Something like this:
A = the List height
B = the height of the itemRenderer
and the Snap interval is also B
A B
| |
|
|
|
|
|
Basicly what I want top achive, is a "magnetic" (snapping) kind of scrolling.
Now here comes my question, when I enable snapping and only have a low amount of Items , the jumps of the Scrollbar are quite huge.
Is there a way to just enable snapping for the Items in the list and not for the scrollbar ?
Basicly I just have to start the transition once the Slider reached a threshold, no?!
Any hints, suggestions on that topic *please* ?
I don't think there are any other APIs. I suppose you could try to detect
partial rows and adjust the scrollposition.
Similar Messages
-
I have a spark list with custom itemRenderers and I have a filter on the list. I run the filter, but at random times the filter doesn't work. I threw in some trace statements and its passing the filter but the screen doesn't show the filters results. It only shows the results of the last filter. I think it has to do with the spark lists itemRenderer resuse.
Is this a known bug?The bug is in TileLayout.
If I remove the the TileLayout the list functions as aspected. Here is a simple example. Make sure when running the app to follow these instructions.
1. Run the app (notice the list shows all the items in it)
2. Click "K"
3. Click "All"
4. Look at the Bottom list to see if only two items show even when "ALL" is selected.
5.Repeat steps 2-4 until you see the bug.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/12/scrolling-to-a-specific-index-in-a-spark-list-cont rol-in-flex-4/ -->
<s:Application name="Spark_List_ensureIndexIsVisible_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var array:Array = ['one', 'otwo', 'othree', 'ofour', 'ofive', 'osix', 'oseven', 'oeight', 'nine', 'nten'];
private var myAC:ArrayCollection = new ArrayCollection( array );
private function setAlphaFilter() : void {
if( myAC ) {
myAC.filterFunction = alphaFilter;
myAC.refresh();
private function alphaFilter( item:Object ) : Boolean {
var tempStr:String;
if( String(alphaList.selectedItem.firstName).toLowerCase() == 'all' ) {
return true;
if( item.toLowerCase().charAt(0) == String(alphaList.selectedItem.firstName).toLowerCase() ) { // if something a letter is selected.
return true;
return false;
]]>
</fx:Script>
<s:List id="alphaList" changing="setAlphaFilter()"
width="100%" top="2" bottom="2" left="2" right="2" borderColor="#7F7F7F" >
<s:layout>
<s:HorizontalLayout columnWidth="20" paddingLeft="1" />
</s:layout>
<!-- itemRenderer is inline in this sample -->
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group top="1">
<s:Label id="blah" text="{data.firstName}" fontSize="13" bottom="1" top="1" right="1" left="1" />
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object firstName="All" />
<fx:Object firstName="A" />
<fx:Object firstName="B" />
<fx:Object firstName="C" />
<fx:Object firstName="D" />
<fx:Object firstName="E" />
<fx:Object firstName="F" />
<fx:Object firstName="G" />
<fx:Object firstName="H" />
<fx:Object firstName="I" />
<fx:Object firstName="J" />
<fx:Object firstName="K" />
<fx:Object firstName="L" />
<fx:Object firstName="M" />
<fx:Object firstName="N" />
<fx:Object firstName="O" />
<fx:Object firstName="P" />
<fx:Object firstName="Q" />
<fx:Object firstName="R" />
<fx:Object firstName="S" />
<fx:Object firstName="T" />
<fx:Object firstName="U" />
<fx:Object firstName="V" />
<fx:Object firstName="W" />
<fx:Object firstName="X" />
<fx:Object firstName="Y" />
<fx:Object firstName="Z" />
<fx:Object firstName="1" />
<fx:Object firstName="2" />
<fx:Object firstName="3" />
<fx:Object firstName="4" />
<fx:Object firstName="5" />
<fx:Object firstName="6" />
<fx:Object firstName="7" />
<fx:Object firstName="8" />
<fx:Object firstName="9" />
</s:ArrayList>
</s:dataProvider>
</s:List>
<s:List id="list" width="630" height="100"
horizontalCenter="0" verticalCenter="0" dataProvider="{myAC}" useVirtualLayout="true" allowMultipleSelection="true">
<s:layout>
<s:TileLayout columnWidth="300" rowHeight="50" verticalGap="1" horizontalGap="1"
requestedColumnCount="2" />
</s:layout>
</s:List>
</s:Application> -
Honestly, I have never had a customer ask me 'how' do I identify which Items go together in a specific category. I am thinking I start with the Functional Area (Inv, PO, OM, WM, etc..) attributes, and start the grouping there. The customer is asking for "best practices" - any input would be appreciated.
I have a fresh install of Oracle Inventory, Purchasing, Order Management, Service - We have 2,000,000 part numbers.
How have you instructed your customers/clients (both Internal and External) in the PROCESS of categorizing all of their Items?
What is the Step-by-step process of grouping those 2MM items into accurate Category Sets and more accurately into the most correct Category.
I would 'assume' it would start with some analysis with all the Items listed with all the item attributes, and start with ECCN (for example) or Item Type grouping. Then...(?)
Thanks!
rdNo answer to No.1 but I really want to find it out too.
No.2
If you already know list of the categories & ID you can manually create a list of checkboxes
<input type="checkbox" name="CAT_Category" value="89081" />
<input type="checkbox" name="CAT_Category" value="89082" />
<input type="checkbox" name="CAT_Category" value="89083" />
something like that should work -
Need help with navigation within a spark list...
hey guys, so in my application when you click on a list item, it opens up an image, and along with the image a few buttons are created dynamically...
the image and the url/labels for the dynamic buttons is provided through an xml/xmlListCollection.
what i need help with is the url or more specifically when you click on one of these dynamic buttons it needs to navigate me to another part of an list or display a certain set of images that is not in my spark list...
please let me know if this makes no sence
the code i have is
<code>
[Bindable] private var menuXml:XML;
[Bindable] private var imgList:XMLListCollection = new XMLListCollection();
[Bindable] private var navControl:XMLListCollection = new XMLListCollection();
[Bindable] private var fullList:XMLListCollection = new XMLListCollection();
private var returnedXml:XMLListCollection = new XMLListCollection();
private var myXmlSource:XML = new XML();
//[Bindable] private var xmlReturn:Object;
private var currImage:int = 0;
//public var userOpProv:XMLListCollection = new XMLListCollection();
//private var troubleShootProvider:XMLListCollection = new XMLListCollection();
private function myXml_resultHandeler(event:ResultEvent):void{
userOptionProvider.source = event.result.apx32.userOptions.children();
troubleShootProvider.source = event.result.apx32.troubleShooting.children();
fullList.source = event.result.apx32.children();
returnedXml.source = event.result[0].children();
myXmlSource = event.result[0];
private function myXml_faultHandler(event:FaultEvent):void{
Alert.show("Error loading XML");
Alert.show(event.fault.message);
private function app_creationComplete(event:FlexEvent):void{
userOptions.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
myXml.send();
//trouble.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
myXml = new HTTPService();
myXml.url = "modules/apx32/apx32TroubleshootingXml.xml";
myXml.resultFormat = "e4x";
myXml.addEventListener(ResultEvent.RESULT, myXml_resultHandeler);
myXml.addEventListener(FaultEvent.FAULT, myXml_faultHandler);
myXml.send();
private function troubleShootChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = troubleShootProvider[event.newIndex].children();
currImage = 0;
imgList.source = troubleShootProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
//var isMultiPage:String = navControl[2]["multiPages"];
//trace(isMultiPage);
// if(isMultiPage){
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
private function customButtonPressed(event:Event):void{
if(imgList[currImage].button.@changeTo != ""){
private function userOptionsChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = userOptionProvider[event.newIndex].children();
currImage = 0;
imgList.source = userOptionProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
dynamicButtons.addElement(newButton);
var isMultiPage:String = navControl[2]["multiPages"];
if(isMultiPage == "true"){
if(navControl[2]["next"] == "NEXT STEP"){
navContainer.x = 630;
else{
navContainer.x = 640;
next.label = navControl[2]["next"];
back.label = navControl[2]["back"];
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
private function nextClickHandler(event:MouseEvent):void{
currImage += 1;
dynamicButtons.removeAllElements();
if(currImage >= imgList.length-1){
currImage = imgList.length - 1;
//next.visible = false;
next.label = "YOU'RE DONE";
else
next.label = navControl[2]["next"];
back.visible = true;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
definition.source = imgList[currImage].@url;
private function backClickHandler(event:MouseEvent):void{
currImage -= 1;
dynamicButtons.removeAllElements();
if(currImage == 0){
back.visible = false;
next.visible = true;
next.label = navControl[2]["next"];
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
definition.source = imgList[currImage].@url;
</code>
i have attached a copy of the xml that i have right now to this post for reference...
any help will be greatly appretiated!!! i've been stuck on this problem for the last week and my project is due soon
again thank you in advance...hey david... just nevermind my previous post... I was able to subclass a link button, so i now have two variables that get assigned to a link button,
one is "tabId" <-- contains the information on which tab to swtich to, and the second is, "changeTo"... this contans the label name which it needs to switch to
I'm just stuck on how to change my selected item in my tabNavigator/list
the code i have right now is
private function customButtonPressed(event:Event):void{
if(event.currentTarget.tabId == "troubleShooting"){
for each(var item:Object in troubleShootProvider){
if(item.@label == event.currentTarget.changeTo){
private function userOptionsChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = userOptionProvider[event.newIndex].children();
currImage = 0;
imgList.source = userOptionProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:customLinkButton = new customLinkButton();
newButton.label = item.@name;
newButton.tabId = item.@tab;
newButton.changeTo = item.@changeTo;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
dynamicButtons.addElement(newButton);
var isMultiPage:String = navControl[2]["multiPages"];
var videoPresent:String = navControl[1]["videoPresent"];
if(videoPresent == "true"){
if(isMultiPage != "true"){
navContainer.x = 825;
if(isMultiPage == "true"){
if(navControl[2]["next"] == "NEXT STEP"){
navContainer.x = 630;
else{
navContainer.x = 640;
next.label = navControl[2]["next"];
back.label = navControl[2]["back"];
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
as you know, my xml gets divided into two saperate xmllistcollections one is the userOptionProvider, and the troubleshootingProvider
as is in the following xml
<mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
tabWidth="137.5" creationPolicy="all" borderVisible="false">
<mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
borderVisible="false" contentBackgroundColor="#e9e9e9"
change="userOptionsChange(event)">
<s:dataProvider>
<s:XMLListCollection id="userOptionProvider" />
</s:dataProvider>
</s:List>
</mx:VBox>
<mx:VBox label="TROUBLESHOOTING">
<s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9"
change="troubleShootChange(event)">
<s:dataProvider>
<s:XMLListCollection id="troubleShootProvider" />
</s:dataProvider>
</s:List>
</mx:VBox>
</mx:TabNavigator>
Im having some trouble updating my list... basically change to the troubleshooting tab, and then select the one that i need...
hopefully that makes sence... -
Spark list horizontal scroller doesn't actualize when rows is set lesser than list container
Hello,
The size of the Image control is set larger than that of its parent Group container. By default, the child extends past the boundaries of the parent container. Rather than allow the child to extend past the boundaries of the parent container, the Scroller specifies to clip the child to the boundaries and display scroll bars.
In the spark list, when I change the list dataProvider and the size of the Image control is set lesser than that of its parent Group container, the horizontal scroller doesn't actualize.
thanks.<!-- Simple example to demonstrate the Spark List component -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="comp()" width="260" height="400">
<fx:Script>
<![CDATA[
import mx.collections.*;
public var dpArray:Array;
[Bindable]
public var dpCol:ArrayCollection;
public function handleClick():void {
dpCol.removeAll();
dpCol.addItem({ label:"spark test" });
dpCol.addItem({ label:"spark text" });
public function comp():void {
dpCol = new ArrayCollection(dpArray);
dpCol.addItem({ label:"spark list horizontal scroller doesn't actualize when rows is set lesser than list container" });
dpCol.addItem({ label:"spark test" });
dpCol.addItem({ label:"spark text" });
]]>
</fx:Script>
<s:Panel title="List">
<s:VGroup left="20" right="20" top="20" bottom="20">
<s:List width="200" id="lis" dataProvider="{dpCol}" height="120"/>
<s:Button id="button1" label="Click here!" width="100" fontSize="12" click="handleClick();"/>
</s:VGroup>
</s:Panel>
</s:Application> -
Custom dragIndicator on Spark List Control
I have a Spark List Control that is displaying a tilelayout of dynamically imported Images. Basically, a bunch of thumbnail Images that are displayed in a tile layout. I have drag drop enabled so that I can reorder these thumbnails and everything is working great except for one thing, the dragIndicator. In my itemrenderer, I have the Image included in the "dragging" state, but the image is not showing in the dragIndicator. I am basically just getting a semi-transparent square as my dragIndicator, but I want to be able to actually drag my thumbnail. Any ideas how to do this?
Here is my List:
<s:List id="ImageList1" x="77" y="95" width="858" height="412" dataProvider="{imageAC}"
itemRenderer="renderers.ImageACSmallItemRenderer" contentBackgroundColor="0x000000"
borderVisible="false" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
allowMultipleSelection="true" skinClass="skins.General.ListSkin" focusAlpha="0" mouseMove="getImageProxy(event)">
<s:layout>
<s:TileLayout columnWidth="76" rowHeight="76" horizontalAlign="center" verticalAlign="middle"
horizontalGap="8" verticalGap="8"/>
</s:layout>
</s:List>
Here is my Itemrenderer:
<fx:Script>
<![CDATA[
import mx.utils.ObjectProxy;
[Bindable]
public var dataProxy:ObjectProxy;
private function init():void {
dataProxy = new ObjectProxy(data);
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
<s:State name="dragging" />
</s:states>
<mx:Image source="{dataProxy.pathSmall}" horizontalCenter="0" verticalCenter="0" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Thanks for any insight!Hi Evtim,
Earlier this summer, you helped me to create an itemRenderer that would allow me to drag photos in a list with a grid layout so that I could re-order them, and the dragIndicator would remain the photo instead of a empty box. We accomplished this by using the contentCache feature with the Spark BitmapImage. Now when I drag my photos, they remain photos even while being dragged. Your very elegant solution ended up looking like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="76" height="76" focusEnabled="false">
<fx:Script>
<![CDATA[
import spark.core.ContentCache;
static private const contentCache:ContentCache = new ContentCache();
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
<s:State name="dragging" />
</s:states>
<s:BitmapImage source="{data.pathSmall}" width="70" height="70" contentLoader="{contentCache}"
horizontalCenter="0" verticalCenter="0" alpha.dragging="2" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Now I have another little interesting challenge with this itemRenderer. I don't want to bore you with details, but the situation is that I will no longer be loading thumbnails that are 70x70 pixels in size, but I will be loading photos with various dimensions that have to be displayed as a 70x70 pixel thumbnail. So I am going to create a Group that is 70x70 pixels, turn on the clipAndEnableScrolling for the Group, and then place the photos within the Group so that they essentially get cropped. The images that I import will have to be resized to either 70 pixels wide or 70 pixels high depending on what is the larger dimension of the of the image, and then placed inside the Group so that I get a perfect center-crop of the images.
So to summarize, I need to load the photos using a loader. Then I can figure out with the height and width of the photos is. Then I can scale the photo so that the smaller dimension is 70 pixels, and then I can place it in the Group. But to do all of this, I can no longer do it in MXML but have to do it in ActionScript... and thus my dilema. I can't figure out how to use the contentCache properly in ActionScript so that the images stay images when dragged. Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="76" height="76" focusEnabled="false" dataChange="init(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import spark.core.ContentCache;
private var contentCache:ContentCache = new ContentCache();
private var imageLoader:Loader = new Loader();
private var bitmapImg:BitmapImage = new BitmapImage();
private var widthHolder:int;
private var heightHolder:int;
protected function init(event:FlexEvent):void {
var request:URLRequest = new URLRequest(FlexGlobals.topLevelApplication.imageAC[this.itemIndex].pathSmall);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, createVisuals);
imageLoader.load(request);
private function createVisuals(event:Event):void{
bitmapImg.source = Bitmap(imageLoader.content);
bitmapImg.horizontalCenter = 0;
bitmapImg.verticalCenter = 0;
bitmapImg.smooth = true;
bitmapImg.smoothingQuality = "high";
widthHolder = imageLoader.width;
heightHolder = imageLoader.height;
if (widthHolder > heightHolder) {
bitmapImg.width = int(Math.round(70*widthHolder/heightHolder));
bitmapImg.height = 70;
else {
bitmapImg.width = 70;
bitmapImg.height = int(Math.round(70*heightHolder/widthHolder));
imageGroup.addElement(bitmapImg);
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
<s:State name="dragging"/>
</s:states>
<s:Group id="imageGroup" width="70" height="70" horizontalCenter="0" verticalCenter="0" clipAndEnableScrolling="true"/>
</s:ItemRenderer>
So when there is a dataChange in my List, the init() function gets called to load the image. When the load is complete, the createVisuals() method resizes the image and places it in the Group. Everything is working as expected. The images get resized, centered and cropped within the group, and smoothed out so that they look nice. But now when I drag them, I get an empty box while dragging. I am unsure of how to tie in the contentCache with my bitmapImage object so that it will stay an image while being dragged using actionScript. I don't know if it is as simple as setting the contentLoader property for the bitmapImage object, or if it is more complicated and I need to set the image source for the "dragging" state. Could you possibly give me some insight as to how to make this happen in ActionScript?
Thanks for any insight!
Bill -
How Do You Populate A Spark List Control With An Array?
Hello, all,
Sorry to come accross so frustrated, but how in the name of God do you populate a Spark list control with the data in an array? You used to be able to do this with the mx:List control, but the guys developing Flex just had to make things more difficult than they need to be! I am more of a code purist and prefer doing things the way they have been done for decades, but apparently nothing can ever stay simple!
I simply want to populate a list control with an array and this shouldn't be rocket science! I found out that I must use a "collection" element, so I decided that an arrayCollection would be best. However, after searching Adobe's documentation about arrayCollections, I am lost in a black hole of data binding, extra lines of code just to add a new element, the need to sort it, etc...!
Here is my code:
var pendingArray:ArrayCollection = new ArrayCollection();
for ( var i:int = 0 ; i < queue.length ; i++ )
var item:UserQueueItem = queue[i] as UserQueueItem ;
if ( item.status == UserQueueItem.STATUS_PENDING )
pendingArray.addItem({label:item.descriptor.displayName,descriptor:item.descriptor});
Here is the relevant MXML:
<s:VGroup>
<s:List id="knockingList" width="110" height="100"/>
</s:VGroup>
I'm not getting any errors, but the list is not populating.
I have seen several examples where the arrayCollection is declared and populated in MXML:
<mx:ArrayCollection id="myAC">
<!-- Use an fx:Array tag to associate an id with the array. -->
<fx:Array id="myArray">
<fx:Object label="MI" data="Lansing"/>
<fx:Object label="MO" data="Jefferson City"/>
<fx:Object label="MA" data="Boston"/>
etc...
</fx:Array>
</mx:ArrayCollection>
That may be fine for an example, but I think this is a rare situation. Most of the time I would image that the arrayCollection would be created and populated on the fly in ActionScript! How can I do this?
Thanks in advance for any help or advice anyone can give!
MattIn your post it seemed like you were trying to take care of many considerations at once: optimization, design, architecture. I would suggest you get something up and running and then worry about everything else.
If I use data binding, then I will probably have to declare the arrayCollection as a global variable and then I'll have to write 100 or so extra lines of code to addItem(), removeItem(), sort(), etc... It just seems like too much overhead.
I believe you may have some misconceptions about databinding in general. You won't have to make it a global variable and you certainly won't need an extra 100 lines of code. If you did this forum would be a very , very quiet place.
I don't want to use data binding because the original array is refreshed often and there is one function called by an event that re-declares the arrayCollection each time, populates it with the array, and then sets it as the list's dataprovider.
That is the beauty of the ArrayCollection, it can handle the updates to its source Array. I don't know if you need to redeclare the ArrayCollection, resetting the source to the new Array allows everyone involved to keep their references so you don't have to worry about any "spooky" stuff going on. -
Grouping customers and view customer open items list - Group wise
Hi.
I have some requirement from my client.
He says that he want to view customer open items list group wise.
In FBL5N we can give the selection of multiple customers. But he wants to group the specific customers and then view the open items for this group.
For example: Client has 10 customers and out of these customers he wants to select and group 5 customers. And then he want to view open items list for this group.
Can anyone help me how to group these specific customers in the total customers list. Also request you to provide me the option to view open items for this group of customers.
Regards,
PadmavathiHi Padmavathi,
It is possible. use Worklist for Customers.
Go to OB55 and define a Worklist for Customers, and mention the list of Customers that you want to see under that Worklist.
After this, when you to to FBL5N, you will get an option to select Worklist to run the list of open items.. and it would show open items of all customers that you have defined in your worklist.
Also note that you will have to go to FB00, tab Line Items, and tick Worklists available. This is at User Level, so only that user will be able to see the worklist in his FBL5N transaction code.
Regards,
SAPFICO
Edited by: SAPFICO on Feb 10, 2011 11:43 AM -
How to search XML data from a HTTPMultiService and display the result on the Spark List
Hello all,
I am totally new to Flash Builder and Actionscript and hope someone might be able to help me out. I basically create a mobile app with a single view. The view has a TextInput as a search box and a search button. I conntected a Data/Service using a local XML file and bind the Data to a Spark List. Innitally the List will show nothing until the user enter the search term and hit the button. The List suppose to show the XML data that match the search term.
Now is my problem. I cannot make the List to show the data that match the search text. The List just shows ALL the data.
Here are my MXML code:
<?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:shopping="services.shopping.*"
title="Search">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function button1_clickHandler(event:MouseEvent):void
navigator.popView();
protected function list_creationCompleteHandler(event:FlexEvent):void
getDataResult.token = shopping.getData();
protected function seach_clickHandler(event:MouseEvent):void
getDataResult.token = shopping.getSearchData(searchTxt.text);
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getDataResult"/>
<shopping:Shopping id="shopping"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:actionContent>
<s:Button height="79" label="Back" click="button1_clickHandler(event)"/>
</s:actionContent>
<s:List id="list" left="0" right="0" top="111" bottom="0"
creationComplete="list_creationCompleteHandler(event)" labelField="english">
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:List>
<s:TextInput id="searchTxt" x="80" y="34" width="250" height="49" enabled="true"
prompt="search..."/>
<s:Button id="search" x="338" y="35" width="72" height="49" label="s"
click="seach_clickHandler(event)"/>
</s:View>
Here is the _Super_Shopping.as file:
* This is a generated class and is not intended for modification. To customize behavior
* of this service wrapper you may modify the generated sub-class of this class - Shopping.as.
package services.shopping
import com.adobe.fiber.core.model_internal;
import com.adobe.fiber.services.wrapper.HTTPServiceWrapper;
import com.adobe.serializers.xml.XMLSerializationFilter;
import mx.rpc.AbstractOperation;
import mx.rpc.AsyncToken;
import mx.rpc.http.HTTPMultiService;
import mx.rpc.http.Operation;
import valueObjects.Shop;
[ExcludeClass]
internal class _Super_Shopping extends com.adobe.fiber.services.wrapper.HTTPServiceWrapper
private static var serializer0:XMLSerializationFilter = new XMLSerializationFilter();
// Constructor
public function _Super_Shopping()
// initialize service control
_serviceControl = new mx.rpc.http.HTTPMultiService();
var operations:Array = new Array();
var operation:mx.rpc.http.Operation;
var argsArray:Array;
operation = new mx.rpc.http.Operation(null, "getData");
operation.url = "assets/data/shopping.xml";
operation.method = "GET";
operation.serializationFilter = serializer0;
operation.properties = new Object();
operation.properties["xPath"] = "/::shop";
operation.resultElementType = valueObjects.Shop;
operations.push(operation);
operation = new mx.rpc.http.Operation(null, "getSearchData");
operation.url = "assets/data/shopping.xml";
operation.method = "GET";
operation.resultFormat = "text";
argsArray = new Array("item");
operation.argumentNames = argsArray;
operation.properties = new Object();
operation.properties["xPath"] = "/::shop";
operation.resultElementType = valueObjects.Shop;
operations.push(operation);
_serviceControl.operationList = operations;
preInitializeService();
model_internal::initialize();
//init initialization routine here, child class to override
protected function preInitializeService():void
* This method is a generated wrapper used to call the 'getData' operation. It returns an mx.rpc.AsyncToken whose
* result property will be populated with the result of the operation when the server response is received.
* To use this result from MXML code, define a CallResponder component and assign its token property to this method's return value.
* You can then bind to CallResponder.lastResult or listen for the CallResponder.result or fault events.
* @see mx.rpc.AsyncToken
* @see mx.rpc.CallResponder
* @return an mx.rpc.AsyncToken whose result property will be populated with the result of the operation when the server response is received.
public function getData() : mx.rpc.AsyncToken
var _internal_operation:mx.rpc.AbstractOperation = _serviceControl.getOperation("getData");
var _internal_token:mx.rpc.AsyncToken = _internal_operation.send() ;
return _internal_token;
public function getSearchData(item:String) : mx.rpc.AsyncToken
var _internal_operation:mx.rpc.AbstractOperation = _serviceControl.getOperation("getSearchData");
var _internal_token:mx.rpc.AsyncToken = _internal_operation.send(item);
return _internal_token;
The getSearchData() supposed to return XML data that match the search text, but it doesn't. Can anyoen help?
Thank you!Hi,
are you able to change dynamically the operation.url = "assets/data/shopping.xml";?
i need to do that based on the users input.
Thanks in advance, -
How to handle multiple selection in the Spark List control with checkbox as itemrenderer?
Hi All,
I am using checkbox as an ItemRenderer in spark list.
I have a query.
how to handle multiple selection in the Spark List control with checkbox as itemrenderer?
how to retrieve the selected item label?
Thank you in advance.Hi there, I'll tweak your code a little bit to something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.CheckBox;
[Bindable]
private var mySelectedIndexes:ArrayCollection=new ArrayCollection();
private function onChange(e:ListEvent):void
if(CheckBox(e.itemRenderer).selected){
mySelectedIndexes.addItem(e.rowIndex);
}else{
mySelectedIndexes.removeItemAt(mySelectedIndexes.getItemIndex(e.rowIndex));
chkList.selectedIndices=mySelectedIndexes.toArray();
]]>
</mx:Script>
<mx:ArrayCollection id="collection">
<mx:Object label="Test A"/>
<mx:Object label="Test B"/>
<mx:Object label="Test C"/>
<mx:Object label="Test D"/>
<mx:Object label="Test E"/>
<mx:Object label="Test F"/>
<mx:Object label="Test G"/>
</mx:ArrayCollection>
<mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox" itemClick="onChange(event);" allowMultipleSelection="true"/>
</mx:Application> -
When we print a picking list for deliveries we get the list grouped by material. So for example, if the delivery item 10 and 40 both have the same material then item 10 and 40 will be printed one after the other. So far all is okay, except that when the materials are the same the material details are not printed for the second line item. I think this is controlled by the SAP print program that probably is not calling the 'MAT_LINE' process.
Now there is a sneaky way around this, by maybe adding the MAT_LINE details into the POS_LINE process so that when the process for POS_LINE is called, which it is in all events, then the material and pos details are printed. However, I should not have to do this.
I was wondering if there was anyway to control the grouping. I still want the materials to be grouped, as that makes sense for the pickers, but I want to see the material details on the list and not have them supressed because it's the same as the material above.
JasonMoved element Item_line content into the POS_line element and remarked out the item_line element. All now works.
-
Disable Spark List selection indicator
How do I get rid of the Spark List selection indicator entirely? I don't want the rectangular indicator when the mouse hovers over an item, and I don't want the color to change when the mouse is clicked.
You'll have to extend default item renderer (ItemRenderer for instance) and set autoDrawBackground to false. And then use your item renderer in a list.
See this document for more information on spark item renderers. -
Return data from spark list itemrenderer
Does anybody no how to return data from the itemrender for a spark list. say i had a checkbx in my itemrenderer how can I get that info back to my main component if its selected or not. I looked at datagrid and itemeditor but I really rather use a spark list. Thanks
thanks I also found another way to doing it. A click handler on my list when that fires I can check if checkbx has been selected by doing event.target.document.mycheckBx.selected this will not work if using currentTarget cause it take the info from the itemRenderer. Now I understand the difference between currentTarget and target.
not sure if this is a better way to access the data I think I might still just dispatch a event and do it your way.
Its weird that mx:list has a editItemRenderer and s:list does not
thanks again TK -
Spark List Itemrenderer items outside of List
I have a spark list and i want some of the items in it to appear out side of the list depending on the users interaction.
Is there a way to make items of an item renderer appear outsid of the LIst container?
When i use basic layout on the lsit and explicitly set the x and y, they appear behind the list.
Thanks.Hi jmandawg,
My ListRenderer.mxml may be what you want as follows,
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" hide="mOut(
null)" mouseMove="mOut(event)" mouseOut="mOutValueItem(event)"mouseDownOutside="mOut(event)" creationComplete="inited()"
autoDrawBackground="
true">
<fx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.managers.PopUpManager;
import mx.utils.StringUtil;
import flash.text.TextLineMetrics;
public var mouseOnPopup:Boolean = false;
public var vi:mx.controls.TextInput;
private function inited():void {vi =
new mx.controls.TextInput();vi.editable=
false;vi.addEventListener(MouseEvent.MOUSE_OUT, mOut);
vi.addEventListener(MouseEvent.ROLL_OUT, mOut);
vi.addEventListener(MouseEvent.MOUSE_OVER, mOverPopup);
private function mOut(event:MouseEvent):void {
if ( vi.isPopUp ) {PopUpManager.removePopUp(vi)
mouseOnPopup =
false;}
private function mOverPopup(event:MouseEvent):void {mouseOnPopup =
true;}
private function mOutValueItem(event:MouseEvent):void {
if ( vi.isPopUp && !mouseOnPopup) {PopUpManager.removePopUp(vi)
private function mOver(event:MouseEvent):void {
var txt:String = itemValue.texttxt = StringUtil.trim(txt);
if(txt.length<5) return;
if(!vi.isPopUp) {PopUpManager.addPopUp(vi,
this.parent)vi.text=txt;
vi.setStyle(
'fontSize',18);
var txtMetrics:TextLineMetrics = vi.measureText(vi.text);vi.width=txtMetrics.width*1.2
vi.height=itemValue.height*1.4
var p:Point = itemValue.localToGlobal(new Point(itemValue.x, itemValue.y));vi.x=p.x;
vi.y=p.y-10;
]]>
</fx:Script>
<s:TextInput id="itemValue" text="{data.value}" width="200" mouseOver="mOver(event)" mouseOut="mOutValueItem(event)" mouseMove="mOut(event)" editable="false"/>
</s:ItemRenderer>
You may test it with the following in your main.mxml
Bindable]
private var detailAC:ArrayCollection = new ArrayCollection([{value:"nteDevice.device"},{value:
"nteDevice.deviceTypenteDevice.loopbackIpAddr"},{value:
"nteDevice.ipAddressnteDevice.loopbackIpAddr"},{value:
"nteDevice.loopbackIpAddrnteDevice.loopbackIpAddr"}, {value:
"nteDevice.release"},{value:
"nteDevice.releasenteDevice.loopbackIpAddr"},{value:
"nteDevice.clli"},{value:
"nteDevice.provisionStatus"}]);
<s:List id="lst" itemRenderer="com.att.ntscp.view.component.ListRenderer" dataProvider="{detailAC}" width="200" height="200"/>
Is it a little bit trick?
Jeffrey -
Extending a component which already extends a spark list ItemRenderer
Hello everyone,
I have the following situation: Im displaying lists of very similar data objects (they extend the same parent) so in order to avoid a lot of changes to many itemrenderers (if i need to change something in the common properties) when displaying this data, i defined a spark list ItemRenderer (in MXML) which displays the common properties (file called BaseRenderer.mxml):
<s:ItemRenderer>
//in the script section i override the set data property
//some MXML labels, checkboxes, etc
</s:ItemRenderer>
Then i created a specific itemrenderer which extended it (file SpecificRenderer.mxml):
<model:BaseRenderer>
//again i override the set data property
//some ADITIONAL MXML labels, checkboxes, etc
</model:BaseRenderer>
When i run the app, and when the specific renderer is used, it works (no errors are thrown) , but it only shows the content of specific renderer, nothing from base renderer is visible. Is this the right way to do this, or do i have to override some additional stuff in my specific renderers?
Thank you.
One more thing, i just noticed, if i remove all MXML tags from specific renderer, the content from base renderer becomes visible, seems as if specific content overrides base content. Is there a way to add mxml tags into the specificrenderer?Yes i suspected them to be merged, and you gave me a great idea. As you say this behavior is true across all mxml defined components, not just itemrenderers. I want to avoid actionscript renderers because i dont (and wont) have any performance issues anyway and i like flexibility in design view, so instead i found another solution which i slightly modified. Some spark components inherit property mxmlContent, which you can override. This is what i came up with in the end: I added the property override into specific renderer and everything is shown as expected (because base elements are merged with the ones from extended component).
override public function set mxmlContent(value:Array):void {
var adding:Boolean = true;
var index:int = 0;
while (adding) {
var element:IVisualElement = null;
try { element = super.getElementAt(index); } catch(e:Error) { }
if ( element != null ) {
value.push(element);
index += 1;
else
adding = false;
value.reverse();
super.mxmlContent = value;
Maybe you are looking for
-
I am having trouble connecting my curve 9300 to the car built in hands free. My previous Pearl connected as soon as I entered the car. I have checked the set up and all seems OK but the phone wont connect. The car is a Ford Mondeo with built in sat
-
File Adapter Sender - Does XI support Active connection mode?
Does the file adapter support Active connection mode?
-
Which version, Professionl or Standard, to ceate/merge PDF's, with Boomarks?
Me software Dev, inherited VBA that create/merge PDF's, with Boomarks in VBA. Which version do I need?
-
Save before print with Reader?
I am now required to save a .pdf before I can print when printing from eBay, Google email. I have reinstalled Acrobat. I've tried the right-click to check security settings, but right clicking does nothing.
-
I recently changed the fonts on my site to Lucida Bright Italic - it displays perfectly on my ACD 20" monitors and my MBP. However - on our older iMac 17" flat panel the font remains the older one - it will not display the italic version of Lucida Br