Blog

  • WPF/e, Prototyping, and Workflow

    Preface

    I’m tired, but I’ve got to get these thoughts to text. I’m trying digest all of this WPF/e stuff. JD linked to Scoble and Scoble’s post has a lot of great information in it, especially the comments. If you need quick context for this post, hit comment #5 in Scoble’s post by Rory, then come back here. Comment #9 by Nick has some good 30,000 ft. view context.

    You can skip the intro below if you want; not the main part of this entry.

    Introductory Rant About My WFP/e Experience

    First, Blend. Blend is one of 4 projects in Microsoft’s new design suite of products. Blend makes WPF & WPF/e apps. I think it was originally called “Sparkle”, then Expression Interaction Designer, and now Blend. I never played with Sparkle. Many called it a Flash killer. I actually got to play with Expression Interaction Designer. The build I played with is extremely different than what Beta 1 of Blend is. In fact, to me, I’ve been re-reading all the WPF sites I can find to ensure I’ve got my technologies straight. I truly believe they re-wrote Blend from the ground up, ditching what I played with, OR bought some company that had this product… it’s that different. Either way, it had familiar terms, like the designer window tab, the XAML tab, properties panel for modifying stage objects, etc.

    I originally gave Expression a weekend to kick the tires. I gave Blend about 2 minutes. I couldn’t find the timeline, so called it a night… er, morning. I’ll give her more play this weekend. One of my biggest gripes with Expression was the timeline sucked. The entire app was really cool, but the timeline… I basically told them to copy After Effects, and they’d be golden. So, naturally, my expectations for Blend’s timeline are high.

    The rumor mill the past 2 weeks really made things more confusing. Bottom line, Blend can create both WPF and WPF/e apps. That’s like saying Flex Builder can create both Flash Player & Apollo apps. Web & Desktop deployements.

    WPF/e installed on my Firefox without me even have to reboot it. Nice job! The loading of apps was slow as nuts, with no visual feedback. It even locked Firefox. Horrible job. One thing that Firefox does to Flash is give it only a little CPU. That way, you can open 50 billion tabs, and they could all have Flex apps on it, and your browser still actually functions. Apparently, Microsoft found a way to get past this WPF/e. The apps do run extremely fast, though, once cached. I’m a big fan of major pain up front for faster loading later. If you’re girlfriend gets pissed at you, and you later give her a flower, she forgets she was ever mad at you. If she does, you can laugh about it, and use an apology to get lovin. Works every time. Pitching that analogy to upper management doesn’t always work though. Anyway, good job on speed! 2 for 1, w00t!

    I forgot to test on IE7. That’s a good sign. Already, as a developer, I’m more concerned with creating content vs. deploying it.

    Prototyping

    Ok, so the first real point of my blog entry is about Scoble’s mention of prototyping. I really like how he accurately portrays how prototyping can get you into trouble. I am actually walking that very very very fine line currently. Prototyping has pro’s and con’s. Where the Pragmatic Programmer refers to Tracer Bullets, prototypes built to ensure met requirements, prototypes are more broad in this context, and are made with the intent of pitching ideas and seeing if they stick.

    If you create something horrible, no worries, it was a prototype with little to no architecture in it, little time, and you can throw it away with no emotional remorse.

    If you create something awesome, you better hope you effectively communicated there is a huge difference between a prototype and a real product. All to often the temptation is to turn the prototype into production code.

    However, Scoble immediately scares me because he effectively conveys that Microsoft’s vision (with the corroboration of commenter’s) is that Blend can actually be used in prototyping, and actually be immediately turn into production code since the “code” is written for you by Blend, much like Flex Builder writes the MXML for you in Design mode. The whole post, combined with those commenter’s that have a lot of great information about Blend & WPF in general to share, IMPLY that “it just works”. Granted, I’m paraphrasing here, and you are welcome to go read Scoble’s post to see what I’m saying. If you do, I bet you come back here getting the same vibe I do.

    No Workflow Problems?

    I don’t know about those of you who have ever deal with designers & developers on the same project, but as far as I’m concerned, it’s frikin’ hard. Both camps have different motivations, different agenda’s, and different accountability structures. Making them mesh is rough. Being an advocate of either team without alienating your teammates is an extremely delicate balance. It’s all about the mediation and manipulating people to work together.

    That doesn’t even relate to the tools, though. Version 9 of Flash is getting PSD import. Granted, from a legal standpoint, I can see why this took so long, but even that is fraught with issues.

    “Dude, did you flatten your effect layers, render your text layers, and email me those fonts?”

    “Yeah man, I sent you the fonts. Don’t worry about the PSD, Flash 9 will import it just fine.”

    “Right… why don’t YOU organize this library for me then if it works so well. Do you really need 10 billion layers in your comps?”

    The above is child’s play. You take your verbal stabs at each other, and move on. The above work flow is rough, but that’s the way it will be. The only difference now is one has to manually import this stuff.

    …but, here’s a curve ball.

    “So… you realize this is for the web right? The whole reason we used Flash on this project instead of Flex was because the Flex components are too big. Why are you sending me a PSD full of raster (bitmap) graphics? Why did you just use Illustrator or Flash?”

    “Oh relax, most of the images are beveled gradients; Flash Player’s built-in PNG compression will knock those babies down really low, no problem!”

    “So, rather than choose the appropriate tool, you bank your luck on LZW compression to justify your tool choice?”

    “Just shuddup and get to work slacker!”

    [punchline’s coming soon folks, bear with me]

    The various tools, and the various ways they use content makes using Flash and/or Flex time consuming when implementing designs on programming projects. Even some design driven ones can be slow going depending on the programmer. Some developers can actually thrive in the design world, writing classes one second, and deleting them the next. I’ve got scares from that type of work, and will never go back, but my point is, NOT all developers suffer madly like people make it out to be.

    However, what no one can deny is that production artwork, the insertion of designed assets into a Flex / Flash project takes time. A lot of time. And it’s not easy.

    This, coming form Adobe & Macromedia, companies with a long history of design & multimedia development.

    Suddenly, Scoble and others say in passing, almost like it “just works that way”, that Blend renders all of the above not an issue. Say WHAT!?!?!

    Obviously, one has to import PNG’s and other audio / bitmap assets into your Blend project, but I’m talking about the whole “A designer creates content a developer can use.” This gets really fuzzy, and depends on your type of project, but at the end of the day, I’ve seen bad things happen every time a designer messes with a developers build, or a developer starts attempting to wrap code around a designer’s comp.

    This is gone now? Huh? Just like that, eh? I find that extremely hard to believe from a company that has very little experience in this realm. Maybe there have been tons of web developers secretly doing multimedia engineering on the side, moonlighting to reduce the pain of wrapping good looking CSS around Windows forms and .NET client applications… but I doubt it. If I’m wrong, please link.

    Here I am, with a Flash 9 alpha build that supports AS3, and Flex 2. I’ve been spending weeks of my free time developing an example for the community to see that you can design nicely looking applications in Flex 2 without having to “wait” for Flash 9 to get the AS3 speed goodness. There have been a slew of companies these past few months contacting me with either requests to be involved in incorporating design into their Flex projects, OR questioning if Flex CAN even design to the level they want.

    I would of assumed most companies would be more worried about Flex. Instead, while it’s a good thing that they all so easily pick up Flex and run with it, they immediately think that it’ll give them a generic look and feel. Hell yeah! This means people are “getting it”. Not only are they quickly getting up and running, but they are recognizing what the Flash Platform gives them with regards to design. Love it.

    Anyway, …I’m still struggling. You basically have 5 scenarios:

    1. Take the agency approach; using Flash, hire a, rare, Flash Hybrid.
    2. Take the software company approach; use Flex, design as an afterthought, if at all.
    3. Take the software company to another level, and use copious CSS + fonts + image icons in Flex. Looks a lot less generic. Or, dynamically load in Flash assets.
    4. Take the agency approach with a Flash Developer and a Flash Designer.
    5. Merge the two.

    #1 is what most design firms do. They have few if any people on staff who can code, and instead make hot looking Flash animations and mini-apps. Flash is a design tool. It works.

    #2 is what I loathe, and really have a challenging time educating on the importance of design. #2 is dying based on the ratio of them vs. pimp clients I’m seeing.

    #3 is what almost every company now doing. They are using Flex 2’s CSS & skinning to it’s fullest. From what I’ve been reading, most are successful. Even by default, it looks and works hotter than Swing.

    #4 is extremely rare to keep a team like this together. I’ve seen a lot of teams like this, but can’t imagine the constant pain of having to recode things, force designers into some form of template, etc. It DOES work, though, and well. Some of the best public facing Flash application development on the planet comes out of this.

    #5 is what I’m TRYING to do. Most Flash Developers coming to Flex immediately want to “load their stuff”. Me? I’d rather assimilate it into the Borg cube. So far, though, there are a disparate amount of ways to do this, and a lot of my approaches are subjective. For example, a programmer could acknowledge my architecture is “not horrible”, whereas a designer could say “Man… in an hour, you’ll match the comp. Cool.” “COOL!?!?! I’ve worked for weeks, and all I get is a ‘Cool’!!?!?!?!?!?!?”

    Adobe has very well over the years improving #4, empowering people like me to implement design work more fluidly, and code it well.

    …yet, here comes Blend, jumping over #4, and becoming the panacea that is #5? No way dude… too good to be true.

    Regardless, I’ll still continue to learn Blend to see stacks up. I have a feeling that using the Designer tool will really make a lot of the production art issues go away for the most part. Regardless though, I call bs until I’ve seen for myself that “it just works”. The proof for me will be when I’m on a project, and it goes down like this.

    “So, designer, does it pass your review?”

    “Yep, you’ve implemented the comp as best you could based on the limitations of the tool.”

    “Cool… programmer, is the C# & XAML it generated ok?”

    “Yep, fits into the framework nicely, and we’ve gone through multiple design edits with no problems.”

    You’ll have to excuse me in finding the above scenario extremely unlikely for many years. Adobe is STILL working it out, and making it better all of the time. Half of the above isn’t even the technology. It’s the processes, team aptitude, and ability to execute. What is the likelihood that Microsoft comes out of nowhere and solves this with their new products and tool set? :: shrugs ::

  • Skinning in Beverly Hills

    On a Flex 2 project in Beverly Hills, California for the week with 3 others from my team at Universal Mind. It’s apparently a long term project (as most Flex ones are compared to most Flash ones). I’ve fallen into the role of skinning; basically what I didn’t seem to effectively convey at MAX.

    I take a Phothoshop comp, flatten the effect layers and render the text ones. I then import it into Fireworks, and rip out the good assets, and save as individual PNGs. Those that are better as vector, I rebuild (yes, RE-build) in Flash, and export out as SWFs. I then either embed them in Flex’ CSS to button skins, embed the images in the MXML, or extend one of the Programatic skins.

    Nahuel Foronda, my co-worker and one of the winnners of the Flex Derby for his Real-estate App, found a way to get bitmaps into Programmatic skin classes. I always thought you couldn’t because they all extend Shape, and thus only allow dynamically drawn vector content, but flash.display.Graphics DOES have the beginBitmapFill method, so you CAN blit bitmap content very nicely. It’s very cool for some of the bitmap designs that cannot be scale 9’d, but can be tiled. He also found a better way to scale some our dynamically created content. While a Repeater thrown in a VBox could work, it didn’t in Flex 1.5, and the drag and drop capabilities of the List are easier to code. Basically, a Canvas in a Canvas. The inner canvas holds your content. Eloquent!

    I’m constantly put on projects where the designers have no idea the capability of the platform they are designing for, mainly Flash & Flex projects. The bigger the scope, the less communication there is beteween the 2 teams. A lot of these projects on the Flex side are your cliche “database driven” project, but more and more are incorporating a lot of design, so much so one could argue they ARE design driven. The problem is, I’m still not seeing information architects in any official capicity, and on the Flash side, the Creative Directors seem to not participate.

    In short, we have a long way to go to improve these processes, ecspecially in Flex & Flash projects.

    For example, not every skin I’ve implemented was 1 line of CSS. Some required a significant amount of programming effort. Thus, we’ll have multiple “programmers” on the project, some even guys n’ gals doing both back-end and front end development at the same time. Me? Yeah, I’m coding, but I’m merely incorporating design elements. The other co-worker here did a really good job at putting the interface together, so I already have all the plumbing there; I can basically paint my way to making the app look good. It’s an interesting role. Even more interesting is that I STILL cannot get away from using Flash on these projects. There is always some need on a Flex project for it I’m finding. It’s not a bad thing, or a good thing, just an observation. Unfortunately, “Flash” the IDE in any capacity makes the traditional developers nervous for maintainability reasons, but I usually pawn it off to designers to maintain the FLA. Doesn’t always work, hehe!

    I think one thing that would help designers is to open up the Aeon FLA that comes with the Flex 2 framework, and see what’s capable. For example, I’m constantly getting designs with no over or down states. Those I do are still only 3 states. Most designers I’ve worked with don’t know a Flex Button has 6 states with a total of 9 different skins. On the Flash projects, they get free reign since the timeline obeys the designers whims, and I’m expected to code it. Regardless, I think it’d be easier for the entire project and cheaper for the client if the designers would design the Flex interface in Flash in the first place. This would make it easier for a production artist like me to put their design into Flex without ruining their original design in the process. A lot, though, have no idea what platform they are desining for, nor it’s capabilities. This is fine, but it’s pretty easily solved; get a Flex developer in the meeting where they are making design decisions.

    In the end, it’s all about communication. So, if ya got silo’s, well, that never is conducive. If you emailed me in the past week, sorry I haven’t responeded, really busy here. Mail & Gmail are filled with unread emails.

  • Flex Panel Expose Attempt

    Rather than let the code rot on my harddrive, figured I’d put it up here at least. Trying to emulate in Flex what Expose does on the Mac. You can hit F9, and all open windows will shrink so they fit on your desktop. You can then choose which one to bring in front. It’s really nice because of instead of going “elsewhere” to get to the window you want, you can just click it. Helpful for drag and drop stuff too.

    The window placing algorithm was frikin hard, and I never got window selection working. The cover shows up automatically instead of showing up when you hover over the window. Tons of things wrong and unfinished, but only messed with this for a couple of hours. Anyway, first time I’ve done state & transitions this heavy in code. Gotta say, it sucks. Love using Design View much better. Regardless, would of loved to have this code style years ago in Flash, that’s for sure.

    Using Zinc, you can have it work on your desktop. It’s not as good as my old stuff, but just bored on a Tuesday night and this is what I ended up with after a couple of hours of playing around. To preview it in the browser, click the button first to give Flex focus, and then press F9.

    Flex Panel Expose – Preview on Desktop | View in Browser | Source | ZIP

  • Using setCredentials in Flex 2 via Renaun’s RemoteObjectAMF0 in AMFPHP 1.2.5

    To skip rant and see solution, scroll to bottom.

    This crap was too frikin’ hard to find in Google. After spending 3 hours debugging, I figured out a solution, but not the source of the problem. Following the authentication example at amfphp.org, it just wans’t working. I kept getting an error about the user not having access to the method I was calling, in this case doLogin. Props to Patrick btw for giving us such informative and useful error messages we can catch in our fault handlers.

    This, however, didn’t go away when I put in the correct credentials. Credentials are basically the username and password added as a header to the remoting call so the server can authenticate you. This method is on NetConnection, but in ActionScript 2, you’d access it via:

    serviceInstance.connection.setCredentials ( "username" , "password" )

    and in AS1 via:

    serviceInstance.setCredentials ( "username" , "password" )

    The AS2 way is the same way it was in Flex 1.5 I think.

    Now, the proxying in Abstract service is working. Although the class is dynamic, and I think uses a __resolve like mechnism (returning a make-shift function if that function doesn’t exist on the class instance you are calling ), you can clearly see by ServiceCapture & TamperData that it only makes the 1 remoting call. However, both TamperData and ServiceCapture don’t show the damn headers. I couldn’t figure out how to do traces in AMFPHP to see what the headers were, and I can’t find a NetConnection swf anywhere on my hard drive to use the old NetDebug.trace way.

    Now, mx.rpc.AbstractService isn’t included in the Flex source. I put up with this no source bullshit back in Flex 1.5 and was hoping it wouldn’t negatively affect me in Flex 2, but apparently not. GIVE ME THE F’ING CODE, ADOBE! That said, you CAN at least set a breakpoint. Oddly, it was creating a credential variable and I think like using a “:” colon as a seperator; the var was called “cred”. I was wondering if maybe AMFPHP was hardcoded to look for a specific header called “Credentials”, what it was called in Flex 1.5 & Flash 8 on down, and this perhaps changed in Flex 2. Or, maybe the actual names changed to username vs. userid, which was what it was in ActionScript 2. :: shrugs ::

    Google didn’t turn up anything (first 10 results anyway), but Renauns blog had a comment with a guy with a similiar problem. He posted his solution. I had problems understanding it, though, because my copies of Cairngorm 2 and 2.1 don’t have the getRPCService, so that through me for a loop, but I saw what he was doing; he was basically manually adding the header. I didn’t want to mess with Renaun’s class, so I did it manually.

    It didn’t work. Kept bitching about a null reference. Digging in Renaun’s code, the connection “gateway_conn” is instantiated via lazy loading. In Flex 1.5 & Flash 8 & 7, this was done in the constructor. Renaun’s, however, does it on the first remoting call you make.

    if( gateway_conn == null )
    	gateway_conn = new RemotingConnection( endpoint );

    So, I first did a call to ping which sets the connection, and then added the header to the connection, THEN called doLogin.

    my_ro.ping();
    my_ro.gateway_conn.addHeader("Credentials", false, {userid: "admin", password: "myPassword"});

    She worked.

    SON OF A LAKSJDROItuioqasdf… :: whips out MG42 :: :: lights up office, flooding neihborhood with bullets ::

    Speaking of hellfire, my site now works in IE7; I’m not finished, but at least you can read the text. I hope IE burns for all eternity. While I do dig their implementation of RSS, if that is their best attempt at making RSS friendly to users… well.. um… we have a loooooooong way to go. Installing it didn’t fix that dang IE script pop-up error I get in Flex Builder 2 either. Weeeeeeeeeee!!!!!!!!