custom component issues mxml or pure as3

[mojito]

I have some notes about the following simple piece of code<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="init()" xmlns:icons="at.landed.view.components.icons.*">
<mx:Script>
<![CDATA[
/*
import at.landed.view.icons.DragableResortIcon;
import at.landed.view.icons.ResortIcon;
import mx.controls.Button;
import mx.core.UIComponent;

private function init():void
{
var rI:DragableResortIcon = new DragableResortIcon();
//var holder:UIComponent = new UIComponent();
//addChild(holder)
holder.x = 12;
holder.y = 12;
holder.addChild(rI)
}
*/
]]>
</mx:Script>
<!--<mx:UIComponent id="holder"></mx:UIComponent>-->
<icons:DragableResortIcon id="DRI"></icons:DragableResortIcon>
</mx:Canvas>

If I use mxml then holder and rI are reachable through dot syntax but if I create them as in the code above that is commented out then they are not there. So this is why I'm trying now to do things with mxml and normally this is better no ? But I cannot seem to get the DragableResortIcon class to instantiate through tags....if using mxml i dont need the holder clip either which is needed in pure as3...

also note the error is that it cannot find the class so i tried to add the xmlns attribute but maybe this is also wrong ....

what should I do here please anyone ...

[Barna Biro]

They are not there because the references you have defines only exist at a local ( method ) level. Meaning that since you have declared the variables inside a method, they will only be visible inside that method. If you want to be able to talk to any of those references, simply define them outside the method ( as a private, public, protected or internal variable, depending on what you need ).

Cheers,
Barni

[mojito]

I tried to declare public like

public var rI:DragableResortIcon = new DragableResortIcon();

but compiler throws an error since it isnt part of a package...

[Barna Biro]

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" creationComplete="init()">

<mx:Script>
<![CDATA[

import at.landed.view.icons.DragableResortIcon;
import mx.core.UIComponent;

public var rI:DragableResortIcon = new DragableResortIcon();
public var holder:UIComponent = new UIComponent();

private function init():void
{
// Add other stuff here.
}

]]>
</mx:Script>

</mx:Canvas>
That should work without a problem. If it's not working, then you are also doing other things wrong ( but I can't really guess what with the current amount of information ).

[mojito]

I dont think that will compile, well it wont for me...you cant specify public as you have without it being inside a package i.e. as if it was normal flash as3 class not a flex script...

[mojito]

Part of the issue was an error in the namespace path so the following compiles but I cant see my graphic, though the class instantiates..

here is the working class<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:icons="at.landed.view.icons.*">
<icons:DragableResortIcon id="rI"></icons:DragableResortIcon>
</mx:Canvas>

and now for DragableResortIcon.aspackage at.landed.view.icons
{

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

[Embed(source='../../../../../assets/icons.swf',symbol='ResortIcon')]

/**
* ...
* @author calvin@landed.at
*/
public class DragableResortIcon extends Sprite {
private var _thex:Number;
private var _they:Number;

public function DragableResortIcon():void
{
trace("dragable resort icon")
init();
}

private function init():void
{
addEventListener(MouseEvent.MOUSE_DOWN, start);
addEventListener(MouseEvent.MOUSE_UP, stop);
}

private function stop(e:MouseEvent):void
{
//trace("mouse up",this)
this.stopDrag();
dispatchEvent(new Event("dropped_icon",true,true))
}

private function start(e:MouseEvent):void
{
//get coords for return if dropped not on the map
//trace("setting the coords only at the start of the drag")
thex = e.currentTarget.x;
they = e.currentTarget.y;
e.currentTarget.startDrag(true);
}

public function get thex():Number { return _thex; }

public function set thex(value:Number):void
{
_thex = value;
}

public function get they():Number { return _they; }

public function set they(value:Number):void
{
_they = value;
}

}

}



I'm sure that the mxml takes care of adding the child to the display list right... and this class is working before with the following construct

import at.landed.view.icons.DragableResortIcon;
import at.landed.view.icons.ResortIcon;
import mx.controls.Button;
import mx.core.UIComponent;

