Month: February 2010

Sketchflow and Clients

Sketchflow is a project template type that can be created to quickly prototype application design, quick UI experiments, and communicating design intent.  I decided, to get a bit more practiced at using the Sketchflow capabilities, that I would write a quick tutorial on starting and creating a basic Sketchflow Application.

First step, open up Microsoft Expression Blend 3.  Then click on File and then New Project.  In that dialog you will see the available Expression Blend Project Templates.  For this tutorial I selected the Silverlight Project Types, then the Silverlight 3 SketchFlow Application Project Template to the right.  (Click for full size image)

When the project opens up a standard XAML screen will be displayed called Screen 1 (Screen 1.xaml).  There is also a SketchFlow Map, if it is not showing use Shift + F12 or select Window and then SketchFlow Map on the menus.  That will get the following screens showing.  Feel free to position those wherever you need them to work within the SketchFlow Map.  (Click for full size image)

Next right click on the Screen 1 Node and rename the node to Set Credentials.  Now hover with your mouse over the node until the utilities drawer shows up.  Click on the Create a Connected Screen icon in the utilities drawer and hold down and drag.  This will allow you to create a connected node.  (Click for full size image)

I created each node as shown, one for the Set Credentials, View Scorecard, and Select Reports screens.  In the Projects tab that shows the Solution and the XAML files I renamed each file so it is easily referenced to the node that the XAML file represents.

Now that each screen exists, I have created the following screens.  The first one of course, is the Set Credentials Screen/SetCredentials.xaml.  The XAML is below to make creation of the screen super easy.

[sourcecode language="html"]
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity"
    x:Class="AnalyticsScorecardApplicationSketchScreens.Screen_1"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="textAccount" Height="25" HorizontalAlignment="Left" Margin="79,88,0,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" Width="136" Text="webtrends_com" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your account here."/>
        <PasswordBox x:Name="passwordBox" Height="25" HorizontalAlignment="Right" Margin="0,88,103,0" Style="{StaticResource PasswordBox-Sketch}" VerticalAlignment="Top" Width="136" Password="XXXXXXX" ToolTipService.ToolTip="Enter your password here."/>
        <TextBox x:Name="textUsername" Height="25" Margin="241,89,263,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your username here." Text="Adron"/>
        <Button x:Name="buttonLoginSetCredentials" HorizontalAlignment="Right" Margin="0,159,103,0" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="201" Content="Login &amp; Set Credentials">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1_3"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left" Margin="81,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Account" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Left" Margin="242,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Username" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Right" Margin="0,60,181,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Password" TextWrapping="Wrap"/>
    </Grid>
</UserControl>
[/sourcecode]

Now that we have this screen, I will step through some of the things I did to make this screen functional for the prototype.  The main thing, is to assure that the button is linked up to the right navigation.  Right click on the button and look for the Navigation items and select the screen it will navigate to, as shown below.

Next create the following two screens to show the appropriate navigation and screens to navigate to.

Select Reports / SelectReports.xaml Screen









[sourcecode language="html"]
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity"
    x:Class="AnalyticsScorecardApplicationSketchScreens.Screen_1"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="textAccount" Height="25" HorizontalAlignment="Left" Margin="79,88,0,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" Width="136" Text="webtrends_com" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your account here."/>
        <PasswordBox x:Name="passwordBox" Height="25" HorizontalAlignment="Right" Margin="0,88,103,0" Style="{StaticResource PasswordBox-Sketch}" VerticalAlignment="Top" Width="136" Password="XXXXXXX" ToolTipService.ToolTip="Enter your password here."/>
        <TextBox x:Name="textUsername" Height="25" Margin="241,89,263,0" Style="{StaticResource BasicTextBox-Sketch}" VerticalAlignment="Top" TextWrapping="Wrap" ToolTipService.ToolTip="Enter your username here." Text="Adron"/>
        <Button x:Name="buttonLoginSetCredentials" HorizontalAlignment="Right" Margin="0,159,103,0" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="201" Content="Login &amp; Set Credentials">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1_3"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left" Margin="81,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Account" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Left" Margin="242,60,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Username" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Right" Margin="0,60,181,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Password" TextWrapping="Wrap"/>
    </Grid>
</UserControl>
[/sourcecode]

 


 



















View Scorecard / ViewScorecard.xaml Screen


[sourcecode language="html"]
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:pb="clr-namespace:Microsoft.Expression.Prototyping.Behavior;assembly=Microsoft.Expression.Prototyping.Interactivity" xmlns:local="clr-namespace:AnalyticsScorecardApplicationSketchScreens"
    x:Class="AnalyticsScorecardApplicationSketchScreens.Screen_1_3"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button HorizontalAlignment="Right" Style="{StaticResource Button-Sketch}" VerticalAlignment="Top" Width="122" Content="Select Reports" Margin="0,24,158,0" Cursor="Hand">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1_4"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Style="{StaticResource Button-Sketch}" Content="Set Credentials" Cursor="Hand" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" Width="122" Margin="0,25,19,0">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pb:NavigateToScreenAction TargetScreen="AnalyticsScorecardApplicationSketchScreens.Screen_1"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>
