for (iss = 0; iss < listOfProductIds2.length; iss++)
{
// Alert.show(listOfProductIds2[iss]);
var productMain:VBox=new VBox();
var p1:HBox=new HBox();
var l1:Label=new Label();
var b1:Button=new Button();
var spacer:Spacer=new Spacer();
spacer.width=300;
b1.label="Remove";
b1.setConstraintValue("id","");
b1.addEventListener(MouseEvent.CLICK,removeProduct);
l1.text="Product "+iss;
p1.setActualSize(500,500);
p1.addChild(l1);
p1.addChild(spacer);
p1.addChild(b1);
productMain.addChild(p1);
}
function removeProduct(event:MouseEvent):void
{
// How do i know which button is clicked
}
Use event.currentTarget (instead of event.target) because event.target might be the Label component or some styling component within the button, but currentTarget is assured to be the object with which the listener was registered.
To get a handle to the button that was clicked you can just cast the currentTarget to a button.
function removeProduct(event:MouseEvent):void
{
var b1:Button = Button(event.currentTarget);
}
The method setConstraintValue is for setting layout constraints, not setting id. The id property is used by mxml for creating variable names for objects. You can get/set id as you would get/set any other property (say width) - but neither have I seen anyone doing that nor do I see any need to do that in the first place.
event.target should point to the Button you clicked on, shouldn't it ? However you should probably give ids to the buttons to be able to differenciate them (since you create them dynamically.)
Look at event.target.
If ids are assigned dynamically as in the example given b1.id = "button_" + listOfProductIds2[iss]
Then the function that processes the click event would look at the currenttarget, and what I usually do is do a string replace on the part of the id that you know is not dynamic like "button_" with "", which leaves you with the name of the product.
Related
I am creating a custom confirmation dialog in Google App Maker and would like the Confirm button to call a passed-in function. I don't see an "onclick" event in the button widget. Any suggestions on how to do this?
function confirmationDialog(msg, confirmFunction)
{
var desc = app.pageFragments.ConfirmationDialog.descendants;
var label = desc.Label;
var confirmButton = desc.Confirm;
label.text = msg;
confirmButton.onClick = confirmFunction; // does not work
app.showDialog(app.pageFragments.ConfirmationDialog);
}
Thanks
It'd be great if this was a bit easier, but the best bet is to use Custom Properties (https://developers.google.com/appmaker/ui/viewfragments).
You can set up a custom property of type "Dynamic" and call it anything, take "onConfirmCallback", for example. Then you can set the function on that custom property:
Code to invoke dialog:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback = function(param) {
alert(param);
};
app.showDialog(app.pageFragments.ConfirmationDialog);
And then in the onClick for the close button:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback("hi");
app.closeDialog();
Also note that there are slightly better ways to set up labels than in your example, also using custom properties.
Create custom properties for any widget properties you want to customize, and then bind those custom properties (#properties.propertyName) to the widget property. For example you might have a confirmText property, with the confirm buttons text property boudn to #properties.confirmText.
Then when you invoke your dialog, you can just set those custom properties. Quick modification of your example code using properties for everything:
function confirmationDialog(msg, confirmFunction)
{
var properties = app.pageFragments.ConfirmationDialog.properties;
properties.text = msg;
properties.confirmCallback = confirmFunction;
app.showDialog(app.pageFragments.ConfirmationDialog);
}
For my confirmation dialogs, I just set the onclick of the OK button before I show the dialog (everything is in one place, which is easier for the dummy (me) who will have to maintain it in six months:
var dialog=app.pages.ConfirmationDialog;
dialog.descendants.message.text='Are you sure...?'
dialog.descendants.btnOk.getElement().onclick=function(){
//do something here
app.closeDialog();
});
};
app.showDialog(dialog);
}
I have made a hierarchy in which there is a main page, using add element i have attached a component mxml of type group. There is a single button on main page when clicked it should add children of type group in that group type mxml component along with two buttons. Now using one of buttons i am attaching another component mxml type group. the problem is even they overlap i can still excess the children groups of first group component mxml. how can i stop this mouse events to happen.
I think those kind of events usually bubble up to parent components.
You can try using the following code in your mouse click event listener to stop further propagation:
private function onMouseClicked(event: MouseEvent): void {
event.stopPropagation();
... do whatever you wanted when smth was clicked ...
}
By setting enabled, mouseChildren, mouseEnabled to false, you will disable the entire component and it's children. example below
private var myPreviousGroupComponent:Group = null;
function addNewGroup():void
{
if(myPreviousGroupComponent != null)
{
myPreviousGroupComponent.enabled = false;
myPreviousGroupComponent.mouseChildren = false;
myPreviousGroupComponent.mouseEnabled = false;
}
var newGroup:Group = new Group();
addElement(newGroup);
myPreviousGroupComponent = newGroup;
}
I have a list component and I have an item editor for the items in the list. I would like to have a button that the user clicks once they are done with their changes because I am having them edit multiple pieces of data in the editor and I would also like to validate the data before closing the editor as well. I just don't know what to do on the button's click event to make the item editor close and commit it's changes to the data provider.
You'll want to use a validator to validate the data, and I think maybe do something with the updateComplete and change events to delay the updating of the list component:
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=celleditor_073_17.html
I would use data binding and let Flex do the work for you.
Have an object myObject with a bindable property myList:IList. Bind the display to this object.
When you start editing, copy that list.
On MouseEvent.CLICK:
var ed:Editor // Your list editing object.
var edProvider:IList = ed.dataProvider;
var targList:IList = myObject.myList;
var bool:Boolean = ( myObject.myList.length > edProvider.length );
var len:int = ( bool )? targList.length: edProvider.length;
var item:* = null;
for( var i:int = 0; i < len; i++ )
{
try // a "just in case". You probably will never have a problem.
{
item = edProvider.getItemAt( i );
targList.setItemAt( item, i );
}
catch( error:Error )
{
continue;
}
}
To handle the editing of multiple fields in a List control, you will need to catch the ItemEditEnd event and then manually change the fields you are interested in.
See "Example: Using a custom item editor with a List control" in here - http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_9.html#226555.
Usually the List will handle the dispatching of this event for you when you focus out of a cell. I'm not sure of its properties off the top of my head, but you should be able to construct this event in your button click handler, and then just dispatch it yourself.
I have a method to add an XML node structure to the currently selected tree node.
This appends the xml, and opens the parent node to display the newly added node.
I then select the node by setting the selectedItem of the tree.
I have an editing form that updates its values on the tree change event. When I set the selectedItem in this method, The node is selected correctly but the change event never fires (thus the editor doesnt update). I have tried to call it in a call later block to no avail.
Is there a way I can force the tree to dispatch a change event at this point?
public function addSelected(node:XML):void{
tree_expandItem(false);
var selectedItem:XML = tree.selectedItem as XML;
selectedItem.appendChild(node);
tree_expandItem(true);
callLater(function():void { tree.selectedItem = node; } );
}
To extend this question in a general sort of way - I would have thought that changing the selectedItem of the tree would result in a change event anyway? Or is a change only considered a change if the user makes it?
You could move the logic that is currently in your change event handler to a separate function, and then call that function directly:
private function changeHandler(event:ListEvent):void
{
doChangeLogic();
}
private function doChangeLogic():void
{
//statements
}
public function addSelected(node:XML):void
{
tree_expandItem(false);
var selectedItem:XML = tree.selectedItem as XML;
selectedItem.appendChild(node);
tree_expandItem(true);
callLater(function():void { tree.selectedItem = node; } );
doChangeLogic();
}
Is there a way I can force the tree to dispatch a change event at this point?
Use the dispatchEvent() method. Thanks James!
Flex has built in drag-n-drop for list controls, and allows you to override this. But they don't cover this in examples. The built-in functionality automatically drags the list-item, if you want to override this you find the handlers are being set up on the list itself.
What I specifically want to do, is my TileList shows small thumbnails of items I can drag onto a large Canvas. As I drag an item from the list, the drag proxy should be a different image.
So, I followed the technique suggested and it only works if I explicitly set the width/height on the proxy Image. Why?
It's not obvious until you've tried it =) I struggled with the same thing just a few weeks ago. This was my solution:
The list:
<List>
<mouseDown>onListMouseDown(event)</mouseDown>
</Tree>
The mouse down handler:
private function onMouseDown( event : MouseEvent ) : void {
var list : List = List(event.currentTarget);
// the data of the clicked row, change the name of the class to your own
var item : MyDataType = MyDataType(list.selectedItem);
var source : DragSource = new DragSource();
// MyAwsomeDragFormat is the key that you will retrieve the data by in the
// component that handles the drop
source.addData(item, "MyAwsomeDragFormat");
// this is the component that will be shown as the drag proxy image
var dragView : UIComponent = new Image();
// set the source of the image to a bigger version here
dragView.source = getABiggerImage(item);
// get hold of the renderer of the clicked row, to use as the drag initiator
var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));
DragManager.doDrag(
rowRenderer,
source,
event,
dragView
);
}
That will start the drag when the user clicks an item in the list. Notice that I don't set dragEnabled and the other drag-related properties on the list since I handle all that myself.
It can be useful to add this to the beginning of the event handler:
if ( event.target is ScrollThumb || event.target is Button ) {
return;
}
Just to short circuit if the user clicks somewhere in the scrollbar. It's not very elegant but it does the job.
I found a simpler answer here. That example extends a DataGrid control, but you can do the same with a List control. In my case, I use an image source instead of Class:
public class CustomDragList extends List {
[Bindable]
public var dragProxyImageSource:Object;
override protected function get dragImage():IUIComponent {
var image:Image = new Image();
image.width = 50;
image.height = 50;
image.source = dragProxyImageSource;
image.owner = this;
return image;
}
}
Then use that custom list like this:
<control:CustomDragList
allowMultipleSelection="true"
dragEnabled="true"
dragProxyImageSource="{someImageSource}"
dragStart="onDragStart(event)"/>
Where 'someImageSource' can be anything you'd normally use for an image source (embedded, linked, etc.)