I am trying to make flex autocomplete change its dataprovider at runtime based on user input.
<components:AutoComplete change="change()" id="ac" dataProvider="{_a1}" width="100" />
<s:Button label="change" click="change()" />
private function change():void
{
Alert.show("sdsd");
//Alert.show(event.text);
//ac.dataProvider = _a2;
}
when I click the button, the function get fired, but when i input the text, it doesnt fire.
I was trying to use both change and textEvent, however, none of them are fired.
I wonder if there is any way that i can do this?
Thanks in advance.
Related
The Flex InteractiveObject has has a requestSoftKeyboard() method that pops up the Soft Keyboard.
How can I do the opposite and send it back?
Thank you.
With Flex 4.6, you can dismiss by setting
stage.focus = null;
Please read more here:
open soft keyboard in a mobile Flex application
For example, say your InteractiveObject is a TextInput, then you can keep it from popping up with the following:
private function onActivating(event:SoftKeyboardEvent):void
{
event.preventDefault();
}
<s:TextInput softKeyboardActivating="onActivating(event)" />
Or you can use
<s:TextInput needsSoftKeyboard = "False"/>
EDIT:
You can send it back with the following:
Listen for the event when you want it to close (like hitting the "enter" key) and then use the setFocus property to change the focus to another component:
private function CloseKeyboard():void
{
hidesoftkeyboard.setFocus();
}`
<s:TextInput id="txtinput"/>
<s:Button id="hidesoftkeyboard" click=CloseKeyboard();>
UPDATE
Following the 4.6 update to Flex - there are new softkeyboard techniques chronicled here.
I am aware that the follow will show a hand cursor:
component.mouseChildren = true;
component.useHandCursor = true;
component.buttonMode = true;
When I do the above on a List component, the hand button is shown and the whole component loses it's interactivity (Hand cursor is shown even on scrollbars).
So how can I show the hand cursor only when rolling over the list items?
Missread your full test, below is just how to show hand cursor on any Flex control.
I would suggest that you make an custom itemRenderer and for each renderer you use these controls, that will make it show only when you are over the itemRenderer and it will not be applicable for the whole List control...
Check out this blog post I wrote about showing hand cursors on any Flex control.
Showing hand cursor on any Flex Control
Sometimes useHandCursor=true buttonMode=true is enough, but for some controls you have to use mouseChildren=false
Examples:
<mx:Button label="Button" useHandCursor="true" buttonMode="true" />
<mx:Label text="Label" useHandCursor="true" buttonMode="true" mouseChildren="false"/>
I had the same issue with getting a hand cursor over a datagrid. I assume the solution will be the same for lists.
The way I found to get a hand cursor while also having interactivity with items in my datagrid was to use the itemRollOver and itemRollOut events of DataGrid (List has them too):
[Embed("../assets/images/cursors/hand_cursor.png")]
private var handCursor:Class;
protected function grid_itemRollOver():void {
cursorManager.setCursor(handCursor);
}
protected function grid_itemRollOut():void {
cursorManager.removeAllCursors();
}
function meOver(evt:Event):void{
evt.target.useHandCursor = true;
}
myList.addEventListener(MouseEvent.MOUSE_OVER, meOver);
I am new to Flex.
What I am looking for here is adding a click handler on all the items created by a SkinnableDataContainer. I tried several things that didn't work, and I have no idea what is the right way to do it.
<s:SkinnableDataContainer id="teamList"
itemRenderer="TeamSummaryRenderer">
<s:dataProvider>
<s:ArrayList>
<fx:Object teamName="A super team 1"/>
<fx:Object teamName="A super team 2"/>
<fx:Object teamName="A super team 3"/>
</s:ArrayList>
</s:dataProvider>
</s:SkinnableDataContainer>
Furthermore, I don't want to declare the handler in my custom TeamSummaryRenderer component. I would prefer that the handler code stays at application level.
Is there a simple 'Flex-ish' to achieve this ?
No.
<s:SkinnableDataContainer
Properties
autoLayout="true"
clipAndEnableScrolling="false"
dataProvider="null"
horizontalScrollPosition="null"
itemRenderer="null"
itemRendererFunction="null"
layout="VerticalLayout"
typicalItem="null"
verticalScrollPosition="null"
Events
rendererAdd="No default"
rendererRemove="No default"
/>
http://opensource.adobe.com/wiki/display/flexsdk/Spark+SkinnableDataContainer
I think you have to keep your handler in the itemRenderer as the document says. They don't have any properties to achieve it directly.
Ok ... I found the answer myself :
<s:SkinnableDataContainer
rendererAdd="my_handler(event)"/>
private function my_handler(event:RendererExistenceEvent):void{
event.renderer.addEventListener(flash.events.MouseEvent.CLICK, clickhandler);
}
The rendererAdd event is triggered every time a new renderer is added to the container, and it has a property renderer which is the renderer object itself. So here is the place for adding a click handler on every one of the renderers that are created.
You could also subclass the SkinnableDataContainer and handle all the renderer-listening there. Then, when your eventhandler is triggered, your custom SkinnableDataContainer will dispatch a change event or some other event. Next, in your application, you set a listener on that specific event and there you go...
I have various (read lots of..) flex forms in my app, and I now want to create a system by which the user is notified that he hasn't saved if he modifies anything in the form...
now.. I don't want to rewrite every form I have.. is there some nice way to implement this?
Extending the TextInput (and others..) classes somehow?
thanks
This is not really thought through but should work.
You could create a custom component, let's call it FormWatcher which you would than put next to your Form. What the form watcher would do is wait for the CreationComplete event from the form.
So now, as we have the Form ready you can use the getChildren() method of the form to get all the FormItems in it. Than look inside each of them, and you will get TextInputs, Comboboxes, etc. to which you can add event listeners (as individual components), eg.
// THIS IS WHERE THE COMPONENT SHOULD START
protected function changeHandler(event:Event):void
{
trace ("something is dirty");
}
protected function startWatching(passTheFormHere:Form):void
{
for each (var O:Object in passTheFormHere.getChildren())
{
if (O is FormItem)
{
// Let's assume you only have a single child in one FormItem
// and always one child for simplicity
addChangeHandlerFor((O as FormItem).getChildAt(0));
}
}
}
protected function addChangeHandlerFor(someComponent:Object):void
{
// Most regular flex components send a Event.CHANGE event
// when their value is changing
// keep in mind you should check stuff, this is a simple example
(someComponent).addEventListener(Event.CHANGE,changeHandler);
}
// THIS IS WHERE THE COMPONENT SHOULD END
Just paste this code next to some form, and call the startWatching(nameOfYourForm), you should see the changeHandler is being called.
A few more notes:
1) You should clean up the event listeners once you're done.
2) I would create a component out of it so that you would use it like this:
<mx:Form id="form1" >
[...]
</mx:Form>
<FormWatcher form="{form1}" />
Where FormWatcher would have a Boolean var called "clean" or something.
3) The example is very simple, so it will only work for forms similiar to this one:
<mx:Form id="myForm" >
<mx:FormItem>
<mx:TextInput id="someComponent1" />
</mx:FormItem>
<mx:FormItem>
<mx:CheckBox id="someComponent2" />
</mx:FormItem>
<mx:FormItem>
<mx:TextArea id="someComponent3" />
</mx:FormItem>
</mx:Form>
You could go into the TextInput class (and others) and add that event listener and function, but then you would be changing the SDK itself, which is kind of a bad idea. I would create custom classes extending the ones your using and do a find/replace to make it faster.
I am working on a product options form whose contents should be cleared by a clearOptions() method each time the user adds an option. The option name TextInput is bound to a value object that is reinstantiated each time the the user adds a product option. The problem I am having is that the StringValidator fires each time the bound value object is reinstantiated.
<mx:StringValidator id="valOptionName" minLength="1" source="{txtOptionName}" property="text" trigger="{btnAddChangeOption}" triggerEvent="click"/>
<mx:TextInput id="txtOptionName" width="120" text="{currentProductOption.name}"/>
<mx:LinkButton id="btnAddChangeOption" label="Add/Change Option" click="saveUpdateOption(event)" horizontalCenter="0"/>
The following code is what causes the StringValidator to fire when it shouldn't. It results in a red outline around a text box.
private function clearOptions():void
{
currentProductOption = new ProductOptionVO();
}
Thank you for any help,
Orville
I solved the problem by setting the source of the validator manually in the validation code and then switching it off before currentProductOption is reinstantiated.