[/sourcecode]

That’s it for this entry.  For now this is a complete working SketchFlow Application.  Just run it and you’ll see a screen that you can navigate around as shown below.

I’ll have another one when I get to fleshing out the various parts of the prototype more.  I intend to do a complete work-through, but we all know about intents and blog entries.  So I shall see.

Toy Adobe AIR Apps, Social Media Gets a Kick

Outlook and the team responsible for said product, are really pushing hard for the 2010 release.  Of course, I can’t talk about it, but yes, I have seen it and it looks & plays awesome!  However, social media got a slight extra kick from Microsoft recently with the Outlook Social Connect.  The Webtrends blog has an entry up Outlook’s Social Connect:  Social isn’t just AIR toys anymore! by Michelle Anderson.

This got me thinking about various efforts that I know are going on to bridge a lot of this social media deluge.  I get the feeling there are going to be some truly breathtaking applications hit the scene in the later part of the year or even early 2011.  My curiosity hangs around what will they bridge?  Outlook is a prime example of bridging data points that become truly useful information.  With all the addins that Outlook encompasses, one truly becomes a powerhouse power user with a tool like Outlook.

I have been working on some things myself, including proposing a new open source library to bring together services into a centralized library for ease of use.  Anyone got any ideas on that?  Interested?  Thoughts on which services should be brought together first?  The following are the services I am thinking about providing libraries for initially.

The reasoning behind these of course, is purely selfish.  I want to have easy access via an API to these services because I use them.  In addition, I figured there are others out there that may like a centralized library.  So toss me some ideas of other services, if anything, I can maybe create a starting point.

iPhone == IE6 ? Yeah, You Heard It? iPhone Dev is?

So I was reading some blogs related to Windows 7 on Mobile and iPhone Development.  I will say right off, I am biased AGAINST developing for the iPhone because the development environments, language, and other characteristics are horrible.  Horrible being a kind way to put it.  The iPhone may seem like some whiz bang advanced phone, but the development of it is somewhat archaic at best.

This character quirksmode wrote a great write up about The iPhone Obsession.  In the write up the IE6 and iPhone Parallel is drawn.  Eerily the writer makes a VERY good point.

For now, that is all, I liked the write up and want to do more mobile development, but the iPhone Development has got to feel some heat and either modernize and improve, or die.

I will admit, I love my iPhone.  Again though, I hate developing for it and the process compared to developing for most other things.  Even developing for the previous Windows Mobile Phones was better.  Albeit Windows Mobile phones of the past where HORRIBLE in UX and UI overall.  No comparison there.

I do see though, if Microsoft plays their cards right, they could make some serious inroads to Mobile Development with Windows 7 Mobile.  The initial screen shots and descriptions I have heard seem pretty awesome.  Some very very picky developers I know have seen and played with some of the devices, and they love it.

So we shall see.  May the battle begin!

Code Camp, Bar Camp, Camp Time

The first Code Camp & Bar Camp, which is joining forces, was held tonight.  With representatives from Code Camp, Legion of Tech, and the SQL Group Organizers were all on hand to kick off the discussion.

One of the primary focus points was, should we have a two day or single day event?  It makes me wonder what would be better for a 800 person or so event.  Two days better, one day better?  Short days, longer days that run until 10pm?  What is your take on the matter?

More to come later, so keep an eye out for the Code, Bar, SQL Camp Event o’ the year!

@webtrends #wtengage Conference Rocked!

Week before Mardi Gras, the Saints rocked and won the Super Bowl, and @webtrends threw an awesome #wtengage Conference.  Props out to the long list of Webtrends People there;  @DashLavine, @caseycarey, @webtrendspeter, @justinogarrity, @sullybridgetb, @kaykas, @justinkistner, @michelewarther, @mrdiggles, @yodera, @vkenkal, @derekfine, @ekrobi, @mccook, @robinoula, @benfogarty, @noexg, @thomschoenborn, @mediachick, and others!  The event was awesome, great sessions, great knowledge transfer, great food, just great ? period!

Also must say the meetings, meets, and introductions were great.  I’m glad to have met dozens and dozens of people and get those names and faces connected.  Finally caught up with; @seanpower, @johnlovett, @christineconley, @ed1chandler, @bullfrogmedia, @ebeane, @cgrantski, @drcasio, @nadolski, and many others.  Then there are others I met and caught up with and still got more catching up to do; @aknecht and @bosilytics.

Seriously, all of these individuals are rock stars in the analytics community.  The conversations, new ideas, thoughts, and general kicking around New Orleans was a great time.  If you are interested in the next Webtrends Engage (and you ought to be if you do anything with analytics), check out the 2011 Conference coming to San Francisco.

Code Camp Kick Off

In other news, Code Camp is kicking off real soon.  Specifically, the kick off meeting is tonight here at Webtrends.  This year Code Camp is going to be pretty huge.  I am guessing at around 400-500 people, more sessions, more geeking & nerding about, it will be an awesome time for all.  So keep reading and I will be posting more tidbits about the upcoming Code Camp.