iPlotz – a prototyping tool

July 18, 2009

recently I was looking for tool to help me in prototyping applications, I didn’t want to use the old-fashioned pencil & paper technique so I ran a search on the web to see what softwares are available to make my wireframe process more efficient.
Turns out there is a bunch of applications intended to do the job:WireframeSketcher, Axure, Baslsamiq Mockups, MS Visio, Fore UI, FlairBuilder and much more.
After doing some comparison and hands on experiments I narrowed it to only one selection – iPlotz.

Here are my impressions of it:
the first and most noticeably feature of iPlotz is its look – all the components have that “sketchy” skin to them. The visual design is very pleasant to the eye (unlike Balsamiq where components resemble children toys) and look professional. The overall look is if you just drawing with pencil&paper and that really gives the impression that this is “work in progress” and that this is not the graphic design phase, without the need for explaining – a quick look at an iPlotz wireframe will pinpoint you to where you at – “you are now looking at a mockup”.
iPlotz have a library of pre-defined components that will give most of us most of what we need.
I say most because right on my first mockup I’ve found iPlotz does not have a gauge component I needed. I have made my own image of gauge and imported it as a PNG file. although this is an appropriate solution my gauge doesn’t look quite the same as all of the rest of the components.
Using the components is very easy – just drag a component on your canvas, place it where you want and change it measures. Then later you can double click it to edit its data.
The “master” page concept is convenient and easy to work with – make yourself a master page so you can later use this page as a background for other pages.
When you want to present your work you can export it as JPG/PNG or PDF but if you want to make it interactive you can “publish” it – then iPlotz will give you a URL where your published wireframe is. If you have added interactivity to your work (such as links between pages) the publishing is the way to go! This way your customer will get a most concurrent feel of your thoughts.
iPlotz also have some more features I haven’t been working with: projects management, collaboration and adding comments from your peers.

iPlotz is far from being perfect! It feels more like a beta then a ready-to-the-market product.
While it is pleasant to the eye, very user friendly, and fun to work with it does feel a little sluggish, expert users may find this behavior annoying at times.
It feels “slow”, like sometimes it takes the time think about what you want to do.
There are a whole load of bugs that need to be addressed and a long way to go.
iPlotz is progressing very quickly and it seems the guys behind it are working very hard – it is being updated almost every week with bug fixes and enhancements. The forum is very much alive and replies from iPlotz stuff are coming right away with answers.

I really like iPlotz and will sure keep an eye on it to see where is it going – it does have a potential to be a best prototyping tool.

Oh and… please change the name to something more professional, “iPlotz” doesn’t sound right.

http://iplotz.com


Silverlight: DragSelect component

April 22, 2009

This all started as a requirement for zooming in a chart, then later I decided to make a component out of it – drag select an area.
For the end-user it is really simple: click… select an area by dragging… release!

You can use this anywhere in your application (not only restricted to charts).

It is simple to learn what it does only by playing with my demo.
In seconds you’ll know how to use it: drag-select an area inside the orange rectangle.
All the controls and output are on your left side.

Take a look at the source code to understand more.

Questions and comments are most welcomed.

Demo is here
Source is here


Silverlight: double click a ListBox item

March 10, 2009

On my previous post i showed how you can attach a double-click event to any Silverlight object.
using this method i’ll show you how to attach a double click event to a ListBox item.

the problem here is that we don’t have any object that we can count on.
i edited the ListBoxItem template, the only change i’ve done is to add a transparent rectangle above all.
look for it inside the template – its name is “DummyRectForDoubleClick”.
then on the Loaded event of this rectangle i attach to it the double click event.

Demo is here
Source is here


Silverlight: attach a double click to any object

March 5, 2009

Due to Silverlight lack of double click event a custom implementation is needed.
this function and its adjacent handlers will attach a double click event to any object deriving from UIElement.

Read the rest of this entry »


Silverlight: ListBox ItemsChanged event

February 23, 2009

Bits me why this is not implemented.
i was missing an event on the ListBox – ItemsChanged.
as you can see the implementation is so easy:

using System.Collections.Specialized;
...
public class ListBoxGeneric : ListBox
{
    #region Constructor
    public ListBoxGeneric() : base() { }
    #endregion  Constructor

    #region Override
    protected override void OnItemsChanged(
        NotifyCollectionChangedEventArgs e)
    {
        base.OnItemsChanged(e);
        OnItemsChangedEvent(e);
    }
    #endregion Override

    #region Class Events

    public delegate void ItemsChangedEventHandler(object sender,
        NotifyCollectionChangedEventArgs e);
    public event ItemsChangedEventHandler ItemsChanged;

    private void OnItemsChangedEvent(
        NotifyCollectionChangedEventArgs e)
    {
        if (ItemsChanged != null)
        {
            ItemsChanged(this, e);
        }
    }

    #endregion Class Events
}

Silverlight: GridSplitter with a collapse button (V2)

December 3, 2008

This is a continuation of my last post.
I have made a better version of my ExtendedGridSplitter, this one works in both horizontal and vertical placement, I have made it more reliable and easy to work with.

Plus… I have found this post about animating Grid columns & rows and implemented it in my sample application.

Demo is here
Source is here