Earlier today I needed a container with flat edges at the top and rounded edges at the bottom for something I was building. Unfortunately there isn’t a built in method to do this in Flex. Well, heres how. Create a new skin that extends the default HaloBorder skin and override its updateDisplayList.
package
{
import flash.display.*;
import flash.geom.*;
import flash.utils.*;
import mx.core.EdgeMetrics;
import mx.skins.halo.HaloBorder;
import mx.utils.ColorUtil;
import mx.utils.GraphicsUtil;
public class CustomCornerBorder extends HaloBorder
{
public function TopicMenuPopupBorder()
{
super();
}
override protected function updateDisplayList
(unscaledWidth:Number, unscaledHeight:Number):void{
var g:Graphics = graphics;
super.updateDisplayList(unscaledWidth, unscaledHeight);
var r:Number = getStyle("cornerRadius") as Number;
if (!r) r = 0;
var bg:uint = getStyle("backgroundColor") as uint;
if (!bg) bg = 0x000000;
drawRoundRect(0,0, unscaledWidth,unscaledHeight,
{ tl: 0, tr: 0, br: r, bl: r }, bg, 1);
}
}
}If you take a peek in the Container class definition it uses a radius object to determine which sides are to be rounded. Unfortunately it doesn’t actually expose any of this to us developers. To add insult to injury there are no styles that correspond to the radius object so we have to hard code the desired radius values into our new border class like I’ve done above. If hard coding values isn’t your thing you could subclass your container and add a custom style in for this.
Lastly don’t forget to set the borderSkin property on your container for it all to work.
border-skin: ClassReference("com.proflightinc.view.skins.TopicMenuPopupBorder");
ian News
Ok, I’m not sure how I missed this and if its common knowledge then forget I said anything, but I found out today that you can do this:
height="{ (dropDown.height > descriptorBox.height)
? (dropDown.height + 50) : (descriptorBox.height + 50) }” />
Doesn’t look like much but its a quick and dirty way to have conditional bindings without having to use a binding class or getter/setter method to handle the logic. Call me lazy, but I think this is pretty cool.
ian AS3.0, Flex, News
This is something I’ve been putting together for a little while now. Thus far I’ve just been using it for my own personal and professional projects but I think its got some very desirable features and needs to be shared. Its a truly lightweight MVC framework that basically aims to keep things as short and simple as possible.
Here’s the long description:
apex-mvc is an lightweight framework for those don’t want to bother with a complex MVC framework and still find other “lightweight” frameworks unnecessarily cumbersome. It gives you the ability to access a central data model, central services, and central events.
What is unique about about Apex is that it provides a single point of access to all central entities through the static “Apex” class. This allows you to quickly reference your central entities from anywhere without having to continually request instances.
Here are some other features of apex-mvc:
apex makes configuring services by allowing them to defined in MXML while still providing central access.
apex is designed in a way that is mindful of intellisense making it easy to see all central data and services from anywhere in your application.
apex is easy to learn and easy to use so that you can focus on developing your application without getting caught up on your MVC framework.
Its being hosted over at google code. View the project page here
ian News
Alright, spent a bit of time today updating my Influence theme for DokuWiki. Just a few changes, but well needed.
- Full page path now displays under the page/file name (You must enable displaying of full page paths in the configuration first)
- Changed active link colors to something more readable, this was pretty bad before.
- Some other minor style/design changes that you probably won’t notice anyway
I upgraded to dokuwiki-rc2008-04-11 and everything seems to be compatible.
Download Influence 1.1
ian News
Alright, it’s been a little while since my last post. I’ve been quite busy with work to say the least. Thankfully things have slowed down somewhat and I’m reclaiming some time in the evenings to play around with various things (hurrah!). Hopefully that means that I’ll be giving this blog a little more attention too.
I came across DokuWiki the other day when looking for a suitable open source Wiki for our development team here at work. It’s a light-weight Wiki built with development teams in mind (although, I would hardly say that it is limited to them). It also has a good number of plug-ins available. Traditionally I’ve been a Confluence user, but lets face it, its a bit more costly than what most small dev shops are willing to spend. I do, however, really like the look and feel of Confluence. So, yea, as you may have guessed I went ahead and made a theme thats loosely based on the default Confluence theme for everyone to enjoy.
A link, you say?
Influence 1.0b
A little disclaimer here, I’m not a CSS guru by any means (actually I find it quite irritating) so if you see something that seems pointless or redundant then you know why.
Will post updates as I make em’.
ian News
So Fios is available in your area now and needless to say you’re psyched. When the Fios installation guys show up to your door they typically give you an Actiontec MI424WR router. They’ll stick around and help you get about as far as getting your machine connected to the internet (directly or through wireless), but thats about it. When my router was first set up I took some time to poke around in the admin utility. Sadly, Verizon has butchered the original admin utility that Actiontec provided in favor of their own fully branded utility. The problem with this is that the page load times are painfully slow, making it difficult to go in and change settings. While I was in there I took a moment to rename my router and wireless network after various mythical beasts (doesn’t everyone do this?) and set up a passkey for my wireless network. While I was in the process of doing this I stumbled upon a section for Dynamic DNS in the Advanced tab. Some modern day routers have built in functionality for synchronizing with dynamic DNS servers, and indeed the MI424WR supports this. This sort of thing can very nice if you want to remote desktop into your machine or if you want to run a production server from home (but keep in mind that port 80 is blocked by Verizon, so you’ll need to use 8080 or something else if you intend to do this). The problem, however, is that there are virtually no instructions on how to configure this, and having called Verizon to ask about it, it turns out it is only supported for those paying for business services.
After looking around on google for a while I managed to dig up the original manual for the straight from Actiontec (which seemed to have been hidden away purposely). Using this and trial and error I was able to get DDNS updating from the MI424WR. Heres what you’ll need to know:
The MI424WR only supports DDNS through dyndns.org. You’ll have to go create an account with them before doing anything else. Once you’re done make note of the dynamic domain that you created (mydomain.dyndns.org for example), your username and password. Now head over to the Advanced->Dynamic DNS section of the utility. You’ll see a screen that looks like this:
Heres what should go where:
Connection to Update – This should be set to BroadBand connection Coax
User Name – Your dyndns.org username
Password – Your dyndns.org password
Dynamic DNS System – Should be set to Dynamic DNS
Host Name: Set this to the full host name that you created when making your dyndns.org account. It should be like something.dyndns.org, or something.dnsalias.com (dyndns.org provides a number of domains you can choose, these are just two)
Now hit Apply and then Update Now and you should be ready to go. It should report back “Updated – IP updated successfully” on the same screen. Now you should have working DDNS.
Now for the remote desktop setup. Right click on My Computer and go to properties. Look for the remote tab. Once you’ve found it make sure that the radio box for “Allow users to connect remotely to this computer” is checked. Thats all you need there, now back into the router utility. Click on the “Firewall Settings” icon, then on the left side click the “Port Forwarding” section. Now click add at the bottom. On the “Protocol” drop down menu here, select “Show All Services”. Now you should be able to open the same menu and select an option for “Remote Desktop”. Select it and hit Apply. The resulting screen should look something like this.
Hit Apply one more time. Thats it, you should now have a working Remote Desktop connection thats accessible through your own personal DDNS domain. Open up Remote Desktop Connection from another computer and connect to your personal dyndns.org domain that you specified earlier.
ian News
I had the pleasure of making it out to the Philadelphia branch of the Adobe AirBus tour last week, held at the Ben Franklin Institute of science. My friend and I managed to get there just as Ryan Stewart was giving his keynote speech, so we grabbed our free bag of swag and a t-shirt and went on in. All in all it was a very cool event, and even though I’ve been working with Flex and Air for a while now I walked away with a lot of great resources and ideas. The highlight of my evening was that I was able to speak with Mike Chambers during the intermission about how to do a few things in Air that I’d been struggling with. Mike is a super friendly guy and was very helpful. He even offered to throw together some examples for me while he was on the road. Thanks for the help Mike, and thanks to the rest of the tour members who came out to Philadelphia.
ian AS3.0, Air, Flex, News
I took a bit of time to convert the itunesXMLParser class into a full fledge Flex component.
You can download the SWC here
Heres a bit of usage:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:im="org.im.*"
>
<im:itunesXMLParser
id="ixml"
sourceXML="testlibrary.xml"
complete="dg_mx.dataProvider=ixml.data"/>
<mx:DataGrid id="dg_mx"
width="80%"
height="40%"
rowCount="10"
verticalCenter="4"
horizontalCenter="0">
<mx:columns>
<mx:DataGridColumn dataField="Track_ID" headerText="Track_ID"/>
<mx:DataGridColumn dataField="Name" headerText="Name"/>
<mx:DataGridColumn dataField="Artist" headerText="Artist"/>
<mx:DataGridColumn dataField="Genre" headerText="Genre"/>
<mx:DataGridColumn dataField="Kind" headerText="Kind"/>
<mx:DataGridColumn dataField="Size" headerText="Size"/>
<mx:DataGridColumn dataField="Total_Time" headerText="Total Time"/>
<mx:DataGridColumn dataField="Date_Modified" headerText="Date Modified"/>
<mx:DataGridColumn dataField="Date_Added" headerText="Date Added"/>
<mx:DataGridColumn dataField="Bit_Rate" headerText="Bit Rate"/>
<mx:DataGridColumn dataField="Sample_Rate" headerText="Sample Rate"/>
<mx:DataGridColumn dataField="Release_Date" headerText="Release Date"/>
<mx:DataGridColumn dataField="Sort_Album" headerText="Sort Album"/>
<mx:DataGridColumn dataField="Sort_Name" headerText="Sort Name"/>
<mx:DataGridColumn dataField="Persistent_ID" headerText="Persistent ID"/>
<mx:DataGridColumn dataField="Track_Type" headerText="Track Type"/>
<mx:DataGridColumn dataField="Podcast" headerText="Podcast"/>
<mx:DataGridColumn dataField="Unplayed" headerText="Unplayed"/>
<mx:DataGridColumn dataField="Location" headerText="Location"/>
<mx:DataGridColumn dataField="File_Folder_Count" headerText="File Folder Count"/>
<mx:DataGridColumn dataField="Library_Folder_Count" headerText="Library Folder Count"/>
</mx:columns>
</mx:DataGrid>This line shows the usage of the component
<im:itunesXMLParser
id="ixml"
sourceXML="testlibrary.xml"
complete="dg_mx.dataProvider=ixml.data"/>
This allows you to easily specify an itunes library file as a source for the component and then use the complete listener to perform some action once the data has been loaded. In this case I’m binding it to the dataProvider property of my DataGrid component.
This shows you how to set up the xml namespace so you can use the im:itunesXMLParser tag to instantiate the component. Also, don’t forget to include the .swc file into your library path in the project settings.
ian News
Ok, so first off let me say that the iTunes playlist XML structure looks like it was designed by someone who doesn’t even know XML.
Take a look at this entry for a single song:
<dict>
<key>Track ID</key><integer>64</integer>
<key>Name</key><string>Episode 14</string>
<key>Artist</key><string>Gareth Emery</string>
<key>Album</key><string>The Gareth Emery Podcast</string>
<key>Genre</key><string>Podcast</string>
<key>Kind</key><string>MPEG audio file</string>
<key>Size</key><integer>64803919</integer>
<key>Total Time</key><integer>2700068</integer>
<key>Year</key><integer>2006</integer>
<key>Date Modified</key><date>2006-09-21T15:14:43Z</date>
<key>Date Added</key><date>2006-09-21T15:14:43Z</date>
<key>Bit Rate</key><integer>192</integer>
<key>Sample Rate</key><integer>44100</integer>
<key>Play Count</key><integer>22</integer>
<key>Play Date</key><integer>3264149297</integer>
<key>Play Date UTC</key><date>2007-06-08T16:08:17Z</date>
<key>Release Date</key><date>2006-09-21T11:00:00Z</date>
<key>Sort Album</key><string>Gareth Emery Podcast</string>
<key>Persistent ID</key><string>FE2067001E4F2C00</string>
<key>Track Type</key><string>File</string>
<key>Podcast</key><true/>
<key>Location</key>
<string>The%20Gareth%20Emery%20Podcast/Episode%2014.mp3</string>
<key>File Folder Count</key><integer>4</integer>
<key>Library Folder Count</key><integer>1</integer>
</dict>
The way they have this structured makes it impossible to do any E4X based XML processing of the playlist and consequently prevents your from using it in Flex or any other MVC based framework that allows you to easily hook an XML data source into components on the view layer.
So, as if you couldn’t guess, I wrote a class so that you can. You can use it to load in an iTunes XML playlist and turn it into something use-able that adheres to XML best practice where the structure is concerned.
Heres a sample of what it outputs:
<song>
<Track_ID>511</Track_ID>
<Name>Episode 34</Name>
<Artist>Gareth Emery</Artist>
<Album>The Gareth Emery Podcast</Album>
<Genre>Podcast</Genre>
<Kind>MPEG audio file</Kind>
<Size>64804016</Size>
<Total_Time>2700068</Total_Time>
<Year>2007</Year>
<Date_Modified>2007-07-24T16:29:57Z</Date_Modified>
<Date_Added>2007-07-24T16:29:57Z</Date_Added>
<Bit_Rate>192</Bit_Rate>
<Sample_Rate>44100</Sample_Rate>
<Release_Date>2007-07-19T22:00:00Z</Release_Date>
<Sort_Album>Gareth Emery Podcast</Sort_Album>
<Sort_Name>Gareth Emery Podcast - Episode 34</Sort_Name>
<Persistent_ID>DFA5DE7CE96B0316</Persistent_ID>
<Track_Type>File</Track_Type>
<Podcast/>
<Unplayed/>
<Location>The%20Gareth%20Emery%20Podcast/Episode%2034.mp3</Location>
<File_Folder_Count>4</File_Folder_Count>
<Library_Folder_Count>1</Library_Folder_Count>
</song>
Much better, huh? Heres an example of how you can use it in your Flex/AS3.0 project.
var libraryPath:URLRequest = new URLRequest("testlibrary.xml");
iTunesLibrary = new itunesXMLParser();
iTunesLibrary.load(libraryPath);
iTunesLibrary.addEventListener(Event.COMPLETE, loadHandler);
iTunesLibrary.addEventListener(ProgressEvent.PROGRESS, progressHandler);
public function loadHandler(event:Event):void{
trace("Library is done loading, lets do something cool with it");
//trace(iTunesLibrary.playlistXML);
trace("songs: " + iTunesLibrary.playlistXML.song);
var songList:XMLList = iTunesLibrary.playlistXML.song;
//trace(songList);
dg_mx.dataProvider = songList;
}
public function progressHandler(event:ProgressEvent):void{
trace("progressHandler loaded:"
+ event.bytesLoaded + " total: " + event.bytesTotal)</code>
}Note that it listens on all the same events as the normal XML class. In the loadHandler function above theres an example of how to hook this into a datagrid component in flex.
Thats it. Right now it only grabs songs, I’ll be adding support for multiple playlists later.
Download the class file here
Download the example flex project here
ian AS3.0, Flex, News, Projects
