I have a MenuBar with objects that have children of type="check". E.g.:
Menu
Menu Item A
/ List item Check 1A
/ List item Check 2A
/ List item Check 3A
Menu Item B
/ List item Check 1B
/ List item Check 2B
My question is as follows: How can i avoid the MenuBar from hiding when the user clicks an item (itemClick event)? I want the user to be able to "check" several items at once, without the menu hiding/closing.
Bonus question: What is the easiest way to reset all the checked items? :-)
Best Regards,
Sebastian
The only way I can advise you is to do monkey patching of the class Menu. I have tried to do it by me, it works as you described in your task.
The main reason to do it is, that the functions we need to redefine use private members of this class. So we can't just override them.
The aim of our mission is to patch the function
function mouseUpHandler(event:MouseEvent):void{...}
At its end you can see the call
hideAllMenus();
We should add a new variable to control whether or not our item is of type "check". So you need to add this line in the beginnig
var isCheck:Boolean = _dataDescriptor.getType(item) == "check";
and this condition at the end
if (!isCheck) hideAllMenus();
Don't forget to do a trick to let your patched class be loaded before the SDK's one.
You can read about it here.
Here is my working example. Menu1 has only check items and Menu2 only normal ones.
The whole project can be found here
Related
I have built a itemRenderer using Feathers UI and Starling in AS3 to display a list of items. When a user clicks on the item I display a dialog box with multiple options e.g. remove item, view item, cancel
If I click cancel I am returned to the screen with the entire list intact however I am unable to select the same list item. Is there a way to reset the selected item to say -1 so I can re-select the same item.
If you're looking to deselect the current item in the list you can do exactly what you stated.
list.selectedIndex = -1;
I think you would be better off posting this on the Feathers forum as Josh might know the answer.
I too have seen this issue and despite setting list.selectedIndex = -1 the same item could not be reselected. I think my solution was to refresh the list as you returned to it.
I have a similar trouble:
list.selectedIndex = -1; // visual deselect not occur
For me works next "hack":
_list.selectedIndex = -1;
_list.isSelectable = false;
_list.validate();
_list.isSelectable = true;
I know - it no good, but it works.
As listbox only accept string as items, is there a way to add items with different style? Is there any class to do this?
Ex:
Item1 in red
Item2 in green
Thanks.
var tree = app.createTree();
tree.addItem(app.createTreeItem(
app.createLabel("Tree Item 1").setStyleAttribute("color","green")));
tree.addItem(app.createTreeItem(
app.createLabel("Tree Item 2").setStyleAttribute("color","red")));
Edit: Sorry you said List but I read Tree for some reason.
No, this cannot be done, because the underlying browser list widgets don't support it. It's possible to achieve something roughly similar using HtmlService and jQuery, but not in UiApp.
I want to create a scrollable list in flash/as3 and the important thing is.... if the user wants to move some list item up or down... he can do that by dragging the item... so when he press and hold on an item... the item will become drag-able and as the user moves it up or down the list, the other items should slide to the empty space. Its the same behavior seen in smartphones....
I'll figure out the creation, data filling, scrolling, and other mouse interaction events.... i just want help with this one behavior....of changing the order of items by dragging them. If only someone can just provide the basic algorithm or any idea how this can be achieved.. it will be enough.
​Thanks in advance
EDITS :
First of all... i apologize for not posting any details about the question... (this is my first post to this site) and hence i am adding all the research and what i have done so far.
the list is part of a big project hence i cannot share the whole code.
WHAT I HAVE ALREADY DONE :
i have created a mask, a container, a scroll bar to scroll the container, items to add into the list, methods to add items, remove items and arrange them according to the order.
hence it is a scrallable and working list.
the whole thing is in as3 and flash only.
i don't know flex and i don't want to use it either.
WHAT I WANT NEXT :
i want to change the order of these items by (mouse_down on an item -> drag it up/down -> mouse_up at the position) sequence.
If anyone wants more details i can share it.
Thanks in advance.. :)
Add a simple List component to an application
In this example, the List consists of labels that identify car models and data fields that contain prices.
Create a new Flash (ActionScript 3.0) document.
Drag a List component from the Components panel to the Stage.
In the Property inspector, do the following:
Enter the instance name aList .
Assign a value of 200 to the W (width).
Use the Text tool to create a text field below aList and give it an instance name of aTf .
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:
import fl.controls.List;
import flash.text.TextField;
aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;
// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;
aList.addEventListener(Event.CHANGE, showData);
function showData(event:Event) {
aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}
This code uses the addItem() method to populate aList with three items, assigning each one a label value, which appears in the list, and a data value. When you select an item in the List, the event listener calls the showData() function, which displays the data value for the selected item.
Select Control > Test Movie to compile and run this application.
source: http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa6.html
Finally i have got the answer from some other forum.
Here is the link to the example (behavior) that i want to add to my list :
http://www.learningactionscript3.com/2008/05/13/the-power-of-relative-positioning/
(at the bottom 'Advanced Align Example').
Currently I am using UiService to create a form and I uses ListBox, from what I understand to pass a value via handler will be something like e.parameter.[Name of ListBox] to access the selected item.
Does anyone know is it possible to use like app.getElementById([Name of ListBox]) to access the selected item. The reason I am using this method is because my list of ListBox-es are dynamic.
I spent some time looking for this answer as well, but finally I tried one idea and it worked.
You can use e.parameter as an array so you can these two will give the same:
e.parameter.LIST_BOX_NAME
and
e.parameter['LIST_BOX_NAME']
So in the second sample any dynamic list box ID can be used. I use same handler for all added dropdown list and have this code to check what dropdown was changed and what value it has now:
if (e.parameter[e.parameter.source] == 'a'){
To change the content of the listBox you can use app.getElementById('ID of the listBox'), from there you can clear() and addItems again but you cannot read the listItems.
When I need to do this I usually store the list of items somewhere else, in a place that I can read anytime, for example the list of items can be stored as a string in the listBox tag itself so I have all items at hand to repopulate the listBox after I have clear it.
I have a list of items displayed on my page.
Item A [Edit]
Item B [Edit]
Item C [Edit]
Each item is editable When you click on a edit icon.
The edit form is displayed with a ajax call and the controller return a form.
Edit form for Item A [Save]
Item B [Edit]
Item C [Edit]
But all the list is bulk editable and so each item has also a checkbox next to it.
[cb] Item A [Edit]
[cb] Item B [Edit]
[cb] Item C [Edit]
And a form is around the list.
form_tag
1. [cb] Item A [Edit]
2. [cb] Item B [Edit]
3. [cb] Item C [Edit]
Action: select action [Bulk Edit]
end
So when I click on a item edit button, since a form is returned, I have 2 forms nested.
And all the code breaks.
What can I do so I don't have the bulk edit form around all the items and end with 2 nested forms ?
Thanks,
Mickael.
I solved my problem using javascript. When loading the edit form, the submit button does not submit the form but calls a Ajax Request sending the form parameters to the right URL.
You can't have nested forms... In fact, if you try to validate, you will have a big and ugly html error.
The solution on your problem I think is this: when you make the ajax request and you return the edit form, you can inject the code at the end of your html and display it into a modal window (i did this way on a project few months ago).
However, i don't know how RoR works so it's just an idea :P
You could probably solve it by the power of CSS and make it appear as though the forms are nested ... though in actual fact, they aren't.
From my limited CSS knowledge that is question best left to a front end engineer, or Google.
You could highlight the rows that are selected and bind "click" event on them so you could toggle the rows as selected / not selected. Then when submit is clicked, you just submit the rows with class "hilight".
You could leave off the checkbox and make the structure something like this:
...
...
..etc
Then with jquery you could bind click event on them, like:
$('.checked').click(function(e) {
$(this).toggleClass('hilight');
});