Thursday, June 11, 2009

Flex AdvancedDataGrid Header bug?

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

Tuesday, June 9, 2009

Flex - Hide and show tab in tabnavigator

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 the default tab.
tabNav.selectedIndex = 2; //If you were hiding the first 2 tabs (tab 0 and tab 1)


Here is a code snip. In this example there are 3 tabs. Based on the user selection you hide/show the first 2 tabs.

if ( userSelection == "showTabs" )
{
tabNav.getTabAt(0).visible = true;
tabNav.getTabAt(1).visible = true;
tabNav.getTabAt(0).enabled = true;
tabNav.getTabAt(1).enabled = true;
tabNav.getTabAt(0).includeInLayout = true;
tabNav.getTabAt(1).includeInLayout = true;
tabNav.selectedIndex = 0;
}
else if ( userSelection == "hideTabs" )
{
tabNav.getTabAt(0).visible = false;
tabNav.getTabAt(1).visible = false;
tabNav.getTabAt(0).enabled = false;
tabNav.getTabAt(1).enabled = false;
tabNav.getTabAt(0).includeInLayout = false;
tabNav.getTabAt(1).includeInLayout = false;
tabNav.selectedIndex = 2;
}

Wednesday, June 3, 2009

Digital Imaging

What I learned so far in my Digital Imaging course (besides a bunch of theory and PhotoShop shortcuts).

Before


After


This took me maybe a minute and a half to do. I am guessing that after doing it for a while and getting a better eye I could do something like this even faster and make it look even better.

HTML - rounded div corners with CSS (no images)

I am doing an html website and the design I came up with has one rounded corner. I come from way back when we used to use tables and use images to get rounded corners. Although I haven't worked much in HTML in a while, I know the norm now is to use divs instead of tables... so I did some digging and found this:

http://www.html.it/articoli/nifty/index.html

Using stripes with different margins to get a rounded corner look. So clever! It makes total sense, but I would have never thought to do this. To get my ONE rounded corner I had to make some slight modifications. A code snip is below.




<style type="text/css">
body{background-color: #FFF;
margin-right:0; padding-right:0;
margin-left:0; padding-left:0;
font: 100.01% Verdana,Arial,sans-serif}
p{margin: 0 10px}
div#nifty{ margin-left:300px; margin-top:35px; background: #FF0000;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #FF0000}
b.r1{margin-left: 5px; margin-top: 0;}
b.r2{margin-left: 3px; margin-top: 0;}
b.r3{margin-left: 2px; margin-top: 0;}
b.rtop b.r4, b.rbottom b.r4{margin-top:0; margin-left:1px; height:2px}
</style>
</head>

<body>

<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<div style="height:200px"/>

</div>

</body>