Techish dot Jeremy Mooer

Flex AsyncToken ProgressBar

2009-06-10T12:01:00.000-07:00

Brian Holmes originally created an AsyncTokenProgressBar at my current place of employment and included it in the SmashedApples Framework.

After our FortFUG meeting lastnight and talking to Brian Coleman who uses it, I thought I'd post my updates to the class here. When I have some time, I'll update the SmashedApples framework library project and check it in.

it's used, obviously, by calling the static method AsyncTokenProgressBar.show(asyncToken, uiComponentToOverlayWithProgressBar);


public class AsyncTokenProgressBar extends ProgressBar
{

public static function show(token:AsyncToken, parent:UIComponent, label:String=null):void
{
 var container : AsyncTokenProgressBarContainer = new AsyncTokenProgressBarContainer();
  container.height = parent.height;
  container.width = parent.width;

 var bar : AsyncTokenProgressBar = new AsyncTokenProgressBar();

 parent.callLater(bar.doShowLater,[token,parent,container,label]);
}

// the easiest way to align the asyncTokenProgressBarContainer with the parent was to call centerPopup after the parent has been rendered/displayed.
private function doShowLater(token:AsyncToken, parent:UIComponent, container:AsyncTokenProgressBarContainer, label:String=null):void
{
 if(label!= null)
  this.label = label;

 container.addChild( this );

 PopUpManager.addPopUp( container, parent, false );
 PopUpManager.centerPopUp( container );

 if(parent is Container && (parent as Container).enabled == true )
 {
  (parent as Container).enabled = false;
  token['parentWasDisabledByAsyncBar'] = true;
  token['parentReference'] = parent;
 }

 this.start(token);

}



public function AsyncTokenProgressBar()
{
 super();
 this.indeterminate = true;
 this.mode = "manual";
 this.maximum = 0;
 this.minimum = 0;
 this.label = "";
}



public function start(token:AsyncToken):void
{
 this.setProgress( 0,1 );
 var responder : AsyncResponder = new AsyncResponder( handler, handler );
 token.addResponder( responder );
}

public function stop():void
{
 this.setProgress( 1,1 );

 if( (this.parent as Container).isPopUp)
  PopUpManager.removePopUp(this.parent as IFlexDisplayObject);
}

//AsyncResponder fault and result handler
private function handler(data:Object, token:Object=null):void
{
 if(token == null && data.hasOwnProperty('token'))
  token = data['token'];

 if(shouldReEnableParent(token)) {
  (token['parentReference'] as Container).enabled = true;
 }

 stop();
}

private function shouldReEnableParent(token:Object):Boolean
{
 if(!token)
  return false;

 if(!token.hasOwnProperty('parentWasDisabledByAsyncBar'))
  return false;

 if(!token.hasOwnProperty('parentReference'))
  return false;

 if(token['parentWasDisabledByAsyncBar'] == false)
  return false;

 if( !(token['parentReference'] is Container) )
  return false;

 return true;
}






}

AutoScrolling Flex Form.

2009-05-18T14:36:00.000-07:00

At work we have an extensive library for our internal ERP application. A component therein is our Form component. It does a lot of little things such as adding default keyListeners for regularly used form shortcuts, or a getFormValues that loops through all children (and all children of childrenContainers ad infinitum), returning a class that we use for most RemoteObject calls.

Last week I added an autoScroll property to that internal form, using code from Daryl Bantarri's AutoScroll utility class (a class that has a single static method). I had a slight problem with it that required a slight edit or two (breaking the method into a few more manageable functions). (and, of course, my edits had to conform to our internal architectural standards and naming conventions)... so if the "doFunctionName," "canRuleName" or redundant returns in the rule are annoying -- that's my fault --> I wrote a lot of those ridiculous rules over here.

Also, in the comments of Daryl's post, some talked of removing the updateComplete listener. We add a lot of form components dynamically to forms, so listening for anything after an updateDisplayList, etc., is a necessity for our framework. Feel free to get rid of that updateComplete listener if need be, especially if your intended use is to hard-code your components in the form.

