If you're building an application which you need to conserve space or just want a cool effect, then sliding a canvas right over your content might be a good option. I've had a few people ask me how do I did this on DubKorps.com. First, take a look at the example. Source is available by right-clicking.

showEffect/hideEffect

The secret is in these two triggers. Every UI element in flex will dispatch these events when its visibility is changed. All we have to do is create some mx:Move tags and then toggle the visibility.

Parallel

Since I also want to move the tab button I use a "paralell" effect, mx:Parallel. Within this tag I define two mx:Move tags. One to move the tab and one to move the canvas. Each move has a different target!. This is not necessary if you don't want them both to move, you can just use a mx:Move tag in that case.

Transition happening?

It's important to keep track of whether or not a transition is currently happening. By transition, I mean "effect." We don't want to be able to trigger a new effect if I click while this is happening. I can keep track with a simple boolean which I set in the effectStart and effectEnd triggers.

Positioning

It's important to note that absolute positioning is required for this to work. As you can see from the code, I calculate where the slider moves to and from. The "yTo" and "yFrom" attributes are used to actually make it happen. This same concept could be used for a diagonal or horizontal slide.

Easing Function

One thing I didn't do here was an easing function. If you're going to use one like a "bounce" make sure you give the inside of your canvas some room because the "bounce" will cause more of it to be visible than actually exists. That's it! Easy huh? Don't forget to check the example!

One of my biggest pet peeves of the datagrid control in Flex is that it gives you a set number of rows when it first initializes. Sure, you can adjust the height, but there is not setting for it to be as tall as the data. So how do you set the height to be where you want it?

dg.height=(dg.dataProvider.length*dg.rowHeight)+dg.headerHeight+3; dg.scrollToIndex(0);

This code makes three assumptions:

1. You've got a datagrid named "dg" with a dataprovider
2. You've got your borderthickness set to 1 on the datagrid. That's what the "+3" is for.... I'm sure we could dive into figuring out how to really fully dynamically create the resizer, but for most of us it's okay like that.
3. VerticalScrollPolicy is set to "off"

So how do you make this dynamic? Easy!

<mx:Resize duration="200" id="resizeDGEffect"/>

One more thing, resizeEffect={resizeDGEffect}" on the datagrid you made. The last step is to add an event listener to your dataprovider and call a resize function with the contents of the code above. Check out the example and right click to view the source!

Well I'm working on cleaning up this blog and it's quite a task. You see, I had a checkbox clicked here on blogger that replaced real genuine line breaks with a <br/> tag. So I turned that off so my code snippets could work with Jquery's Chili plugin. Unfortunately, now the whole blog is a mess!

I'm also working on MXML and ActionScript code highlighting for Chili if anyone is interested. Chili is a plugin for jquery that accomplishes code highlighting..

includeInLayout is an often overlooked property of a UIComponent. Basically it's purpose is to make on object not considered when rendering layout. Let's look at an example of a ControlBar (essentially an HBox).

<mx:ControlBar horizontalCenter="0" verticalCenter="0">
   <mx:Button label="111"/>
   <mx:Button label="222"/>
   <mx:Button label="333"/>
   <mx:Button label="444"/>
</mx:ControlBar>

Now let's take the third element and make it invisible. <mx:ControlBar horizontalCenter="0" verticalCenter="0"> <mx:Button label="111"/> <mx:Button label="222"/> <mx:Button label="333" visible="false"/> <mx:Button label="444"/> </mx:ControlBar> As you can see we now have a gap! What's the fix? includeInLayout <mx:ControlBar horizontalCenter="0" verticalCenter="0"> <mx:Button label="111"/> <mx:Button label="222"/> <mx:Button label="333" visible="false" includeInLayout="false"/> <mx:Button label="444"/> </mx:ControlBar> Perfecto! Except, just out of curiousity, what happens if we make that button visible again? <mx:ControlBar horizontalCenter="0" verticalCenter="0"> <mx:Button label="111"/> <mx:Button label="222"/> <mx:Button label="333" includeInLayout="false"/> <mx:Button label="444"/> </mx:ControlBar> :)

Have you ever tried to do something like this: var someText:Text = new Text(); someText.text="testing"; addChild(someText); trace(someText.measuredWidth); and then scratched your head when Flex traces 0 for the width? That's because Flex hasn't drawn it yet. There's two ways to fix it, one you could just call someText.validateSize() but the better way to do it is to wait till Flex validates on its own to make these changes. How do you do that? Well with the callLater() function of course! var someText:Text = new Text(); someText.text="testing"; addChild(someText); callLater(getWidth); public function getWidth():void{ trace(someText.measuredWidth); } ahhh... there we go. Now Flex should be tracing the correct width. This works really well for a number of instances where you want to play with freshly declared visual elements but Flex hasn't finished creating them yet.

PureMVC has two ways to dispatch a Notification. A "note" for short, is like a Flex Event but that's another story. So what's the difference? The main difference is that sendNotifiaction builds the note and sends it at the same time. It's arguments are the same as Notification. notifyObservers is perfect for when you already have a notification constructed or you have a custom implementation of notification. notifyObservers(new Notification("SomeNotificationName"));

VS

sendNotification("SomeNotificationName") NotifyObservers can be called from the facade and other than the constructor argument, pretty much works the same way. sendNotification can be called from a proxy or mediator.I may have this wrong, but I don't think you can do sendNotification from a command, and I'm not sure exactly why. So if you need to dispatch an event from Command, I guess that's another use for facade.notifyObservers. You can send notifications from command, mediator, or proxy.

Labels: adobe, flash, flex, flex 2, flex 3, puremvc

So me and the other people in my team got in a small argument over the proper use of PureMVC's mediators. We've read in various blogs that it is not a good practice to call a Proxy directly from a mediator. If you're going to call a proxy, it needs to be done from a command. In this particular case, we're asking for the proxy to refresh some data. That's it... one call. someProxy.refresh(). The refresh will send it's notification and our mediator will update. So one of my coworkers wanted to register a command that called someProxy.refresh() and then send a notification from the mediator. If there was some business logic that needed to happen, I'd be all for it! But there isn't, we're just refreshing an array collection. So someone please tell me why should I register a command to call a proxy in this case? And to further my point, the employee admin demo on PureMVC's official website does exactly what I'm describing in RolePanelMediator.as private function onAddRole( event:Event ):void { roleProxy.addRoleToUser( rolePanel.user, rolePanel.selectedRole ); } private function onRemoveRole( event:Event ):void { roleProxy.removeRoleFromUser( rolePanel.user, rolePanel.selectedRole ); } I am not a very stubborn person. if someone can make a good point for why I shouldn't do it this way, then I'll change my ways. I promise.

Labels: command, controller, flex, mediator, mvc, proxy, puremvc