Skip to content

MAX 2008 - Thermo/Catalyst isn’t doomed

MAX has been awesome. They’ve demoed a lot of really cool stuff I hope to have time to blog about. Thermo has been renamed Flash Catalyst, as I’m sure you’ve heard, and they’re demoing it with more functionality than they did last year.

I was immediately concerned that they might be missing the mark with the designer/developer workflow they’re trying to promote. They’ve shown several demos so far, which were freakishly impressive, showing how a designer can prototype an entire Flex app with Catalyst, splitting up each source graphic into a Flex component. Then they showed how the designer can export the project to flex and deliver it to the developer.

The problem is this: they never showed how a designer would work on the components after it was thrown over the wall. They mentioned that since the deliverable was really “just a flex project” it could be easily opened in Catalyst and edited. Yeah… right. Only in the most trivial projects will the exported flex project remain anywhere close to what the designer delivered. There is no reason why the developer should have to edit any of the components the designer made, but the first thing he’s going to do is add an MVC framework and screw up the whole folder structure and everything under the application tag.

Catalyst needs to be the best at editing individual assets, not prototyping. It’s cool the designer can do so much up front, but what we really need is the ability to edit components after they have been created.

Anyway, I managed to run in to one of the guys on the Catalyst team, and he quickly assuaged my fears. He said the reason they’ve been showing this prototyping workflow so much is because that is what they were shooting for before MAX.

I recommended that they should work on making it easy to select a component in Flex Builder, and have it launch Catalyst to edit that one component. That would make the round-trip to edit something really easy, and would fit in exactly with the way they let you launch Illustrator from Catalyst (this is new) and Flash from Flex Builder. He said that’s a definite possibility, and something they are considering.

So, I feel better now. It’s good to know that Adobe has their head screwed on straight, and that at least they are considering real-world workflows. They said that they are very open to suggestions right now, so let’s be vocal about what we’d like to see.

Posted in Catalyst, MAX. Tagged with , .

By sean
November 18, 2008

No comments

ButtonBar labelFunction doesn’t work when dataProvider doesn’t have field names


This also applies to TabBar, NavBar, or ToggleButtonBar, and is pretty trivial, but since it wasted more than an hour of my time, I thought I’d share it in case anyone googles it in the future.

Notice how the last column uses “one” “two” “three” instead of “Changed”. This is a bug with flex, plain and simple.
I doubt it will get much attention, but there is a simple workaround. Just use a dataProvider that has fields instead of trying to set it to a simple array. You can see the difference in the sample code.

Posted in Flex.

By admin
October 10, 2008

2 comments

Interactive Degrafa Path Demo using SVG data

I haven’t posted in awhile, but I have been busy :) I’ve learned a ton in the last couple of months, about some of the greatest new developments in Flex.

Degrafa is one such great development. It may not be entirely obvious from this article (I need to post some articles explaining how you can use Degrafa to skin ANYTHING), but trust, me, it rocks. For more information, check out the following link. This is very similar to how Flex 4 is going to work, so the sooner you learn it, the better.

I read through the specification for the Path tag, and realized that you can use it to create any shape you want without too much trouble. I decided to use it to draw a skin for a popup that needed an arrow on it, like the following:
It turns out it is really easy to do. Here is what the general path looks like in degrafa (without rounded corners)
Anyway, while I was fooling around with this, I decided to make a little interactive path-drawing tool so I wouldn’t have to recompile every time I wanted to test something. Without further delay, here it is!

The source is hosted on github, at http://github.com/seanhess/degrafa-path-demo/tree/master

Good luck, and happy degrafing!

Posted in Degrafa, Flex.

By admin
October 8, 2008

1 comment

Mint: Custom User Controls and Tools for Dynamic Silverlight in IronRuby

I wrote an article two weeks ago on how to get started with Silverlight and the DLR on non-microsoft platforms.

Dynamic Silverlight Road Block: No User Controls
I’ve learned a lot since that last post, and have run into a couple of brick walls. The biggest so far is that there is no simple way to make UserControls with the DLR. As far as I can tell, you have to drop to windows, fire up Visual Studio or Blend, and use the IDE to create even the simplest User Control. Creating User Controls is essential for all but the most trivial applications, and I was disappointed that no one seemed to be addressing the issue.
Enter Mint.rb
I created a couple of classes to solve the problem (sort of). It’s still impossible to create a custom user control in xaml, but Mint::UserControl will allow you to load custom xaml, and wrap it in a class, very much like code-behind. I also added a couple of fixes to the existing framework.
  • Mint::UserControl lets you create custom user controls
  • Custom Event System lets you dispatch custom events from the code-behind files
  • Fixed puts function (it didn’t work in Firefox or Safari)
  • Made puts function global, so you can use it anywhere in your project