A shout out to Patrick who is part owner of Webapper... fellow Northern Coloradan whom I've met a small handful of times at random local tech meetups.


private var _autoScroll : Boolean = false;
public function get autoScroll():Boolean
{
 return _autoScroll;
}
public function set autoScroll(value:Boolean):void
{
 _autoScroll = value;
 if(value)
  activateAutoscrollListeners();
}



private function activateAutoscrollListeners():void
{
 var container : DisplayObjectContainer = this.parent;
 if(container)
 {
  container.addEventListener(FlexEvent.UPDATE_COMPLETE, doAutoScroll);
  container.addEventListener(FocusEvent.FOCUS_IN, doAutoScroll);
 }
}

also, on creationComplete (or earlier, since we only need the this.parent in activeAutoScrollLIsteners()):


if(autoScroll)
 activateAutoscrollListeners();


private function canAutoScroll(container:Container, focusObject:DisplayObject):Boolean
{
 if(!focusObject)
  return false;

 if(!container)
  return false;

 if(!container.verticalScrollBar)
  return false;

 if(!this.contains(focusObject))
  return false;

 if(focusObject == this)
  return false;

 return true;
}

/**
* doAutoScroll is the eventListener for the parent container's updateComplete and focusIn.  if(canAutoScroll), this method calls
* completeAutoScroll and updates the parent container's verticalScrollPosition.
*
*/
private function doAutoScroll(event:Event):void
{
 var container : Container = Container(event.currentTarget);
 //Don't want displayObject.Y of event.target.  getFocus() is more accurate (i.e., mx.controls.combobox).
 var focusObject : DisplayObject = DisplayObject(container.focusManager.getFocus());

 if(canAutoScroll(container,focusObject))
 {
  var itemParent : DisplayObjectContainer = focusObject.parent;
  var focusObjectTopY : int = (focusObject.parent == this) ? focusObject.y : addTotalYoffSets(focusObject);
   if(container.verticalScrollPosition != focusObjectTopY)
    {
   completeAutoScroll(container, focusObjectTopY, focusObject);
  }
 }
}

private function addTotalYoffSets(focusObject:DisplayObject):int
{
 var parentContainer : DisplayObjectContainer = focusObject.parent;
 var focusObjectTopY : int = focusObject.y ;

 while(parentContainer != this.parent) {
  focusObjectTopY += parentContainer.y;
  parentContainer = parentContainer.parent;
 }

 return focusObjectTopY;
}

private function completeAutoScroll(container:Container, focusObjectTopY:int, focusObject:DisplayObject):void
{
 var focusObjectBottomY : int = focusObjectTopY + focusObject.height;
 var lastVisibleY : int = container.height + container.verticalScrollPosition;

 if(container.horizontalScrollBar)
  lastVisibleY -= container.horizontalScrollBar.height;


 if(focusObjectTopY < container.verticalScrollPosition)
 {
  container.verticalScrollPosition = Math.max( 0, focusObjectTopY - 5 );
 }
 else if(focusObjectBottomY > lastVisibleY)
 {
  //scroll down.  +5 pixels for good measure.
  var newPosition : int = Math.min( container.verticalScrollBar.maxScrollPosition, (container.verticalScrollPosition + (focusObjectBottomY - lastVisibleY)) );
  container.verticalScrollPosition = newPosition + 5;
 }

}

FlexPerspective project

2009-05-12T21:25:00.000-07:00

As per yesterday's random post, I decided to post my little FlexPerspective project. The details are at gitHub. I'll get around to posting a decent example in the coming weeks.

A Note on SAP / Flex and iPerspective

2009-05-11T19:57:00.000-07:00

Ridiculously long time since a post, but, for anyone who knew I went, my trip to Palo Alto wasn't what I had expected. I thought I'd be writing an interface to parse the SAP metadata used to render an SAP screen and render it in a Flex application.

