in

WPF Design and Development

IdentityMine Team Blogs

David Kelley

A day in the life of a humble software architect... doing C#, WPF, Silverlight, Legos, Fuzzy Logic AI and/or whatever is the latest and greatest or more importantly the coolest techo mumbo jumbo...

June 2007 - Posts

  • Blendables Silverlight Popfly Bar Chart Block

    And again another Chart block from Identitymine...  This time I got industries and added some basic animation to the the line and scatter chart and this one the of course.  So over the next few weeks I'll go back and ad more coolness to these charts but in the mean time check it out.  Also check it out on popfly (if you have an account).

     

  • Blendables Line Chart Popfly Block and Silverlight Control

    Ok so here is yet Another chart block...  This one is a line chart.  For popfly I'm only doing each chart as a seperate type where as the 1.1 Silverlight version will be rolled into one dll.  :) 

     Anyway this one has all the same kinds of features as the other chart controls and I have embedded it here for your parusal [sic].

     

     

  • Check out this Geek Toy

    Some one sent out this link that I thought was really cool.  got to get me one of these...

    http://imaginecup.com/multipoint/default.aspx 

     Now I can have a mouse for both hands.

  • Quick Tricks for Popfly

    So these couple of hacks come in handy for figuring things out.  The first is to get the XAML of other controls that are in popfly. When you try to save them or play with them in popfly you can't normally get at this and at some point I think they will add the ability to get at control xaml but in the mean time you can do this.  So currently all public popfly xaml bits that are built in are at the url: http://popflycreator.ms/.  So if you look at the class and see that the url is to the xaml it loads you can get at that xaml buy getting the relative path from the class for example: /Content/Components/Resources/BarGraph/xaml/BarGraph.xaml.txt and then you put the first url together and you get something like:

     http://popflycreator.ms/Content/Components/Resources/BarGraph/xaml/BarGraph.xaml.txt 

     and then poof you get your xaml.

    The next trick is have some base xaml reference.  So I have had trouble getting popfly to play nice with silverlight classes.  The work around has been basically to use the xaml ref of an existing class and then just write your xaml dynamically over the top.  quick and dirt and it works.  I really think this issue will get fixed later as well but in the mean time...

     

     

     

     

  • Blendables Scatter Chart Popfly Block and Silverlight Control

    Introducing the Scatter Chart Block for Popfly and Silverlight.  This chart control does exclusively scatter charts.  Based on any set of floating point numerical data it will generate a relative scatter diagram based on set size of the control.  Check it out on popfly and embeded here.

  • Silverlight in a Vista Gadget - Blendables Blender Gadget

    I've heard that Silverlight worked in Vista Sidebar gadgets.  and Yes indeed it is true, Silverlight works in Vista Gadgets.  check out this really cool vista gadget (which is also a popfly block silverlight control).

  • Blendables Blending Silverlight, Popfly and Vista Gadget Because we can.

    So doing Silverlight Popfly controls has been fun.  We now have a 'Popfly' mix of control that I'm working on and the latest is a Blender control.  It doesn't do much but is a blatent attempted at Blendables Self Promotion and doing controls be cause we can...  Basically it is a blendables logo blending and I embeded this below.  This can also be downloaded as a Vista Gadget to look extra special cool...  :)

     

    So we also now have a Pie Chart Control, Paypal control, and a library control and a 'blank block'.  More are in the works but these are the ones that are live.

     

  • UML For 3rd Grade...

    (First published in a white paper for a client, used with permission)
     
    The Process Overview
     
    Use-case to Specifications is a processing using the UML use-case to identify user requirements and model systems to be able to properly define functionality. This document is intended to serve as an execution based walk-through of this process.
     
    As background: ‘The Unified Modeling Language (UML) is a language for specifying, visualizing, constructing, and documenting the artifacts of software systems, as well as for modeling business and other non-software systems. The UML represents a collection of best engineering practices that have proven successful in the modeling of large and complex systems.’ ~OMG Unified Modeling Language Specification
     
    Use-case - Basic’s
     
    In this process we are focusing on the use of use-cases to identify requirements. The goals of building a use-case is to first identify the actor. This is the person or entity performing the actions described in the use-case. In some cases, the actor is simply a component of the system and not necessarily a user or consumer of it. Second is to identify the goal or what we are looking for the end result to be. Third, and last, is the process in which the actor will take steps to reach the end result or goal. This process interaction is typically described in story form and contains a complete end-to-end walk-through of the actions taken by the actor to reach the goal in the proposed system. To this end, it helps to think of a use-case as a stand-alone story that isn’t dependent on any outside parts to be considered complete. Use-cases serve as a primary tool to help us work out system interaction issues, such as the way it’s accessed, how a part of it might be used or perceived, or how a particular aspect is intended to operates. Basic use-cases will include the following elements, all of which are derived from the overall story-line created:

    • Name
    • Actor
    • Triggers
    • Story
    • Steps
    • End conditions
    • Failed conditions
    • Success conditions
    • Alternate scenarios.


     
    Use-case’s
     
    To develop a use-case we first need to start with an actor. There are several ways to determine an appropriate actor. One way is to ask a couple of basic, but key, questions: 1. Is this actor a component of the system, like a class or object set, or is it another type of entity, such as an administrative or end user. 2. Is the actor a consumer of the proposed system or does it live and/or work within the system. Second, we need to come up with the goal. What is the end result we are expecting from the interaction process? The next step is to develop a story that describes how this actor interacts with the proposed system in order to reach the end result or goal. The following example uses ‘Microsoft’s ACME Project’ or MSAP as the proposed system and an end user “Joseph” who has specific privileges within the system. The goal in this case is to register for an existing course.
     
    Example:
     
    Joseph, a gold level user and technology buff, has just learned that a new course is being offered for his favorite technology: C#. He immediately rushes onto the MSAP and signs in using his Passport credentials. Joseph then selects the MSAP Center link from the left-hand navigation menu. Once there he is able to quickly search for content relating to C#. Joseph locates the course in the search results that were returned to him and clicks the “Register” link. Joseph is able to get more information on the course while reading through the summary page. He decides that this class is definitely worth while and proceeds through the registration process. Once registration is complete he receives an email confirming his successful registration. Joseph marks the course date and time in his calendar and quickly gets back to his day-to-day tasks.”
     
    Summary:
     
    The story in this example use-case is fairly refined. When we carefully look at this story it identifies a number of qualities about the actor as well as the process used to reach the end goal. From this story we can derive requirements and even data elements needed to ensure that the functionality described matches what was proposed to be built.
     
    First we see that we have given our actor a name. This allows us to reference the actor more easily throughout the use case. From this story we can see that each relevant step our actor goes through has been described. Additionally we can derive actions that “trigger” other actions and can see the basis for some assumptions that were made. As the story’s end draws near we take note of end conditions and finally, after the basic story is completed, we can assess whether or not there are alternate scenarios and even failed conditions that need to be documented.
     
    Derivative Requirements
     
    Once we have worked out the use case we can derive requirements from this. Let’s start with data elements… In the case of the above use-case we can identify the fact that we will need a user that has the following attributes:

    • User name
    • User level
    • Skill set(s)
    • Course(s) registered for
    • Course(s) history (assuming we want to keep track of what happens)
    • Language (if this is used internationally i.e. is he viewing this in English or does this apply to any local? )
    • Passport account
    • PUID
    • Partner
    • e-mail address

    So we now know that the system will need at least the ability to define the above elements and logically we can think of this as an object.
     
    As to the system, we know that we will need to have gold users be able to login via passport then search and finally register for events. From this we know that MSAP will need to use passport at some level, as well as have built in search functionality and registration functionality. In identifying these elements we also then know that we need to track these data elements as well in the system. So that means we need course information or a ‘course’ object that has search functionality and we need to be able to tie that into registration. An instance of registration would also then be associated to a user and to a course or event.
     
    From this point we are able to identify the basic groups of functionality as well as document data elements from just one use case. These become our derived requirements based on developed use cases.
     
    Building Specifications
     
    From these derived requirements we can also do flow diagrams and sequence diagrams for each use case and this feeds our design process by making it easier to come up with object models and sequences etc.
     
    To focus on specifications, we need to take from the original business requirements and data from our use cases and any requirements list to build functional specifications. Typically organizations have a template of sorts. Microsoft is no different with excellent templates that allow the collected data to be plugged in quickly and effectively. Use cases can be prioritized by this derivative process which in turn prioritizes the feature requirements. In our above use case, from the users stand point, the ability is needed to search and find classes and be able to register. If a user can’t do this then there would not be much point in the example software.
     
    Regardless of templates or other things a functional spec should include all the critical use-case stories or summaries, a feature list, prioritization of features, any external requirements or limitations, assumptions, critical data, issues/risks and a summary of the document.
     

  • Silverlight 1.1 and WCF

    We have a new Intern here that started here recently (Devin Brown) and we have him working on Silverlight so he can help with some of our up coming Silverlight projects.  One of the tasks was to demonstrate Silverlight 1.1 to WCF.  In this case we have a simple WCF Service library and we front this in a our web application by starting the service in the Global.asx so that the service is actually tied to the IIS application state of our web app.  So todo this we included the hose class and in the global asx we have a simple block that looks like this:


            protected void Application_Start(object sender, EventArgs e)
            {
                WcfHost.StartService();
            }

     This gets our service started and then the calls are fronted by an asmx in the same wbe application.  In the sample Devin did we have a number of bits but the important part is in the Silverlight code behind file (see 'Page.xaml.cs' )where we create a reference to the local web service and we call a method and place the output into a textblock in our xaml page.  quick, dirty and simple.  Good Job Devin.  See the attached project.

     

  • Blendables Popfly Silverlight Paypal Control

    The Blendables Paypal control allows you to bind an event in another block to the 'pay' method which will open the product up in the configured paypal account page to pay and order the item as configured.  One good use case might be to use a slideshow control that is pulling a set of product images from flickr and then when you click on them a paypal window opens.  In this case the user can build this mashup with 3 blocks without any programming.  How cool is that!

  • Blendables Silverlight Pie Chart Block

    The Pie Chart Control is your basic pie chart.  To use the popfly version you must have popfly access (http://www.popfly.ms/).  There are two methods on this control in the popfly version.  'AddSlices' is the simple method that uses most default settings and 'AddComplexSlices' which allows you to set even more settings such as the title or color fades etc.  Check it out on popfly.

    The control in general currently has the following underlying members:

     

    api details and members

    • Member: Height - The height of the control.
    • Member: Width - The width of the control.
    • Member: ChartType - determines the type of bar chart to render which can be one of the following: 1) Standard Bar Chart, 2) Line Bubble Chart, 3) Serif Vector Area Chart, 4) Burst Area Chart.
    • Member: Radius - the radius of the rendered chart.  if left 0 this will be calculated dynamically based on the chart size.
    • Member: ShowTitle - Sets and determines if the title should be rendered or not.
    • Member: Duration - The current duration of the animation being used.
    • Member: FontSize - The font size of the text used in the title label.
    • Member: FontFamily - The font family of the font used on the title (ex: Arial).
    • Member: FontWeight: The font weight used in the title.
    • Member: Title - A text label on the top of the control surface when rendered.
    • Member: TextColor - The color of the text in the title if the title is used.
    • Member: delimiter - The character used to delimit the freeze dried arrays.
    • Member: BackgroundImage - A background image for the chart.
    • Member: _ColorArray - The setable freeze dried array of colors for each slice.
    • Member: _ FadeArray - The setable freeze dried array of colors for each slice to fade to.
    • Member: _RawData - The setable freeze dried raw data array used to generate the chart.
    • Member: _URLs - The setable freeze dried slice url array used when a slice is clicked.
    • Member: Control (private) - Used to keep a reference to the Silverlight browser control.
    • Member: URLs (private) - The url array used by the slice mouse down event to launch windows if it is set.
    • Member: RootElement (private) - Used to keep a reference to the root xaml element.
    • Member: XAMLNameSpaces (private) - The silverlight name spaces used in dynamic xaml creation.
    • Member: ColorArray (private) - An array used to set what color each slice is.
    • Member: FadeArray (private) - An array used to set what color each slice should fade to.
    • Member: Data (private) - The array of each data point.
    • Member: DataTransformed (private) - this is an array of ints that are relative transforms of the intput data control points used to generate the slices on the fly.
    • Member: SlicePoints (private) -  Dynamically calculated
    • Member: PieChartName (private) - The name of the canvas that the slices are rendered into.
    • Member: ChartCanvasElement (private) - An object reference to the canvas that the slices are set to.
    • Member: Slices (private) - The array of points representing each slice.
    • Member: CenterX (private) - The center of the chart surface on the x axis.
    • Member: CenterY (private) - The center of the chart surface on the y axis.
    • Member: Sum (private) - All of the data points added together to calculate the 'SumFactorOfOne.
    • Member: SumFactorOfOne (private) - The multiplication factor used to determine the relative size of each data point used to generate the chart.  Generally you should not muck with this.
    • Member: FlipState (private) - used to track growing animation states.
    • Member: FlipStateUpValue (private) - Used to grow animation outs in the up direction for every other slice.
    • Member: FlipStateDownValue (private) - Used to shrink animation outs in the down direction for every other slice.
    • Method: public void AddSlices( RawData, ColorArray, FadeColorsArray, Title ) - sets basic chart data using core defaults.
    • Method: public void AddComplexSlices( RawData, ColorArray, FadeColorsArray, Title ) - [pending]
    • Method: private void handleLoad(control, userContext, rootElement) - constructor
    • Method: private int ItemCalculateSlicePointSin(SliceFactor, Angle) - internal math related.
    • Method: private int ItemCalculateSlicePointCos(SliceFactor, Angle) - internal math related.
    • Method: private void PresentChart() - renders the chart with current data set.
    • Method: private string BuildSlice( SliceName, Color, Start, RotationAngle, Arc, EndPoint, Color2, x, Radius ) - internal method used to build each slice XAML string.
    • Method: private void SliceEnter(sender) - event handler.
    • Method: private void SliceLeave(sender) - event handler.
    • Method: private void SliceMouseDown(sender) - event handler.
    • Method: private void AddToControl(ElementString) - adds element to control surface.
    • Method: private string GetTitleCanvas() - returns control title xaml.
    • Method: private string GetChartCanvas() - returns the control chart canvas xaml.
    • Method: private string GetBgImageCanvase() - returns the background image xaml if used.
    • Method: private string ReturnBackground( Name, Name1, Name2 ) - returns the background effect xaml if there is no background image.
    • Method: public void createSilverlightControl( Width, Height, Id ) - creates the Silverlight control.

     

    So here it is (remember this only works if you are using the Silverlight Beta 1.0):

     

  • Popfly Blocks Go Live - check out the BarGraph Silverlight Control

    Some time ago I wrote a number of popfly blocks for the popfly team.  They were release in the most recent build of popfly so I thought I would share them.  Look me up under my user name 'pieseczek' to see more of the blocks I have put together such as (paypal, eval, math, datetime, strawpole, bargraph, photoshow and more) But first is the BarGraph block.

    The popfly Bar Graph Control is a specific type of chart popfly block that can be used and bound to external data to generate a simple bar chart that can dynamicly generate a chart presentation with some animation and then can compiled and used in a popfly mash-up and placed on web pages.

     If you use the default version added to the collection it is pretty straight forward but if you really want todo cool stuff rip it to your own version and then edit it to set other things like the title etc. 

    Here is a short list of the underlying API's (control members) on the control you can mess with:

    api details and members

    • Member: Height – Height of control UI.
    • Member: Width – width of control UI.
    • Member: HeightChop (private) – should be calculated based on bottom size of the HTML embedded WPFe object.
    • Member: RootElement (private)  - The XAML DOM of the control.
    • Member: Title – text label at the top of the control UI.
    • Member: Footer – text label at the bottom of the control UI.
    • Member: ShowNumber – determines (either true of false) if numbers or labels are shown on above the bars.
    • Member: ShowBarLabels – determine if labels should be shown (either true or false).
    • Member: BackgroundImage – gives a path to a background image.  If left blank then the default background is used.
    • Member: TextColor – determines the color of the text used in labels.
    • Member: YAxisLabel – text for use on the y axis.
    • Member: Delimiter – Delimiter character expected separating insert data.
    • Member: DelimiterState – used for data input using the bar class.
    • Member: BarHoverColor – text value color code.
    • Member: BarClickColor – text value color code.
    • Member: FontFamily – font family for all labels and text.
    • Member: FontWeight – font weight for all labels and text.
    • Member: FontSize – font size for all labels and text.
    • Member: ControlCanvasName – name of the Canvas that is the chart control.
    • Member: AfterClickForeColor – color of text labels after a click event has occurred.
    • Member: LabelHighlightColor – color of text labels during a highlight operations.
    • Member: LabelDownClickColor – color of text labels when the mouse is down over the label.
    • Member: TestMode – determines if text data should be used.
    • Member: BarWidth (private) - Actual width of given bars.
    • Member: BarStart (private) – should be private.  Used to determine where the bars start on the canvas
    • Member: DataArray[] – actual data used or bound to
    • Member: _DataArray – freeze dried version of DataArray.
    • Member: DataEffectiveArray[] – conversion of DataArray used for UI generation
    • Member: ColorArray[] – array of colors for the bars to use.
    • Member: _ColorArray – freeze dried version of ColorArray.
    • Member: LinkArray[] – array of links or urls that each bar should goto.
    • Member: _LinkArray – freeze dried version of LinkArray.
    • Member: MaxFrameRate – setting on base object.
    • Member: AnimationSpeedRation – sets the speed ratio for all animations
    • Member: AnimationDuration – sets the duration for all chart render animations
    • Member: ShowRulerAnimation – determines if the ruler animation is used one chart rendering.
    • Member: XAML – is the path to the zaml file that has the control reference.
    • Member: ErrorHandler – used by the initialization function to set the top level WPFe error handler.
    • Event/Method: addBar( _bar ) – sets a data element onto the graph data stack of the control.
    • Event/Method: initialize() – used to set up the control for Springfield.
    • Event/Method: Constructor() – the graph constructor
    • Event/Method: RefreshChart() – redraws the chart with current data.
    • Event/Method: BarClick() – pulls the index of the bar to determine which url to launch..
    • Event/Method: LabelClick() – pulls the index of the bar to determine which url to launch and does visual changes to links to perform link effects.
    • Event/Method:  BarLabel( indexer, text, width, left, top ) – A private method that creates a zaml textblock object and adds it to the text canvas
    • Event/Method: SetTestData() – sets data arrays with test data.
    • Event/Method: RefreshData() – refreshs the data.
    • Event/Method: Ruler(Indexer, Factor) – draws a ruler line on the chart.
    • ReflectionBar( Indexer, FillerColor, BarXPostion, EffHeight ) – creates Zaml reflection bar object and adds to the control UI.
    • ElementBar( Indexer, FillerColor, BarXPostion, EffHeight ) – creates Zaml chart bar and adds it to the control UI.
  • Silverlight Media Player

    Working with the Silverlight media element probably has absorbed most of my time 'Silverlight' time the past couple of weeks.  And since we got community server to allow us to do popfly I thought I would put out a cool Media Player we built using Silverlight.  The backend is all JavaScript and the Xaml is all dynamically created.  This particular sample shows just about all the basics in Silverlight.  At the top we have a play list that animates in and out and you can scroll through it.  There is a play pause button in the middle and you have a small volume control.  Also when the control is downloading video their is a small bar at the bottom that animates across to the size you need.  Most of the complexity of the control is actually the fact it is implemented as a JavaScript object that dynamically writes out the entire control Xaml, manages all the events and sets all the properties so that the control can be used at any number of sizes.  Also I cut up this cool clip of Jared talking about the Identitymen Comic he worked on which is really cool as well.

     

  • VB.NET a Quicky...

    ok so one of our admins needed to do this complicated install batch file and asked for help.  After seeing the complexity of what they wanted todo I built this sample to show them how easy it is to use VB considering they already were doing some heavy duty VBS.  GASP, I know VB is a sin or something but thats what they knew so it makes it easier for them if I just show them how in VB.  So anyway this sample does all the basic admin stuff; ie: check registry, set reg settings, copy files, delete folders, kill processes etc.  It took all of 45 minutes and a few google search and poof  way easier then 15 batch files...

  • Embedding Popfly Silverlight Mashups in Community Server

    Simons article on embeding  Popfly silverlight in community server pretty much sums it up.  Basically you have to enable iframes.

    http://simonguest.com/blogs/smguest/archive/2007/05/23/Embedding-Silverlight-Videos-in-Community-Server.aspx

     

More Posts Next page »
© 2007 IdentityMine, Inc.
Powered by Community Server (Commercial Edition), by Telligent Systems