What's My Title Today?

Great example on creating and positioning TitleWindows. http://www.mxml.it/index.php/2008/06/18/positioning-popups/

I have a DateChooser control and I was trying to default it to have tomorrow's date selected. This is actually really easy to do, but it took me a fair amount of time to figure it out, so I thought I'd post this just in case anyone else has some trouble. Create a variable for today's date: [Bindable] private var today:Date = new Date(); Then set the selected date of the DateChooser. You may also want to set showToday to false so that today's date isn't highlighted. <mx:DateChooser selectedDate="{new Date(today.fullYear,today.month,today.date+1)}" showToday="false"/> The selectedDate property only understands straight dates with no time, which is why I had to assign it this way. If you're at the end of the month/year Flex is smart enough to know that date + 1 should take you to the next month/year. Here is a sample with view source enabled.

So getting a column field to wrap in an AdvancedDataGrid isn't as easy as just setting the "wordWrap" property to true. Maybe it should be, but it isn't. First thing's first. Do you have an itemRenderer on the column you're trying to wrap. If the answer is yes you have to make sure that itemRenderer is based on a wrappable component. For argument's sake, lets say you have a Label itemRenderer, well you're going to have to change that to be based on Text, and you're going to have to give it a width to give it the capability to wrap (percentWidth = 100 works nicely). Then set your wrap-able column to wordWrap = true . Finally set your AdvancedDataGrid to have property variableRowHeight = true . Here is a link to an example with the view source enabled.

So the Spark button doesn't have the icon property... which to be honest annoys me a little, but I do understand that they want the skin to be separate from the code. Anyway, I made an icon button based on some other examples I've looked over. To see the working example with view source enabled click here .

I discovered yesterday that with the new Spark components there was no "editable" property on the ComboBox component. I realized that the Spark ComboBox is always editable by default, and with no way to turn that off I was confused. Did a little research and found that to have what would have been ComboBox editable="false" in Halo is now simply DropDownList. Two different components. I think it makes sense to have these separate.

