Tuesday, July 29, 2008

Dynamically resized Datagrid

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!

Monday, July 21, 2008

Few notes

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..

Friday, July 18, 2008

quick tip, includeInLayout

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> :)

Thursday, July 10, 2008

Useful Flex Tip: Use CallLater()

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.

Monday, July 07, 2008

PureMVC: SendNotification vs. NotifyObservers

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: , , , , ,

Feed (RSS/Atom)

Contact Me

Don't put anything here: