In my current Ruby on Rails project, I am checking all roles and ensuring those who should be able to do certain things are able to, and those that shouldn't are unable to. What I have found, is that usually, the Admin and one other role can usually do a set of things, and every other role can't. So, I find that I set up my tests the following manner:

['root','hr'].each do |role_name|
    context "logged in as #{role_name}" do
      setup do
        login_as_user(role_name)
      end
 
      should 'index' do
         get :index
         assert_response :success
         # other assertions
      end
  end
end

This is for the roles who cannot do the actions:

['user','manager'].each do |role_name|
    context "logged in as #{role_name}" do
      setup do
        login_as_user(role_name)
      end
 
      should 'index' do
         get :index
         assert_redirected_to root_url
         # or logged out - or whatever you do with a violation of this type
      end
  end
end

You can now see that we have automated tests that assert the expected functionality for all roles in the system. As a developer who deploys and supports applications in production, it is very reassuring to me that our code has this level of tests. I know that when I deploy, there won't be that many bugs, and I don't have to fear production deployments; just schedule them and perform them.

What usually needs to happen on a project is a combination of some or all of the above. Not having a single point of reference for skinning creates quite a bottleneck.

From different approaches, two surfaced as having the best pipeline: Illustrator CS3 and Degrafa. If we are talking speed and ease of graphic design, I would now default to Illustrator CS3. For advanced skinning and interactions Degrafa holds first place.

Speed, of course, is a major factor. A lot of projects do not need advanced skinning, but just a step forward from useful but many times seen default Flex skins. By that I mean applying the brand guidelines of the company or product/service.

After a long time I gave Illustrator another chance and the CS3 version proved remarkably useful. Illustrator with Flex CSS that is.

My goal was to create the fore mentioned single point of reference for skins and I did it in Flex CSS. Good people of Adobe even made a script for Illustrator to speed things up which I gladly use. Process works fine without the script too (maybe even faster, but you have more skins to track yourself), and you can find a tutorial for that version here.

For the streamlined version you can find Illustrator scripts here (together with scripts for other apps) and you need to have a free Adobe account to download.

STEPS:

1. Download the Illustrator scripts from here. You can find the installation instructions in the downloaded archive.

2. Create your skins for various states of the component in Illustrator as you would do usually using all the wonderful features of Illustrator.

3. Convert your skins to Symbols.

      a. Open the Symbols panel in Illustrator (Window -> Symbols).

      b. Select a particular skin graphic that you have made.

      c. Click the "New Symbol" icon in the bottom right corner of the Symbol panel.

      d. Naming the symbol is important. For example, if you want to automate creating an "up" state skin for a button, you would name it myButton_upSkin. For "down" state you would select an appropriate graphic to create a symbol from and name it myButton_downSkin. So for every state you want, you would add an underscore and state name after the symbol name that needs to be camelCase.

      e. I would highly recommend setting the "Flash Registration" point to upper left corner to be in sync with standard flex registration point.

      f. If you want to have the symbol to scale using 9-slice approach, check the box labeled "Enable guides for 9-slice scaling". You can later go back to your symbol and adjust the slices position.

4. Now that you have made the symbol (and adjusted slicing if need be), you can export it by choosing:

File -> Scripts -> Flex Skin -> Export Flex Skin.

A SWF file will be created by name of your choice.

5. Go to Flex Builder and choose:

File -> Import -> Skin Artwork

6. Set up parameters in the dialog box like this:

      a. Select "SWC of SWF file" and point to the file you've just created in Illustrator.

      b. Select the folder you want to import it in.

      c. Click "Next".

7. At this window you will be prompted to select the skins that you want to import. No reason not to "Check All" here. For the selected skins you will now see the states of the particular skin in the "Skin Part" Column.

8. Click "Finish" and a Flex CSS file will be made with all the skins appropriately declared.

9. All you have to do now is to apply the name of a particular skin to your components Style name.

This skining approach has proven very fast and error free for me.

I'm enjoying the 9-slice scaling, vector graphic crisp scaling and mouse interaction only with visible pixels.

After reading a bit about some performance considerations it looks like AMF and JSON are going to get roughly similar performance in most cases, so it becomes a matter of ease of development and taste.  Sasha definitely preferred working with AMF, so i started checking out Rails implementations.

The two main choices available are RubyAMF and WebORB for Rails. I had been working through Peter Armstrong's excellent book, Flexible Rails, in which he has a chapter about Rails and AMF support.  Based on his recommendation, and the current activity level of the two implementations, I chose to go with RubyAMF.  Peter makes it plain that his opinion is skewed as he is a active contributor to the RubyAMF code base, but argues that the reason he is a contributor is because it's the better implementation.   Good enough for me to give it the first shot.

It turns out that it was a excellent choice. I was able to plug in and configure RubyAMF, and build a basic Flex app to test it in a couple of hours. After installing the RubyAMF plugin,  the main points of interest in the ruby code.

class mapping in rubyamf_config.rb

index method of beers controller

show method of beers controller

The thing I appreciated most about the setup was the ability to map seperate attribute lists.   The Flex app does an inital call to the index method of the Beers controller, but with a subset of attributes.  All of the fields pulled when the app loaded where numeric or short strings.  The Beer model contains two large text fields, but we made the decision to retrieve those when they were needed in a seperate call. The :show class_mapping_scope was used in the show method of the controller.  The end result was that we could keep the size of the record set down when we where asking for hundreds of objects, and just get the larger text fields when we were asking for one record, avoiding any scenerio where we would have to transmit large text fields for a large number of records.

That is really about all that's needed on the rails side.  On the flex side things are just as simple.

First setup a services-config.xml.

Next, set up the remote object ...

and the custom type object in Flex.

The call to the index method would look like

BeerService.index.send();

And the code from the event handler when the call returns..

var temp:Array = new Array;
temp = e.result as Array;

The cool part about this is that the objects in the array will be of custom type Beer with no client side manipulation needed.

If you're looking for a server side technology to communicate with a Flex application, the speed at which a Rails app can be developed and the ease of AMF integration makes a strong case to be the technology of choice.

Ruby vs Rails
At first it was hard to distinguish what Ruby was bringing to the table, and what Rails was. Over time I have learned to love Ruby, as:

• the code I write is more concise
• code reads like a sentence
• code chaining isn't necessarily a bad thing
• less "useless code" (getters/setters)

For Rails, it was:

• convention over configuration
• quickness I could have a web application running
• generation scripts to facilitate coding
• testing is easy and part of the framework
• MVC layout
• routes rock

At first, I had no idea where to start. I read a Ruby programming book, a Ruby on Rails programming book for Java developers, and a Rails book. By "read," I mean I read most of the Ruby book (skipped the API type stuff) . The two rails books both had layouts where the first half built an application, and the second half went through Rails. I skipped building the application, but skimmed through the steps. The switch from Java wasn't super easy, as I was coming up to speed on both Ruby and Rails at the same time. It was hard for me to write my tests first, because I was struggling with the Ruby syntax. This was exacerbated by the fact that I was writing in a Java style, which doesn't really work in a Ruby world.

IDE

The first thing I did was try to figure out what IDE to use. As a mac user TextMate was apparently the "industry standard," so I gave it a shot. It may have some awesome functionality, but it pissed me off more than it was helping, so I actually used Eclipse (that's what I used for Java) for a while. It actually was OK for Ruby code. I tried NetBeans (the one that supports Java & Ruby) but that just didn't seem to work. I eventually switched to NetBeans for Ruby. After configuring the keyboard shortcuts to use Eclipse commands, I was coding quickly and also was able to run the tests in my IDE. I see many developers who run the server within their IDE (to facilitate debugging), but I generally tend to run it in a terminal window, so I can keep it completely separate from my IDE. I can leave my servers running in the terminal windows and go check out the logs very quickly.

Application Port

I had recently used GWT on a Java project to build an application to manage sports data. I decided to port the application to Ruby on Rails. I tried to keep the existing database schema, but I found that as a newcomer, it was beyond my abilities to get this application up and running quickly enough. I changed the database schema to match rails conventions (and was able to easily change my Hibernate mapping file in my Java app to point to the same database).

As a newbie, I essentially wrote all of my logic in the controller, and had no tests. It was pretty awful, but was a great learning experience. After I produced the application, I had enough Rails knowledge to hop on a project with a more experienced Ruby programmer. We paired on the content management system display logic, and after that I was really up to speed.

Recommendations

If you are an experienced Java programmer, I highly recommend trying Ruby on Rails. It may be better to focus on getting up to speed with Ruby. Create a few applications (not Web apps) that you may see in a code test for an interview. Write your ruby code and tests and get acclimated to Ruby syntax. Once you're there, switch over to Rails. Create a rails project and try something you've done before, or a simple content management system. If you make a CMS, keep it simple: a list of articles, and standard CRUD operations. Create a simple display site, and just demonstrate that you can get some basic functionality out there. Along the way, you'll figure out how to test your code. Now, I write my tests before the code (well - at least on paper), but this was really hard at the beginning, as I was having a hard enough time as it was to get the code working, let alone a series of tests in the same language that was providing said frustration.

I recently created an internal application that helped us facilitate staffing meetings. We had tried a number of methods, but a nifty custom application was really needed. We had a spreadsheet that had some functionality, but really needed to be taken to the next step. I was able to create the basic functionality of the application in about 8 hours, with full test coverage. It has grown since then and we have a huge wish list for it. Looking back, if I had done the initial application in Java, it probably would have taken at least 30-40 hours of just coding (and writing XML). Ruby on Rails isn't the perfect solution for everything, and Java isn't going anywhere, but for many of today's web applications, it's sweet.

With RIA technologies, classic Interaction Patterns are only building blocks, not solutions. With raised possibilities, Patterns have become more complex.

So what are UI Interaction Patterns?

Wiki notes: “In interaction design/HCI, an interaction design (ID) pattern is a general repeatable solution to a commonly-occurring usability or accessibility problem in interface design or interaction design.”

In other words, it’s a high level abstraction of Interaction that can be applied throughout the Project as it grows and changes.

For example, Interaction Pattern would be definitions of handling screen transitions, button interactions, error messages, focus switching, refreshing data, status messages and in RIA case navigating maps, data mining, 3D space navigation, graph filtering and many other creative approaches to interacting with data.

Timing makes for good results

How does one approach this challenge in Project Management makes a lot of difference to outcome and quality of a project. Recently, while working on a project with an excellent Project Manager and colleague Alice Toth, we came up with a place for Interaction Design in project planing that makes a lot of sense to me as a RIA Developer.

While analyzing the project we were working on I noticed that I didn’t abstract the Patterns enough at the time we were adding small features at the end of the project.

I was giving too much focus to individual components of the interface and that was not facilitating incoming features from extending the application because they were all "unique".

Every time a new feature was introduced which is a given in Agile software development, I would have to spend time thinking about the Interface Interaction Design and how to incorporate it with the rest of the app seamlessly.

That felt like a waste of time. RIA interfaces, creative and unique as they are still have some patterns. Even when an Interface Component is a brand new idea, it still follows some brand new patterns.

While going over Alice’s good Project Management practices, we found a good spot to incorporate the UI Interaction Patterns Design.

Right after Application Features and User Roles and Scenarios are defined and at the same time as designing the Data Model and back-end Architecture. It would seem premature, but it has some great advantages.

Data Model and Interaction Design are far more correlated than it meets the eye. Some of work on the back end can be cut if the Interactions are defined. You get a better sense of which methods and requests do you really need and what will be up for extending in the future. You might catch something on the back-end  that needs to be done that would otherwise be unnoticed until front end development.

The biggest value of designing Interactions at an early stage is that you can have a more objective picture of priorities and still have a very abstract perspective which you can use to design broader solutions and in that way save time. If you gauge which Patterns can cover the most cases, imminent and potential, you can have more time to develop them to a greater quality.

This in turn makes for a good Flex Project class architecture that reduces the number of hacks and exceptions that solve small problems at a big cost of time.

This piece of news has brought about great cheer in the Web Developers community. jQuery has been fast gaining reputation in the world of web-development as a light-weight, flexible and easy-to-use Javascript library. Integration of jQuery with Microsoft's development platform should provide web developers with new capabilities and opportunities.

This is very smart move by Microsoft given the fact they have always hesitated to incorporate open-source technologies into their products. It is planning to ship jQuery with the ASP .NET MVC very soon. Integration with Visual Studio is something that is going to happen later. There are plans to enable intellisense support for jQuery in Visual Studio which would be really cool I think.

Some of the high-points of jQuery integration with ASP .NET could be :

• JQuery provides an attractive alternative to conventional Javascript making client-side DOM and HTML manipulation much easier and quicker.
• It could complement ASP .NET Ajax and play with it really well
• The original jQuery libraries are going to be ported into ASP .NET without any change which would enable developers to leverage jQuery's true potential

 image-source : www.webmonkey.com

I have posted a few links below that discuss more about what the MS-jQuery marriage means for the web development community and how it can make life easier for developers out there.

http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

http://weblogs.asp.net/bleroy/archive/2008/09/28/jquery-now-officially-part-of-the-net-developer-s-toolbox.aspx

http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/

First thing that came to my mind when I initially heard about the iPhone was the multi-touch possibilities that would start changing the way we create Flash/Flex interfaces (hopefully through SDK extension supporting multi-touch on Adobe's side triggered by iPhone release).

It looked very promising and natural to me in the beginning that this will be the route. Flash is a great part of the Internet experience and iPhone is a great mobile device for, among other things, Internet access.

Long time passed, and still all I can find on this topic is gossip.

Ranging from initial optimism:

iPhone Adobe Flash Support Coming
Mossberg: Apple working on Adobe Flash support for iPhone
Flash on iPhone is just around the corner
Adobe says Flash is coming to the iPhone

...to some doubts about the timeline:
Adobe Flash Coming To Apple's iPhone -- Maybe, Someday
Flash iPhone project stumbles: SDK insufficient

...to some doubts about the outcome:
Adobe bites its tongue after iPhone Flash jab
Steve Jobs: Flash Not Good Enough For iPhone. Is Microsoft's Silverlight?

...to advanced angles on the topic:
Flash on iPhone Political Calculus

After all this (and much more) gossip, I came up with the following conclusion: It has never been a better time to learn Objective-C.

If the Flash support ever pans out, I will be waiting and ready. In the meantime, it seams like a waiste not to apply all the interface development techniques learned through Flash/Flex development on iPhone and learn something new.

I dare to say that Flash/Flex developers should have an edge on at least the interface logic, and learning a new language should be on everybody's agenda from time to time.

In a project that I am currently a part of, we inherited Ruby on Rails from our client's system and project front-end was designated to be developed in Flex. RubyAMF came naturally.

I have been working with two other AMF frameworks prior to this: AMFPHP and WebOrb. My experience with both was that they are fairly hard to set up and once you go through that minefield, everything works excellent. No need to say that I am a great advocate of AMF in general. RubyAMF brings the same good old AMF but with a stunning ease and speed of development!

My colleague working on the Ruby side, Justin Ficke, introduced me to code and architecture of Ruby on Rails and I was impressed to see with what ease, precision and speed can one develop it.

Justin and I put a little test together of this architecture and here is a screen cast of it.

All the lovely custom typed objects and speed of data transfer are there. Beauty of it, appart from obvious benefits from AMF, is that the development process couldn't have been better and faster.

Jason Fried from 37Signals spoke yesterday at the ITA "Speaking of Success" event, about the history of 37Signals, their philosophy and culture, and the critical business decisions they've made to get them where they are today.

The software biz is fundamentally broken. Too many products fail because of the obsession of adding more and more, and trying to do too much.

Jason went on to say that the approach of adding more and more only works for companies that have lots of money and lots of time, but that for the average company the main goal should be to build something that is "good enough," get it out to the users, and improve the design based on their feedback. The challenge of which features to include, and which to say "No" to, is covered well in the "The Innovator's Dilemma," which he said "everyone in this room should have read." The book resonates the core philosophy of 37Signals, which is evident from their blogs, their book "Getting Real," and the design of the Rails framework. As an example of the "Good Enough" philosophy, Jason used his laptop and its basic webcam to stream the Q&A session out over justin.tv and send out a text to the 37signals Twitter group. "The quality probably isn't that great, but its good enough," and with that quick setup he had now broadened the audience by 1,000 users or so. (I searched for the video archive at justin.tv, but didn't find it yet.)

"Our products do less than the competition"

While this quote isn't new, I still find that its worth digesting, particularly as it relates to product planning and product design. I'm a big fan of Agile and iterative development, and the idea that we don't have to have the full product requirements solidified before we can get started. I like to take a product vision to market quickly, improve on the design, and add features as their necessity becomes more clear.

I found that the things that Jason mentioned that resonated with me the most were closely in line with what I liked about DHH's Q&A session at last week's WindyCityRails conference in Chicago. I think a big part of 37Signals success is due to the fact that its two primary partners are totally on the same page.

Working at a consulting company like Pathfinder presents two major challenges in this area. First, the customer most likely doesn't know anything about Agile, nor do they really care about it. They want to see results and the details of how those results come about may not be something they care to explore. Secondly, our customer cares deeply about the design of the product, and the features that absolutely HAVE to be in for the release. The idea of going to market with "less" is a difficult concept to swallow. I've found that the more the design process explicitly involves the actual end user, the easier it is to investigate the importance of a given feature, ask them about it, prototype it, and figure out if its going to make things better for them. Conversely, if the end-user isn't closely involved in the design process, feature priority is more of a guess, and out of fear and lack of certainty features are included because "yeah, we might need that too". So when the question is raised, "Which is a higher priority, feature A, or feature B?", the answer is often an unequivocal "BOTH!"

On this point Jason had two elegant explanations that I hope to draw from. First, doing "less" really means covering the "essentials" of what is needed, and doing those "fewer" things better. He mentioned their products as being like a tool, with a specific, focused purpose.

"A hammer is a tool, its very focused, and has a clean, simple interface."

It strikes me as a perfect example of clarity and focus, because no one is screaming for a hammer that measures distance, cuts wood, or tightens nuts & bolts. Its intended use is clear, it doesn't need to do more than that.

"We like to think of ourselves as curator's of the product. A curator at a museum chooses which pieces of Art should be included in the collection. They say "No" to many things. A building full of lots of Art that isn't carefully selected isn't a museum, its a warehouse"

I've certainly seen applications that were a "warehouse" of features in need of greater focus and "tasteful selection" for what should be included. My mission now is to find a better way to deliver the message that "less is more," and that in most cases, its better to get the application out to the users quickly, and leave room to iterate and improve on the design, than it is to try to build and release the perfect product all in one shot.

How do you deal with this issue in your day to day work? What effective techniques have you found for bringing clarity to the design of a product?

Photo Credit:
Darren Hester
under a Creative Commons Attribution License

A big issue that was overlooked is support for mouse wheel event on Mac OSX. A pretty basic functionality you would think. If your interface is heavily relying on mouse scrolling, your audience on Mac's will probably have a "so how does this work" blank stare.

Google didn't overlook this in their implementation of Maps, but most apps I've seen online did.

There is a very nice and simple solution to this issue coming from hasseg.org and I find it very important to put this little effort in to maintain same look and feel of application interface across platforms.

Solution is executed with help from JavaScript. Mouse wheel events get passed to Flash player and parsed to simulate regular functionality.

A lot of praise to hasseg.org for coming up with and publishing working source code of this solution.

You can find the full explenation on this blog post.

Flash technology has gone a long way from simple vector animations. Today it has support for video and audio, 3d rendering and interaction, all kinds of advanced data visualization libraries, great components of all shapes, sizes and purposes.

What caught my eye lately is that there is a lot of 2D and 3D Physics engines being added to the list.
Physics beyond the obvious add a whole new level to user experience, in which I'm particularly interested.
Physics allow developers to create interfaces that are replicating laws of nature that a user can easily understand and has experience with.

Of course, from step one there is a danger of these tools being misused and thrown on top of interfaces for some make-up effects. That is not what I'm talking about. I'm talking about using physics to help the user understand the software interface and it's process by guiding him/her using these principles.

There are some basic and insightful guidelines and examples in an excellent article by Rob Adams called "Guiding with motion".

Here are some engines and examples that deal with 2D/3D physics in Flex/Flash:

ROXIK -
Bone example
Gravity boot
Interactive cloth

Box2DFlashAS3

Glaze
Example

Chipmunk
Domino smash
Sketches
The Machine
Domino pyramid

Foam
Example 1
Example 2

Ape
Example 1
Example 2

Motor2

Wow
3D picture
rope, box
cloth 01
cloth 02
cloth 03

SpringGraph

As a coder, I go over tremendous amount of information on daily basis. My case is no different than anybody's else living in the world today. Regardless of where we live and how we spend our time we are saturated with all kinds of information, a lot of it that we don't care about and a lot of it that we wish we had fast access to, if at all.

Ironically, computer technology adds to the problem more often than not. All that computational power is often just creating more data that we will never experience because there's just too much of it everywhere and all the time. Traditional techniques of consuming information are becoming too slow and narrow to handle this kind of pace.

We have all heard that a "picture speaks a thousand words". Doesn't that sound like an efficient way to consume information? Now, there are pictures and there are pictures.

There are pictures that strike a cord with you and there are pictures that leave you bland. Which one are you more likely to remember and allot the time of your mind?

Here are some libraries for data visualization in Flex/Flash as well as some artful experiments that I found to be good tools/examples of data visualization.

Flare
Flare is a very comprehensive library ranging from graph and charts to timelines and treemaps and then some.
Example 1
Example 2:

yFiles
yWorks offers the same graphing solution for Flex, Ajax, .NET
Solutions include DOM Tree, Graph Canvas, Drag and Drop, Collapsible Tree, GraphWikiand they are all very well documented.
Flex Examples

ILOG Elixir
ILOG Elixir offers 3D Charts, Gauges and Dials, Map Displays, Gantt Charts, Organization Charts, Treemap Charts and Radar Charts.
All demos can be found here.

SpringGraph
SpringGraph is a lovely Flex component that deals as its name says - a Spring Graph, which is a self arranging graph.
Example 1: Roamer Demo
Example 2: Molecule Viewer

Levitated.net
Levitated.net shows beautiful visual experiments with algorithms. Their business application is yet to be discovered.
Examples

Andy Zupkos blog
Andy is blowing the lid of Papervision3D, a 3D engine written in AS2 and AS3.
You can see his masterful explorations here.

Mathieu Badimon Lab
Mathieu has published a few eye catching experiments.

Here we have a demonstration to an age old problem in Flash (inherited in Flex) - the Preloader. I think that the Flex community has long ago grown bored with the default preloader, which I am very thankful to Adobe engineers for providing us in the first place. It's just that we keep seeing it over and over and over...

Another important thing that the default preloader naturally doesn't provide is some branding while the user is waiting for the loading to complete.

There are some great examples out there like Ted's and the one that I'm using as a base for this demonstration from Andrew.

Andrew's example allows us to have a lightweight preloader base that we can extend and solve the following problems that I think every preloader should:

- What is the status of loading - both numerically and graphically

- Some branding to show what are we waiting for that would involve some imagery, like a logo

- Possibility of actually making the preloader entertaining enough to keep the users attention

Problem in Flex more so than in Flash is keeping the preloader lightweight. So we have to achieve the visual appeal, animation, some basic text rendering without all the convenient native Flex components that would make the delay before seeing the preloader too long. So we have to keep it simple. Kudos to Andrew for publishing a great way to do this.

I would like to point out a couple things:

1. So we want to show the percentage loaded, right? Well, the Label component just won't work out. Label comes with following inheritance:

Label -> UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject DisplayObject -> EventDispatcher -> Object

That is a good part of the Flex framework that we want to avoid for the preloader. Instead, because we just want to render the text, we can use the TextField object which comes with following inheritance:

TextField -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

And another thing is that we want to avoid any custom fonts in the preloader because that will surely blow it up.

2. Any imagery that we want to show up should naturally be in the single digit kilobytes to begin with. Photoshop offers a lot of ways to optimize the size of the image.

Than again, we don't want to use the convenient Image component because it comes with the following inheritance:

Image -> SWFLoader -> UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

Instead, we can fill up a DisplayObject that comes with following inheritance:

DisplayObject -> EventDispatcher -> Object

To do this you:

- embed your small image in the preloder like so:

[Embed("Assets/Pathfinder_Logo_Blue.png") ]
[Bindable] public var Logo:Class;

- pass the Logo class to DisplayObject and add it to stage, like so:

var b:DisplayObject=new Logo();
addChild(b);

and then set it's size and position parameters.

We only want to show the image pixel, so this will do. We can still make our logo DisplayObject available throughout the whole preloader class so we can play with it a little, like making it follow the progress bar by changing it's X parameter.

The rest you can pick up from the source code, available here.

You can see the example here.

Again, thanks to Andrew, Ted and Adobe Flex Team.

Ruby has been known work to well with Mac OS, Linux and Cygwin traditionally. I came to understand that it doesnt work very well with Windows. There are a number of pitfalls that are associated with Ruby or Rails running on Windows. Here, I going to talk about a couple that I hit when I was trying to get RoR to work on Windows :

• Most of the unit tests in my RoR project were failing throwing some weird database errors. I had done everything right from installing Ruby to installing the various gems needed for the project. After a quite a bit of googling, we learnt we could resolved these issues by making a simple change to the MySQL settings. The "Enable Strict mode" option had to be disabled using the MySQL interface config wizard. I ran the tests after this was done and voila!

• This problem was even more perplexing than the above one. A bunch of unit tests were still failing with a dreadful "Segmentation fault" error (I m sure "ROR on Windows" folks might have seen this before). Some research on this error led to the finding that MySQL versions greater than 5.0.18 might cause this problem. So I downgraded my version of MySQL to 5.0.18 to see if that fixed my problem. No luck as yet! This was followed by trying out a number of other potential fixes like using different versions of libmysql.dll (the MySQL library used in Ruby), making changes to database configuration in the project etc. None of these helped me. After a few days of frustration, I uninstalled the MySQL gem and reinstalled it upon the advice of my colleague. That finally did the trick!

I m still puzzled how these fixes worked but glad they did :).

The purpose of this demonstration is to use Yahoo Map and Papervision3D as a base for creating/importing 3D Objects with reference to actual locations on planet Earth using the Adobe Flex framework.

In this post I will be covering how to integrate Yahoo Maps AS3 API as an Interactive Material in PV3D 2.0 and solutions to the following problems:

- Security sandbox violation when using Yahoo Map as MovieMaterial (i.e. BitmapData.draw problem)
- Mapping Longitude and Latitude values to X and Y coordinates of a PV3D material
- Dragging Yahoo Map in PV3D (avoiding the map panning collision with PV3D)
- Simple gauge component from the ground up using basic trigonometry
- Simple tilt component again using basic trigonometry
- Making a visual component using Degrafa

Demonstrations of these solutions are packed in this air application for which you can also see and download fully functioning source code.

The application was built in Flex 3 using following API's:

Yahoo Maps AS3
You can download it here.
Also don't forget to acquire a free API key to run your app online. It is not necessary for local testing in debugger through Flex.

Papervision3D 2.0 (Great White)
You can find excellent tutorials here.
Source is available as a SVN repository here.

Degrafa
Official site: http://degrafa.com/
SWC is available here.

Security sandbox violation when using Yahoo Map as MovieMaterial i.e. BitmapData.draw() problem

When processing a MovieMaterial, PV3D uses the infamous BitmapData.draw method in MovieMaterial/bitmapDraw. This is a problem because the method will not yield a result if the origin of BitmapData is not in the same domain.
In case you have access to the server that you are loading the image data from, you can solve this problem by adding an appropriate crossdomain.xml file to that server.

This article from Adobe’s Deneb Meketa covers security updates in Flash Player 9 including very important changes to the crossdomain.xml structure. Whenever you have a Flash security based headache, this is a good starting point.

In case you can’t put crossdomain.xml on the image origin server, as is the case with Yahoo severs, you are supposed to use the checkPolicyFile property of the LoaderContext class, but that works only if we are directly loading the image data ourselves.

In our case image (map tiles) loading is being handled by YahooMap.swc and we don't have access to the aforementioned process. We could do an override, if we knew where the darn thing was, which I don't.

Sadly, the only solution for this problem that I could implement was by using Air, which is why I'm sharing this as an Air app rather than via a browser version - Air is much easier to deal with when it comes to security. As far as I'm concerned, problem solved for now.

I did hear some gossip that this will be sorted out in Flash Player 10, but who's going to wait for that?

I still haven't quite given up on this issue, as it is highly annoying roadblock to some cool browser based projects.

Mapping Longitude and Latitude values to X and Y coordinates of a PV3D material

This is done very straightforwardly by capturing the YahooMapEvent. It goes something like this:

private function getAllCoordinates(e:YahooMapEvent):void
{
clickedLong=Number(e.data.latlon.lon);
clickedLat=Number(e.data.latlon.lat);

clickedX=Number(e.data.point.x);
clickedY=Number(e.data.point.y);
}

You add a listener with this line:

yahooMap.addEventListener(YahooMapEvent.MAP_MOUSE_CLICK, handleMapClick);

Although this is a very simple thing, it allows you to convert Latitude and Longitude to the X and Y coordinates of the referring Material and you can play with it from then on. For instance, I used it to map flight trajectories based on GPS data (including GPS altitude) in 3D space. Fun stuff!
Dragging Yahoo Map in PV3D (avoiding the map panning collision with PV3D)

Dragging a YahooMap is super simple using the Yahoo Map API. It’s a convenient single line:

yahooMap.addPanControl();

When the map is processed by PV3D and you try to drag it, it starts jumping all over the screen, probably because of some event collision with PV3D. Luckily, we can get around this one by making our own custom dragging method as follows (note that this only describes the concept, the working version is in source):

private function mMove( e:InteractiveScene3DEvent ):void
{
// This code is run when the mouse is moved on the plane.
movieParent.x = mouseX -e.x;
movieParent.y = mouseY -e.y;

if(Application.application.stopMovingMap==false)
{
Application.application.yahooMap.panControl.panEnabled=false;
f=true;
}
else if(Application.application.stopMovingMap==true && Application.application.isAnythingBeingDragged==false)
{
if(f)
{
oldX = e.x;
oldY = e.y;
f=false;
}
Application.application.yahooMap.panControl.panEnabled=true;

newX=e.x
newY=e.y

xDiff= newX-oldX;
yDiff= newY-oldY;

Application.application.yahooMap.setCenterByPixels(new Point(xDiff,yDiff));

flightsContainer.x = flightsContainer.x-xDiff;
flightsContainer.y = flightsContainer.y-yDiff;

oldX=newX;
oldY=newY;
}
}

You can look at the missing variables and event listeners in the source.

Simple gauge component from ground up using basic trigonometry

What I wanted to achieve was to rotate the 3D cube on which the map rests around the Z axis. Simple, right? So I used a VSlider component and gave it a range from 0 to 360 to capture the angle of rotation. And that’s where problems started. When the 3D map is under VSlider, both start acting up and jumping across the screen. All the issues in this app smell of the same thing - something to do with Mouse Down and Mouse Move events in PV3D. I’m still looking.

Being annoyed by the problem I started thinking about other approaches and a gauge component came to mind as the best visual representation of the functionality I was trying to achieve.

I naturally tried using some of the ready made gauge components available online, but with all of them I had some kind of issue. Either it was the inability to skin them properly, or to set the scope to full 360 degrees.

In the end I decided to refresh my trigonometry knowledge and made the component myself.

At the same time, this solved the VSlider going crazy issue. Why? I’ll post it when I find out.

Simple tilt component again using basic trigonometry

When in Rome... I used the same principle as in simple gauge component to add to user experience and visually show the angle that the 3D map is tilted by.

Making a visual component using Degrafa

Degrafa is such a priceless framework. Just in case you don’t know, it’s used for manipulating SVG’s (vector based graphics) in Flex 3, giving you a lot of power in customizing your visual components. It is the best solution for mapping in Flex that I have ever seen!

In this particular app it wasn’t absolutely necessary but it’s there to visually enhance the arrow button. I really wanted the arrow to look like it does in the example. Look at the source to see the details. Actual SVG data was created in Illustrator.

All in all, combining API’s is certainly going to get you into trouble. But combining ideas can amount to a sum greater than it’s parts. I love it.

If anything is not clear to you, look at the code to see all the in’s and out’s. If it’s still not clear, shoot me a message.

MyClasses.dbml - This looks like any ORM frameworks mapping file. It associates classes with tables, maps fields to object properties, and defines relationships.

 
<Table Name="dbo.Balloons" Member="Balloons">
<Type Name="Balloon">
<Column Name="BalloonId" Type="System.Int32" DbType="Int NOT NULL IDENTITY" IsPrimaryKey="true" IsDbGenerated="true" CanBeNull="false" />
<Column Name="Color" Type="System.String" DbType="NChar(20)" CanBeNull="true" />
<Association Name="Balloon_Kid" Member="Kid" OtherKey="KidId" Type="Kid" />
</Type>
</Table>
 

MyClasses.dbml.layout - This looks to be specific to the layout of the design surface and appears to serve no purpose outside of this design.

MyClasses.designer.cs - This is the beast that I'm looking to replace. It contains the class definitions and attribute based mappings to bring my database schema into my application, and ready it for use by LINQ.

So this leaves me with a couple questions. One, why are attributes used to specify mappings? Can this be done strictly via XML? More importantly two, can I use my own domain model, and if so how do I map it to the database?

My goal would be to design a layered system, separating the underlying data store from the repositories required to push and pull my domain objects from these data stores. This would allow in memory implementations of the data store, and would make unit testing (and developing) a whole lot easier. I will be digging into this in the coming days and will report back soon. Stay tuned!

Some benefits of the Entity framework:

• Data storage engine and schema independence: Due to the layer of abstraction between the logical and conceptual schema of your application, you no-longer need to know and hard cord the application to a specific data storage engine or schema.
• More expressive conceptual model: Entity types can inherit from other entity types and allows the creation of more complex types in addition to the standard scalar types support by the database.
• Access to multiple database system: Because the application is free from hard code data storage dependencies, the developer has the ability to access data from multiple storages using a consistent application object model
• LINQ: Language Integrated query support that offers compile time syntax checking for queries against the conceptual model.

The Entity Framework works by allow the developers to hand code or use code generation tools to create the XML metadata for the conceptual entity data model, a storage entity model, and a mapping specification between the two. The XML file created for the conceptual entity data model is then stored in the conceptual schema definition file (.csdl), the storage entity model is stored in the storage schema definition file (.ssdl), and mapping between the two in the mapping specification language file (.msl). These XML file are then loaded into the metadata workspace of the entity framework, and a set of classes are generated to allow the developer to work directly with the conceptual model and indirectly with the logical model.

Figure: ADO.NET Entity Framework Architecture

So with these benefits design and built directly into the the framework and the logical approach used by framework to interact with various data providers, some experts in entity-based applications and software architectures on the .NET platform still feel that the framework has some pretty large deficiencies.

They are concerned that the framework is...

• Inordinate focus on the data aspect of entities leads to degraded entity architectures
• Excess code needed to deal with lack of lazy loading
• Share, canonical model contradicts software best practices
• Lack of persistence ignorance causes business logic to be harder to read, write, and modify, causing development and maintenance costs to increase at an exaggerated rate.
• Excessive merge conflicts with source control in team environments.

Are these claim valid concerns to consider?

Sure, only if the framework is mature with several versions under its belt and its prohibits the productivity, maintainability and scalability of the application.

Isn't the right approach to software development to deliver a subset of the full feature set right the first time than try to deliver everything at once with massive issues that prevent the usability of the tool?

You decide...

Below are some useful references to get you going with Entity Framework.

Achieve Flexible Data Modeling With the Entity Framework
ADO.NET Entity Framework Pre-release documents
Microsoft ADO.NET Entity Framework Overview
ADO.NET Entity Framework Taking Some Heat
Programming Against the ADO.NET Entity Framework
ADO .NET Entity Framework Vote of No Confidence

The other day I wanted to do drag and drop between multiple columns using scriptaculous. Allowing this behavior is extremely simple, but out of the box the interaction feels clunky. Here, we'll be going through an example of how to do multi-column drag and drop with scriptaculous.

Enabling multi-column drag and drop just involves setting a single option, but without setting a few other options the dragging will feel jittery and won't allow us to drop on empty areas. Also, interaction with the server will require a small bit of consideration to support persistence of any changes.

For this example, we'll be using divs for the items and areas but the javascript will be the same if we used lists or any other HTML element to define your items and targets (we'll, of course, need to make sure that the correct tag option is specified in Sortable.create).

On the page, we'll have three areas styled to float next to each other (extra details left out for clarity).

    <div class="drop_target">
      <div>item one</div>
      <div>item two</div>
    </div>
    <div class="drop_target">
      <div>item three</div>
      <div>item four</div>
    </div>
    <div class="drop_target">
      <div>item five</div>
      <div>item six</div>
    </div>

Please note that in order for Sortable to work correctly the drop targets will need an ID, and each item element will also need a properly formatted ID for Sortable.serialize to work correctly. If we so desired, we could put in a few extra lines of code in the following javascript examples which will automatically add a unique ID to each drop target and item which doesn't already have one.

Now, to enable the basic drag and drop between the columns we just need to create a Sortable for each drop target. This is all we need for dragging to work between columns, but it won't be as slick as we want.

document.observe('dom:loaded', function() {
  targets = $$('.drop_target');
  targets.each(function(target) {
    Sortable.create(target.id, {tag:'div', containment: targets});
  });
});

The magic option here is containment. This specifies which elements on the page are valid drop targets when dragging an item. Since this requires that all the elements are already available when creating the Sortable, we used an event listener that fires when the DOM is finished loading in the browser. We're also using CSS selectors to grab the drop targets to make it easier to add/remove drop targets later down the line.

There are just two more options to specify. The constraint option removes a horizontal/vertical dragging constraint which makes drag and drop not smooth when using different drop targets, and dropOnEmpty will enable dropping items onto an empty drop target.

Sortable.create(target.id, {
  tag: 'div',
  containment: targets,
  constraint: false,
  dropOnEmpty: true
});

We can now drag and drop freely between the different drop targets, and lay them out any way we want. When we drag from one container to another, onUpdate will be called for both drop targets (since they both changed).

Since we are hitting a server to update order, we'll need to do one of two things. Sortable.serialize will include the HTML ID of the drop target in the parameters passed to the server as the key for the key-value pair. We could then use this on the server to determine which drop target is being updated (and update it appropriately). However, I don't like this because it isn't explicit and you end up parsing the request parameters looking for a certain pattern (plus, the coupling feels wrong).
Instead, we'll pass a known id for the drop target being updated as an explicit parameter. In straight javascript, it would look something like this (assume that known_drop_target_id is set to the appropriate value somewhere) :

Sortable.create(target.id, {
  tag: 'div',
  containment: targets,
  constraint: false,
  dropOnEmpty: true,
  onUpdate: function() {
    new Ajax.Request('http://foo.bar/baz', {
      parameters: Sortable.serialize(target.id) + '&drop_target=' + known_drop_target_id
    })
  }
});

In rails, you can use/generate a known value which your controller will look for (details left out for clarity):

<%= sortable_element_js(drop_target.id, :url => order_path(:id => drop_target) %>

And then in the controller (again, simplified for clarity):

@drop_target = DropTarget.find params[:id]
params[dom_id(@drop_target)].each_with_index do |item, index|
  // make sure the item is "in" the drop target in the correct order
end

In the end, drag and drop between multiple columns is only trivially more complex than a single column but provides a very cool and intuitive (in certain circumstances) interaction.

"This greatly lowers the bar to using Flash as a photo editor, document manager, customized application experiences, marking up content and saving locally, all without the need for server side script."

And then: "It is only beta (Flash 10) but there are great market opportunities to prepare for when this launches."

Flash is just getting better.

Also, do check out the other great posts from http://drawlogic.com

This prototype is in part being used to test performance of Flash Player running the excellent PV3D. So far it holds pretty good.

PV3D has amazing capabilities. That said, it's also a work in progress so the API is not super clear, but it's well worth the hassle. It's open source so you can always look at the source code to figure out something troublesome. It doesn't take long to get started either because of the well documented common steps.

Of particular help was http://papervision2.com/ where you can find all the necessary first steps to take like:

- Getting the PV3D 2.0 source

- Extremely helpful base template that sets up all the basic elements that you can easily build on

- And the priceless tutorial that sets you off on 3d interaction path (i.e. the fun part).

On this prototype I was primarily working with LineMaterial and MovieMaterial (for interaction), then Line3D / Lines3D which proved very easy to build but not so easy to manipulate.

For such purpose it is a good idea to get to see DisplayObject3D class and understand how containers work in PV3D. More about that in Part II.

Performance can be fine tuned but it's necessary to keep in mind at every line of code that there is a ton of processing going on all the time and you want to build and manipulate your objects sparingly because otherwise you will see your browser locking in a millisecond.

Part III will cover collisions between Yahoo Maps AS3 API and PV3D. In one sentence, there is nothing you can not solve through a well arranged series of Events and this is applicable to any AS3 situation.

Part II next week.