private function init():void
{
var rI:DragableResortIcon = new DragableResortIcon();
//var holder:UIComponent = new UIComponent();
//addChild(holder)
holder.x = 12;
holder.y = 12;
holder.addChild(rI)
}

the reason im changing this is because it (...holder.rI) wasn't visible publicly. In flash as3 child movie clips were always seemingly available in this way though forgetting for a moment it may be bad practise to address them like that..

[mojito]

Fixed the class to display if instantiated by mxml it needs to extend UIComponent still. Would have thought that mxml took care of that so the following fixes things so far...

public class DragableResortIcon extends UIComponent {

:eek:

[Barna Biro]

Example.mxml ( the main app file ):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx = "http://www.adobe.com/2006/mxml"
backgroundColor = "#FFFFFF"
backgroundGradientColors = "#FFFFFF"
creationComplete = "onCreationCompleteHandler(event)">

<!-- Import the script source -->
<mx:Script source="ExampleAS.as" />

</mx:Application>
ExampleAS.as ( the script file associated with Example.mxml - I could have simply created a Script block and add all the code there, but that's just not my style... no one will stop you if you decide to do otherwise ):

import com.example.icons.DraggableIcon;

import flash.display.Sprite;
import flash.events.Event;

import mx.events.FlexEvent;

// ----------------------------------------
// Variables
// ----------------------------------------

/**
* Reference to the icon object.
*
*/
protected var _icon:Sprite = new DraggableIcon();

// ----------------------------------------
// Event handling
// ----------------------------------------

/**
* Called once the component has been created.
*
*/
protected function onCreationCompleteHandler(event:FlexEvent):void
{
// Subscribe to events.
_icon.addEventListener(DraggableIcon.ON_MOUSE_DOWN , onStartIconDragHandler);
_icon.addEventListener(DraggableIcon.ON_MOUSE_UP, onStopIconDragHandler);

// Add the icon to the display list.
this.rawChildren.addChild(_icon);
}

/**
* Starts to drag the icon.
*
* @param event The event object.
*
*/
protected function onStartIconDragHandler(event:Event):void
{
_icon.startDrag();
}

/**
* Stops icon dragging.
*
* @param event The event object.
*
*/
protected function onStopIconDragHandler(event:Event):void
{
_icon.stopDrag();
}
DraggableIcon.as ( the draggable icon class, containing an embedded symbol ):

package com.example.icons
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

/**
* Draggable icon class.
*
* @author Barna Biro
* @created Dec 1, 2009
*
*/
public class DraggableIcon extends Sprite
{
// ----------------------------------------
// Event types
// ----------------------------------------

public static const ON_MOUSE_DOWN:String = "onMouseDown";
public static const ON_MOUSE_UP:String = "onMouseUp";

// ----------------------------------------
// Embedded assets
// ----------------------------------------

[Embed(source="assets/swf/Symbols.swf", symbol="SpRectangle")]
protected static const SpRectangle:Class;

// ----------------------------------------
// Constructor
// ----------------------------------------

/**
* Class constructor.
*/
public function DraggableIcon()
{
super();

// Subscribe to events.
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStageHandler);
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
this.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
}

// ----------------------------------------
// Event handling
// ----------------------------------------

/**
* Called once the object has been added to the stage,
*
* @param event
*
*/
protected function onAddedToStageHandler(event:Event):void
{
// Unsubscribe from events.
this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStageHandler);

// Create the symbol and add it.
var symbol:Sprite = new SpRectangle() as Sprite;
this.addChild(symbol);
}

/**
* Starts dragging the current object.
*
* @param event The event object.
*
*/
protected function onMouseDownHandler(event:MouseEvent):void
{
this.dispatchEvent(new Event(ON_MOUSE_DOWN));
}

/**
* Stop dragging the current object.
*
* @param event The event object.
*
*/
protected function onMouseUpHandler(event:MouseEvent):void
{
this.dispatchEvent(new Event(ON_MOUSE_UP));
}
}
}
Just to make really sure that you run into problems trying to reproduce all the above, I'll also upload the project source ( it was built using SDK v3.4 - in case compiler error appear, make sure you are using SDK v3.4 - you might also need to create 'lib' folder ).

That's the most I can do,
Best regards,
Barni