I think my question is for advanced flex developers or experts.
My task is relatively simple: I need to build some kind of horizontal "gallery" component, and IMGO the new DataNavigator from new Apache 4.10 SDK suits best for this task.
In other words I need the same as DataNavigator with a specific INavigatorLayout - the same as CarouselLayout , but much simpler - without any perspective but with smooth transition between items. May be such layouts already exists?
Thanks for advance.
Andrew.
Well, I found the solution that satisfied me, it works for me, but the main idea:
package
{
import com.greensock.TweenLite;
import spark.layouts.HorizontalLayout;
import spark.layouts.supportClasses.INavigatorLayout;
import mx.core.IVisualElement;
/**
* #author Andrew
*/
public class LobbyNavigatorLayout3 extends HorizontalLayout implements INavigatorLayout
{
public function LobbyNavigatorLayout3()
{
}
private var _selectedElement:IVisualElement;
public function get selectedElement() : IVisualElement
{
return _selectedElement;
}
public function get selectedIndex() : int
{
return target.getElementIndex(_selectedElement);
}
public var ttt:Number = 0;
public function set selectedIndex(value : int) : void
{
if (!target) return;
var firstEl:IVisualElement = target.getElementAt(0);
if (!firstEl) return;
var shift:Number = (600 + gap) * value;
TweenLite.to(this, 1, {ttt:shift, onUpdate:function ():void {
updateDisplayList(target.width, target.height);
}} );
_selectedElement = target.getElementAt(value);
}
override public function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
for (var i : int = 0; i < target.numElements; i++)
{
var el:IVisualElement = target.getElementAt(i);
el.setLayoutBoundsPosition(el.x - ttt, 0);
}
}
}
}
need to say that this is for useVirtualLayout = false; Some extra work needed to fix this, but it suits for me for now, and if you are feel like you are able to do this - you are welcome!
Related
For some reason, I can't modify the value of a field in Haxe. Of course, this doesn't seem to be affecting all of my fields, just this one. Here's (what I'm pretty sure is) the applicable code. First, in the parent class:
class TopMenu extends Sprite
{
public function new()
{
super();
init();
}
private function init()
{
var tempField:BitmappedTextField = new BitmappedTextField( "File", 100, false );
trace( tempField.textWidth );
}
}
Then, in the child class:
class BitmappedTextField extends Sprite
{
private var _fieldText:String;
private var _fieldWidth:Int;
private var _addToStage:Bool;
public var textWidth:Int;
public function new( thisText:String, thisWidth:Int = 100, adTStg:Bool = true )
{
super();
_fieldText = thisText;
_fieldWidth = thisWidth;
_addToStage = adTStg;
textWidth = 55;
init();
}
public function init()
{
textWidth = 777;
}
}
I would expect the trace statement to return 777, but instead it will always return 55. In fact, no matter what I do, I can't seem to modify a field outside of the constructor class and then retrieve that value via the parent class. There's something horribly simple I must be missing, but I just can't figure it out. Maybe it has to do with the way Haxe uses getters and setters? Any help is appreciated, thank you.
I cant reproduce your problem however and you are missing a ; and a super call.
Try this code.
package;
import nme.display.Sprite;
import nme.display.MovieClip;
class HelloWorld extends MovieClip
{
public function new( )
{
super();
var tempField:BitmappedTextField = new BitmappedTextField();
trace( tempField.textWidth );
}
}
class BitmappedTextField extends Sprite
{
public var textWidth:Int;
public function new( )
{
super();
textWidth = 55;
init( );
}
public function init( )
{
textWidth = 777;
}
}
I'm new to Action-script OOP and i need to know how to chain methods like this example i have
I.$(button).bind('click',clickButton).bind('rollover',overButton).bind('rollout',outButton)
First i need to remove the I. to use dollar sign only like jQuery :) to select MovieClip and apply any action on it second issue that i have because this way i'm using static Methods Action-script restrict's me to use only static property saving the last one who called the action here is the class code to know what i mean:
package com.MAIN
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class I extends Sprite
{
private static var cSelector:Sprite;
public static function $(selector:Sprite)
{
cSelector = selector
return I;
}
public static function alpha(val:Number)
{
cSelector.alpha = val;
return I;
}
// bind mouse event to the element
public static function bind(EventStr,func:Function)
{
var func1:Function = function(e:MouseEvent){
func(cSelector);
}
// select the event from the list
if(typeof(EventStr) == 'string'){
// map the events in lowercase
var events:Object = {click:'CLICK',rollover:'ROLL_OVER',rollout:'ROLL_OUT',dblclick:'DOUBLE_CLICK',mousedown:'MOUSE_DOWN',mousemove:'MOUSE_MOVE',mouseout:'MOUSE_OUT',mouseover:'MOUSE_OVER',mouseup:'MOUSE_UP',mousewheel:'MOUSE_WHEEL'};
// check if the event exists in the list
if(events[EventStr] && MouseEvent[events[EventStr]]){
cSelector.addEventListener(MouseEvent[events[EventStr]],func1);
}
}else if(typeof(EventStr) == 'object'){
// add the event
cSelector.addEventListener(EventStr,func1);
}
return I;
}
public static function remove()
{
cSelector.parent.removeChild(cSelector);
return I;
}
}
}
Here you go, some steps in the right direction. However, this is a really, really, really crappy idea.
//$.as
package
{
import flash.display.DisplayObject;
//NOTE: there's NO class definition
public function $( selector : DisplayObject ) : IDisplayObject
{
//traverse displaylist to find <code>selector</code>
//and return an instance of IDisplayObject that holds the reference
}
}
//IDisplayObject.as
package
{
public interface IDisplayObject{
function alpha( value : Number ) : IBinding;
}
}
//IBinding.as
package jquery
{
public interface IBinding{
function bind( eventName : String, callback : Function, ...parameters ):void;
}
}
Once you've created concrete implementations of these you can do:
$( someMC ).alpha( .5 ).bind( 'click', function(){ trace( 'what a miraculously crappy idea !!!!' ) } );
You could try it like this:
interface Test {
function doBla(): Test
function moreBla(): Test
}
public class StaticTest {
private static const instance: Test = new InternalTest()
public static doBla() : Test {
return instance.doBla();
}
public static moreBla() : Test {
return instance.moreBla();
}
}
internal class InternalTest implements Test {
function doBla(): Test {
trace("bla");
return this;
}
function moreBla(): Test {
trace("more bla");
return this;
}
}
I am building a set of Flash components with the ability to replace the skin of the component with another one in the library.
Currently, I am able to access the library after running the application, but not during live preview and I'd like to know if it is possible for the component to access the library while running in live preview mode (the mode where you can drag the component around the stage and change its properties in the Component Parameters window)
Here is a simplified code that just looks to see if there is a symbol of the name specified and than instantiates it and adds it as a child.
package
{
import fl.core.UIComponent;
import flash.display.MovieClip;
import flash.system.ApplicationDomain;
/**
* ...
* #author Roy Lazarovich
*/
public class CompTest extends UIComponent
{
private var customfile :String;
public function CompTest()
{
}
override protected function configUI():void
{
}
override protected function draw():void
{
super.draw();
}
private function setCustomFile():void
{
if (ApplicationDomain.currentDomain.hasDefinition(customfile))
{
var c:Class = Class(ApplicationDomain.currentDomain.getDefinition(customfile));
var mc:MovieClip = new c();
addChild(mc);
}
}
[Inspectable(name = "_Custom File", defaultValue = "")]
public function set _customfile(value:String):void
{
customfile = value;
setCustomFile();
drawNow();
}
}
}
Thanks!
I'm not entirely sure what you have already tried to fix this situation. But hopefully this might help.
Right click on the MovieClip in your library, select Linkage and give it a class name, ie. MyThing.
In your code,
newMyThing = new MyThing();
this.addChild(newMyThing);
trace("tada!");
Hope that helps or gets you closer to a solution.
This works for me in LivePreview, as long as I apply it in configUI, and not draw:
public class EditableBitmap extends UIComponent
{
protected var placeholder:String = "None";
protected var bitmap:Bitmap;
protected var scale:Number = 1;
[Inspectable(name = "Placeholder", type = String, defaultValue="None")]
public function set Placeholder($value:String):void
{
placeholder = $value;
configUI();
}
public function get Placeholder():String { return placeholder; }
public function EditableBitmap()
{
//Console.Debug("NEW EditableBitmap");
super();
}
override protected function configUI():void
{
//Console.Debug("EditableBitmap configUI: " + width);
if (!isNaN(width))
{
wDim = width;
hDim = height;
graphics.clear();
graphics.beginFill(0x000000, 0.1);
graphics.drawRect(0, 0, wDim, hDim);
}
if (placeholder != "None" && placeholder != "")
{
var asset:Class = getDefinitionByName(placeholder) as Class;
var data:BitmapData = new asset() as BitmapData;
bitmap = new Bitmap(data);
}
super.configUI();
}
override protected function draw():void
{
if (bitmap)
{
addChild(bitmap);
bitmap.x = off_x * scale;
bitmap.y = off_y * scale;
bitmap.scaleX = bitmap.scaleY = scale;
}
}
}
NOTE: When I'm working on the FLA where I am editing the component, the bitmap is only displayed from the library inconsistenty. Sometimes it works, sometimes it doesn't. But when I export the SWC and then import the component to another movie, it works every time, in LivePreview as well as at runtime.
UPDATE
It seems this doesn't work in CS6 unless the symbol is already embedded in the component .SWC I wanted to see if I could trick it, by embedding one image in the SWC and then replacing it with another of the same name in the destination file. This didn't work, but it did point me to how you can do this:
So, it's a bit laborious, but you could work around this by:
1) Creating a dummy asset for each property in the component SWC.
2) Overriding this using a custom class in the file where you deploy the component
... all of which may be more trouble than it's worth, but which should provide a solution to the problem.
I come to need a bit more info from my points, so I thought I'd add a previousX, previousY so that I can get a deltaX and deltaY. Now, this works fine if I make a simple self-contained class.
I think, however, that I'd like to extend the flash.geom.Point class to benefit from the other functions and calculations it offers.
So I extended Point and modified the x and y setters as I needed. When I compile, I get an error that these setters are not marked for override when they should be. So I override, but then I get an error that says these do not override any function.
Any clue where I screwed up?
Here is the class:
package net.jansensan.geom
{
import flash.geom.Point;
/**
* #author Mat Janson Blanchet
*/
public class UpdatablePoint extends Point
{
private var _previousX : Number = 0;
private var _previousY : Number = 0;
private var _deltaX : Number = 0;
private var _deltaY : Number = 0;
// ********************************************************************
// [ PUBLIC METHODS ]
// ********************************************************************
public function UpdatablePoint(x:Number=0, y:Number=0)
{
super(x, y);
}
override public function toString():String
{
return "(x=" + super.x + ", y=" + super.y + ", previousX=" +
_previousX + ", previousY=" + _previousY + ", deltaX=" +
_deltaX + ", deltaY=" + _deltaY + ")";
}
// ********************************************************************
// [ GETTERS / SETTERS ]
// ********************************************************************
override public function set x(x:Number):void
{
_previousX = super.x;
super.x = x;
_deltaX = super.x - _previousX;
}
override public function set y(y:Number):void
{
_previousY = super.y;
super.y = y;
_deltaY = super.y - _previousY;
}
public function get previousX():Number
{
return _previousX;
}
public function get previousY():Number
{
return _previousY;
}
public function get deltaX():Number
{
return _deltaX;
}
public function get deltaY():Number
{
return _deltaY;
}
}
}
The Point class isn't implemented using get/set-methods, rather it contains only public variables: public var x : Number and public var y : Number. See the documentation here.
Since you cannot override any public getters or setters you can't detect when anyone using your class is writing to these variables. What you can do is remove the extends Point and add a Point instance variable to your UpdatablePoint. Then change your getters and setters for x/y from super.[x/y] to myPointInstance.[x/y].
If you need to expose more functionality from the Point class, you could easily just wrap it. I.e. Say you want to use the 'equals'-method from Point, just create a copy of that method signature and make it's body contain: return myPointInstance.equals(p);
Point does not have public function set x or public function set y.
So you can't override them as they don't exist. Point is very low-level, my guess would be that Adobe didn't add these functions to avoid the increase in overload.
The question is a bit silly. I am trying to implement a skill updating system. So to explain.
There is a class
class AppInfo
{
public static var power:int = 10;
public static var speed:int = 20;
}
and class SmartButton which should take a reference to one of the static variables e.g. power in a constructor and increment it on the given value.
e.g.
class SmartButton
{
public function onClick(skillReference:int = <AppInfo.power>, incrementVAlue:int = 10)
{
skillReference += incrementVAlue
}
}
I want this code to update the value of the power in AppInfo class. But this doesn't happen... I assume because the skill was passed as value not as reference...
Can you suggest a way of solving the task?
Thanks
Your assumption is correct, ints are passed by value rather than reference. One direct approach would be to encapsulate power into a reference type (a class) rather than a value type:
class Skill {
public var value:int;
public function Skill(val:int) {
this.value = val;
}
}
class AppInfo
{
public static var power:Skill = new Skill(10);
public static var speed:Skill = new Skill(20);
}
Then passing power should pass it as a reference to the instance. Though you would have to change your implemenation a bit to use skillReference.value instead.
Aside from that, I think there are a couple of ways to abstract what you want out. One way would be use an interface and leverage some dependency injection.
interface ISkills
{
function get power():int;
function set power(val:int):void;
}
class AppInfo implements ISkills
{
private static _power:int = 0;
public function get power():int { return _power; }
public function set power(val:int):void { _power = val; }
}
class SmartButton
{
public function onClick(skills:int = ISkills, skill:String = "power", incrementVAlue:int = 10)
{
skills[skill] += incrementVAlue
}
}
The idea here that you want to decouple your usage from your implementation. In this case SmartButton doesn't need to know how Skills work just how to operate on them. It loses its reference to the static class AppInfo in favor of an injectable instance. There are some advantages to this approach, it makes it easier to test and easier to swap implementations later if you decide that a static class isn't the best implementation idea without having to update a bunch of classes/code. Also, rather than injecting ISkills into the method, you could inject it into the constructor of SmartButton, and keep a private reference to the skill container.
Another approach would be to use a functional approach.
class SmartButton
{
public var defaultWorker:Function = function(val:int):void {
AppInfo.power += val;
}
public function onClick(worker:Function = undefined, incrementValue:int = 10):void
{
if(worker == undefined) worker = defaultWorker;
worker.call(this, incrementValue);
}
}
Again, in this case, rather than tightly coupling your implementation to use the AppInfo class directly, you inject a "worker" for it do the work for you (if the worker is undefined then use the default worker. You can then swap out which property gets changed by changing the closure that gets passed in. For instance if you wanted to change speed instead then you would call:
var smartButton:SmartButton;
smartButton.onClick(function(val:int):void { AppInfo.speed += val});
Not quite as succinct as it could be, but it gets the job done.
The obligatory "elegantly sophisticated" approach using the command pattern:
Interface Command {
function execute():void;
}
Class UpdatePower implements Command {
private var appInfo:AppInfo;
private var delta:int;
public function UpdatePower(appInfo:AppInfo, delta:int) {
this.appInfo = appInfo;
this.delta = delta;
}
public function execute():void {
appInfo.delta += delta;
}
}
Class SmartButton {
var command:Command;
public function SmartButton(command:Command) {
this.command = command;
}
public function onClick(event:Event):void {
command.execute();
}
}
I would probably implement this in a slightly different way.
Maybe something like;
class Properties {
private var _properties:Dictionary = new Dictionary();
public function setValue(key:String, value:int) {
_properties[key] = value;
}
public function getValue(key:String):int {
if( !_properties[key] ) return 0;
else return _properties[key];
}
public function modifyValue(key:String, value:int) {
setValue(key, getValue(key) + value);
}
}
class SmartButton
{
public function onClick(target:Properties, key:String, incrementValue:int = 10) {
target.modifyValue(key, incrementValue);
}
}
Or something along those lines.