Mint? What the heck is that?
I just signed up for mint.com, so when the time came to name the module, I picked mint. There’s nothing quite so depressing as coming up with awesome names for things that will only exist for a couple of months (until Silverlight 2 fixes these problems), so we’ll have to live with this for now.

Whatever, show me the code

Posted in Environs, Silverlight.

By admin
August 14, 2008

No comments

Tutorial - Develop Silverlight with Ruby on Mac OS X or Linux with the DLR SDK and a Text Editor (TextMate)

I recently learned that our small team at work is responsible for not only developing butt-kicking Flex RIAs, but demoing basic video players on several platforms. I was assigned to figure out how to make a player in Silverlight. I really wanted to use TextMate to develop Silverlight applications, and avoid dropping to windows. At first, it didn’t seem possible, but eventually I ran into enough blog posts to figure it out. None of these had all the instructions in one place, so I figured I’d add the basic steps and comment on each of the posts I used.

Using the Dynamic Language Runtime

There are two ways to make Silverlight apps. First, you can use the CLR (Compiled Language Runtime) and a compiled language (C#) to create them using Visual Studio and Blend, etc.. The majority of tutorials will use this approach.

There is another approach that may make more sense to open source fans. You can use the DLR (Dynamic Language Runtime) to develop Silverlight apps using nothing but a folder full of text files. This approach is very similar to developing Flex apps using the Flex SDK.

John Lam has a great tutorial on developing a hello world app using this approach. We will be adapting this for Mac OS X using TextMate, and the same approach should work with Linux

Step 1: Download the DLR SDK

Download the DLR SDK

That link should point to the latest (2.2) version of the SDK. One annoying aspect of the Silverlight framework (thus far) is the lack of backwards-compatibility. You’ll need to make sure you’re using the same version of the Silverlight SDK as your player. The offical page for the Silverlight DLR is dynamicsilverlight.net, but it links to the wrong (2.1) version of the SDK.

There are 3 files. For now, download the “Dynamic Languages SDK,” and make a note of the samples for later.

Step 2: Put it somewhere nice

I put the unzipped folder under /Applications/Silverlight and renamed it to “2.2″ so I could track multiple versions of the sdk. It includes 2 important files:

bin/Chiron.exe is a simple way to test your dlr apps. It runs a little development server and opens a web browser for you

scripts/sl is a ruby script that will generate a skeleton silverlight app for you

Step 3: Install Mono

Mono is a port of the .net runtime to linux. It works well on OS X and linux.

Download Mono

Once installed, you should have the command “mono” on your command line. You can use this to run chiron.exe

Step 3: Create Aliases

I created an two aliases in ~/.bash_profile (should be ~/.bashrc for linux users) 

alias chiron="mono /Applications/Silverlight/2.2/bin/Chiron.exe"alias sl="/Applications/Silverlight/2.2/script/sl"

If you fire up your terminal, you should see “chiron” and “sl” are valid commands

Step 4: Follow John’s Tutorial

You should be all set up to mimic John Lam’s tutorial on your system. Here are the steps broken down

  1. navigate to a working folder
  2. sl ruby hello - generates a skeleton Silverlight application using ruby, python or jscript
  3. mate hello - open the generated folder for editing in your favorite text editor (Textmate)
  4. edit at will
  5. chiron /b - run this in the generated folder, so “cd hello” first if you’re in the same directory as before
  6. Visit localhost:2060/ruby.xap - downloads the xap application for deployment elsewhere

Next Steps

I am still too new to Silverlight to understand the deployment process for the DLR, but all it does is generate a xap file, which is a flat zip file containing the dlls you need. I’m guessing you could use any zipping program to generate the xap file, and skip chiron completely. I’ll test this and let you know what I find out.

Somebody could make a bundle to do all this stuff for you, especially packaging the xap file and testing in a web browser

What else? What is missing from this post? I’ll update it with any comments.

References
http://www.iunknown.com/2008/03/dynamic-silverl.html
http://hex-dump.blogspot.com/2008/03/silverlight-2-sdk-mac-os-x-and-mono.html
http://blog.macromates.com/2007/silverlight-textmate/

Posted in Environs, Silverlight.

By admin
July 28, 2008

2 comments

Footer DataGrid - display a total or average summary footer

Alex Harui deserves big credit for his proof-of-concept post on datagrid footers. He showed that it is possible to add a locked row to the bottom of the component showing a total or average.

However, I found that it did not support multiple rows (I needed total AND average), and I noticed a few bugs when the width or height was set to 100%. Once I got started changing it, I couldn’t stop, and the FooterDataGrid is the result.

FooterDataGrid Features

  • Created a flexible API - much easier to implement
  • Supports multiple rows
  • Fixed bug with 100% height
  • Fixed bug with footer positioning when scrolling
  • Added backgroundColor style to the footer
  • Supports AdvancedDataGrid (with AdvancedFooterDataGrid)
  • Built-in support for average, sum, min, max and count functions
  • SummaryFooter can automatically create all columns for you
  • Dynamically respond to colleciton changes
  • Footers are only created once
  • Can put calculations in a different column than the data

Updated August 4th, 2008

  • Footer columns match visibility of parent
  • Complete support for scrollbars on the grid
  • Various Bugfixes
  • Added “excludeFields” to SummaryFooter, which prevents calculation for certain fields

Download / Demo

Live Demo (Right click to view or download source)

Example Implementation

There are several different ways to use the component, and I’ve included several in the example (click view source). I’ve reproduced the simplest below.

Sample Usage

So there it is, enjoy! All code released under the MIT license.

Quick notes
I also tried using Flex 3’s native SummaryRow, SummaryField and GroupingCollection to do this, as Ben Forta explained. However, those really only show grouped data, while I really needed to show a summary row for flat data.

Posted in Flex.

By admin
July 23, 2008

13 comments

Skinning SuperTabNavigator: Part II

I wrote a few days ago about my struggle to skin SuperTabNavigator without changing its code. It turned out to be impossible, and Doug recommended that I add a few styles to fix it.It turned out really well, and that mess I wrote about before collapsed into nothing but the following css. 

SuperTab.reportingTabs {     tabStyleName:"reportingTabButtons";    /* etc */}

.reportingTabButtons { skin: Embed(source='assets/tab_back.png', scaleGridTop="5", scaleGridBottom="25", scaleGridLeft="4", scaleGridRight="220"); /* etc */}

.tabCloseButton{ skin: Embed(source='assets/close.png'); /* etc */}

SuperTab{ tabCloseButtonStyleName:"tabCloseButton"; verticalAlign:'middle'; paddingCloseButton:15;}

It aligns the close button according to the verticalAlign property, which defaults to ‘top’, but can be top, middle or bottom. It then reads the paddingCloseButton style (4px default) to know how far to put it from each edge.

I added those styles to SuperTab. I’m unaware of any naming conventions for styles like these, so feel free to change them or recommend changes. Thanks Doug!

View and Download - SuperTab.as

Posted in Flex.

By admin
July 7, 2008

3 comments

Javascript, CSS, and Image Hosting for Free Blogs

Why a blogging service? I already have hosting

I decided to go with a blogging service because I’m an idiot with hosting, and my blogs always manage to die after a year when I switch hosts. I figured Google and Blogger and going to be around for awhile, so my blog won’t get wiped out when a new hosting company catches my eye.

Hosting Files for the Template

The disadvantage of one of these services is that it is hard to get custom javascript and css into your posts. Normally this isn’t much of a problem — blogger does let you put javascript and css into your template, and you can upload images straight into the body of the post. However, if you need images in your template, you have to hotlink them from somewhere else, or put them into a fake blog post and get the url from there. Even worse, for the Syntax Highlighter I use, I would need to put the javascript onto every single post.

I really liked the idea of getting a free hosting service to host all these files for me. It’s easy to find a free image host — they’re everywhere, but I only found 1 javascript host, and no css hosts. It would be a pain to have these files on different websites, especially if the service was ever discontinued.

The Solution

After much searching, I finally realized that I could use Google Pages to do what I wanted. They give you 100MB of space, which is plenty if you use gifs for your graphics. The uploader is really easy to use, and all the files are dumped right under your domain. If you look at the source for this page, you’ll see a lot of references to steelpotato.googlepages.com. All the files are right there, under the domain. It’s easy and quite convenient.

I hope this helps somebody who runs into the same problem

Posted in Environs.

By admin
July 4, 2008

No comments

Skinning SuperTabNavigator

Update: I submitted a change to SuperTabNavigator here

I’m trying to skin Doug McCune’s SuperTabNavigator, which is one of the many excellent components in the FlexLib project. The component is fantastic, and I’ve really enjoyed seeing how Doug implemented it.

So, when I ran up against a brick wall trying to skin it, I figured I did something wrong. It’s been a couple of hours, and I can’t figure out how to change the close button without modifying the original code.

Here’s is what it looks like compared to my design

Now, ignore the overlapping tabs (which I think I know how to do). I just want to get the tabs looking decent with a normal-ish close button. Here was my first attempt 

.reportingTabs {tabStyleName:"reportingTabButtons";tabCloseButtonStyleName:"tabCloseButton";/* etc */}

.reportingTabButtons {skin: Embed(source='assets/tab_back.png');/* etc */}

.tabCloseButton{skin: Embed(source='assets/close.png');}

What the heck is that? It looks like flex lost the original skin too, so it’s back to a default flex button. I added the following CSS and got the next screenshot. 

SuperTab{tabCloseButtonStyleName:"tabCloseButton";}

The “X” looks pretty bad. I decided the only way to fix it was to extend it. 3 classes later (I had to extend SuperTabNavigator, SuperTabBar, and SuperTab) I found this gem in SuperTab. 

// We place the closeButton 4 pixels from the top and 4 pixels from the right.// Why 4 pixels? Because I said so.closeButton.x = unscaledWidth-closeButton.width - 4;closeButton.y = 4;

That… is awesome. The size is also manually set to 10×10. I merrily start to override these when flex builder told me that closeButton is private instead of protected. I changed closeButton to protected, and got it working with the following code in my override of StyleTab. 

override protected function createChildren():void{super.createChildren();closeButton.width = 15;closeButton.height = 15;}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{super.updateDisplayList(unscaledWidth, unscaledHeight);closeButton.x = unscaledWidth-closeButton.width - 15;closeButton.y = (unscaledHeight-closeButton.width)/2;}


The Big Question
So, Doug / Awesome Flex Stylers, how am I supposed to get the button to its original size and center it without altering StyleTab? If there isn’t a way, will you make the change to the original so I don’t branch the

Any ideas? I’ll buy whoever figures out how to do it with the current code a drink :)

