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.

Although there are many sources on the internet on this topic and FWA doesn't represent Flex apps like http://flex.org/showcase/ does or the fantastic Papervision3D, it still gives an excellent overview of the latest achievements using Flash technology.

At FWA I saw some of the most innovative user experiences ever, something I dare to label cutting edge. To add to that, best Flash material doesn't necessarily have to use the latest classes to be fabulous. There are sites listed there that use some basic Flash techniques and have a far better user experience than the latest ones with all the bells and whistles.

Now, nobody is perfect and FWA does misfire every now and then with their reward, but in general, I'd say that it's the best single spot on the internet to see where's Flash at.

An approach to this problem is to use HTML attributes to mark elements, and Prototype makes this technique easy to implement and work across browsers.

Let's consider a hypothetical use case and solve it using progressive enhancement with HTML attributes.

You have some input fields on your page that you want to spruce up by adding hints/default values inside the field (you know that cool behavior where the text vanishes when you click the field). Not all the fields on the page should have this behavior, so we will need some way to mark the ones we want. Also, the default text is different for each field so we need to specify that in some way.

We could mark the fields we want by using a CSS class, but this doesn't accomplish having unique default text for each field. HTML attributes to the rescue:

   <input type="text" default="foo"/>

Here, we are specifying that this text field has the default text of "foo".

Now, let's look at the javascript to utilize this:

document.observe('dom:loaded', function() {
  $A(document.getElementsByTagName('input')).each(function (input) {
    if (input.getAttribute('default')) {
      // use value in input.getAttribute('default')
    }
  });
});

This works, but we can leverage the CSS selectors in prototype to grab the fields we want:

document.observe('dom:loaded', function() {
  $$('input[default]').each(function (input) {
      // use value in input.getAttribute('default')
  });
});

I prefer the second one myself, as it is easier to read and maintain (however, I haven't tested any performance differences between the two). Regardless of which path you take, you will now have all the fields and can grab the value in the attribute to add your behavior. This approach can work for a variety of different tasks, and is extremely easy to maintain and develop with (especially when combined with OOP).

One of the nice features in rails that many people overlook is the ability to combine multiple CSS or javascript files into a single file.  Why would you want to do this?  Well, it results in fewer HTTP requests being made by a client.  The end result is that the page will load faster in most browsers, and your YSlow score will be bumped up a bit.

How do you turn this feature on?  It is simple really; it just involves setting a single option in two rails helper calls which you're most likely already using.

If you ever took a look at the documentation for stylesheet_link_tag and javascript_include_tag, you may have noticed that there is a :cache option.  This option will basically tell rails to, instead of including all the files individually, combine them into a single file and include that in the HTML.  If you set :cache to true, it will set the name of the file to all.css or all.js.  If you set :cache to a string value (e.g. "foo"), then the file created will be that name (foo.js).

In order for this to work, ActionController::Base.perform_caching needs to be set to true in the appropriate environment's config file (by default, it is enabled for production but disabled for development).

Why the rails team decided to call the option "cache" instead of something like "combine_files" is beyond me, but I have a feeling that it is probably the biggest reason many people seem to not even know this feature is there.

+ =

I was very wrong about Mac. And I was very wrong about coding on a Mac. In a nutshell, my productivity went up considerably since the switch. On a day to day basis, I use primarily Flex Builder, then Dreamweaver, Flash, Photoshop, Illustrator, an FTP client and as of today Snackr.

Flex Builder 3 acts exactly like it does on a Windows machine, with all the blessings and bugs included. No difference at all (I've been using Flex since 2.0 was released on Windows). Productivity boost comes from OS's fantastic interface which allows me to switch windows, not get bothered by focus steeling, run multiple screens with ease, find stuff easily (spotlight), organize files easier and more.

I use Firefox 2 as my primary testing browser, although Safari works just as well. I used to say: "I don't test for Mac, who cares, it's a small market anyhow..." but now I get to test on a Mac "for free".

I initially wanted to install a Windows VM, but so far I don't see the need.

So if anybody wants to code AS3, Mac is the way to go.

Silverlight was designed to address these properties:

• Lightweight browser plug-in—Silverlight has Windows and Macintosh modules that are designed to enhance Internet Explorer (versions 6.0 and 7.0), Firefox 2.0, and Safari browsers.
• Native presentation runtime— Software-based browser enhancement that allows rendering of XAML-based interactive 2-D graphics, text, and media, in addition to the browser native rendering of HTML. XAML can be used inline, in a file, or in a package.
• Interactive video and audio—Cross-platform independent media runtime that can render Windows Media content (WMV and WMA) in addition to MP3. Video and audio are handled as a media element in XAML, enabling flexibility in their presentation. Furthermore, the media support leverages the huge infrastructure and ecosystem around Windows Media, enabling cost-effective delivery of top-quality media.
• Programming layer—In consistency with the Web architecture, Silverlight XAML is exposed using a DOM model to JavaScript. That way, AJAX programs can utilize the extended markup rendering capability using the same programming paradigms and practices (on the client and on the server).

The image below outlines Silverlight's architecture.

Silverlight applications can be written in any .NET programming language. As such, any development tools which can be used with .NET languages can work with Silverlight, provided they can target the Silverlight CoreCLR for hosting the application, instead of the .NET Framework CLR. Microsoft has positioned Microsoft Expression Blend versions 2.0 and 2.5 for designing the UI of Silverlight 1.0 and 2 applications respectively. Visual Studio 2008 can be used to develop and debug Silverlight applications. To create Silverlight projects and let the compiler target CoreCLR, Visual Studio 2008 requires the Silverlight Tools for Visual Studio which is available as a beta release.

A Silverlight project contains the Silverlight.js and CreateSilverlight.js files which initializes the Silverlight plugin for use in HTML pages, a XAML file for the UI, and code-behind files for the application code. Silverlight applications are debugged in a manner similar to ASP.NET applications. Visual Studio's CLR Remote Cross Platform Debugging feature can be used to debug Silverlight applications running on a different platform as well.

I have listed below a bunch of links that can help one get started on Silverlight :

This tutorial starts you off on the customary "Hello World" application using vs-2008 and Silverlight 2

This tutorial talks about using Style Elements to better encapsulate look and feel

This video discusses binding a sample Silverlight control to n-tier application's business layer

This one's about how to consume WCF and ASP .NET web services in Silverlight

This provides information about different ASP .NET controls for Silverlight

I ll try to take a deeper dive into some of the specifics of Silverlight Implementation using the .NET framework in the coming weeks. Stay tuned!