I root for two baseball teams: The Boston Red Sox® and whoever beats
the New York Yankees®.
The funny thing is that I learned this from my 10 year old son, Danny, who developed
a unique fascination for this MLB eternal underdog. For the non-baseball fan it's
tough to comprehend, but attending a game at Fenway Park and watching Big Papi blast
a 3-run homer to win the game in the 9th inning made me a believer... which, by
the way, came with some strings attached like $200 game tickets, a pact to eternally
hate the New York Yankees and a Boston Red Sox branded MasterCard®
with a ridiculously high APR so I could potentially spend a zillion dollars and
receive complimentary tickets to a World Series game.
Believe it or not, this short story has something to do with technology.
I thought it would be cool to use Grid FX™, the latest addition to the Software
FX family of products for developers, to build a web-based application with stats
and other Red Sox resources that Danny and I could enjoy at home. During this process,
I could demonstrate Grid FX's unique capabilities and features to build visually
sophisticated and composite web-based applications with Visual Studio® 2005/2008.
Because much of the building process is done right on the Visual Studio design surface
with virtually no-coding at all, I decided to use a screen recorder¹ and produce
flash movies; I am confident you will enjoy and learn more from this format than
just static screen shots. In addition, I have made the sample pages available for
access online.
Finally, I strongly encourage you to take a look at the professionally made Grid
FX samples and documentation. Hopefully, you'll see that Grid FX can also do wonders
with your enterprise data and become an essential data presentation tool for corporate
intranet sites and dashboards, as well as, other mission critical web-based applications.
If you want to try it yourself, you can download a FREE Grid FX Development License
at http://www.softwarefx.com/GridFX/.
I hope you enjoy this presentation as much as I enjoyed developing it for Danny.
P.S. To my son Danny: This effort is dedicated to you. I really hope the Red Sox
make it to the World Series® this year, just don't hold your breath on those
complimentary tickets from MasterCard.
Go Sox!
It is important to mention Software FX conceived and designed Grid FX specifically
for Visual Studio 2005/2008, the .NET framework 2.0 and ASP.NET applications. We
focused our development efforts on three major areas:
- Design-time experience to improve accessibility and shorten the development cycle.
- Integration of visualization components (namely Chart FX™) to broaden the
scope of the product.
- Run-time interaction through the use of AJAX to let end-users unleash unprecedented
data visualization and analysis scenarios with minimal development efforts.
This presentation will focus mostly on the Grid FX design-time experience. In future
chapters, I will demonstrate Chart FX integration and Grid FX run-time features,
respectively.
This application would not have been compelling or attractive to Danny (my customer)
without the players' current stats, so I went ahead created a script to screen-scrape
information from different online sources and store it in my own Red Sox Access™
2007 database (for those SQL Server™ fanatics out there, I chose Access for
simplicity and portability reasons). Additionally, I used a Windows Vista™
box in our home network to develop, stage and deploy my application in IIS 7. After
all, I did not expect a lot of scalability or performance issues based on the number
of clients I had.
The first movie in our series is about creating your project and adding the necessary
resources to commence development. If you are familiar with Visual Studio 2005/2008
ASP.NET projects you can simply skip this step.
Setting Up a Grid FX Project • 1:07 mins
Ok, so I didn't impress you with my first movie... after all, there's not much to
learn about creating a web forms project, dropping a control on a form and adding
a couple of files to the project. I'll raise the bar and introduce the first interesting
Grid FX feature: Card Views.
Grid FX Card Views extend on the power of traditional grids. Card Views give developers
an alternative method of displaying data in a non-columnar way. Developers can define
custom templates and use these templates to display your data items in any particular
layout. In this next movie, I will connect to my database and create a fully graphical
Red Sox presentation cards (player photo included!) without a single line of code!
Card Views in Grid FX • 3:22 mins
A few weeks ago, I enthusiastically yelled to Danny so he could take a look at my
first grid showing his everyday heroes. To my surprise, Danny was not happy. Actually,
I saw him disgusted by my initial efforts.
"What? What's wrong?" I said.
Danny replied, "But Dad, it's the New York Yankees colors. I don't like it... If
it's not red, it's not the Red Sox. Fix it and then call me." (..and away he went
on his Razor RipStick®)
Too quickly, you find out that your kids are no different than your customers, whining
about every little detail in your perfect application. So, to satisfy my customer,
I had to put more attention to these little details (making him happy was not going
to be as easy as I had thought. All of a sudden, the $200 game tickets and the $18
Hot Dogs looked like a bargain). But, to quickly solve this problem, I resourced
to the Grid FX Auto Format Wizard which provides Motifs and Palettes.
Grid FX Motifs are a powerful and effective way to quickly apply visuals to your
grid. Rather than customizing individual grid elements, Grid FX has pre-built professionally
designed Motifs for virtually every major application, like Microsoft Office, Outlook®,
Sharepoint®, Windows Vista, Dynamics™ CRM and other popular formats such
as Gmail™, Yahoo® and iTunes® among others. These motifs not only
change colors but also apply fonts, column and row effects and even change the characteristics
of buttons and other navigation controls to match the grid's parent container or
the application visuals. In addition, palettes are also available to change virtually
every grid color with a single mouse click. Just take a closer look at this movie:
Grid FX's Auto Format Feature • 0:55 mins
I will revisit Card Views and grid visuals in future writings. Let's just go back
to a more traditional way of using grid controls in Visual Studio: a columnar layout.
Grid FX takes advantage of the Visual Studio extensibility model to offer a design-time
experience that significantly decreases development time and the learning curve
over traditional grid controls. For example, when you connect a SQL statement to
a grid control, columns will be created based on the actual order you selected the
attributes in the database. Should you want to re-arrange the columns or remove
them from the grid, you will have to resource to complex dialogs or changing the
SQL statement itself. In contrast, Grid FX allows you to change the grid layout
right on the Visual Studio design surface via mouse drag & drops and the Smart Tag
Wizard. This next movie shows how easy it is to change the Grid's layout at design-time.
Design-Time Layout Editing • 1:36 mins
As soon as I recorded this movie, I knew this layout would not have passed my son's
recently developed project management skills. In the back of my mind, I could almost
hear him say, "Dad, everyone knows that player Stats should be grouped, next to
the player's name and photograph. What kind of developer are you?"
Ok, to accomplish this, I will make use of Grid FX's powerful in-place template
editing capabilities which allows me to create a new template column and drop an
HTML table (or any other third-party control) and customize it using Visual Studio's
powerful styling tools.
In-Place Template Editing • 3:34 mins
At this point, I was about to pat myself on the back and wrap this up when suddenly
he asked whether he could display his other Red Sox images in the application.
"What other images?" I shrieked.
"Mommy! Daddy's losing his temper," Danny quickly pointed out.
My wife intervened; I had to calm down... As it turns out, the kid has been secretly
compiling a library of Red Sox images for months and viewing them on Google™
Picasa®. According to him, now that we were making an integration effort, it
didn't make much sense to have disparate systems and applications to view the same
information, (sound familiar?) so I had to write a script to categorize and import
those images into my database and then determine where and how to display them in
Grid FX - all of which seemed too big of an effort for my voluntary development
work.
My wife intervened again and I, reluctantly, resumed development.
To my surprise, I found out that Grid FX is not just about rows and columns of data.
There is a very cool feature called Sidebars which are areas that are displayed
on the side of the grid (top, bottom, right or left) and that allow developers to
include additional data that enhances the grid without additional design or development.
Sidebars are completely flexible and can be used to display anything from grids,
HTML or custom elements like Chart FX objects. In addition, Sidebars provide their
own AJAX-driven UI that allows end users to collapse or expand them as desired at
run-time.
This next movie shows how to create a sidebar and display Danny's photo library:
Grid FX SideBars • 1:50 mins
Ok, so at this point I have established a formal email communication protocol with
Danny to receive additional application requirements. I not only needed the desired
features but detailed specs of what he wanted. So I got a single response:
"I want more players' stats," Danny wrote.
This meant more screen-scraping and development for me, so I called my attorney
who recommended drafting an LOU ("Letter of Understanding", a legal agreement describing
the details of an understanding between two parties) for Danny to sign.
This last movie shows the Grid FX master-detail capabilities by adding an expandable
area that displays child data... now isn't that appropriate.
Cheers and GO SOX!
Grid FX Master-Detail • 2:13 mins
Coming Soon: Chart FX integration to visualize the Grid FX data within charts, gauges
and visual dashboards.