Posted in Flex.

By admin
July 4, 2008

2 comments

Git vs Mercurial - Why I chose git

Background and Our Needs

I first heard about distributed version control systems from Allan Odgaard on the TextMate blog. We’ve been working for about a year on Unison, which is a web application to develop online training. Our development has been so fast-paced at times we’ve been forced to push out releases more quickly than we could test them thoroughly. More than once we’ve needed to push out a less-than-stable feature for a high-profile client. We would later realize something wrong with the feature, but there was no way to go back.Branching and reverting changes in version control software is supposed to allow you to do these things, but both are so annoying in SVN that we never actually used either. We only kept a branch around when we wanted to make a release and continue development in the trunk. We would never have dared roll back any commits

Enter Distributed Version Control

Distributed Version Control promised to solve these problems for us. We would be able to branch as often as we liked, which would then allow us to keep branches around for longer without worrying about merging them later.

I first looked at git, then tried mercurial (hg) for awhile, then finally decided on git. I’m going to try to provide an unbiased review of some of their strengths and weaknesses.

Realize that both tools are good at merging, both have strong user communities, and they are very similar choices. I found good comparisons hard to come by.

Mercurial

Mercurial has several advantages over git.
Excellent Documentation: The hgbook helped me to understand the concepts
Cleaner Commands: The interface requires fewer options and flags
Intuitive Commands: The names they picked for reverting changes make more sense
Windows Support: They have a full windows client, although using it to make lots of branches would get crazy fast
It also has some disadvantages
“Named Branches” suck: They added this feature as an afterthought. The way everyone branches is by “cloning” a repository. So, if you want to work in a new branch, you have to make a brand new copy of everything. The implementation of named branches simply isn’t workable
Rewriting History is difficult: hg doesn’t have the features git does here

Git

Git has its own strengths
Branching is Supreme: This is a big one. Git lets you make new branches at any time, and lets you switch back and forth between them in one working copy.
Remote Branches: Git can send and receive changes from several different public repositories. This is useful if you need to publish more than one branch so others can download your changes.
Merging and Rewriting History: You can squash several commits together into one big commit when you merge, getting rid of the useless messages. You can easily pull a new version of the code you’re working on into your experimental branches.
Disadvantages
Slightly more confusing: There are more commands by default, and the reverting commands are hard to keep straight at first

The Wrapup

The interface to Mercurial is easier, and I like their mainstream approach, but git is simply far better with anything advanced. I don’t feel that Mercurial can handle making branches for each feature you are developing, and doesn’t do a good job of pushing/pulling changes from public repositories.

In the end, we picked Git. I’m going to revisit mercurial in another year and see if they’ve finished adding a few more necessary features. I wanted a DVCS in the first place so I could branch like crazy, and Mercurial really doesn’t support it well enough.

Posted in Environs.

By admin
March 4, 2008

No comments