It appears as though it had already been done... not sure if it was/is an open source project, but one thing that did come out of my own experimentation is a little interface called iPerspective.

iPerspective: In the app I was building it seemed to make sense to (instead of manage components' interactivity through states) dispatch a PerspectiveEvent (listened for in the App and pushed back down to all registered components), changing the look of the ApplicationControlBar, and anything else that is a mx.core.container that implements iPerspective.

I'll work with it next week if/when I have time -- if it makes sense in practice, maybe I'll open source it.
Anyway, no real stories. Hope all is well out there.

a random utility class: ObjectSerializer.

2008-09-13T10:28:00.001-07:00

I'm just going through and editing a few old posts. This package (objectSerializer) was one that was needed in the case of a serialized object needing to be passed through a url (yes, we had a case where that was needed).

package of.lovin
{
 import flash.utils.ByteArray;
 
 import mx.utils.Base64Decoder;
 import mx.utils.Base64Encoder;
 
 public class ObjectSerializer
 {

  public static function decode(str:String):*
  {
   // '+' equals '-'  and '/' equals '_'
   
   if (str != null)
   {
    
    var myPattern : RegExp = new RegExp("-", "g");
    var myPattern2 : RegExp = new RegExp("_", "g");
    var myPattern3 : RegExp = new RegExp("~", "g");
    
    var urlModifiedString : String = str;
     urlModifiedString = urlModifiedString.replace(myPattern,"=");
     urlModifiedString = urlModifiedString.replace(myPattern2,"/");
     urlModifiedString = urlModifiedString.replace(myPattern3,"\n");
     
    
    var bytes:ByteArray = new ByteArray();
    var bDecoder : Base64Decoder = new Base64Decoder();
     bDecoder.decode(urlModifiedString);
    bytes = bDecoder.toByteArray() ;
    
    bytes.position = 0;
    
    return bytes.readObject();
   }
   return null;
   
  }
  
  public static function encode(obj:*):String
  {
   // '+' equals '-'  and '/' equals '_'
   
   var bytes:ByteArray = new ByteArray();
    bytes.writeObject( obj );
   
   var bEncoder : Base64Encoder = new Base64Encoder();
    bEncoder.encodeBytes(bytes);

   var myPattern : RegExp = new RegExp("=", "g");
   var myPattern2 : RegExp = new RegExp("/", "g");
   var myPattern3 : RegExp = new RegExp('\n', "g");
   
   var urlModifiedString : String = bEncoder.toString();
    urlModifiedString = urlModifiedString.replace(myPattern,"-");
    urlModifiedString = urlModifiedString.replace(myPattern2,"_");
    urlModifiedString = urlModifiedString.replace(myPattern3,"~");
   
   return urlModifiedString ;
  }

 }
}

missing enabledChanged metadata in mx.core.UIComponent

2008-05-13T11:22:00.000-07:00

I could write a long drawn-out post about how we were creating event listeners today to set the enabled property of some of the button classes in our custom forms at work... blah blah blah.

Bottom line, UIComponent.as is missing this line:
[Event(name="enabledChanged", type="flash.events.Event")]

Give it a shot. Create a component that extends mx.core.Container (or, in our case, extends a custom component that extends Form.as) and create a function bindable to "enabledChanged" (so that the binding is done via metadata). It won't work until you add the metadata for the event somewhere.

That is all.

Flex Builder / Eclipse tip du jour.

2008-05-10T11:09:00.000-07:00

It's inevitable. You'll be debugging a Flex application, get an error and will need to look at a class, object, function or the like. Instead of scrolling up and down, or digging through directories, do the following:

Ctrl-click on the 'identifier' in question and you're in like Flynn.

30th time is the charm?

2008-05-10T10:38:00.000-07:00

Maybe it's a bad idea to start ANOTHER blog that may fall into the same ol' my-last-post-was-five-months-ago pit. But, what the hell...