I have a flex mobile app which based upon a list of questions generates a set of controls depending on what kind of response is required, this is the input form.
The structure is
Group
-----Hgroup
-----------Question1, CheckBox, TextInput
-----Hgroup
-----------Question2, CheckBox, TextInput
-----Hgroup
-----------Question3, CheckBox, TextInput
-----Hgroup
-----------Question4, CheckBox, TextInput
end group
How do I loop through the group in Actionscript, into the HGroup and return the value of, in this example, the checkbox and textInput?
I have numerous example of how to determine the control type in the container, just not how to retrieve the values.
Thanks in Advance
To loop and type check use:
for (var i:int; i < hGroup.numElements; i++) {
var child:DisplayObject = hGroup.getElementAt(i);
if (child is TextInput) {
var textInput:TextInput = child as TextInput;
// do your stuff
}
else if (child is CheckBox) {
var checkBox:CheckBox = child as CheckBox;
// do your stuff
}
}
Related
tldr:
how does one tell a mouse event to only fire for the youngest child under the mouse, and not its parent?
I'm just making a solitaire game to try to better learn OOP. I have a Card class and a CardHome class. Each Card contains a CardHome which can hold a card, and so on. Thus, moving a card will move all the cards contained in it. The problem is that my mouse event is detecting the parent of all the cards. So what I think I need is a way to say "run this mouse event only for the youngest child of the target". Any way to do that?
private function pressCard(me:MouseEvent):void{
var c:Object = me.target as Card;
// place card in center of container x wise
c.x = 0;
// and down 5
c.y = 5;
// bring drag container up to front z order
addChild(c as Card);
// begin dragging drag container
c.startDrag(true);
// hide mouse
Mouse.hide();
// add listener to this card for mouse up
c.addEventListener(MouseEvent.MOUSE_UP,dropCard);
}
private function dropCard(me:MouseEvent):void{
var c:Object = me.target as Card;
// release drag container
c.stopDrag();
// remove mouse up listener from card
c.removeEventListener(MouseEvent.MOUSE_UP,dropCard);
Mouse.show();
// check for colision with a card that has a matching holder
for (var i:int = 0; i < deckArray.length; i++){
if (c.hitTestObject(deckArray[i]) && c != deckArray[i]){
trace("hit",deckArray[i]._containerOwned._occupied,deckArray[i]._flippable);
if (deckArray[i]._number == c._number + 1 && deckArray[i]._flippable == false && deckArray[i]._suit != c._suit && deckArray[i]._containerOwned._occupied == false){
c._containedIn.parent._containerOwned._occupied = false;
makeFlippable(c._containedIn.parent);
deckArray[i]._containerOwned.addChild(c as Card);
c._containedIn = c.parent;
c.x = 0;
c.y = 0;
break;
}
}
}
// add selected card back to home spot
c._containedIn.addChild(c);
c.x = 0;
c.y = 0;
}
private function mOver(me:MouseEvent):void{
trace(me.target._number);
trace(getHighestZ());
}
private function getHighestZ():Card{
var highestZ:int = 0;
var c:Card;
for (var i:int = 0; i < deckArray.length; i++){
if (deckArray[i].hitTestPoint(stage.mouseX,stage.mouseY) && deckArray[i].getChildIndex() > highestZ){
c = deckArray[i];
highestZ = deckArray[i].getChildIndex();
}
}
return c;
}
Each card is a child of a container in the card above it. I want to be able to select a card and drag it (and its children). The problem is that when I click card B, it selects card E. So what I need is to select the youngest child in the mouse event, and NOT its parent. Any way to control that?
I know I can do mouseChildren true or false. That's fine. It has to be set to true for all of the cards so that I can select them independent of their parent card. Do I need to do something with bubbling my event? That's something I've never understood.
Note: I realize there are problems with mouse mouse over function. Fixing that will be trivial and is kind of a placeholder for now.
tldr:
use a combination of useCapture set to true and the stopPropagation method. This allows a user to click an element and have the eventHandler only called for the target, not any of the elements between the target and the stage!
So the key here is to access the as3 event flow. When a mouse event gets triggered it propagates from the stage up through all objects that can receive that type of mouse event. In this case, the cards parents. Then it bubbles back down to the stage. So what I needed was to set the capture setting to true which switches the phase in which the event handler is used to the bubbling phase (this causes the first element to actually call the function to be the actual target) and then, instead of letting the event propagate back down to the stage, call the stopPropagation method. Looks something like this:
c.addEventListener(MouseEvent.MOUSE_OVER, mOver, true);
The true here says to fire the function on each element on the way back to the stage from the target. Then during the mOver function I do:
stopPropagation();
trace(c._Number);
// and any other code to do on this target
Which keeps the event from flowing back down through the other cards under the mouse.
Now instead of an output like
5
3
9
when the mouse is over the 9 card (which is over a 3 which is over 5) I now get simply
9
and then when I mouse over the 3 I get
3
So now the mouse is calling a function for the target only. Surprisingly non intuitive but allows for some serious flexibility and control!
from Adobe on Event Flow
In CKeditor is it possible to add multiple child elements to a list element?
E.g.
- Heading
Paragraph
- Heading2
Paragraph2
Backstory-
I've created a style that lets the user style up an order list. Part of this style is to have a heading and a paragrpah within each list item element.
Problem-
When the adding the heading element and pressing enter, to be able to add the paragraph, a new list item is added instead. If the shift+enter/shift+enter button combination is pressed, a new list is created without creating a new list item, however the cursor remains within the heading element, and so no paragraph can be added this way.
Is there a way around this?
I've found a way to fix the problem by overriding the key press event in CKEditor. When a key is pressed, it checks that:
It was the Enter key that was pressed;
The cursor is within a list;
The node the cursor is in isn't empty;
The cursor is at the end of the node.
If so it
Adds a paragraph after the current node.
Moves the cursor into it.
The code:
CKEDITOR.on(
'instanceReady',
function(ev) {
var editorInstance = CKEDITOR.instances[ev.editor.name];
var editorWindow = editorInstance.window.$;
var editorDocument = $editor_instance.document.$;
var editorBody = editorDocument.body;
/***
* Fix the editor not letting you add sub elements to lists
*/
editorInstance.on( 'key', function( event ) {
// Get the HTML event
var e = event.data;
// If the enter key was pressed
if(e.keyCode == 13) {
// Find which element the cursor is in
var selection = editorWindow.getSelection();
var cursorElem = $(selection.anchorNode);
// Only override the default behaviour if we're in a list element, and the user has typed something
if(cursorElem.closest('li').length && cursorElem.text().trim().length) {
// get the current cursor position
var range = editorWindow.getSelection().getRangeAt(0)
// create range to find how many characters are after the cursor
var postRange = editorDocument.createRange();
postRange.selectNodeContents(cursorElem[0]);
postRange.setStart(range.endContainer, range.endOffset);
var nextText = postRange.cloneContents();
var isAtEnd = nextText.textContent.length === 0;
// Only override if we're at the end of the list element
if(isAtEnd) {
// cancel the default event
event.cancel();
// get the element to add the new paragraph after
var after = cursorElem;
// if the cursor is in a TEXT not instead of an actual HTML node then get the parent HTML code
if(cursorElem[0].nodeType == Node.TEXT_NODE) {
after = cursorElem.parent();
}
// Add the new paragraph
after.after('<p></p>');
var newParagraph = after.next();
// set selection to the new paragraph
var range = editorDocument.createRange();
range.setStart(newParagraph[0], 0);
selection.removeAllRanges();
selection.addRange(range);
}
}
}
});
}
);
CSS needed to make the new paragraph display:
p {
min-height: 1em;
}
P.s. Thanks for this answer showing how to check if the cursor was at the end of an element Contenteditable DIV - how can I determine if the cursor is at the start or end of the content
I have a movie clip called radio and flashlight. Inside the movieclip, there is a text box with words inside. The instance name of the textbox inside radio is called 'radioText' and the instance name of the textbox inside flashlight is called 'flashlightText'. I want the color of the text to turn white when hovering over the movieclip.
The code below works for changing radioText but not flashlightText:
var containers = [radio, flashlight];
for (var i:int = 0; i<containers.length; i++) {
containers[i].addEventListener(MouseEvent.MOUSE_OVER, hOver);
}
var whiteFont:TextFormat = new TextFormat();
whiteFont.color = 0xFFFFFF;
function hOver(evt:Event):void {
evt.currentTarget.radioText.setTextFormat(whiteFont); //change radioText's color
}
what I want to do is instead of
evt.currentTarget.radioText.setTextFormat(whiteFont);
, I want to do somthing like
evt.currentTarget.(currentTarget.name + 'Text').setTextFormat(whiteFont);
but that doesn't work for obvious reasons. Is there a way to do what I want to do?
There are quite a few good ways to implement what you are asking, what you do really depends on how you are setting up your objects.
For example, your pseudo code:
evt.currentTarget.(currentTarget.name + 'Text').setTextFormat(whiteFont);
...could be implemented if you named all your child text fields identically OR if you named them accordingly to some convention (for this example I set a name for the parent and a similar name for the child). So let's assume your container has the name "container" and has a TextField child named "containerText". It would look something like this:
private function hOver(evt:MouseEvent):void {
var n:String = evt.currentTarget.name;
evt.currentTarget.getChildByName( n + "Text" ).setTextFormat( whiteFont );
}
This is now dependent on following a naming convention, which may or may not be ideal. So what might be an even better and more generic way to handle this? You can setup a class for your container object and have a TextField property there. For Example:
class myContainer extends Sprite {
public var textField:TextField;
public function myContainer():void {
textField = new TextField();
addChild(textField);
}
}
Pretty basic, but now if you added all the listeners to types of myContainer your event function could look like this:
private function hOver(evt:MouseEvent):void {
evt.currentTarget[ "textField" ].setTextFormat( whiteFont );
}
Which is probably more what you are looking for. This version allows you to grab the "textField" property of the object you applied the listener to, in this case that property would essentially be your radioText/flashlightText.
Ok so lastly, and the least favorable way to do this, assumes all you care about is that the object has a child of type TextField, it has no logical naming convention, and we are not sure what index it is at in the display list. You would have to do it something like this:
private function hOver(e:MouseEvent):void {
var i:int;
var displayObj:DisplayObjectContainer = e.currentTarget as DisplayObjectContainer;
for ( ; i < displayObj.numChildren; i++ ) {
var obj:* = displayObj.getChildAt( i );
if ( obj is TextField ) {
obj.setTextFormat( whiteFont );
}
}
}
That is also the slowest way of reaching your child object. This should cover all the bases, good luck!
What's wrong with?
DisplayObjectContainer(evt.currentTarget)[evt.currentTarget.name + 'Text'].setTextFormat(whiteFont);
I'm creating an app with a search function. I display the images by loading from the array the one's which match the search criteria. All the images are loaded from the library. I want to be able to click on an image as though it were a button. Once I click I want to goto frame 3 and change a variable integer to say which image was clicked on so that I can display the information about the photo in frame 3. Can I do this using an event listener say
imagesArray[i].addEventListener(MouseEvent.CLICK, imageClick);
function imageClick(event:MouseEvent):void
{
gotoAndStop(3);
current = i;
}
or similar,
Thanks
Yes, but it won't be as easy. First, Bitmaps do not process events, so you can't assign a listener directly to a Bitmap object. Next, there is no "i" available in such a construction, you have to determine that "i" by yourself. To do that, you parse event.target property, which is the object that's been clicked. You wrap each Bitmap object into a separate Sprite object, assign listeners to these sprites, then you parse event.target to get the relevant object reference out of it, grab the index via indexOf() call, and assign it to global current variable.
for (i=0;i<imageArray.length;i++) {
var sp:Sprite=new Sprite();
sp.addChild(imageArray[i]);
// position "sp" correctly here
addChild(sp);
sp.addEventListener(MouseEvent.CLICK, imageClick);
}
function imageClick(e:Event):void {
var content=e.target.getChildAt(0); // the object that was wrapped
var i:int=imageArray.indexOf(content);
if (i==-1) return; // OW, out of array
current=i;
gotoAndStop(3);
}
I'm not so sure that setting "current" to "i" would work as the function wouldn't be running at the same time as the for loop.
I'm assuming that because you're using the [i] that you've added the event listeners in a for loop?
What you could do is:
for (var i:int = 0; i < (howeverManyTimesToRun); i++)
{
imagesArray[i].addEventListener(MouseEvent.CLICK, imageClick);
imagesArray[i].myIndex = i;
}
And then in your function (outside of the for loop)
function imageClick (e:MouseEvent) {
gotoAndStop(3);
current = e.currentTarget.myIndex;
}
Also in your for loop you might want to add
imagesArray[i].buttonMode = true;
To change the mouse cursor to a hand when their mouse goes over your image.
I have StaticText fields in my flash project and I need to run some code when the mouse is hovering over them. So I tried this code
stage.addEventListener(MouseEvent.MOUSE_OVER, mouseRollOver);
function mouseRollOver(event:MouseEvent):void {
var tf:StaticText = event.target as StaticText;
if (tf){
//my code
}
}
but it doesn't work. When I use dynamic text fields and replace StaticText with TextField in the var tf, it works fine. I also thought that I could get this thing working with static text fields if I could make the mouse detect not StaticText as a target but some kind of object that has certain text properties (like "selectable" set to true), but I couldn't figure out how to do this. Anyway, I need to detect a static text field as a target somehow. Any help would be appreciated.
Thanks in advance
Your best option would be to put the static text box in a movieclip, and then assign your code based around that. Static text boxes don't have instance names, and can't be manipulated.
It is hard to do this. See this link enter link description here
As you can see you can check if the DisplayObject is StaticText and by checking the mousX and MouseY properties you can find if the rollover is related to this field. By if you use Dynamic text and uncheck selectable field you will get a textfield that acts as StaticField
EDIT
this is an explanation what I mean:
Let we have a StaticText field into stage in Black flash document.
var myFieldLabel:StaticText
var i:uint;
//This for check for all staticFields in state and trace its text. It is possible and it is working. I my case I have only one field and I get reference to it in myFieldLabel:StaticText var. Also I change it's alpha to 0.3.
for (i = 0; i < this.numChildren; i++)
{
var displayitem:DisplayObject = this.getChildAt(i);
if (displayitem instanceof StaticText) {
trace("a static text field is item " + i + " on the display list");
myFieldLabel = StaticText(displayitem);
trace("and contains the text: " + myFieldLabel.text);
trace( myFieldLabel.mouseX);
myFieldLabel.alpha = 0.3;
}
}
//Adds event listener to the stage for mouse move event
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseRollOver);
//This is an event handler. I check if the mouse position is within the static field
function mouseRollOver(evnt:MouseEvent):void
{
if ( 0 <= myFieldLabel.mouseX && myFieldLabel.mouseX <= myFieldLabel.width && 0 <= myFieldLabel.mouseY && myFieldLabel.mouseY <= myFieldLabel.height )
{
mouseOverStaticText( evnt)
}
else
{
mouseNotOverStaticText( evnt)
}
}
// this two methods change the static field alpha. Thay are only to show that is posible to detect and manipulate some properties of the StaticField.
function mouseOverStaticText( evnt)
{
myFieldLabel.alpha = 1;
}
function mouseNotOverStaticText( evnt)
{
myFieldLabel.alpha = 0.3;
}
I'm not sure what is the purpose of the managing of the StaticText field. StaticText is not design to be managed if you have to do something this is almost sure that the field must not be a static - they can be dynamic ( without selectible property ) or can be capsulated with MovieClip or there can be a different solution in your case.