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').
Related
I'm using cypress to create E2E test for our new application.
The application has a menu that contains buttons to display different data on a map screen. All of these buttons have the same div name, which I can differentiate between by entering the text name of the button:
cy.get('div.sb-item-body').contains('Historical Land Uses').click()
cy.get('div.sb-item-body').contains('Potentially Contaminative Industrial Uses (Past Land Use)').click()
cy.get('div.sb-item-body').contains('Potentially Infilled Land (Water)').click()
There is a further complication where two of the buttons have the same title (Landfill and Waste) as that dataset is in two different sections. So when I attempt to access the second -
cy.get('div.sb-item-body').contains('Landfill and Waste').click()
It is trying to select the first button with that name, and it's failing as that button has been collapsed and is no longer selectable.
Any help would be appreciated.
See the .eq() syntax.
You can use this when the selector returns multiple elements, e.g
cy.get('div.sb-item-body').contains('Landfill and Waste').eq(0).click()
cy.get('div.sb-item-body').contains('Landfill and Waste').eq(1).click()
I'm not sure if the 'collapsed' first button might interfere with it.
A more long-winded way is to use .then() to process the array of returned values, e.g
cy.get('div.sb-item-body').contains('Landfill and Waste').then(els => {
const buttons = [...els];
cy.wrap(buttons[0]).click()
expect(..).to...
cy.wrap(buttons[1]).click()
expect(..).to...
})
The spread operator converts the wrapped elements into an array you can work with, and cy.wrap() re-wraps the selected item making it clickable.
first of all let me clarify that I've been working with AS3 only for a couple of days. My project consists of a google map of a street which acts as a menu where the buttons are labels floating over some of the houses. The idea is that when you click on certain house a module of specific info spreads. That info would be textual and some photos. My intention is to have that module as a movie clip template that I create just once and would fill up dynamically with the info related with each clicked house. It's a long way to get to that and I still have to figure how to do it. But I'm starting with this little thing:
I want that when I click on certain button it tells a dynamic text field inside the movie clip to display the house address which acts as a tittle for the card where the info is displayed. I'm experimenting with currentTarget but despite not getting any errors the code is just not working. Here's my code:
z5990_btn.addEventListener(MouseEvent.CLICK,setTittle);
function setTittle(event:MouseEvent)
{
var target = event.currentTarget;
var tittle = houseCard_mc.tittle_txt;
tittle.text=String(target);
}
Please note that my learning consists basically of reading and asking forums and lots of trail and error. Thanks for taking time to read this and help me.
Trace tittle to make sure it's actual TextField:
//...
var tittle = houseCard_mc.tittle_txt;
trace("tittle is:", tittle, "currentText:", tittle.text);
tittle.text=String(target);
you should see this in output:
tittle is: [object TextField] currentText: foo
if it's not a TextField object but MovieClip then you will see this.
tittle is: [object MovieClip] currentText: undefined
Than means that you are creating new text field in your tittle MovieClip with string content, which of course does nothing.
All you need to do is read for instance THIS EXAMPLE
Am new to Sikuli and trying to Automate Citirx Application. Need Help
Am trying to select a user role in a screen, The screen has multiple roles and hence i need to scroll down the screen and search for a particular Role and click the Role.
I have Captured image of a Particular Role that i need to select and used below Code. In the second Image i have highlighted the Role i need to select in Red
Below is the Code an Trying:
Creating a Method:
public static boolean clipExist(Screen screen, String clip )
{
Match m = screen.exists(clip);
if(m != null)
{
return true;
}
else
{
return false;
}
}
Using the Method:
while(! clipExist(screen, "C:\\Users\\Satish_D1\\workspace\\Sikuli Demo\\Images\\DownArrow.PNG"))
{
screen.wheel(1 , 3);
if(clipExist(screen, "C:\\Users\\Satish_D1\\workspace\\Sikuli Demo\\Images\\Roles\\UK\\ENTP\\GEDIS_SALES_SUPPORT_ORL_CPF2.0_UK_ENTP.PNG"))
{
screen.doubleClick("C:\\Users\\Satish_D1\\workspace\\Sikuli Demo\\Images\\Roles\\UK\\ENTP\\GEDIS_SALES_SUPPORT_ORL_CPF2.0_UK_ENTP.PNG",0);
break;
}
}
The image recognision uses per default a similarity of 0.7 (see description of Patterns in SikuliX Documentation). That means SikuliX looks for 'pretty similar' images. You can specify the similarity for the pattern recognision thanks to the method similar, or in your case use the method exact.
In your method clipExist, you should replace the name of the image:
Match m = screen.exists(clip);
by:
Match m = screen.exists(Pattern(clip).exact())
It seems SikuliX 1.1 experience some problem with finding the text on a screen, but recognition works. You might want to scan the entire text screen by screen and split the lines. Next compare each line with the required role and save the degree of similarity. Select the line with the biggest similarity. In Python/Jython exists a special function for that in difflib module.
similarity = difflib.SequenceMatcher(None, string_a, string_b)
Here are the alternatives that you can do.
First alternative: capture scrollbar
Capture the down arrow in the scrollbar
Capture the image when you reach the end of scrollbar. The image contains the scroll progress and the down arrow of the scrollbar
Click down arrow until you find image of (2)
This method have drawback i.e. when the number of items are dynamic, the visual appearance of (2) will be different especially the scroll progress. However, this can be tricked by capturing only the lower part of scroll progress and the arrow. Please note that your mouse may make difficulty in (3) because you may not find (2) when it is covered by mouse. To handle this, every time you click down arrow, you may hover your mouse a bit before checking for (2). This is the complete script:
down_arrow = "downarrow.png"
complete_scroll = "completescroll.png"
while not exists(complete_scroll):
click(down_arrow)
hover(Location(300, 200))
Second alternative, use keyboard (down key)
Click anywhere in the items to be scrolled and do some type(Key.DOWN) for the number of item you have. In case you have dynamic number of item, you may do type(Key.DOWN) for any number that always bigger than your number of items. Here is the script to do
inside_item = "inside.png"
for n in range(10000):
type(Key.DOWN)
Hope it helps
I used 's' as a screen class reference. Hence, once we get an image then we will set the region for the same followed by the required image where you want to click
public static void main(String args[])
{
Match m = s.find("IMAGE");
Region r = new Region(m.x+11, m.y+22,12,12);
r.click();
s.find("ENTPIMAGE.PNG");
r.click("ENTPIMAGE.PNG");
}
It always comes as a surprise to me when I google a problem I am having and I am completely unable to find anything similar. In fact, the only 1 post that i found that describes the same problem can be found here: Tabbing between fields - where does the cursor disappear to?
That question got no responses unfortunately, and I am having the same exact issue.
The only major difference is, I'm using Classic Text instead of TLF Text.
My Form is setup on as3 w/ 2 input fields. the first has tabIndex set to 0, and the second has it set to 1. When i hit tab, the cursor vanishes. If i press it 2 more times, it finally shows up.
I placed the code below to observe what was happening:
var iox = function() {
trace(_root.stage.focus);
if (_root.stage.focus != null) {
trace(_root.stage.focus.parent.name)
}
setTimeout(iox, 400);
}
iox();
I expected to see maybe other fields file that might've been hidden getting the focus or some other object.. But turns out that the only 2 objects that get the focus are indeed my input boxes. After typing into 1 field, pressing tab only once switches the focus to the other field. However, the blinking cursor indicator, as well as the ability to type text into the field only shows up after the third time the button is pressed.
Any ideas?
After some more digging and some trial and error I've managed to fix the problem.
Basically all i had to do was import the FocusManager class and activate it. The triple tabbing button just vanished after that.
import fl.managers.FocusManager;
var fm = new FocusManager(myclip);
myclip.txt1.tabIndex = 0;
myclip.txt2.tabIndex = 1;
Check if any of your other items on display list have tabEnabled property set to true. TabEnabled property description MCs with buttonMode set to true have this enabled. Apparently there are two objects with this setting in the list when you check. So either perform a manual check, or do the complete displaylist walk querying at least class name and name property of any object that has tabEnabled as true.
I work with AIR.
I have to window, one with list ( a glossary) and another with datagrid and editable cells.
The goal is to drag item on list and drop it on cursor position on itemEditor (datagrid).
I don't know how to do that.
This below the code I use to do the same action not in the datagrid but on a textarea what is on the same datagrid window.
// On 1st window (glossary)
<s:List dataProvider="{DP_GlossList2}" id="list2"
labelField="glNom"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
click="list2_clickHandler(event)"
height="60%" width="100%"/>
// on second window : textarea and datagrid
// drag drop
protected function retTTAfaire_dragDropHandler(event:DragEvent):void
{
retTTAfaire.text = retTTAfaire.text.substring(0,retTTAfaire.selectionAnchorPosition)+ " "+event.dragSource.dataForFormat("itemsByIndex")[0].glNom+
" "+retTTAfaire.text.substring(retTTAfaire.selectionAnchorPosition+1);
}
protected function retTTAfaire_dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(spark.components.TextArea(event.target));
}
Please, help me.
Thanks
I don't have an exact answer, but one area to investigate is using the getObjectsUnderPoint() method (from DisplayObjectContainer). Using a point - from the local coordinate system from the Drag/Mouse event. This will get you looking at the "right" branch of the display tree.
I think your hard part to figure out is knowing exactly which element you want to interact with - in this case the item editor. When iterating your suspect list, you'll want to compare it against an interface that the ItemEditor (IGridItemRenderer) is known to have but not other objects.
Also depending on what reference the mouseX/mouseY coordinates lie in, you'll most likely need to convert it to the same coordinate system that the item editor is in - in this case Editors are handled by the PopupManager (or the SystemManager) - or should be if the Flex SDK team followed the same paradigm with spark as they did with halo - but I haven't verified this.
I can't tell from the wording of your question, but if you are trying to allow items to be placed after the item editor is opened - this will get very difficult because of focus management.