So skinning spark buttons with images isn't the same as skinning halo (mx) buttons with images. It's a 3 part process. components.ImageButton.as package components { import spark.components.Button; [Style(name="imageSkin",type="*")] [Style(name="imageSkinDisabled",type="*")] [Style(name="imageSkinDown",type="*")] [Style(name="imageSkinOver",type="*")] public class ImageButton extends Button { public function ImageButton() { super(); } } } Script block [Embed('assets/images/btnGoUp.png')] [Bindable] public var btnGo:Class; [Embed('assets/images/btnGoOver.png')] [Bindable] public var btnGoOver:Class; [Embed('assets/images/btnGoDisabled.png')] [Bindable] public var btnGoDisabled:Class; MXML block <components:ImageButton buttonMode="true" imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}" imageSkinDown="{btnG...

So we have a large dashboard application built in Flex 3.5 SDK. Anyway, making it work with the Flex 4 SDK was annoying and took nearly a week. So the client doesn't want to give me the time to rewrite the UI in the new spark stuff BUT instead slowly convert it over time. So I started to try that... doesn't seem possible. Spark components don't work with the "Use Flex 3 compatibility mode" box checked. When I uncheck that box my whole project blows up and looks totally messed up. So my ultimate conclusion is that a Flex 3 Flex 4 Frankenstein is not really possible.

I am watching a few videos on Flash Builder 4 (or Flex 4) from Adobe's site. http://www.adobe.com/devnet/flex/videotraining/ This is my first taste of the Spark components, and let me tell you, they are so much better and easier to customize. They haven't transfered all the components over to spark yet, so we'll still have to use some MX components, but they have done a lot of them already, and are continuing to work to get them all converted. I haven't tried to actually do any real work with this yet, but so far it has my vote.

Thanks to Marcus and his amazing code I can share with you a soultion for my legend button problem . This is more than I asked for. Make sure if you use this, you credit and thank Marcus for his amazing work! Sample with view source enabled

Sometimes your data is in a specific order, but not ordered on anything you can really sort by via a data grid. So sometimes you apply a sort with the data grid (or advanced data grid), which is great and everything, but what do you do when you want to reset the data back to the original order? this.mydatagrid.dataProvider.sort = null; this.mydatagrid.dataProvider.refresh(); Done!

I thought since I mentioned it way back when in a tweet, I should post the code for my selectable map component. I thought this was going to be super tough, but once I found the ImageMap component in flexlib it wasn't bad at all. Here is the example with view source enabled. This example also shows how to create a custom event, which I also mentioned in a previous post .

So I always have this problem where I'll have a component inside a component, and the parent component needs to do something based on some sort of trigger from the inside component. Using Parent or Application is a big no no, or so my Architect friend tells me ;). They way to do this is create an Event on the inside component. This is pretty easy to do, but I always seem to miss a step and get all frustrated and not understand why it's not working. And in these hot lazy days of summer, it's really not a good motivator. :D So here are the steps so I can look this up if I forget. I am just going to use a button click as an example, if you need something more intense you'll need to make a custom event. So... ComponentB is inside ComponentA. In the actionscript of ComponentB do: Just below the imports - [Event (name="myEvent", type="flash.events.Event")] Create a function that dispatches that event: protected function myFunction():void { dispatchEven...

**Edit - this has been solved thanks to the help of Marcus : view the entry here ** I never claimed to be a Flex expert... and this only proves why. Back story: I am trying to extend a Flex button to be something I'm calling a legend button. Essentially it is a button that also doubles as a legend. When the toggle is on that line is on the chart, when the toggle is off that line is removed from the chart. The button 'color' and the line color have to match. What I am currently trying to do: I am trying to extend the button component and add a Box (10pxx10px). What is happening however, is the box is showing up underneath the button itself, so when the button alpha is 100% (i.e. when toggle is on) you can't see the box. Here's the code: package com.view { import flash.display.DisplayObject; import flash.events.MouseEvent; import flash.text.TextLineMetrics; import mx.containers.Box; import mx.controls.Button; import mx.core.UITextField; public class LegendBut...

So in the current project I'm working on I have a lot of Panels that slide on and off the screen. The problem I keep having is the Panels are still visible when their x value is set to the width of the container (meaning they are outside of the container but you can still see the edge of the Panel). I was messing around with clip content, etc, and nothing seemed to be working. Eventually I did the following combination and it worked (but still doesn't make much sense to me). Set the container holding the sliding Panel to includeInLayout = false Set the sliding panel to clipContent = true (and includeInLayout = true - the default) Weird, but it works.

So you think when you set the showDataTips property on the DataGridColumn to true that that will make the datatip show... WRONG... you also need to set the dataTipField property to your dataField. So simple... yet this took me half an hour to figure out.

I was building an AdvancedDataGrid today, and the 2nd header was supposed to be a date. Easy enough right? Not so much... I put it as a String, as a Date, as a formatted Date... and every time the last character was begging cut off. No reason why. I tried putting the Date in a String variable... still cut the last character off... but ONLY when it was in the format 5/11/09 or similar... any other string worked fine. I eventually had to use the headerRenderer... all the renderer (extends Text) does is override the updateDisplayList with this.text = data.headerText.toString(); . Works like a charm. What a messed up bug...

I'm not sure why I didn't think of this myself... http://techmytongue.blogspot.com/2008/11/hide-show-tab-on-tab-navigator.html This becomes very important if you want to hide tabs in a tab navigator but you don't want to remove them from the interface completely. In my situation I wanted to hide tabs in a tab navigator based on what the user had selected in a data grid. If the user selected another row in the grid I may need to show a tab that I had previously hidden. tabNav.getTabAt(1).visible = false; Now to elaborate on Venkatesh's post... To remove the tab stop, also disable it: tabNav.getTabAt(1).enabled = false; Now if you are hiding a tab before another tab (that is not hidden) there will be an empty gap where your tab should be. To fix this: tabNav.getTabAt(1).includeInLayout = false; And one final thing. If you're hiding your default tab (i.e. tab index 0) you will also need to set the selected index of the tabNav or else you will still see the contents of ...

I need a Column chart that would get both negative and positive numbers, easy enough. The catch is that the negative "columns" are to be red and the positive "columns" are to be green. Well it wasn't too much fuss to get this figured out, but I thought I would post my code in case it would help anyone else out. Who knew that ColumnSeries had itemRenderers! <mx:ColumnSeries xField="Month" yField="Profit" displayName="Profit" itemRenderer="ColorNegativeBarRenderer" /> Here's a sample with view source enabled so you can see the item renderer code. Here's where I found the info I needed: http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=2021

This took me a while to figure out so I thought I would post it on here just in case someone else is having the same problem. I have an Advanced Data Grid, but I don't want any separator lines between the headers. There are 2 styles and 1 property you need to set in an AdvancedDataGrid to make this happen. The styles are: header-separator-skin header-sort-separator-skin The property is: sortExpertMode I figured setting the styles to "null" would work, but it doesn't. Here is what you need to do: headerSortSeparatorSkin="mx.skins.ProgrammaticSkin" headerSeparatorSkin="mx.skins.ProgrammaticSkin" sortExpertMode="true" Or if you'd rather set the styles in CSS: header-separator-skin: ClassReference("mx.skins.ProgrammaticSkin"); header-sort-separator-skin: ClassReference("mx.skins.ProgrammaticSkin"); Sample with source Thanks to http://theflexguy.com/index.php?option=com_idoblog&task=viewpost&id=104&Itemid=54...

So there doesn't seem to be any item click or tab click event on the tab navigator in Flex. I find this sort of annoying, I mean surely this would be useful and should be included? When searching all I could find was people saying to either use the change event on the tab navigator, (which didn't help me because I wanted my method to run even if you clicked on the currently selected tab) or to use a tab bar instead (which also didn't help me because I am using the SuperTabNavigator from flexlib). What I am doing is basically maximizing the tab when it is clicked, and minimizing it if it is clicked again. I found a solution. http://www.actionscript.org/forums/showthread.php3?t=135539 (post by stburns). You basically get the tab's button. It sounds weird, here's the code to how it works. private function creationComplete():void { for (var i:int=0; i<myTabNav.getChildren().length; i++) { var tab:Button = myTabNav.getTabAt(i); tab.ad...