Silver Enlightenment

Generic Property Merge Using Reflection

2010-04-14T23:38:00.006-04:00

I have found this generic merge method to be very useful. Before you cut and paste it into you Silverlight application, let me explain why I created it.

public virtual bool MergeValues(object oSource, bool bNotifyUI)
{
    bool bSucess = true;
    foreach (var oPropInfo in oSource.GetType().GetProperties())
    {
        if (!oPropInfo.CanRead  !oPropInfo.CanWrite  oPropInfo.Name == "Item")
            continue;
        var oResult = oPropInfo.GetValue(oSource, null);
        if (oResult != oPropInfo.GetValue(this, null))
            try
            {
                oPropInfo.SetValue(this, oResult, null);
                if (bNotifyUI)
                    NotifyOfPropertyChange(oPropInfo.Name);
            }
            catch
            {
                bSucess = false;
            }
    }
    return bSucess;
}

Once Silverlight binds a property to a XAML element, your program will perform a lot better if you just change the value rather then rebind to a new object. I have not done any detailed timing tests, but by using this code in a before / after way you can “feel” that this is faster.

I know there is a performance cost when you access a property via reflection, but I am willing to pay that cost to have a solution that is VERY reliable.

By defining this method as virtual you are able to override to build a version that performs better, for example:

public override bool MergeValues(object oSource, bool bNotifyUI)
{
    bool bSucess = true;
    Person oPerson = oSource as Person;
    this.ID = oPerson.ID;
    this.FirstName = oPerson.FirstName;
    this.MiddleName = oPerson.MiddleName;
    this.LastName = oPerson.LastName;
    this.MostRecentFlight = oPerson.MostRecentFlight;
    return bSucess;
}

But this solution is not as reliable and requires me to change the code every time I modify the properties in this class.

Feel free to cut, paste and modify this code to meet your own coding objectives.

NCAA Brackets in Silverlight

2010-03-21T11:57:00.005-04:00

The developers at a company we were working with put out a challenge -- can you write software to pick the brackets in the NCAA basketball tournament? The answer is you can and 6 of us did. Our solutions range from random number generators to multivariate stepwise regressions. We did the multivariate stepwise regression.

I created a Silverlight application to display the results; that is, Debra designed the application and I did the software. The code is posted to codeplex here, and you can see our picks at http://www.mysilverisland.com/NCAA.

The code is very object oriented and uses a direct approach to pushing the data into the view. No MV-VM was necessary, but that was because of the nature of the solution. This application simply creates a report of our picks, and the picks are shoved into the brackets using a "plug and chug" technique of matching textbox names with ID's in a collection.

I think this code may be useful for other developers who need to manage a tournament.

You can get the source code on codeplex:

http://ncaabasketball.codeplex.com/

Another Way to Think about Code Reuse

2010-02-25T21:56:00.002-05:00

Anyone who practices Object Oriented Programming has a lot of different ways to reuse code. The most common way is to use inheritance, but recently I have been reusing code in an unconventional way.

Whenever I create a class I follow a strict convention on naming properties. Here is an example:

 public class Movie
{
    public string Title { get; set; }
    public List<People> Actors { get; set; }
 
    public DateTime ReleaseDate { get; set; }
    public double MoneyEarnedToDate { get; set; }
 
    public string Producer { get; set; }
    public string Genre { get; set; }
}
 

CamelCase is the convention I use to define every property. I always use complete words and never use abbreviations. I do not use underscores in public properties. I stick to this convention because it lets me extract Meta data from the class while it is in use and can be used to simplify coding of the UI.

 public class CustomGrid : DataGrid 
{
    public CustomGrid()
        : base()
    {
        AutoGenerateColumns = true;
        AutoGeneratingColumn += new EventHandler<DataGridAutoGeneratingColumnEventArgs>(OnAutoGeneratingColumn);
    }
 
    void OnAutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
    {
        string sHeader = e.Column.Header.ToString();
        e.Column.Header = CamelToTitleCase(sHeader);
    }
 
    public string CamelToTitleCase(string Text)
    {
        Text = Text.Substring(0, 1).ToUpper() + Text.Substring(1);
        return Regex.Replace(Text, @"(\B[A-Z])", @" $1");
    }
 
}
 

Via inheritance I can customize the standard Silverlight DataGrid to automatically generate columns for whatever class is bound to it. I sign up for the OnAutoGeneratingColumn event so I can rename the column headings. The function CamelToTitleCase will automatically insert spaces before each capitol letter, so the property ReleaseDate becomes the header Release Date and the property MoneyEarnedToDate becomes Money Earned To Date

So is using a coding convention really code reuse or is it more like asset repurposing? I have learned that having a convention makes my code easier to read and debug. It also leads to even more advanced techniques I will share in later blogs.

Know Your Parents and Grandparents

2010-02-15T05:32:00.005-05:00

In programming Silverlight I have come across situations where a control or framework element needs to access information on its parent. The code to get information off your direct parent is simple:

             var oContent = this.Parent.ReadLocalValue(Content);
 

for example.

The real power of Silverlight is in the declarative nesting of XAML elements, and that means that the type of your direct parent may not always be known. To clarify, if you drop a control on a Page, then the Page object will be your parent. However if you then wrap your control in a ScrollViewer, the ScrollViewer becomes your parent and the Page becomes your grandparent.

To avoid all these issues I include the following code in most of my Silverlight projects:

         public virtual T ParentOfType<T>() where T : FrameworkElement
        {
            Type oType = typeof(T);
            var oParent = Parent as FrameworkElement;
            while (oParent != null)
            {
                if (oType.IsInstanceOfType(oParent))
                    return oParent as T;
 
                if (oParent.GetType() == oType)
                    return oParent as T;
 
                oParent = oParent.Parent as FrameworkElement;
            }
            return null;
        }
 

Recently I needed to access the Navigation Service that is part of a Silverlight Page object. Using the method above I wrote this code to access the service:

         void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            var oPage = ParentOfType<Page>();
 
 
            if ( oPage != null )
                oPage.NavigationService.Navigate(new Uri(NavigateUri, UriKind.RelativeOrAbsolute));
        }
 

Now regardless where this control is placed in the XAML, the Navigation Service will execute correctly.

What I Learned at PDC - Microsoft Tools

2010-01-25T14:14:00.001-05:00

Visual Studio 2010 (VS210) is the latest version of the software development platform. It is also the first version to be written entirely in .NET managed code. It also uses MEF to manage extensibility and WPF to implement all the UI and code editing tools. Microsoft also offers a development environment for GUI and web designers call Expression Blend. Blend and VS2010 share the same project file format so projects can be shared between developers and designers easily.

Developers, you should know that every demo at PDC was done using VS2010 and there are lots of sessions that dive into the new features. An existing but little used VS2010 feature (that may go as far back as the very first VS) is T4 templates. These are code generation templates that developers can customize to pragmatically create code. Scott Hanselman show this technique at 20 minutes into his talk FT59: ASP.NET MVC 2: Ninjas Still on Fire Black Belt Tips.

Designers, VS2010 also includes a design surface to help developers create GUI in WPF/XAML. It works well for simple GUI composition, but is not good for real creative work. Blend is the tool of choice for creating GUI with animations or custom controls that use Virtual State Manager.

For non-developers, there are only 2 things you need to know about this tool:

1) VS2010 can generate code for any version of the .NET framework in existence; this feature is called multi-target deployment. Developers can port their projects to VS2010 without being forced to upgrade to a specific version of .NET. By simply flipping a compiler switch, you can retarget your application to take advantage of later versions of .NET. I have tried this on software I wrote for .NET 1.1 and it works great. It runs in .NET 3.5 and 4.0 without any issues.

2) In building VS2010, Microsoft’s main focus was developer productivity. I have found that I was immediately productive with VS2010 and took advantage of many of the new features, like a visual form builder for Silverlight applications, intuitively.

Bottom Line: developers should install and start working with VS 2010 right away. Simple new features, like being able to open VS2010 windows on multiple separate monitors, will improve developer productivity or at least reduce programmer fatigue. Also check out CL09: How Microsoft Visual Studio 2010 Was Built with WPF 4 to see how Microsoft uses their own technology to build their own products. This talk also shows a tool named Snoop that lets you see all the layers of the WPF tree being rendered: Snoop.

Quality Assurance, Testing, Performance and Source Code Control

These tools make the difference between hacking out code and developing software professionally. I have an interest in all these tools but they are not my primary focus, so here is a quick list of the sessions I attended or watched and my comments.

CL25: Become a Web Debugging Virtuoso with Fiddler: If you are building / testing / debugging web applications, Fiddler is a tool that can let you see communication between your web browser and the server. This talks show how that and other features of Fiddler can help you create web applications.

CL32: Developing Testable Silverlight Applications: This talks shows, in detail, how to build automated unit tests for Silverlight applications that can mimic user interaction. It also shows how you can write applications that are more testable by using the MV-VM pattern.

FT35: Microsoft Visual C# IDE Tips and Tricks: Learn some productivity tips that are new in VS2010. Learn how to get a deeper insight into your code and improve your speed to solution. DJ Park proves it by racing the clock to generate code, a must-see event 43 minutes in. Also check out CodeRush Xpress for C# . It is a free refactoring tool that lets you move around bodies of C# code while preserving the coding intent. Also check out the Architecture Explorer in VS2010, 13 minutes into the talk.

FT54: Power Tools for Debugging: Debugging is hard; VS2010 has some new debugging tools like Intellitrace to make it easier. But this talk is mainly about research into future debugging tools. They show a Holmes, a statistical debugger that can find a correlation between code paths and test failures.

What I Learned at PDC - .NET Platform and Extensions (continued)

2010-01-20T14:03:00.001-05:00

Composition Manager (MEF) and Construction Manager (Prism)

The Microsoft Patterns and Practices team have built software libraries to help large teams develop large applications. It turns out that these techniques also work well in any application.

MEF stands for Managed Extensibility Framework. This is a technology designed to introduce extensibility points (like Office or web browser plug-ins) into your application. Developing with extensibility in mind lets you think of your application as a platform and can simplify your other development efforts. A well componentized application can be extended after it is deployed by third parties that have special or advanced needs. The technique can foster an ecosystem around the original application, letting others open new markets for your original solution. Glenn Block has a hand in creating MEF and Prism: FT24: Building Extensible Rich Internet Applications with the Managed Extensibility Framework . Listen to the first 5 minutes to understand the problem MEF is solving. Projects can be extended by MEF after initial development, but it is best to think about extension points as you go. Watch the demos first, then circle back to get see how it is done. I love the demo he does 45 minutes into the talk. It shows how MEF can be used to control feature access and deliver functionality on demand. At 50 minutes in you can see a series of demos that have real world application.

Extensibility can also be a competitive advantage. If you expose your application by exposing data services, you may be fostering competition from others to build their own client. Providing extensibility in your own client lets would-be competitors become partners by building extensions that use your data services client plug-ins. A step by step demo on adding MEF to your application is done my Mike Taulty, whom I also had a chance to meet.
Prism is not an acronym for anything -- it is a collection of technology services and constructs that promote loose coupling of software components by introducing a series of “management” object classes. Prism is not really a Microsoft product, so it does not get the marketing push, but anyone who was discussing a rich client application talked about using Prism.

The best guide I have heard, hands down, on Prism is from my friend Eric Mork: Prism Development Guides and Videos. If you follow this link, also sign up for his podcast where he talks technology with many of the experts in the Silverlight community. The commanding feature of Prism is now unnecessary with the addition of ICommand in Silverlight.

What I Learned at PDC - .NET Platform and Extensions

2010-01-15T13:45:00.004-05:00

In the late 90’s, the general consensus was that the Microsoft programming model was losing ground to JAVA. At that time, every product that Microsoft offered was COM(Component Object Model) based. And every language Microsoft offered produced COM programs. The COM programming model generated machine instructions targeted at the native instruction set of the CPU. JAVA, on the other hand, provided a virtual machine environment, so compiled JAVA code targeted the instruction set of the virtual machine (VM), which is an abstract CPU. JAVA was able to use its VM implementation to create the catch phrase “write once, run anywhere”, because all that was needed to execute your JAVA program on any OS, platform or device was an implementation of the JAVA VM. There was no need to recompile your JAVA code in order to run it on a new target machine, and as a result there was no need to created install programs to set up the target machine. ‘X-COPY deployment’ become another catch phrase because all you needed to do to install and run a JAVA program was to copy the binaries to a folder on the target machine and say run!

In early 2000 Microsoft released .NET, its own VM based programming environment. At the time, Steve Balmer described .NET as a corporate strategy, programming environment and a marketing campaign. All programming languages implemented in .NET (VB, C#, C++) would emit the same instruction set and target the VM. This makes is possible to easily create applications that mix languages. .NET also makes it possible to call into programs written in the older COM technology through a process called ‘interop’.

Throughout this decade Microsoft has been improving the .NET platform. Two new technologies that emerged in .NET were WPF (Windows Presentation Foundation) and WCF (Windows Communication Foundation). These technologies are the core components used for GUI and networking.

So what is new and improved in the .NET platform? Everything, starting with .NET itself.

The latest version of .NET is .NET 4.0. It should be noted that many of the productivity frameworks come in the box as part of the .NET 4.0 platform, and have also been back-ported to .NET 3.0 and VS2080 SP1. Many are also open source.

Language and Modeling Tools
.NET Framework (POCO, LINQ, Rx, IDynamic ) : it all starts with improvements to the .NET framework. POCO is an acronym for Plain Old CLR Objects (CLR is Common Language Runtime), and although POCO has been around since .NET 1.0, Microsoft is favoring this type of detailed definition for data binding and transportation over the existing classes like DataSet, DataTable & DataRow. I think it is because they work better with LINQ (Language Integrated Query).

LINQ is a fabulous technology (Wikipedia: Language Integrated Query) for lots of reasons. One of the most important, from a developer’s point of view, is that it reduces the interaction with any .NET data source (SQL, XML, CSV…) into a single syntax.

Rx, or Reactive Framework, was one of the surprises of PDC, and I did not even discover it until after the conference, online. The LINQ model is to pull data from a data source, where the Rx model reacts to changes in the data source and sends you a notification. The session VTL04: Rx: Reactive Extensions for .NET explains how it works. Eric Meijer leads the talk and he always wears a tie-dyed shirt, always.

IDyamic is the feature / interface I have been waiting for since the PDC08 demos. Dynamic languages defer compile type checking to runtime and in many cases this is very useful. Popular languages like Ruby (on Rails) use this technique exclusively. This, in conjunction with the DLR (Dynamic Language Runtime), will make is possible to extend the syntax of any .NET language. It offers better interop with COM based software, like Office and VB6. The DLR is also a major component for languages like Iron Ruby and Iron Python. Mads Torgerson gives a solid talk on the development history: FT31: Dynamic Binding in C# 4. Luck Bolognese gives a talk that shows using the technology: FT11: Future Directions for C# and Visual Basic.

Adding dynamic characteristics to existing languages follows the theme of programming in a declarative style instead of an imperative style.

I will finish this topic in my next post on PDC, where I will talk about MEF and Prism...

What I Learned from PDC - Server Technologies

2010-01-10T13:26:00.002-05:00

The server is a provider of a set of services to support the client and the domain. The server is hosted on a machine that could be anywhere on the internet or on the same machine as the client. There are also a lot of applications (like Microsoft Office, video games) where the client (GUI) / server (Services) are integrated into one common executable. Think of a Server as software that is providing a set of services to many clients. Cloud computing has changed the notion that a Server as a physical machine on the internet -- that type of thinking makes it hard to grasp the ideas to come. Envision a server as a provider of a set of services -- authentication, billing, data retrieval and persistence, document management, 24/7 availability, scalability, compute power, social connection and interaction – and you will begin to understand why the industry is calling Cloud Computing the next step in the industry.

Data Services: It is about bridging data across the web between clients and servers. Data Services package data into RESTful style services that transport data to client applications via structured, parse-able text feeds in Atom (XML) or Json format. They also provide data access business logic that can be used to restrict data operations (CRUD). The foundation of all these services is called Windows Communication Foundation (WCF) and from this technology branches all the data related technologies like WCF Data Services, RIA Data Services, and OData.

Talking Points: Pablo Castro shows a Json / JQuery demo (at 20 min in) that has the browser providing the data proxy; at 34 minutes in is a data service server construction demo: FT12: ADO.NET Data Services: What’s new with the RESTful data services framework. You can also see, live, the limits of JavaScript debugging tools.

Data Abstraction: In modern .NET applications nobody programs SQL statements directly against the database. Instead, developers use tools like Entity Framework, n-hibernate or IdeaBlade to build an object based data abstraction layer. The abstraction layer simplifies the code that provides data operations CRUD and protects your applications from changes in the underlying database table and column structures (schema) that is necessary for physical storage and performance. This layer also provides metadata about the data source, which make it possible to create tooling to generate code and documentation from an empty data source. I think that all modern .NET software should take advantage of a data abstraction layer.

Talking Points: FT10: Evolving ADO.NET Entity Framework in .NET 4 and Beyond. I love this talk; it is all demos that show how Microsoft is listening to developers and tuning the Entity Framework to address real world development issues. Don Box and Chris Anderson show in Data Programming and Modeling for the Microsoft .NET Developer that you can create a database from the model or from code. It is worth watching.

Data Storage: Microsoft’s enterprise solution for relational data storage is SQL Server 2008. However data can be stored and accessed in other data providers like XML or the file system. If your application has more that one database (maybe resulting from the need to run disconnected), synchronization is going to be one of your largest problems. Luckily there is an app for that: Microsoft Sync Framework.

Talking Points: Mark Scurrell’s talk SV23: Using the Microsoft Sync Framework to Connect Apps to the Cloud is loaded with demos that show database synchronization in action, and very little code is involved.

Isolated Storage vs. Client Resource Access

Thin clients use HTTP cookies to store information on the client. This small bit of text is stored somewhere in your local hard drive, deep in the file system. Browsers are known for running their applications in a sandbox. This is used to promote secure operation of untrusted programs. The sandbox constraint is also true for rich client plug-ins . They run in a sandbox and have no access to client resources until the user gives permission. Silverlight applications have access to a larger storage area (1 MB , with the user’s permission) referred to as isolated storage. The isolated storage area can be used to store configuration information and user setting preferences. It can also be used to cache local record sets, making it possible to work in a disconnected mode.

A Silverlight application, with the user’s permission, can be installed to the desktop from the browser with a single mouse click and run in full trust or out-of-browser mode. With elevated trust, the Silverlight application can now access all your client resources and function as a thick client. Some of the more common scenarios here are to access COM software components (Microsoft Office, VB 6 Programs) and read and write to the local file system.

To really understand the ease of programming Out Of Browser (OOB) applications and the power of having the same code function as thin client and thick client, watch Joe Stegman’s talk CL20: Improving and Extending the Sandbox with Microsoft Silverlight 4.

What I Learned from PDC - Domain Technologies (continued)

2009-12-26T13:01:00.001-05:00

Controller Model: All the commanding and navigation instructions are implemented at this level. Think of this layer as reacting to menu clicks, hyperlinks or changes of URL address. The controller is one of the central models in ASP.NET MVC (Model View Controller) and in a good implementation will defer many of the control logic decisions to the domain model. In ASP.NET MVC, the controller is used to return a view based on an action, and will typically consult the model to do so. In other applications the controller is not as pronounced, however there are usually classes that expose functions to act as command targets.

Talking Points: Exposing ICommand for Silverlight has simplified the implementation of a control pattern. Best examples using the controller pattern are FT59: ASP.NET MVC 2: Ninjas Still on Fire Black Belt Tips by Scott Hanselman, FT22: Microsoft ASP.NET MVC 2: The New Stuff by Stephen Walther, CL22: Advanced Topics for Building Large-Scale Applications with Microsoft Silverlight by John Papa and CL21: Building Amazing Business Applications with Microsoft Silverlight and Microsoft .NET RIA Services by Brad Abrams. None of these talks show you how to build a controller, but they all use an MVC pattern to build their application.

Data Proxy: The Data Proxy layer is a service oriented architecture (SOA) where the communication is with a data source. There is no limit to the data proxies in this layer. In fact there is no limit to the number services your domain can subscribe or publish to. Proxies can be generated automatically by querying metadata about the WCF service. Proxies are class based representations that model the WCF services API. The abstraction is so good, you are hardly aware that you are using a service on a remote server as you program. Proxies can be generated for anything that has a communication contract. The contract is typically expressed in metadata and there are tools for translating the metadata into code that implements the contract explicitly.

This layer is all about communication. The pictures above were taken from Yavor Georgiev’s talk: CL06: Networking and Web Services in Silverlight. The first picture shows the technology layers that .NET WCF provides. The programming model is built over a TCP/IP based protocol. The second picture shows the spectrum of communication applications. Yavor discusses the interaction between communication and different types of applications, from transactional data systems to multicast video systems. Generally speaking, WCF RIA services is the Microsoft technology of choice for building Silverlight rich clients and there are several talks showing this.

Talking Points: See FT12: ADO.NET Data Services: What’s new with the RESTful data services framework Pablo Castro’s client demo (at 44 min in). For an intro to RIA services: CL21: Building Amazing Business Applications with Microsoft Silverlight and Microsoft .NET RIA Services with Brad Abrams. You can tell from this talk the Microsoft is shaping this technology to create Line of Business CRUD applications. You can dive below the surface with CL07: Mastering Microsoft .NET RIA Services.

What I Learned from PDC - Domain Technologies

2009-12-22T12:42:00.004-05:00

The domain is the brain or personality of the application and is usually built with the help of a Subject Matter Expert (SME).

I like to think of the domain as having the real knowledge of the application and the Client and Server components as providing input/output services. Think of the case where a text box control is doing input validation. The code in the control can be kept simple, it just needs to verify that the text typed in by the user conforms to a validation rule, and if it does not, display some type of message.

An implementation that binds the control to a text string might also execute validation logic in the On-Click code behind method. An implementation that binds the control to a property lets the code in the control stay generic, and keeps all the validation logic in the domain model where it can be easily maintained. This separation of concerns is the ‘S’ of the ‘SOLID’ design principle and you can learn about the other components (OLID) here.

When you create a domain model that uses the vocabulary of your SME, and solves problems using the processes the SME would use, then the rest of the application becomes easier to build. The Client and Server layers become tools to visualize your domain model or persist your domain model.

Domain Model: The Domain Model executes the formal business logic and should be the primary location for all the application state transition rules. Very few talks have time to develop a Domain Model, however if you watch talks that focus on language features, LINQ, Rx or parallel computing they are full of examples showing how domain modeling is becoming more declarative and less imperative. That is, software design is evolving into describing what you need the computer to do instead of traditionally telling the computer how to do it. .NET is evolving to merge dynamic, functional and object oriented programming models into the platform. The declarative slant in coding allows the .NET platform to make decisions about how to execute the code at runtime, to take advantage of system resources like multiple CPUs or resources in the Cloud.

Talking Points: Microsoft talks do not focus on the domain model at all. The only talk I found that fits the definition is Cl36: Deep Dive on Bing Maps Silverlight Control because it focuses on the domain of mapping, however the domain is so well defined it is delivered as a GUI control and a service. Instead look to the language features to help you model your domain: FT11: Future Directions for C# and Visual Basic. Developers should be aware of a new (or maybe very old if you know LISP) way of programming FT20: F# for Parallel and Asynchronous Programming , languages for Data Modeling FT34: Microsoft Project Code Name “M”: The Data and Modeling Language, Parallel Computing Platform: P09: Manycore and the Microsoft .NET Framework 4: A Match Made in Microsoft Visual Studio 2010 and Erik Meijer VTL04: Rx: Reactive Extensions for .NET. Rx technology was the language innovation of the show. Learn about Rx in 15 min here.

I will cover the Controller Model and Data Proxy in the next post.

What I Learned from PDC - Client Technologies

2009-12-18T11:44:00.004-05:00

Client Technologies

There are many different client side technologies in the Microsoft ecosystem, and each has evolved to meet niche markets and end user needs, including video game, business apps, reports, and web page browsing. The defining technology of the client is probably how the view is rendered and the device’s ability to interact with that rendering.

View Rendering: Microsoft provides two different solutions for rendering a GUI: the thin client solution is HTML/JavaScript rendered inside a web browser, the rich client solution is XAML, which can be rendered in a web browser via a Silverlight plug-in, or as part of a thick client application using WPF. So XAML is dual purpose with the caveat that the end user must install the Silverlight plug-in (5 MB, 30 second, one time operation, just like Flash). Simple HTML has more range, because it runs in any browser, but when you start adding CSS and JQuery libraries (and other fancy things) you begin to limit yourself to a subset of browsers, IE7,IE8,Firefox,… again if you can control your target, this is not a problem. The Silverlight plug-in is designed to remove browser incompatibilities and create a UI that is “run anywhere” including Mac and Linux.

Talking Points: FT29: Microsoft AJAX Library, jQuery, and Microsoft Visual Studio 2010 Stephen Walther, shows how to build thin HTML clients with a new open source AJAX library, including 40 client controls, Open Source.

View Model: The purpose of a View Model is to shape your domain model to a view rendering technology. You must manage the interaction controls, events, value conversion, input validation, and general state of the GUI controls rendering using this model. In WPF/Silverlight, the View Model provides a site to bind the UI to the domain model. Sometimes perceived as additional work by programmers, the decoupling of the view from the domain model actually simplifies the implementation of the client GUI by providing a site for view logic that is independent of the domain. Some good examples are multi-lingual UI’s, currency conversion, hiding sections based on roles, and changing screen presentations based on task, expertise or device size. This separation also makes the application much more testable using an automated test suite.

Talking Points: Newly added ICommand support was the final step in making the view rendering and the view model truly independent and testable. Some Silverlight talks that discuss View Models are Cl19: Building Line of Business Applications with Microsoft Silverlight 4 and John Papa’s talk Cl22: Advanced Topics for Building Large-Scale Applications with Microsoft Silverlight

What I Learned from PDC - Service Oriented Architecture

2009-12-05T11:36:00.002-05:00

Mapping Functionality into Abstract Software Components

Each of the presentations at PDC are designed to discuss some aspect of Microsoft’s packaged technology: ASP.NET, SQL Server, Silverlight, Entity Framework, LINQ & PLINQ, MVC, WPF, WCF Data service, Azure, … Windows 7. In every case, the presentations show code samples on how to use that technology, and in the process they casually introduce some abstract software architecture concept (View Models, Data Proxies, Domain Models…) to help illustrate the technology.

Application Depth

I have extracted the software concepts from all those talks and constructed an application depth stack that maps these functional requirements to software layers. These layers combine the “best practices” in software design from ASP.NET MVC, WPF & Silverlight applications and also include technologies that are common to all solutions like WCF Data Services, SQL Server and Entity Framework. The software component names are not official and the code boundaries between them in many cases are not precise, but they are useful in categorizing the Microsoft technologies that are used to construct and execute each layer.

Client, Domain and Server Models

I broke the sections up into Client, Domain, and Server. The Domain section can execute on the client or the server. When deployed as a thin client, the Domain logic is executed on the Server, but when deployed as a rich client the Domain executes on the Client and helps manage State. Server components are traditional data access services. Using data services is now Microsoft’s preferred way of connecting to data. Data services use simple web protocols to request and transport data even if you are consuming data on the same machine as the client. The service can be accessed just by passing a URL. Data access is provided using proxy service “wrappers” that provide an API by ingesting the META data about the service. These are the building blocks of a Service Oriented Architecture (SOA).

Best Practices? For My Purposes They Are!

I am not saying that each of these abstract software components need to physically exist in order for you to have a well designed or valid .NET application. Most CRUDS database solutions (Create, Read, Update, Delete, Search) are put together in a forms-over-data software architecture and do not implement all of these components. I am saying that during the design/development phase of a solution, I believe that the most developers should at least think about these functional areas, even if it is just to dismiss them as unnecessary.

What I Learned from PDC - Thick, Thin and Rich Clients

2009-11-30T11:23:00.003-05:00

These three paradigms of application deployment try to optimize between application reach and application experience.

Thick Clients

Thick clients have easy access to client resources (file system, local databases, USB ports, and peripherals). They are also characterized by running their code on the local CPU. Thick clients do not need to be connected to the internet to run, but they can be connected to resources on the internet. Using local resources and memory allows them to be ‘stateful’, which means the application can easily remember the actions of the user as the user progresses. Behavior like dynamically enabling menus, progressing through a wizard dialog or cut/copy & paste are examples of statefullness. Microsoft provides 2 technologies to create thick client applications: Winforms (Win32 & GDI) and WPF.

Thin Clients

‘Thin client’ was the original name given to web browser based applications. This paradigm has all the code executing on the server, and the code is designed to deliver information to a web browser (HTML and JavaScript), and the browser will render the information as a web page. Microsoft markets ASP.NET and ASP.NET MVC as platforms that deliver thin client solutions. These applications have achieved wide popularity because of their reach -- anyone with a browser and an internet connection can access this information -- regardless of the hardware or operating system. Developing richness in these applications requires the use of Cascading Style Sheets (CSS), Ajax, JQuery and JavaScript.

Browser based applications are not really stateful on the client (with the exception of cookies and session tokens), so with each user interaction, the local HTML, stored in the browser’s in-memory Document Object Model (DOM), is modified or refreshed dynamically. Ajax and JQuery are technologies used to modify the contents of the DOM (letting it refresh the screen after the change) and can be used to create some amazing GUIs that rival thick client applications. Thin clients have two weaknesses:
1. For security reasons, they are forced to run in the browser’s “sandbox”, which limits access to local system resources.
2. Building a rich GUI is difficult, and making that GUI testable is extremely difficult.

Based on my conversations at PDC, I found that programmers who quickly adopt the Ajax / JQuery route to provide richness have spent years creating UIs by programming JavaScript or HTML in ASP.NET applications. These technologies naturally fit into their way of thinking and their existing knowledge and experience.

I have seen solutions that deploy thin client / server applications onto a single box to try and get the advantages of the thick client. This can be done by using a Web Server (like IIS) and works well in applications that do NOT need to access local machine resources. This approach has difficulty synchronizing with a data source on the web. Integrating to local resources from the browser “sandbox” eventually requires some sort of browser plug-in that the end user trusts and has given permission to access the resources.

Rich Clients

Rich client applications, and Silverlight in particular, try to blend what is best about thick and thin clients. Microsoft accomplishes this by making Silverlight a 5 MB subset of the .NET platform, optimized to run on any OS (Windows, Mac, Linux) instead of targeting any particular browser. Silverlight is delivered to the browser as a plug-in (similar to Flash or Adobe Reader) and can use the browser’s resources and DOM.

Applications written using Silverlight can also be installed on the desktop and access local machine resources. So, like thick client solutions, rich clients run code locally and offer GUI features like drag/drop, animation, threading, and statefulness. They can also run connected or disconnected and can access local resources. Like thin client solutions, rich clients are accessible via a web browser, deliverable without a separate install, can detect newer versions and update automatically. Silverlight has the advantage of using the same programming environment as the server. This is VERY important.

As a developer, what I really like about Silverlight is that you can use the same code regardless if it is running in a browser or on the desktop. All the development can be done in WPF (XAML) and C#, so I do not need to be expert in a lot of different authoring technologies. Having the common .NET platform on both the client and the server makes it easier for me to optimize the solution’s performance just by moving code between the client project and the server project. Silverlight is aware of where it is running, which makes it easier to add and remove application features at runtime by querying the environment dynamically and not having to trust that the user installed the correct version. Lastly, the entire solution, from GUI to database access, can have a built-in automated test suite to assure quality and performance.

Asynchronous vs. Synchronous Communication

Asynchronous and synchronous communications are shown in boxes on the diagram. Silverlight enforces an asynchronous communications model when communicating with the server. That is to say that GUI interaction is not blocked when you are loading data or web pages. So while the user is performing tasks like navigation or mouse over, in the background Silverlight can be running calculations, doing analysis, loading data or any other programming task. Thin client solutions, including ASP.NET MVC, tend to run in a synchronous manner, which is where the user performs some action, the request is passed to the server, then the server sends a page of information back to the client, and the browser re-renders the page. Ajax and JQuery allow the application to send requests to the server that re-render sections of the page, but you cannot interact with those sections while they are ‘waiting’ for information. Microsoft introduced GUI controls that allow the Silverlight UI to behave synchronously by showing a progress bar and blocking user interaction. Blocking has it uses, but to me this feels like a step backward.

The challenge is to design UIs that are still functional while waiting for data. Think of iTunes - while songs are downloading, iTunes does not prevent you from accessing all of its features. Building a good GUI that blends the menu / work-area paradigm of the desktop with the hyperlink / URL navigation of the web is very tricky. Users can get focused on the details so quickly (colors and styles) that the things that make a very useable GUI, (layout, workflow, transitions and statefulness) do not get detailed consideration until after deployment.

What I Learned from PDC - An Overview

2009-11-25T10:52:00.003-05:00

I attended MIX07, PDC07, MIX08, PDC08, and MIX09 online, so I have been following the Microsoft technical narrative for the last 3 years. I attended PDC09 live. One of my goals was to organize the technical narrative, which is normally presented product / technology centric into the components of a single application centric model.

For the past decade, my customers were looking for applications that offered the best of all experiences. Because they were unconstrained by technology in their thinking, they asked for features that were an amalgam of Web, Phone and Desktop applications, their ‘ideal’ application. I have been looking for a set of technologies that can deliver all these features from a single code base. I could see Microsoft was approaching such a solution, and at PDC09 many of these pieces came together. I created a diagram to help navigate the changing face of Microsoft technology in the light of customers’ Web/Desktop visions.

If you find this diagram hard to read, don't worry -- it will be broken down into readable pieces in the blog posts that follow.

The ‘ideal’ application in my customers’ eyes can run over the web, or run disconnected on a laptop without changing the GUI or user experience. Being connected to the internet should only be necessary to read or share data, but not a requirement to complete work. It should also be able to run on nearly any device with any screen size, a server, desktop, laptop, or a phone. Software components must be agnostic of where they are running (client or server) and cannot duplicate logic. The software community describes this style of application as Line of Business (LOB) apps; I do not like the term but it looks like it is getting a lot of traction on the web. Two archetypes for this LOB style of application are a traveling salesman and a soldier deployed in Afghanistan.

The diagram above is used to map the Microsoft technologies to support the LOB application. Not everything discussed at PDC09 has a place in this mapping, but I think you can get more out of the talks if you keep this diagram in mind while you pick and choose among the talks. The diagram shows, on the left side, the breath and depth of an application, on the right side, the technology and tooling available to construct, maintain and deploy the application. The functional layer (vertically down the center) was extracted from and reinforced by many of the PDC talks.

A well designed end-to-end .NET application will account for all of these functional layers in each of the technology stacks. As developers (and users), we can see the value in a software architecture that includes GUI, Client/Server side validation, Logic and Rules, Command/Navigation control, Data services, Networking, Object Relation Mapping, and Persistence.

Vertically the diagram shows a progression from End User to Application Hosting, via a set of functional requirements (Functional Layer). Horizontally, there is a set of four technology stacks, each with a unique perspective on building software.
Horizontally I have juxtaposed 4 diagrams each focusing on a different aspect of the software development process -- breadth, depth, platform, and tooling. Here are some working definitions:
•Breadth: who is the audience and how do I reach them, how do they plan to access my solution?
•Depth: what tasks do my users do and under what conditions, how do I make the application easy to use?
•Platform: what are the technologies I can use to build a deployable, maintainable, extensible solution, successfully using the skills of my development staff?
•Tooling: what are the tools available to assure that I am producing the solution efficiently and correctly?

My goal is to explore the subset of the Microsoft technologies presented at PDC in the context of building a solution that can run thinly over the web, or disconnected as a thick client reusing as much code and common technologies / tooling as possible. The result should be a road map of the essential Microsoft technologies you should be aware of in order to build a modern .NET client/server application.

M-V-VM Product Configuration

2009-08-31T09:16:00.008-04:00

Deb and I have created many solutions that support sales or engineering efforts. Each application is a little different, driven by the unique aspects of the product we are selling/designing. We have built systems to sell cars, to quote multi-million dollar communications infrastructure projects, to design chemical plants and gear boxes.

You do enough of these applications and you start to see a software design pattern. You also realize just how important the role of the subject matter expert is in helping you create a successful application.

Our first Silverlight product configuration solution is a Cookie Designer. With a lifetime of experience eating cookies and a trip to the store to read the packaging, I now consider myself a subject matter expert. You can test drive the program HERE.

The Cookie Designer is an entry in the Summer Silverlight Coding Competition -- please try it and vote for our solution. Community points are an important part of the judging in this contest.

Our cookie product configuration solution is composed of a set of ingredients that can be combined without any mutually exclusive constraints. Anyone for cinnamon oatmeal dark chocolate chunk?

The secret to creating a convincing picture is to have each ingredient on its own separate layer and to make visible the layers that are involved -- enter the M-V-VM pattern, and in this case used as an adapter / translator between the composition of the model and what is shown.


        <Canvas x:Name="CookieRoot" Height="400" HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Clip="M0,0L400,0 400,400 0,400z" RenderTransformOrigin="0.5,0.5">



            <Image Height="381" Width="404" Canvas.Left="-9" Canvas.Top="8" Source="Cookie_Images/Base Cookie.png"/>

            <Image x:Name="Cinnamon" Height="382" Width="390" Opacity="0.651" Canvas.Left="6" Canvas.Top="13" Source="Cookie_Images/Cinnamon.png" Visibility="Collapsed">

            </Image>

            <Image x:Name="PeanutButter" Height="379" Width="385" Opacity="0.478" Canvas.Left="7" Canvas.Top="9" Source="Cookie_Images/Peanut Butter.png" Visibility="Collapsed"/>

            <Image x:Name="ReesesPeanutButter" Height="379" Width="385" Opacity="0.478" Canvas.Left="7" Canvas.Top="9" Source="Cookie_Images/Peanut Butter.png" Visibility="Collapsed"/>

            <Image x:Name="Cocoa" Height="387" Width="389" Opacity="0.678" Canvas.Left="5" Canvas.Top="5" Source="Cookie_Images/Cocoa.png" Visibility="Collapsed">

            </Image>

            <Image x:Name="Oatmeal" Height="380" Width="387" Opacity="0.412" Canvas.Left="6" Canvas.Top="7" Source="Cookie_Images/Oatmeal.png" Visibility="Collapsed"/>

            <Image x:Name="Peanuts" Height="377" Width="381" Canvas.Left="9" Canvas.Top="10" Source="Cookie_Images/Peanuts.png" Visibility="Collapsed"/>

            <Image x:Name="Raisins" Height="373" Width="370" Canvas.Left="15" Canvas.Top="10" Source="Cookie_Images/Raisins.png" Visibility="Collapsed"/>

            <Image x:Name="Pecans" Height="313" Width="302" Canvas.Left="56" Canvas.Top="56" Source="Cookie_Images/Pecans.png" Visibility="Collapsed"/>

            <Image x:Name="Almonds" Height="286" Width="333" Canvas.Left="14" Canvas.Top="59" Source="Cookie_Images/Almonds.png" Visibility="Collapsed"/>

            <Image x:Name="WhiteChocolateChips" Height="351" Width="353" Canvas.Left="18" Canvas.Top="45" Source="Cookie_Images/White Chocolate Chips.png" Visibility="Collapsed"/>

            <Image x:Name="SemisweetChocolateChips" Height="400" Width="400" Canvas.Left="0" Canvas.Top="0" Source="Cookie_Images/Dark Chocolate Chips.png" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">

            </Image>

            <Image x:Name="MilkChocolateChips" Height="351" Width="380" Canvas.Left="7" Canvas.Top="45" Source="Cookie_Images/Milk Chocolate Chips.png" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">

            </Image>

            <Image x:Name="MacadamiaNuts" Height="377" Width="354" Canvas.Left="38" Canvas.Top="12" Source="Cookie_Images/Macadamia Nuts.png" Visibility="Collapsed"/>

            <Image x:Name="DarkChocolateChunks" Height="546" Width="456" Canvas.Left="-27" Canvas.Top="-88" Source="Cookie_Images/Dark Chocolate Chunks.png" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">

            </Image>

            <Image x:Name="MilkChocolateChunks" Height="546" Width="456" Canvas.Left="-27" Canvas.Top="-88" Source="Cookie_Images/Milk Chocolate Chunks.png" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">

            </Image>

            <Image x:Name="WhiteChocolateChunks" Height="546" Width="456" Canvas.Left="-27" Canvas.Top="-88" Source="Cookie_Images/White Chocolate Chunks.png" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">

            </Image>

            <Image x:Name="HersheyMiniKisses" Height="134" Width="134" Canvas.Left="134" Canvas.Top="126" Source="Cookie_Images/Hershey Kiss.png" Visibility="Collapsed"/>

        </Canvas>

We were careful to name the XAML elements so they could be controlled through an automated binding statement that is generated when the picture is loaded.



void CookieCanvas_Loaded(object sender, RoutedEventArgs e)
{
     foreach (Image oItem in CookieRoot.Children)
     {
          string sName = oItem.Name;
          if (string.IsNullOrEmpty(sName))
          continue;
          var oBinding = new Binding(sName);
          oBinding.Mode = BindingMode.OneWay;
          oItem.SetBinding(Button.VisibilityProperty, oBinding);
     }
}

With all this binding now in place the final step is the view model.


    public class CookieVM : ViewModel

    {

        public CookieVM(Instance oSource)

            : base(oSource)

        {

        }

        public override void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

        {

            if (e.NewItems.IsNotNull())

                foreach (Component oNote in e.NewItems.OfType<Component>())

                    NotifyPropertyChange(oNote.ClassName);



            if (e.OldItems.IsNotNull())

                foreach (Component oNote in e.OldItems.OfType<Component>())

                    NotifyPropertyChange(oNote.ClassName);

        }

        public Visibility Cinnamon

        {

            get { return DoesChildOfClassExist("Cinnamon") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility PeanutButter

        {

            get { return DoesChildOfClassExist("PeanutButter") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility ReesesPeanutButter

        {

            get { return DoesChildOfClassExist("ReesesPeanutButter") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility Cocoa

        {

            get { return DoesChildOfClassExist("Cocoa") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility Oatmeal

        {

            get { return DoesChildOfClassExist("Oatmeal") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility Peanuts

        {

            get { return DoesChildOfClassExist("Peanuts") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility Raisins

        {

            get { return DoesChildOfClassExist("Raisins") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility HersheyMiniKisses

        {

            get { return DoesChildOfClassExist("HersheyMiniKisses") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility Pecans

        {

            get { return DoesChildOfClassExist("Pecans") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility Almonds

        {

            get { return DoesChildOfClassExist("Almonds") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility DarkChocolateChunks

        {

            get { return DoesChildOfClassExist("DarkChocolateChunks") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility MilkChocolateChunks

        {

            get { return DoesChildOfClassExist("MilkChocolateChunks") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility WhiteChocolateChunks

        {

            get { return DoesChildOfClassExist("WhiteChocolateChunks") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility WhiteChocolateChips

        {

            get { return DoesChildOfClassExist("WhiteChocolateChips") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility SemisweetChocolateChips

        {

            get { return DoesChildOfClassExist("SemisweetChocolateChips") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility MilkChocolateChips

        {

            get { return DoesChildOfClassExist("MilkChocolateChips") ? Visibility.Visible : Visibility.Collapsed; }

        }

        public Visibility MacadamiaNuts

        {

            get { return DoesChildOfClassExist("MacadamiaNuts") ? Visibility.Visible : Visibility.Collapsed; }

        }
    }

Converting SketchFlow to Production

2009-08-01T10:33:00.002-04:00

Deb: I was really excited to start working with Blend 3 with SketchFlow! I had seen videos from MIX 09 demoing SketchFlow and was disappointed it wasn't in the first release of Blend 3. Finally I was going to get a chance to try it myself.

I had a few learning pains, working with the SketchFlow Map - the documentation was a little sketchy (pardon the pun). I also had a problem getting the navigation to work right until I learned about right-clicking on the button and going to the bottom of the menu to tell it where to navigate to. Once I learned that, it was amazingly easy to setup a prototype project. I was really pleased with the overall tool; I was able to build a nice prototype in a relatively short period of time.

My disappointment has come as I try to convert this prototype to production. I hadn't read ahead in the help documentation about how to do this because I assumed it would be relatively straight-forward. Imagine my surprise when I found a series of 16 steps that had me deleting files, navigating to obscure folders in the SDK to include references, and editing code in Notepad! The best advice I received in this series of steps was Step One: backup your project. After an hour of tedious effort, I got nothing. The project wouldn't run.

So I googled 'converting sketchflow to production' and tapped into a conversation within the Silverlight community about just how ready for primetime SketchFlow really is. Some people are happy to have such a powerful prototyping tool at their disposal, but say that when you are ready to build the application for real you will need to build it from scratch. Others range from disappointment to outrage, feeling Microsoft rushed Sketchflow out before it was really finished, not taking it through the final, critical step of conversion to production.

Me, I've turned my prototype project over to Steve, the Developer, to see how much he can convert and how much effort is required to convert it. We will let you know in a later post what we learn.

Meanwhile, I will be rebuilding the prototype from scratch, as a new project. I will also investigate getting access to the 'sketchy styles' from a normal Silverlight project. It seems to me that much of the value of SketchFlow would be delivered by the styles alone. Now if creating navigation was only as easy in a regular Silverlight project..........

Autosizing of Grids, Canvasses and StackPanels

2009-07-16T12:59:00.001-04:00

Deb: Moving from a relatively static environment, like Photoshop, to a dynamic environment like Silverlight/Blend, requires learning about autosizing and how visuals will behave when the browser is resized. One of the most challenging things for me to learn was the differences in behaviors between grids, canvasses and stackpanels.

I started with grids, the workhorse of the layout panels, and I got comfortable with setting the height and width to 'auto', and the alignment to stretch, and setting the margins to achieve the effect I was looking for. I learned how to set column and row sizes, locking certain ones and leaving others to size dynamically as the space changed.

I moved on to canvasses, learning how to place objects on the panel in a different way, but the autosizing aspect of the layout panel worked the same as the grid. I figured I had this dynamic sizing thing figured out. Then I got cocky and started sticking stackpanels into my grids, and suddenly things weren't working the way I expected. This video explains why:

I am not a developer, but I do have a strong intuitive understanding of hierarchies and trees. I had developed a mental model that said that if I picked 'auto' and 'stretch', my object would size to match the parent it was embedded in. Working with stackpanels forced me to reevaluate my mental model, to acknowledge that sometimes the sizing was driven by the children embedded in the object, and margins - as seen in the video - seem to be able to refer to both (in the example, the top and left margins are relative to the parent canvas but the right and bottom margins are relative to the 'children' buttons).

This is where trial and error has led me. If there is an explanation for these behaviors, a simplifying principle that can be applied in all cases, I would love to learn it -- I really like to understand why things are the way they are. Post a comment and let me know what you think!

The Designer's Perspective: Working with Silverlight and Expression Blend

2009-07-14T12:26:00.001-04:00

Deb: For too long now, I've been sitting on the sidelines, content to edit Steve's posts. But it's time to start representing the designer's viewpoint when it comes to using Silverlight 3 and Expression Blend 3.

I was first attracted to Silverlight for two reasons: 1) visualization is very important to me and Silverlight lets me design some very compelling visualizations, and 2) Expression Blend promised me significantly more autonomy, and the ability to do whatever I could imagine without relying on a developer to translate my vision for me.

While I haven't become as autonomous as I would like, Blend keeps improving and for the most part, Blend 3 is a joy to work with. I have my moments of frustration, sure, but they are more than offset by the power and independence I've been given. The goal of my posts will be to reduce the frustration factor even further for fellow designers.

I can summarize my attitude toward XAML by saying this: in general, the only legitimate reason for me to go to the XAML is to finetune the sizing of rows and columns. Other than that, I shouldn't need to even look at it. I think this should be the ultimate test of Blend's ability to meet the needs of designers: no XAML coding required.

The point of view I represent is that of someone who has graphic arts training, who is adept at Adobe tools such as Photoshop, who is an extremely heavy user of the Internet, but who knows nothing about C# or .NET. Perhaps it may be difficult for some readers to understand someone with this background, but there are a lot of us out here. There are many things that may be obvious to a developer that can only be painfully learned through trial and error by a designer. Given the relative 'youth' of the Silverlight tools and their accompanying documentation (sparse), only the Internet, powerful search engines and the sharing of the Silverlight community make solving the problems we confront relatively painless. And it always helps to know that the pain of being an early adopter of Silverlight will be compensated for by the advantages that come from being among the first to learn these skills.

Learning RIA Services: It's Great to be a Silverlight Developer

2009-07-04T21:02:00.027-04:00

I have built WCF integrations to SQL Server as part of building Silverlight applications. Having created the basic elements of a CRUD (Create, Read, Update, Delete) using WCF (see Tim Heuer's blog on how to do this ), I had to ask myself if there wasn't a way to achieve the same result that required less code.

During MIX09 I saw Brad Adams' talks on .NET RIA Services (watch Brad Adams talk). On 3 separate occasions I worked through these examples until I began to understand how all the parts fit together. My basic feeling was that although these services are very powerful, they made a lot of assumptions about how I wanted to collect and consume the data. Too much magic going on behind the scenes for my purposes. Using the beta release of RIA Services, according to all the demos I could find on line, there was no way to loop through the returned records without binding it to the control.

The Problem Statement

I wanted to find out what I was doing wrong. Is there a way to just loop over the records returned from RIA services without binding to a control? I asked the question on Stack Overflow and in the Silverlight forums.

The Community to the Rescue

If I knew the answer, I would have asked a better question. Isn't that always the case? The members of the developer community offered answers to my ill-formed question:

No one gave me the exact answer. There was no code provided that I could just cut and paste, but I got great response in hours and their insight led me to the answer I was looking for:

Not long after I starting working on this problem, Silverlight 3 was released. RIA services have changed and I have not had time to investigate, but once I do I will add a new post.

It is Great to be a Silverlight Developer

I have been writing software since I was 18; I would have started sooner if I had access to a computer. Looking back over my 30+ years of programming, I am now having more fun than ever, and I think it is because of the times we live in -- Silverlight, the Internet, and the community of people who use them both. Silverlight has turned web applications into a rich and now, with OOB, sometimes even unconnected experience. Today's development culture is one of generosity and sharing. I am in contact with people around the world, Silverlight gurus and novices alike, and they all love to share. You get the sense that we are all looking to see how much we can accomplish together with Silverlight.

Bing Maps Silverlight Control Part 5: Calculating Distance

2009-07-03T20:52:00.019-04:00

My dad was the first person to show me how to measure distances on a map using a pair of dividers and the scale printed on the map key. There is a much better way to do this using the Bing Maps Silverlight control -- it just takes a little programming and finding the right equation.

Here is the Bobcat Video I told you about:

Back to Programming...

Here is how you calculate the distance between points on the earth. You also need to know EarthRadiusInMiles = 3956.0;


        /// <summary> 
        /// Calculate the distance between two geocodes. Defaults to using Miles. 
        /// </summary> 
        public static double CalcDistance(double lat1, double lng1, double lat2, double lng2)
        {
            return CalcDistance(lat1, lng1, lat2, lng2, GeoCodeCalcMeasurement.Miles);
        }
        /// <summary> 
        /// Calculate the distance between two geocodes. 
        /// </summary> 
        public static double CalcDistance(double lat1, double lng1, double lat2, double lng2, GeoCodeCalcMeasurement m)
        {
            double radius = GeoCodeCalc.EarthRadiusInMiles;
            if (m == GeoCodeCalcMeasurement.Kilometers) { radius = GeoCodeCalc.EarthRadiusInKilometers; }
            return radius * 2 * Math.Asin(Math.Min(1, Math.Sqrt((Math.Pow(Math.Sin((DiffRadian(lat1, lat2)) / 2.0), 2.0) + Math.Cos(ToRadian(lat1)) * Math.Cos(ToRadian(lat2)) * Math.Pow(Math.Sin((DiffRadian(lng1, lng2)) / 2.0), 2.0)))));
        }

I created a Marker class to mark the end points of the distance calculation. To show the user that they are in distance calculation mode, I have also changed the cursor on the map control. In this case, I alternate between the arrow and the pointing finger.


        PointsOfInterest m_oMarkers = new PointsOfInterest();

        void cbMeasure_Checked(object sender, RoutedEventArgs e)
        {
            Map1.Cursor = Cursors.Hand;
            m_oMarkers.Clear();
        }
        void cbMeasure_Unchecked(object sender, RoutedEventArgs e)
        {
            Map1.Cursor = Cursors.Arrow;
            if ( m_oMarkers.Count > 1 )
                AddLine(m_oMarkers,.5);
        }

The code for collecting the user's selection of points is here:


        void Map1_MouseClick(object sender, MapMouseEventArgs e)
        {
            var oLocation = Map1.ViewportPointToLocation(e.ViewportPoint);

            PointOfInterest oPOI = null;
            if (cbMeasure.IsChecked == true)
            {
                oPOI = new Marker() { Loc = oLocation };
                m_oMarkers.Add(oPOI);
            }
            else
            {
                oPOI = new PointOfInterest() { Loc = oLocation };
                m_oList.Add(oPOI);
            }
           
            RenderPoint(oPOI);

            if (cbDraw.IsChecked == true)
                try
                {
                    double dRadius = double.Parse(txtRadius.Text);
                    AddCircle(oLocation, dRadius, .5);
                }
                catch( Exception ex)
                {
                    MessageBox.Show(ex.Message);
                }
        }

Using a polyline and a tool tip is great way to report the distance:


       double DistanceInMiles(LocationCollection oLocs)
        {
            double dDistance = 0.0;
            for (int i = 0; i < oLocs.Count() - 1; i++)
                dDistance += DistanceInMiles(oLocs[i], oLocs[i + 1]);

            return dDistance;
        }

        double DistanceInMiles(Location Loc1, Location Loc2)
        {
            double dMiles = GeoCodeCalc.CalcDistance(Loc1.Latitude, Loc1.Longitude, Loc2.Latitude, Loc2.Longitude);
            return dMiles;
        }

        LocationCollection RenderLine(List<PointOfInterest> oList)
        {

            var oPOIs = (from oPOI in oList
                         where oPOI is Marker
                         select oPOI).ToList<PointOfInterest>();

            var oLocs = new LocationCollection();
            foreach (var oPOI in oPOIs)
                oLocs.Add(oPOI.Loc);

            return oLocs;
        }


        void AddLine(List<PointOfInterest> oList, double dOpacity)
        {
            MapPolyline polyline = new MapPolyline();
            polyline.Stroke = new SolidColorBrush(Colors.Red);
            polyline.StrokeThickness = 1;
            polyline.Opacity = dOpacity;

            //this works in miles
            LocationCollection oLocs = RenderLine(oList);
            polyline.Locations = oLocs;
            Map1.AddChild(polyline);

            double dDist = DistanceInMiles(oLocs);

            ToolTipService.SetToolTip(polyline, string.Format("{0:0.0} mi \n {1:0.00} yd", dDist, dDist * 5280.0 / 3.0));
        }

Virtual Earth Rebranded to Bing Maps

2009-06-22T21:41:00.003-04:00

We've been doing a series of posts on Silverlight 3 and Virtual Earth.

Microsoft has recently rebranded Virtual Earth, renaming it "Bing Maps". Read about their thinking here:

http://www.bing.com/community/blogs/maps/archive/2009/05/28/rebranding-microsoft-virtual-earth-to.aspx

Bing Maps Silverlight Control Part 4: Drawing Circles To Scale

2009-06-21T12:37:00.007-04:00

When you add scaled geometry to the Virtual Earth application you need to remember 2 things:

1) The earth is not flat, so your math needs to account for the curvature of the earth.

2) The Virtual Earth API has, among other things, MapPolygon objects, which are treated as scaled geometry. In my example, I wanted to draw a circle around a point that showed what was on the map 10 miles in any direction. This video shows my reasons why:

I pulled all the parts to build this application from the web. You can find the formulas to calculate distances on a curved surface in Wikipedia: Great Circle Distance
Tim Heuer had a post on calculating the points in a circle using Java: Drawing a Radius
In my project I converted all the code to C# and separated the calculation of locations and the generation of a MapPolygon into two functions.


        void AddCircle(Location oLoc, double dRadius, double dOpacity)
        {
            MapPolygon polygon = new MapPolygon();
            polygon.Fill = new SolidColorBrush(Colors.Green);
            polygon.Stroke = new SolidColorBrush(Colors.Blue);
            polygon.StrokeThickness = 5;
            polygon.Opacity = dOpacity;

            //this works in miles
            polygon.Locations = DrawACircle(oLoc, dRadius);
            Map1.AddChild(polygon);
        }

        public LocationCollection DrawACircle(Location oLoc, double dRadius)
        {
            var oLocs = new LocationCollection();

            var earthRadius = GeoCodeCalc.EarthRadiusInMiles;
            var lat = GeoCodeCalc.ToRadian(oLoc.Latitude); //radians 
            var lon = GeoCodeCalc.ToRadian(oLoc.Longitude); //radians 
            var d = dRadius / earthRadius; // d = angular distance covered on earths surface 
         
            for (int x = 0; x<= 360; x++)
            {
                var brng = GeoCodeCalc.ToRadian(x); //radians 
                var latRadians = Math.Asin(Math.Sin(lat) * Math.Cos(d) + Math.Cos(lat) * Math.Sin(d) * Math.Cos(brng));
                var lngRadians = lon + Math.Atan2(Math.Sin(brng) * Math.Sin(d) * Math.Cos(lat), Math.Cos(d) - Math.Sin(lat) * Math.Sin(latRadians));

                var pt = new Location(180.0 * latRadians / Math.PI, 180.0 * lngRadians / Math.PI);
                oLocs.Add(pt);
            }
            return oLocs;
        }

Integrating this with the current UI was straight-forward -- I just added a little more code to the actions the application was already doing. So drawing circles around the current location became this:


        void btnCircle_Click(object sender, RoutedEventArgs e)
        {
            var oMyLoc = from oItem in m_oList
                         where oItem is MyLocation
                         select oItem;

            PointOfInterest oWhereIAm = oMyLoc.First<PointOfInterest>();
            if (oWhereIAm == null)
            {
                MessageBox.Show("Add Where Am I to the Map");
                return;
            }

            for (int i = 1; i <= 5; i++)
            {
                double dRadius = i * 10.0;
                AddCircle(oWhereIAm.Loc, dRadius, .15);
            }
        }

And drawing a circle of a given radius about any mouse click became this:


        void Map1_MouseClick(object sender, MapMouseEventArgs e)
        {
            var oLocation = Map1.ViewportPointToLocation(e.ViewportPoint);

            var oPOI = new PointOfInterest() { Loc = oLocation };
            m_oList.Add(oPOI);

            RenderPoint(oPOI);

            if (cbDraw.IsChecked == true)
                try
                {
                    double dRadius = double.Parse(txtRadius.Text);
                    AddCircle(oPOI.Loc, dRadius, .5);
                }
                catch( Exception ex)
                {
                    MessageBox.Show(ex.Message);
                }
        }

In the next post I will show how to measure between two user-selected points.

Virtual Earth Silverlight Control Part 3: Locating Best Buy Stores

2009-06-16T17:01:00.009-04:00

I was searching the web for sources of Lat/Long data I could mash-up to in a Virtual Earth application and I ran across Best Buy ReMix. The API to collect store location information was easy to use and returned Lat/Long info, so I integrated it into the application. Watch this video to see how I did it:

I like to start by testing the URL in the browser:


http://api.remix.bestbuy.com/v1/stores(area(44236,20))?apiKey=[YourKey]

The Remix API returned XML describing the stores within 20 miles of my zipcode. Here is some of what I got back:


<stores currentPage="1" totalPages="1" from="1" to="6" total="6" queryTime="0.004" totalTime="0.013" canonicalUrl="/v1/stores(area("44236",20))?apiKey=fbsn9dsqvgnm42vyk4x5hman">
  <store>
    <storeId>758</storeId>
    <name>Macedonia OH</name>
    <address>470 East Aurora Road</address>
    <city>Macedonia</city>
    <region>OH</region>
    <postalCode>44056</postalCode>
    <fullPostalCode>44056-1834</fullPostalCode>
    <country>US</country>
    <lat>41.313461</lat>
    <lng>-81.521233</lng>
    <phone>330-468-6850</phone>
    <hours>10:00am - 9:00pm Monday - Friday, 11:00am - 6:00pm Saturday, 11:00am - 6:00pm Sunday</hours>
    <distance>6.0</distance>
  </store>

The next step is to verify that Silverlight can consume this data using the WebClient Class. The code is simple but it does not always work, based on permissions (see Tim Heuer's explanation of this). I test it with this code:


        void LoadBestBuyStores()
        {
            WebClient oClient = new WebClient();
   
            string sUri = string.Format("http://api.remix.bestbuy.com/v1/stores(area({0},20))?apiKey=fbsn9dsqvgnm42vyk4x5hman", txtZipCode.Text);
            var oAddress = new Uri(sUri);
            oClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(BestBuyStores_DownloadStringCompleted);
            oClient.DownloadStringAsync(oAddress);
        }

        void BestBuyStores_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            string sResult = e.Result;
            MessageBox.Show(sResult);
        }

To finish the application, I needed to parse the XML that was returned and map it into an object instance, so I defined a class 'BestBuyStores':


    public class BestBuyStore : PointOfInterest
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string Phone { get; set; }
        public string Hours { get; set; }
    }

and then added LinqToXML code to build my objects:


        void BestBuyStores_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null )
                return;

            string sResult = e.Result;

            var doc = XDocument.Parse(sResult);

            var oStores = from element in doc.Descendants("store")
                            select new BestBuyStore
                            {
                                Name = element.Element("name").Value,
                                Address = element.Element("address").Value,
                                City = element.Element("city").Value,
                                Region = element.Element("region").Value,
                                Phone = element.Element("phone").Value,
                                Hours = element.Element("hours").Value,
                                Loc = new Location(double.Parse(element.Element("lat").Value), double.Parse(element.Element("lng").Value))
                            };

            foreach (BestBuyStore oStore in oStores.ToList<BestBuyStore>())
            {
                RenderPoint(oStore);
                m_oList.Add(oStore);
            }

            frmBestBuy.Visibility = Visibility.Visible;
            frmBestBuy.ItemsSource = oStores;
        }

Finally by extending the RenderPoint method I was able to mark each location with a custom Best Buy graphic:


        void RenderPoint(PointOfInterest oPOI)
        {
            if (oPOI is MyLocation)
            {
                Uri oSource = new Uri(@"Pushpin.png", UriKind.Relative);
                var oBitmap = new BitmapImage(oSource);
                var oImage = new Image() { Source = oBitmap, Width=23, Height=27 };
                m_oLayer.AddChild(oImage, oPOI.Loc, PositionMethod.BottomCenter);
            }
            else if (oPOI is BestBuyStore)
            {
                Uri oSource = new Uri(@"BestBuy.png", UriKind.Relative);
                var oBitmap = new BitmapImage(oSource);
                var oImage = new Image() { Source = oBitmap, Width = 23, Height = 27 };
                m_oLayer.AddChild(oImage, oPOI.Loc, PositionMethod.BottomLeft);
            }
            else
            {
                var oRect = new System.Windows.Shapes.Rectangle() { Fill = new SolidColorBrush(Colors.Red), Width = 10, Height = 10 };
                m_oLayer.AddChild(oRect, oPOI.Loc, PositionMethod.Center);
            }
        }

Generic Type Conversion

2009-06-09T17:57:00.005-04:00

While working on the Virtual Earth map application, I discovered the need to parse data from a string of characters. So I searched the net and found this answer on stack overflow: generic-type-conversion-from-string . I like this code example because it looks like the simplest and most general approach:


public class TypedProperty<T> : Property
{
     public T TypedValue
     {
        get { return (T)Convert.ChangeType(base.Value, typeof(T)); }
        set { base.Value = value.ToString();}
     }
}

But if you cut and paste the code into a Silverlight 2 or Silverlight 3 application it does not run. This is because the two argument version of the ChangeType method is not part of the Silverlight runtime. I guess I could have used the three argument version, but instead I implemented a function the uses reflection:


public bool TryParse<T>(string sValue, out T oValue) where T : IConvertible
{
     oValue = default(T);

     try
     {
          string[] parts = sValue.Split(':');
          MethodInfo oMethod = typeof(T).GetMethod("Parse", new Type[] { typeof(string) } );
          oValue = (T)oMethod.Invoke(null, new object[] { parts[1].Trim() });
          return true;
     }
     catch { }
     return false;
}

Silverlight Size vs. Functionality

You find this all the time in Silverlight development -- some of the tools, functions and features you have come to rely on in .NET are just not part of the lightweight Silverlight runtime. I read on one blog that programming with Silverlight is like going camping with .NET. In fact, I first learned this the hard way trying to recompile some previous .NET code. I couldn't include the existing library -- it had to be rebuilt using the Silverlight libraries. When I attempted to recompile it, I found that it needed to be reengineered to use functionality available in the Silverlight runtime.

I have always been able to find a creative solution to simple programming issues like the one above, and I think the ability to deliver my solution over the web to any machine, without creating a custom install, makes it worth the effort to find these alternative approaches.

Virtual Earth Silverlight Control Part 2: Locate Me

2009-06-07T21:56:00.020-04:00

It was a post by Nikhil Kothari that inspired me to create a method to report my current location on the Virtual Earth Silverlight control.

http://www.nikhilk.net/Silverlight-Locate-Me.aspx

While I was traveling around the country (see http://www.wiredwalkabout.com/), I would run Nikhil's application to see the result. For the most part, it always reported my location about 20 miles from where I really was, which I think is a problem with the web service used and not the code calling it.

http://api.hostip.info/get_html.php?position=true

Nikhil's current live sample has been updated, but it is still not at good as a GPS. The application source code is worth looking at in detail. He uses techniques that are more advanced than calling WebClient, and as a programmer it is interesting to know how to do same thing many different ways (viewing this link requires you have Silverlight 3 installed):

http://www.nikhilk.net/Content/Posts/SilverlightLocateMe/LocateMe.htm

This post is about integrating this functionality into the mapping application I am currently developing. I have decided to create a separate class of objects to mark my current location. I did this mainly because I wanted to use a different symbol to mark myself on the map -- like a "You Are Here" marker. I have extended this class to collect a time stamp, and this -- in combination with persistence -- can be used to track my movements.


    public class MyLocation : PointOfInterest



    {



        public DateTime TimeStamp { get; set; }



        public MyLocation()



            : base()



        {



            TimeStamp = DateTime.Now;



        }







        #region Serializer Methods



        public override XElement PersistTo(ModelSerializer oSerializer, XElement oSelf)



        {



            XElement oXElement = base.PersistTo(oSerializer, oSelf);







            oXElement.Add(new XAttribute("TimeStamp", TimeStamp.ToString()));







            return oXElement;



        }



        public override IMapModel RecoverFrom(ModelSerializer oSerializer, XElement oElement)



        {



            var oResult = base.RecoverFrom(oSerializer, oElement);







            string sTimeStamp = oElement.Attribute("TimeStamp").Value;



            TimeStamp = DateTime.Parse(sTimeStamp);



            return oResult;



        }



        #endregion



    }

I needed to modify the rendering code in order to display a different picture for this class. With this quick change, objects of type MyLocation now show a pushpin instead of a red rectangle.


        void RenderPoint(PointOfInterest oPOI)



        {







            if (oPOI is MyLocation)



            {



                Uri oSource = new Uri(@"Pushpin.png", UriKind.Relative);



                var oBitmap = new BitmapImage(oSource);



                var oImage = new Image() { Source = oBitmap, Width=23, Height=27 };



                m_oLayer.AddChild(oImage, oPOI.Loc, PositionMethod.BottomCenter);



            }



            else



            {



                // Create a Rectangle Shape to Show as the "Pushpin"



                // Set it's Size to 10x10



                var oRect = new System.Windows.Shapes.Rectangle() { Fill = new SolidColorBrush(Colors.Red), Width = 10, Height = 10 };







                // Add Rectangle to MapLayer



                m_oLayer.AddChild(oRect, oPOI.Loc, PositionMethod.Center);



            }



        }

The code to query the web service using WebClient follows. This is an asynchronous call that returns a string delimited by line feeds, so I used Nikhil's trick of reading from a stream to parse out and convert the Lat/Long information.


        void WhereAmI()



        {



            WebClient oClient = new WebClient();



            var oAddress = new Uri(@"http://api.hostip.info/get_html.php?position=true");



            oClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(oClient_DownloadStringCompleted);



            oClient.DownloadStringAsync(oAddress);



        }







        void oClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)



        {



            string sResult = e.Result;







            using (StreamReader sr = new StreamReader(new MemoryStream(Encoding.UTF8.GetBytes(sResult))))



            {



                try



                {



                    sr.ReadLine();



                    sr.ReadLine();







                    double lat = 0;



                    TryParse<Double>(sr.ReadLine(), out lat);







                    double lng = 0;



                    TryParse<Double>(sr.ReadLine(), out lng);







                    var oPOI = new MyLocation() { Loc = new Location(lat, lng) };



                    m_oList.Add(oPOI);







                    RenderPoint(oPOI);







                }



                catch { }



            }



            MessageBox.Show(sResult);



        }

Using the Virtual Earth Silverlight Control - Part One

2009-06-01T08:50:00.025-04:00

Debra and I took a trip around the country last month, 7500 miles of driving over 25 days. You can read about it at http://www.wiredwalkabout.com/.

One of the goals of the trip was to fieldtest technology, including the Virtual Earth Silverlight control. You can see the MIX09 presentation here at http://videos.visitmix.com/MIX09/T34F.

So you might be thinking, why not just do this from home? I believe that you can see the issues more clearly if you put yourself into the situations in which you expect the software to be used. After all, Pixar animators traveled to South America as inspiration for the movie "UP", and traveled along Route 66 in preparation for the movie "Cars".

Along the way we were using a Garmin to plan our trip. This is an extremely valuable tool, but it was missing some features that would have been nice to have, so I decided to investigate the Virtual Earth Silverlight control to see what it would take to reproduce/extend the features in the Garmin. I have also done Telco applications in the past and I wanted to investigate how the mapping requirement in these applications could be accomplished in Silverlight.

Since this investigation was going to be more like building an application and less like an experiment, I am starting by writing code to persist my POCO domain model (Plain Old CLR Objects). I am using the OpenFileSave feature in Silverlight 3 to save my domain model as XML. The rest of this blog entry explains my model for persistence.

For this application I am implementing my own XML serializer. The result (so far) is as follows. As the implementation grows I expect this file format to change. XML gives me some flexibility in reusing data from older files.


<?xml version="1.0" encoding="utf-8"?>
<ModelSerializer>
  <PointsOfInterest>
    <PointOfInterest Latitude="39.730288305639185" Longitude="-83.310517678613749" />
    <PointOfInterest Latitude="34.004710072445405" Longitude="-89.814423928613749" />
    <PointOfInterest Latitude="32.572126585547366" Longitude="-96.669892678613763" />
    <PointOfInterest Latitude="30.436679980300028" Longitude="-98.032197366113763" />
    <PointOfInterest Latitude="31.304215774927229" Longitude="-103.74508799111376" />
    <PointOfInterest Latitude="33.272989725895094" Longitude="-111.96286142861376" />
    <PointOfInterest Latitude="36.445446009018042" Longitude="-118.24704111611376" />
    <PointOfInterest Latitude="38.845986120977358" Longitude="-120.35641611611376" />
    <PointOfInterest Latitude="37.463816739355629" Longitude="-122.11422861611376" />
    <PointOfInterest Latitude="41.82646221909387" Longitude="-121.71872080361376" />
    <PointOfInterest Latitude="45.511996049055" Longitude="-122.24606455361376" />
    <PointOfInterest Latitude="47.478111391249712" Longitude="-122.20211924111376" />
    <PointOfInterest Latitude="46.3676556511152" Longitude="-117.06051767861376" />
    <PointOfInterest Latitude="45.604305565410648" Longitude="-110.68844736611376" />
    <PointOfInterest Latitude="44.07759180028043" Longitude="-103.52536142861376" />
    <PointOfInterest Latitude="43.410903675485677" Longitude="-96.582002053613763" />
    <PointOfInterest Latitude="41.924626769221476" Longitude="-89.902314553613749" />
  </PointsOfInterest>
</ModelSerializer>

The PointsOfInterest and PointOfInterest classes both implement the PersistTo XML and RecoverFrom XML methods defined in the IMapModel interface. Here is the code:


    public interface IMapModel
    {
        XElement PersistTo(ModelSerializer oSerializer, XElement oSelf);
        IMapModel RecoverFrom(ModelSerializer oSerializer, XElement oElement);
    }

    public class PointsOfInterest : List<PointOfInterest>, IMapModel
    {
        #region Serializer Methods
        public virtual XElement PersistTo(ModelSerializer oSerializer, XElement oSelf)
        {
            XElement oXElement = new XElement(GetType().Name);
            oSelf.Add(oXElement);

            foreach (IMapModel oIMap in this)
                oIMap.PersistTo(oSerializer, oXElement);

            return oSelf;
        }
        public virtual IMapModel RecoverFrom(ModelSerializer oSerializer, XElement oElement)
        {
            string sType = GetType().Name;
            XElement oRefElement = oElement.Element(sType);
            if (oElement.HasElements)
                foreach (XElement oSubElement in oRefElement.Elements())
                {
                    IMapModel oChild = oSerializer.Import(this, oSubElement);

                    PointOfInterest oPOI = oChild as PointOfInterest;
                    if (oPOI != null)
                        this.Add(oPOI);
                }

            return this;
        }
        #endregion
    }

    public class PointOfInterest : IMapModel
    {
        public Location Loc { get; set; }

        #region Serializer Methods
        public virtual XElement PersistTo(ModelSerializer oSerializer, XElement oSelf)
        {
            XElement oXElement = new XElement(GetType().Name);
            oSelf.Add(oXElement);

            oXElement.Add(new XAttribute("Latitude",Loc.Latitude));
            oXElement.Add(new XAttribute("Longitude", Loc.Longitude));

            return oXElement;
        }
        public virtual IMapModel RecoverFrom(ModelSerializer oSerializer, XElement oElement)
        {
            Loc = new Location(double.Parse(oElement.Attribute("Latitude").Value), double.Parse(oElement.Attribute("Longitude").Value));
            return this;
        }
        #endregion
    }

This is not the first time I have implemented my own serializer. Most of my applications implement a highly interrelated domain model, combining objects sourced from many data sources into a domain model with many pointers and references. I have found the additional control I get over the serialization implementation to outweigh the effort of implementation. However, before this series of posts is finished, I plan on investigating the Silverlight 3 tools for persistence in XAML, XML and JSON.
Here is the code for ModelSerializer and the save and restore methods that start the process.


    public class ModelSerializer
    {

        #region Compute Type

        public Type ComputeType(XElement oElement)
        {
            string sType = oElement.Name.ToString();
            return ComputeType(sType);
        }

        public Type ComputeType(object oObject)
        {
            if (oObject.GetType().IsSubclassOf(typeof(Type)))
                return ComputeType(oObject as Type);
            else
                return ComputeType(oObject.ToString());
        }

        private Dictionary<String, Type> m_oTDictionary = null;
        public Dictionary<String, Type> TypeHash
        {
            get
            {
                if (m_oTDictionary == null)
                {
                    m_oTDictionary = new Dictionary<String, Type>();
                    m_oTDictionary.Add("double", typeof(Double));
                    m_oTDictionary.Add("string", typeof(String));
                    m_oTDictionary.Add("boolean", typeof(Boolean));
                    m_oTDictionary.Add("bool", typeof(Boolean));
                    m_oTDictionary.Add("integer", typeof(Int32));
                    m_oTDictionary.Add("int32", typeof(Int32));
                    m_oTDictionary.Add("object", typeof(object));
                }
                return m_oTDictionary;
            }
            set
            {
                m_oTDictionary = value;
            }
        }
        #endregion
     
     
        private XDocument m_oDocument = null;
        public XDocument Document
        {
            get
            {
                if (m_oDocument == null)
                    m_oDocument = new XDocument();

                return m_oDocument;
            }
            set
            {
                m_oDocument = value;
            }
        }

        public void Write(StreamWriter oStream)
        {
            Document.Save(oStream);
        }

        public XDocument Read(StreamReader oStream)
        {
            Document = XDocument.Parse(oStream.ReadToEnd());
            return Document;
        }


        public virtual IMapModel CreateObject(XElement oElement)
        {
            Type oType = ComputeType(oElement);
            try
            {
                return Activator.CreateInstance(oType) as IMapModel;
            }
            catch (Exception ex)
            {
                oType = ComputeType(oElement);
                string sType = oElement.Name.ToString();
                string sMessage = string.Format("Type {0} not created. {1}", sType, ex.Message);
                MessageBox.Show(sMessage);
            }
            return null;
        }

        public XElement Export(IMapModel oObject, XElement oParent)
        {
            return SerializeObject(oObject, oParent);
        }


        public IMapModel Import(IMapModel oObject, XElement oElement)
        {
            IMapModel oResult = CreateObject(oElement);
            if (oResult != null)
                DeSerializeObject(oResult, oElement);

            return oResult;
        }

        public virtual void Serialize(IMapModel oObject)
        {
            Serialize(oObject, Document);
        }
        public virtual void Serialize(IMapModel oObject, XDocument oDocument)
        {
            XElement oElement = new XElement(GetType().Name);
            oDocument.Add(oElement);
            SerializeObject(oObject, oElement);
        }


        public virtual IMapModel DeSerialize(IMapModel oObject)
        {
            IMapModel oResult = DeSerialize(Document, oObject);
            return oResult;
        }

        public virtual IMapModel DeSerialize(XDocument oDocument, IMapModel oTarget)
        {
            XElement oRoot = oDocument.Root;
            IMapModel oResult = DeSerializeObject(oTarget, oRoot);
            return oResult;
        }

        public virtual XElement SerializeObject(IMapModel oObject, XElement oElement)
        {
            return oObject.PersistTo(this, oElement);
        }

        public virtual IMapModel DeSerializeObject(IMapModel oObject, XElement oElement)
        {
            oObject.RecoverFrom(this, oElement);
            return oObject;
        }

    }


        void btnSave_Click(object sender, RoutedEventArgs e)
        {

            Button oButton = sender as Button;

            SaveFileDialog sfd = new SaveFileDialog()
            {
                DefaultExt = "xml",
                Filter = "XML files (*.xml)*.xmlAll files (*.*)*.*",
                FilterIndex = 1
            };

            bool? result = sfd.ShowDialog();
            if (result == true)
            {
                try
                {
                    using (StreamWriter oStream = new StreamWriter(sfd.OpenFile()))
                    {
                        ModelSerializer oSerializer = new ModelSerializer();
                        oSerializer.Serialize(m_oList);
                        oSerializer.Write(oStream);
                        oStream.Close();
                    }
                }
                catch (Exception ex)
                {
                    MessageBox.Show(ex.Message);
                }
            }
        }

        void btnLoad_Click(object sender, RoutedEventArgs e)
        {
            Button oButton = sender as Button;

            OpenFileDialog ofd = new OpenFileDialog()
            {
                Filter = "XML files (*.xml)*.xmlAll files (*.*)*.*",
                FilterIndex = 1
            };

            bool? result = ofd.ShowDialog();
            if (result == true)
            {
                try
                {
                    using (StreamReader oStream = ofd.File.OpenText())
                    {
                        ModelSerializer oSerializer = new ModelSerializer();
                        oSerializer.Read(oStream);
                        oSerializer.DeSerialize(m_oList);
                        oStream.Close();
                    }

                    foreach (PointOfInterest oPOI in m_oList)
                        RenderPoint(oPOI);

                }
                catch (Exception ex)
                {
                    MessageBox.Show(ex.Message);
                }
            }
        }

All the source code is on Codeplex:

http://vearthmappingexample.codeplex.com/

Error Message: The directory name is invalid

2009-05-14T11:42:00.018-04:00

Over the last week I was working on serialization of a generic domain model to XML. I had seen a few examples of using Silverlight 3's new feature SaveFileDialog(), so I implemented it in order to save the XML to my local hard drive. I got this error - the directory name is invalid.

I asked a friend who is learning Silverlight to create a small project using SaveFileDialog() command, and it worked for him without a problem. He sent me the project, I ran it unchanged, and I go the same error. So I ran this Google search:

Silverlight "The directory name is invalid"

and found some helpful entries about Protected Mode in IE. I followed the instructions to turn off Protected Mode:

Tool .. Internet Options .. Security. Here is the picture.

I checked MSN to see what I was giving up by unchecking the box. This is what it said:

Understanding Protected Mode

Protected Mode is an important step forward in security for Internet Explorer (IE); it helps protect users from attack by running an IE process with greatly restricted privileges on Windows Vista. While Protected Mode does not protect against all forms of attack, it significantly reduces the ability of an attack to write, alter, or destroy data on the user's machine or to install malicious code.

Disabling this would sound bad to any user. Furthermore, being in the reduced security mode affected my Google home page and my Twitter login.

What looked like this:

Now looks like this:

As you can see, this would be very confusing for someone using your application, who is expecting the File...Save option to act like it would in any other desktop application. In fact, turning off Protected Mode is likely to scare users away. For this reason I have decided to add other options for the user to persist information, like saving to an account on the server or in isolated storage.

To finish on a positive note the blogs say that Microsoft will be fixing this issue before the final release of Silverlight 3.

Beat Box Application - Part 3: Playing Media Elements

2009-05-08T22:33:00.015-04:00

In this part, I will talk about a tip I learned while working with media sources, and some insight I have gained when playing multiple media sources simultaneously. The source code for the complete project is on Codeplex. The complete source code for the beat box can be downloaded here:

http://drumpanel.codeplex.com/

Before this project, whenever I worked with MediaElements and media sources, I always loaded the sources dynamically from the ClientBin folder off of the server. This makes sense if the user is selecting from a number of sources or if the sources are large. However, in this application -- since the drum sound files are small and they are all likely to play at some time during the song -- I decided to load them as resources into the actual XAP file that is downloaded when the application is started. To do this you need to specify the file as a resource.

Then you need to load the source file into the MediaElement using the following code:


           int i = 0;
            string sSounds = "crash;hhclosed;hhopen;kick;snare;tom1;tom2;tom3";
            foreach (string sKey in sSounds.Split(';'))
            {
                string sResource = string.Format(@"DrumPanel;component/sounds/{0}.mp3", sKey);
                StreamResourceInfo oStream = Application.GetResourceStream(new Uri(sResource, System.UriKind.Relative));
                Sounds.Add(i,oStream);

                MediaElement oElement = new MediaElement();
                Elements.Add(i, oElement);
                LayoutRoot.Children.Add(oElement);
                i++;
            }

As for playing the sounds, the MediaElement is reading from a stream and the sound will start playing from the beginning. I have set AutoPlay = False so it will not play until I call the method Play. Also, I have learned through trial and error that in order to replay the sound, you first need to call the Stop method before you call the Play method again.

A drum machine plays a rhythm, which means on any beat, any one of the sounds can be played. Every sound has the same duration. If we were creating a piano synthesizer we would need to account for the duration of each note, like quarter notes and whole notes, but for drums this is not an issue.

Here is the code that plays all the sounds on each kit panel when the timer triggers a new beat. Each drum sound is stopped and then the active ones are played again on the next beat. The interesting thing about making music using software is you can do things you could never do in real life, like play all the drum sounds at once.


        void Timer_Tick(object sender, EventArgs e)
        {
            PlayBeat();
        }

        public void PlayBeat()
        {
            MovingCursor++;
            if (MovingCursor >= MaxCount)
                MovingCursor = 0;
        }
        public void BackBeat()
        {
            MovingCursor--;
            if (MovingCursor <= 0)
                MovingCursor = MaxCount-1;
        }

        public int MovingCursor
        {
            get { return (int)GetValue(MovingCursorProperty); }
            set { SetValue(MovingCursorProperty, value); }
        }

        public static readonly DependencyProperty MovingCursorProperty =
            DependencyProperty.Register("MovingCursor", typeof(int), typeof(BeatPanel),
            new PropertyMetadata(0,OnCursorChange));

        protected static void OnCursorChange(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            BeatPanel oPanel = obj as BeatPanel;
            oPanel.KitRest((int)args.OldValue);
            oPanel.KitPlay((int)args.NewValue);
        }


        public void Play()
        {
            Background = new SolidColorBrush(Colors.Black);
            for (int i = 0; i < 8; i++)
            {
                Ellipse oEllipse = Children[i] as Ellipse;
                if (oEllipse.Opacity < .6)
                    continue;

                StreamResourceInfo oInfo = Sounds[i];
                MediaElement oElement = Elements[i];
                oElement.SetSource(oInfo.Stream);
            }
        }

Beat Box Application - Part 2: Custom Panel Hit Testing

2009-05-01T22:49:00.019-04:00

The beat box application is constructed using a nested set of custom panels. The Kit Panel is a vertical arrangement of ellipses, one for each drum sound. Kit Panels are arranged horizontally on a Beat Panel and played from left to right. The drum rhythm is controlled by a timer that generates 120 / beats per min. The complete source code for the beat box can be downloaded here:

http://drumpanel.codeplex.com/

Although it only took about 4 hours to build this application, during its development I discovered some code refactoring that I now use as best practice when creating custom panels. I thought I would discuss them here on the blog, because once implemented in the source code, the issues become obscured.

Custom panel layout and hit test behaviors

Did you know that the width and height of a custom panel are not calculated by default just because you load the XAML elements? Furthermore, you will not really notice this because the XAML elements will layout correctly even if the width and height are set to zero or NAN. However, having the correct width and height are critical to painting the background color and to detecting a mouse hit on the panel itself.

Watching this video could save you hours of fustration:

Taking advantage of WPF dependency properties

WPF is a model that forces you to think about graphic interaction differently than using HTML, WinForms, or ASP.NET. The introduction of binding and use of the dependency property pattern let me refactor the code into a very simplified form.

 public int MovingCursor
{
     get { return (int)GetValue(MovingCursorProperty); }
     set { SetValue(MovingCursorProperty, value); }
}

// Using a DependencyProperty as the backing store for Cursor. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MovingCursorProperty =
DependencyProperty.Register("MovingCursor", typeof(int), typeof(BeatPanel),
new PropertyMetadata(0,OnCursorChange));

protected static void OnCursorChange(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
     BeatPanel oPanel = obj as BeatPanel;
     oPanel.KitRest((int)args.OldValue);
     oPanel.KitPlay((int)args.NewValue);
}

What I really love about dependency properties in this example is that they automatically track changes in the value. When a value changes, you can work with both the old value and the new value. This is great in an application in which I am moving the cursor, because in this case I not only need to change the color of the background on the currently selected item, but I also need to clear the background color of the previously selected item, and start and stop the sounds. This in turn lets me simplify the API for playing the beat:

        public void PlayBeat()
        {
            MovingCursor++;
            if (MovingCursor >= MaxCount)
                MovingCursor = 0;
        }
        public void BackBeat()
        {
            MovingCursor--;
            if (MovingCursor <= 0)
                MovingCursor = MaxCount-1;
        }

And it can easily be driven from the key board or mouse just by setting the value of the MovingCursor. Here are some examples:

        void BeatPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Point oPoint = e.GetPosition(null);
            foreach (UIElement oElement in VisualTreeHelper.FindElementsInHostCoordinates(oPoint, this))
            {
                KitPanel oKit = oElement as KitPanel;
                if (oKit != null)
                    MovingCursor = (int)oKit.Tag;
            }
        }

Element Binding That Acts Like Visio Glue

2009-04-28T23:16:00.002-04:00

In previous posts I discussed drag and drop techniques, inspired by my years of work with Visio. Now that Silverlight 3 has element to element binding, I was inspired to investigate ways to implement Visio glue behaviors in Silverlight.

The following is the XAML shown in the video:


<UserControl x:Class="Sketch.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:v="clr-namespace:ApprenticeView;assembly=ApprenticeView"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="gray">
        <v:SketchPage x:Name="MyPage">
            <v:OneDLink
                X1="{Binding PinX, ElementName=RedSquare}"
                Y1="{Binding PinY, ElementName=RedSquare}"
                X2="{Binding PinX, ElementName=BlueSquare}"
                Y2="{Binding PinY, ElementName=BlueSquare}"
                >               
            </v:OneDLink>
            <v:SketchShape x:Name="RedSquare"
                           v:SketchPanel.PinX="100"
                           v:SketchPanel.PinY="100"
                           Background="Red"
                           Width="40"
                           Height="30" >
           
            </v:SketchShape>
            <v:SketchShape x:Name="BlueSquare"
                           v:SketchPanel.PinX="300"
                           v:SketchPanel.PinY="140"
                           Background="Blue"
                           Width="40"
                           Height="30" >
           
            </v:SketchShape>
        </v:SketchPage>
    </Grid>
</UserControl>

Dependency properties do all the heavy lifting in this example. This is because they send and receive notifications when their values change. To take advantage of this you need to program your custom XAML controls in a very declarative way, reacting to the events that occur naturally as Silverlight renders the screen.

PinX and PinY are attached properties of a SketchPage, and are used to position SketchShapes on the page (see the entry: Replicating a Visio Page Using a Silverlight Panel).

The OneDLink shape has four dependency properties -- X1,Y1,X2,Y2 -- that represent the start and finish of a line. These properties are bound to the PinX and PinY of the shape using the element binding syntax:


<v:OneDLink
     X1="{Binding PinX, ElementName=RedSquare}"
     Y1="{Binding PinY, ElementName=RedSquare}"
     X2="{Binding PinX, ElementName=BlueSquare}"
     Y2="{Binding PinY, ElementName=BlueSquare}"
     >                
</v:OneDLink>

The last bit of magic is in the code of the OneDLink class, because X1,Y1,X2,Y2 call InvalidateRouting(); when their value changes.

        public double Y2
        {
            get { return (double)GetValue(Y2Property); }
            set { SetValue(Y2Property, value); }
        }

        public static readonly DependencyProperty Y2Property =
            DependencyProperty.Register("Y2",
            typeof(double),
            typeof(OneDLink),
            new PropertyMetadata(0.0, new PropertyChangedCallback(OnRouteChanged)));


        protected static void OnRouteChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            OneDLink oPanel = obj as OneDLink;
            if (oPanel != null)
                oPanel.InvalidateRouting();
        }

        public override void InvalidateRouting()
        {
            CreateRouting();
            InvalidateArrange();
        }

CreateRouting() does the math that generates a line between the two end points.


        public virtual void CreateRouting()
        {
            Children.Clear();
            AddChild(SmartRouting(X1, Y1, X2, Y2));
        }

        protected Polyline SmartRouting(double dX1, double dY1, double dX2, double dY2)
        {
            Point oUpperLeft = new Point(Math.Min(dX1, dX2), Math.Min(dY1, dY2));
            Point oLowerRight = new Point(Math.Max(dX1, dX2), Math.Max(dY1, dY2));

            //Make sure these is at least 3.0 to render the line, just in case
            //it is vertical or horizontal
            Width = Math.Abs(oLowerRight.X - oUpperLeft.X) + 3.0;
            Height = Math.Abs(oLowerRight.Y - oUpperLeft.Y) + 3.0;

            PointCollection oColl = new PointCollection();
            if (dX1 <= dX2 && dY1 <= dY2)
            {
                oColl.Add(new Point(0, 0));
                oColl.Add(new Point(Width, Height));
            }
            else if (dX1 > dX2 && dY1 > dY2)
            {
                oColl.Add(new Point(0, 0));
                oColl.Add(new Point(Width, Height));
            }
            else
            {
                oColl.Add(new Point(0, Height));
                oColl.Add(new Point(Width, 0));
            }

            Polyline oPoly = new Polyline();
            oPoly.SetValue(Polyline.PointsProperty, oColl);
            oPoly.StrokeThickness = 2.0;
            oPoly.Stroke = new SolidColorBrush(Colors.Blue);
            return oPoly;
        }
    }

I know that the code samples I posted are not complete enough to reproduce the example shown in the video simply by cutting and pasting the code into a Silverlight 3 project. I decided to remove the complex issues associated with building a full-featured 2D drawing system, and focus on what is needed to make element binding work automatically in custom user controls.

In the future there will be more posts on creating a full-featured 2D drawing system in Silverlight.

Beat Box Application - Part 1 overview

2009-04-28T08:18:00.000-04:00

I was searching the web for Silverlight applications the used the WPF MediaElement, and I came across these applications / demos:

John Papa has a nice chord finder application:
http://johnpapa.net/silverlight/silverlight-chord-finder/

Pete Brown has built a virtual synthesizer keyboard:
http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/03/23/Creating-Sound-using-MediaStreamSource-in-Silverlight-3-Beta.aspx

During the search I found eight mp3 files that play drum sounds "crash; hhclosed; hhopen; kick; snare; tom1; tom2; tom3". This and my recent knowledge of creating custom layout panels inspired me to create a beat box application. This is what I was able to build in about 3 hours.

I have always been interested in the relationship between math and music, so I constructed the API so the user could fill the beat box using lambda expressions. But before I go into that I need to explain the math used to control the box.

In the picture, there are 2 custom panels, the BeatPanel is horizontal. It is composed on many KitPanel's. Each KitPanel is composed of 8 Ellipses, one for each sound.

All 8 sounds in the drum kit can be played at the same time. Each beat is played if the opacity of the drum element is .6 or greater. Here is the code:


public void Play()

{

     Background = new SolidColorBrush(Colors.Black);

     for (int i = 0; i < 8; i++)

     {

          Ellipse oEllipse = Children[i] as Ellipse;

          if (oEllipse.Opacity < .6)

          continue;

          StreamResourceInfo oInfo = Sounds[i];

          MediaElement oElement = Elements[i];

          oElement.SetSource(oInfo.Stream);

     }

}

I used the threshold value of .6 on opacity because I wanted to make it possible to write multiple math expressions that, if applied to the same section of the beat, could cancel or enhance the pattern already in place.

To do this I used 2 techniques. The first was a lambda expression:


KitAction(0, xx => (xx % 16) == 1); //Crash every 16 beat

KitAction(4, xx => (xx % 4) == 1); //snare every 4 beats

public void KitAction(int iIndex, Func<int,bool> oOnFunction)

{

     for (int i = 0; i < MaxCount; i++)

     {

          double dValue = oOnFunction(i) ? 1.0 : 0.1;

          BlendBeat(iIndex, i, dValue);

     }

}

Using the lambda expression lets you describe a beat pattern with a simple rule; it lays down the basic beat for a complete song.

Fill patterns are not as regular, so I created an API to describe them with a string of X's and Spaces:



BlendBeat(6, 0, "XXX XX XXX XXXXXXXX XX"); //Tom2 fill from opening

BlendBeat(7, 0, "XXX X XXX XX XXXXX X"); //Tom3 fill from opening


public int BlendBeat(int iIndex, int i, string sMask)

{

     for (int j = 0; j <= sMask.Length-1; j++)

     {

          double dValue = sMask[j] == ' ' ? 0.0 : 1.0;

          try

          {

               KitPanel oKit = Children[i + j] as KitPanel;

               oKit.BlendBeat(iIndex, dValue);

          }

          catch

          {

               return -1;

          }

     }

     return i + sMask.Length;

}

In the process of building this example, I documented four "A-Ha" moments about custom panels and media elements. These are things that took longer then they should have until I learned the tricks and tips of Silverlight development. I will explain them in parts 2 and 3.

The complete source code for beat box can be downloaded here:

http://drumpanel.codeplex.com/

Looping Over Lists

2009-04-24T13:05:00.003-04:00

Here is a very common way to define a list of instances in .NET (in this example, a list of particles):

List<Particle> Particles = new List<Particle>();

There is a really good video on animation that includes the creation and application of particle emitters at this link:

http://videos.visitmix.com/MIX09/T12F

The demo on Particles is about halfway through.

Also you can try an example created by Robby at:

http://labs.nerdplusart.com/particles/fullscreen.php

There are at least two ways you can loop through all the elements in a list -- a For loop and a ForEach loop. A For loop would look like this:



for (int i=0; i<Particles.count; i++)
{
     var oParticle=Particles[i];
     if ( oParticle.Age > oParticle.LifeTime)
     {
          LayoutRoot.Children.Remove(oParticle);
          Particles.Remove(oParticle);
     }
}

When I first did my implementation I used a ForEach loop, because I always use a ForEach -- the coding is simpler:



foreach (Particle oParticle in Particles)
     if ( oParticle.Age > oParticle.LifeTime)
     {
          LayoutRoot.Children.Remove(oParticle);
          Particles.Remove(oParticle);
     }

In both cases the loop is (sooner or later) going to try to remove a particle object from the collection you are looping over. Removing it from the LayoutRoot.Children is never a problem because this connection is not currently locked by the loop, but calling Particles.Remove(oParticle) is a problem in the ForEach loop because the Particles collection is locked from editing (adds and removes) during the ForEach loop.

My first fix was to make a copy of the collection I was looping over. This is a bad idea because it really slows things down, and in a graphics animation, you need all the speed you can get.

So I went back and tried the For loop and realized why the experts selected that implementation. Even though the ith item is removed from the list, the collection does not automatically close up ranks and reindex all the items. Being aware of this distinction is extremely useful in certain applications.

Binding a State Change to a Property Change

2009-04-11T11:57:00.015-04:00

The video below describes the application in which we applied the approach described in this blog post:

VisualStateManager is a great way to change a lot of properties at once when the state of the model that is bound to the control changes. It allows you to separate design from implementation and gives your designers freedom to build some really interesting visual applications.
The code for forcing a Silverlight control to change state is:

VisualStateManager.GoToState(oControl, "NEWSTATE", true);

So you need to call this code to force a state transition. But what if you want to notify VisualStateManager based on the change of a value in your domain model? You can exploit the IValueConverter interface and the normal binding mechanism to do this.

void OnLoaded(object sender, RoutedEventArgs e)
{
     Binding oBinding = new Binding("DisplayState");
     oBinding.Converter = StateConverter;
     oBinding.ConverterParameter = ValueIcon;
     //the control that is the target of the state change
     LayoutRoot.SetBinding(FrameworkElement.VisibilityProperty, oBinding);
}

When the control is loaded I use standard binding to associate the VisibilityProperty of the control to the property in my domain model named "DisplayState". The binding instructions include the StateConverter (defined next), and the value of ConverterParameter is the XAML element that is the target of the GoToState Command. As you can see, the StateConverter ignores the conversion completely and always returns 'visible'. However, during the update process, the control passed in the parameter argument is now the target of the GoToState command. Furthermore, the new state is set to the value calculated by the property bound to this StateConverter. Whenever the domain model changes state, the GoToState will be targeted at the associated control and passed the correct value.

public class StateConverter : ValueConverter
{
     #region IValueConverter Members

     public override object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
     {
          Control oControl = parameter as Control;
          sState = value.ToString();
          VisualStateManager.GoToState(oControl, sState, true);
          return Visibility.Visible;
     }

     #endregion
}

I like to have all my converter classes inherit from a common converter class, mainly because in most cases the conversions do not require a ConvertBack method -- this way I only need to implement the functionality the converter truly requires.

public class ValueConverter : IValueConverter
{
     #region IValueConverter Members

     public virtual object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
     {
          return value;
     }

     public virtual object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
     {
          return value;
     }

     #endregion
}

Replicating a Visio Page Using a Silverlight Panel - Part II

2009-04-11T11:44:00.005-04:00

The arrange method can be modified to account for the object being positioned so that the center of rotation is exactly at the pin location.

Under the covers, the Visio shape sheet uses four other cells to render the shape's positioning transform -- Width, Height, LocPinX and LocPinY. This can be managed in the following function LocalPin():


        public virtual void DoArrange(Size finalSize)
        {
            foreach (UIElement oChild in Children)
            {
                double dX = (double)oChild.GetValue(SketchPanel.PinXProperty);
                double dY = (double)oChild.GetValue(SketchPanel.PinYProperty);
                double dAngle = (double)oChild.GetValue(SketchPanel.AngleProperty);
                Point oLocal = (Point)LocalPin(oChild);

                dX -= oLocal.X;
                dY -= oLocal.Y;
                Point oPoint = new Point(dX, dY);
                SetRenderTransform(oChild, dAngle, oPoint);

                oChild.Arrange(new Rect(0, 0, oChild.DesiredSize.Width, oChild.DesiredSize.Height));
            }
        }



        public Point LocalPin(UIElement oChild)
        {
            double dWidth = (double)oChild.GetValue(SketchPanel.WidthProperty);
            double dHeight = (double)oChild.GetValue(SketchPanel.HeightProperty);
            Point oOrigin = (Point)oChild.GetValue(SketchPanel.RenderTransformOriginProperty);

            double dLocPinX = double.NaN.Equals(dWidth) ? 0.0 : dWidth * oOrigin.X;
            double dLocPinY = double.NaN.Equals(dHeight) ? 0.0 : dHeight * oOrigin.Y;
            return new Point(dLocPinX, dLocPinY);
        }

Replicating a Visio Page Using a Silverlight Panel

2009-04-11T11:28:00.006-04:00

The shape model in Visio simplifies the location of the shape into 3 ShapeSheet cells: PinX, PinY and Angle. This is all you need to drop a shape on a page and rotate it.

It is possible to create a Silverlight custom panel, using attached properties that position XAML elements using the Visio PinX, PinY analogy. Sometimes this is easier than using the Top Left position commands associated with the Silverlight canvas:


        #region Attached Properties  PinX  PinY  Angle
        public static double GetPinX(DependencyObject obj)
        {
            return (double)obj.GetValue(PinXProperty);
        }

        public static void SetPinX(DependencyObject obj, double value)
        {
            obj.SetValue(PinXProperty, value);
        }

        // Using a DependencyProperty as the backing store for PinX.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PinXProperty =
            DependencyProperty.RegisterAttached("PinX",
            typeof(double),
            typeof(SketchPanel),
            new PropertyMetadata(0.0, new PropertyChangedCallback(OnPinXChanged)));

        protected static void OnPinXChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            SketchPanel oPanel = obj as SketchPanel;
            if (oPanel != null)
                oPanel.InvalidateArrange();
        }


        public static double GetPinY(DependencyObject obj)
        {
            return (double)obj.GetValue(PinYProperty);
        }

        public static void SetPinY(DependencyObject obj, double value)
        {
            obj.SetValue(PinYProperty, value);
        }

        // Using a DependencyProperty as the backing store for PinY.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PinYProperty =
            DependencyProperty.RegisterAttached("PinY",
            typeof(double),
            typeof(SketchPanel),
            new PropertyMetadata(0.0, new PropertyChangedCallback(OnPinYChanged)));

        protected static void OnPinYChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            SketchPanel oPanel = obj as SketchPanel;
            if (oPanel != null)
                oPanel.InvalidateArrange();
        }


        public static double GetAngle(DependencyObject obj)
        {
            return (double)obj.GetValue(AngleProperty);
        }

        public static void SetAngle(DependencyObject obj, double value)
        {
            obj.SetValue(AngleProperty, value);
        }

        // Using a DependencyProperty as the backing store for Angle.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty AngleProperty =
            DependencyProperty.RegisterAttached("Angle",
            typeof(double),
            typeof(SketchPanel),
            new PropertyMetadata(0.0, new PropertyChangedCallback(OnAngleChanged)));


        protected static void OnAngleChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            SketchPanel oPanel = obj as SketchPanel;
            if (oPanel != null)
                oPanel.InvalidateArrange();
        }
        #endregion

Once you have defined the attachment properties on the panel, you can use these to lay things out in the arrange method:


        protected override Size ArrangeOverride(Size finalSize)
        {
            DoArrange(finalSize);
            return base.ArrangeOverride(finalSize);
        }


        public virtual void DoArrange(Size finalSize)
        {
            foreach (UIElement oChild in Children)
            {
                double dX = (double)oChild.GetValue(SketchPanel.PinXProperty);
                double dY = (double)oChild.GetValue(SketchPanel.PinYProperty);
                double dAngle = (double)oChild.GetValue(SketchPanel.AngleProperty);

                Point oPoint = new Point(dX, dY);
                SetRenderTransform(oChild, dAngle, oPoint);

                oChild.Arrange(new Rect(0, 0, oChild.DesiredSize.Width, oChild.DesiredSize.Height));
            }
        }



        internal TransformGroup SetRenderTransform(UIElement oControl, double dAng, Point pTrans)
        {
            if (!(oControl.RenderTransform is TransformGroup))
                oControl.RenderTransform = new TransformGroup();

            TransformGroup oGroup = oControl.RenderTransform as TransformGroup;
            if (oGroup.Children.Count == 0)
            {
                oGroup.Children.Add(new RotateTransform());
                oGroup.Children.Add(new TranslateTransform());
            }

            RotateTransform oRotate = oGroup.Children[0] as RotateTransform;
            oRotate.Angle = dAng;

            TranslateTransform oTranslate = oGroup.Children[1] as TranslateTransform;
            oTranslate.X = pTrans.X;
            oTranslate.Y = pTrans.Y;

            return oGroup;
        }

In the next post we will explore extending the model to be even more Visio-like, using LocPinX and LocPinY, height and width.

Using the Mouse to Rotate a Silverlight Element

2009-04-06T09:04:00.015-04:00

Steve: I was asked on two separate occasions, during interviews, programming problems that involved geometry -- in other words, could I work with sin, cos and tan to calculate geometry. This is something I learned in 8th grade and I have used this knowledge in many applications, but this demo is probably the most fun.

The goal of this demo, as explained in the video below, is to build a targeting system that uses mouse movement to direct the projectiles.

The XAML in the tank control needs to represent the turret separate from the body of the tank; Deb has used Expression Blend to create a transform group that lets the turret rotate separately from the tank.

Now it is time to overlay the math on the geometry:

Call the code below every time the mouse moves; the variables synchronize with the picture:

e.GetPosition(oElement).X and e.GetPosition(oElement).Y get the current position
of the mouse in the coordinate system of the canvas.

oControl is the user control that is the tank on the screen, so oSize is the height and width of the tank, and oPoint is where the center of the tank is relative to the top-left corner and is used to position it on the canvas.

TranslationX and TranslationY is current location of the tank's top-left corner on the canvas, and TranslationAngle is the direction it is heading.

Now that math. Dx an Dy represent the distance along the X and Y axes from the center of the tank to the current mouse location. The calculations are done in the coordinate system of the canvas.

The radius or hypotenuse of the triangle is calculated and then divided into Dx and Dy to normalize the values. Then the ArcTan is calculated to determine the angle.

One final trick. Remember from the first diagram that the rotation of the turret is relative to the body of the tank. To orient the gun so it points at the mouse, you must subtract the calculated angle from the direction the tank is traveling.

Call the code below when the mouse is moved:


////virtual method that lets any game element fire a weapon
public virtual bool TrackMouse(Canvas oElement, Control oControl, MouseEventArgs e)
{
     Size oSize = oControl.RenderSize;
     Point oPoint = oControl.RenderTransformOrigin;

     //some basic trig
     double dX = e.GetPosition(oElement).X - TranslationX + oPoint.X * oSize.Width;
     double dY = TranslationY + oPoint.Y * oSize.Height - e.GetPosition(oElement).Y;
     double dRadius = Math.Sqrt(dX * dX + dY * dY);

     //remember WPF wants angles in degrees
     double dAngle = System.Math.Atan2(dY / dRadius, dX / dRadius) * 180.0 / System.Math.PI;
     dAngle %= 360.0;

     //the virtual SetFireAngle method is used to control the turret
     //this code is here to account for the direction the tank is heading (i.e. Player.TranslationAngle)
     //allowing the tank to move in one direction and shoot in another
     SetFireAngle(TranslationAngle - dAngle);
     return false;
}

How To Do Drag & Drop Using the Visual Tree

2009-04-03T09:42:00.029-04:00

First, a shout out to Jesse Liberty who has a great post on the basic Drag & Drop pattern:

http://www.silverlight.net/blogs/jesseliberty/archive/2009/01/13/drag-and-drop-with-managed-code.aspx

When creating a complex application, I have found that attaching a MouseLeftButtonDown, MouseMove and MouseLeftButtonUp to every object that is dragable is problematic. As an alternative, I use the function VisualTreeHelper.FindElementsInHostCoordinates and manage the process from a parent UI element.

This code sets up mouse up and mouse down events for the parent UI object:

        
public DrawingSurface() : base()
{
     MouseLeftButtonDown += new MouseButtonEventHandler(OnMouseLeftButtonDown);
     MouseLeftButtonUp += new MouseButtonEventHandler(OnMouseLeftButtonUp);
}

The following code lets me hit test against the children objects in the entire VisualTree, looking for an element of type "T", which are UIElements. During the search I am also looking for a panel of type "C", just in case the user is not over an object (for example, selecting nothing). A list of select objects is returned :

        
public List<T> FindElement<T,C>(Point oPoint, ref Panel oPanel) where T : UIElement
{
     List<T> oList = new List<T>();
     foreach (UIElement oElement in VisualTreeHelper.FindElementsInHostCoordinate(oPoint, this))
     {
          T oShape = oElement as T;
          if (oShape != null)
               oList.Add(oShape);

          if (oElement is C && oPanel == null)
               oPanel = oElement as Panel;
     }
     return oList;
}

Here is just one example of some of the hit test logic you can implement. Based on the type of SketchObject that is found, I can infer the user's drawing need -- is the user planning to drag the shape, stretch the shape, connect the shape, or create the shape -- and auto-select the right drawing tool. It is a lot easier to implement this logic in the parent UI Element:

        
void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
     Panel oPanel = null;
     Point oPoint = e.GetPosition(null);

     CurrentTool = DrawingTool.Ignore;

     ActiveHandle = FindElement(oPoint, ref oPanel);
     if (ActiveHandle.Count != 0)
     {
          if (ActiveHandle[0] is RotateHandle)
               CurrentTool = DrawingTool.Rotate;
     }

     ActivePort = FindElement(oPoint,ref oPanel);
     if (ActivePort.Count != 0)
     {
          if (CurrentTool == DrawingTool.Ignore)
               CurrentTool = DrawingTool.Connect;

          OpenDragConnect(ActivePort[0], oPoint);
          return;
     }

     ActiveGroup = FindElement(oPoint, ref oPanel);
     if(ActiveGroup.Count != 0)
     {
          if ( CurrentTool == DrawingTool.Ignore )
               CurrentTool = DrawingTool.Move;

          OpenDragDropShape(ActiveGroup[0],oPoint);
          return;
     }

     ActiveMaster = FindElement(oPoint, ref oPanel);
     if (ActiveMaster.Count != 0)
     {
          CurrentTool = DrawingTool.Create;
          OpenDragDropShape(ActiveMaster[0], oPoint);
          return;
      }

}

By using this approach you can consolidate all of drag & drop code in one place, making it easier to manage and maintain.

How to Zoom In and Out with a Mouse Wheel in Silverlight

2009-04-03T09:17:00.025-04:00

A known fact about Silverlight is that it does not currently listen to the mouse wheel; there are no events in XAML that return its status. The following code will allow you to monitor the mouse wheel by using events passed by the browser, and zoom in and out when the mouse wheel is turned.

The first section of code sets up Silverlight to listen to the browser for the OnMouseWheel event:

        
private void OnMouseWheel(object sender, HtmlEventArgs args)
{
     HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);
     HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel);
     HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);
}

This next piece of code gets the delta for the mouse wheel, positive or negative. We don't care how much the wheel has turned, only if it was up/forward/positive or down/back/negative, translating this into a +1 or -1:

        
private void OnMouseWheel(object sender, HtmlEventArgs args)
{
      double mouseDelta = 0;
      ScriptObject e = args.EventObject;

      // Mozilla and Safari   
      if (e.GetProperty("detail") != null)
      {
           mouseDelta = ((double)e.GetProperty("detail"));
      }
      // IE and Opera   
      else if (e.GetProperty("wheelDelta") != null)
      mouseDelta = ((double)e.GetProperty("wheelDelta"));

      double dSign = Math.Sign(mouseDelta);
      //now change the scale of the activePage xaml element
      //this is typically a canvas this is a child of the local root
      ChangeScale(ActivePage, dSign);
}

The last piece of code uses this number to calculate and apply a scaling factor to the target XAML element.

  
private void ChangeScale(FrameworkElement oTarget, double dSign)
       
{
     if(!(oTarget.RenderTransform is TransformGroup))
     oTarget.RenderTransform = new TransformGroup();

     TransformGroup oGroup = oTarget.RenderTransform as TransformGroup;
     if (oGroup.Children.Count == 0)          
     {              
          oGroup.Children.Add(new ScaleTransform());
          oTarget.RenderTransformOrigin = new Point(.5, .5);          
     }
            
     m_dCurrentZoom += 0.1 * dSign;

     ScaleTransform oScale = oGroup.Children[0] as ScaleTransform;
     oScale.ScaleX = m_dCurrentZoom;
     oScale.ScaleY = m_dCurrentZoom;     
}

This code sets the focal point of the zoom to the center (.5, .5) of the XAML element that is passed in the function, typically a canvas. If you wanted to zoom in on something that is drawn on the canvas, like a shape or a button, you would need to calculate where that element is relative to the total width and height of the canvas (e.g. 30% of x, 70% of y = .3, .7).

Behaviors and Uses of Collapsed vs. Zero Opacity

2009-04-01T12:00:00.009-04:00

While visually, setting a XAML element's opacity to zero is the same as setting visibility to collapsed, the two have different behaviors when it comes to detecting interaction with the mouse. An element whose visibility is set to 'collapsed' is undetectable by a mouse; it is as if the element has been removed from the visual tree. Setting an element's opacity to zero, however, makes it invisible while it is still detectable by the mouse, e.g. a button with zero opacity is still clickable.

This distinction is useful in a number of ways. One application is creating an invisible button on a page that the knowledgeable user can click to trigger a desired action such as debugging or a special report. To do this, you would create a button with opacity equal to zero. Conversely, you may have a button you wish to deactivate as well as hide, in which case you would set visibility to collapsed.

Another application of zero opacity is to create a shield which allows lower level elements to display but renders them inactive - for example, you may want to do this during an asynchronous operation like retrieving an RSS feed, during which you want to prevent user interaction. In this case, you could create a large rectangle covering the page but set its opacity to zero -- this would allow the user to see what is happening underneath but prevents them from doing anything. When the asynchronous event is complete, the rectangle could then be collapsed to allow user interaction.

Opacity and visibility are also be different in their use for visualization, especially during animations. Opacity is a continuous value that ranges from 0 to 100% in Blend or 0 to 1 in XAML, making it a good candidate for animations, where an element can move from one value to another during a given timeframe. Visibility is an on/off value, either visible or collapsed, and changes at one point in time. These differences in visualization, combined with differences in mouse interaction, should be considered by the designer/developer when choosing between the two properties.

The most important thing to remember is just because you can't see it, doesn't mean you can't click it! An element whose opacity = 0 can still be an active control on your Silverlight application. If you want something to be really 'gone', set its visiblity to collapsed.

Sharing What We've Learned about Silverlight

2009-04-01T10:26:00.001-04:00

DEB:
We’ve always been very big on visualization. The complex applications we’ve built and deployed as Apprentice Systems made extensive use of Microsoft Visio for knowledge capture, diagramming and drawing generation; we’ve even used interactive 3D successfully. But nothing has excited us as much as Silverlight.

With Silverlight we get two things our customers have consistently asked for: compelling visuals and web-based deployment. Our use of Visio required that we stay on the desktop, but increasingly customers have been demanding solutions that run inside a browser. Also, big upfront licensing fees are getting increasingly difficult to sell; software as a service is the business model that fits our tough economic times. Silverlight is a perfect fit for the direction we wanted to take our business.

But it’s also a great fit for the way we work, because I do most of the design work, and Steve is the developer. I handle everything Adobe and FrontPage, do most of the Visio shape work, and know next to nothing about .NET and C#. We used to pass things back and forth A LOT, interrupting the workflow, waiting for a project to return for my input, then handing it off again. The move to Silverlight and Expression Blend has made me more self sufficient, and from what I’ve seen of Blend 3, I’ll be even more so in the future. Also, the integration of Photoshop and Illustrator will really unleash creativity as control skinning gets much, much easier. I can’t wait to get my hands on a version of Blend that has all the new features, including SketchFlow!

STEVE:
I have learned Silverlight by reading a lot of blogs and watching hours of video. I feel like I have attended Mix07, Mix08, Mix09 and PCD08 from the web coverage. I have been learning from the bloggers and tweeting with the Twitters: Jesse Liberty, Tim Heuer, Shawn Wildermuth, Mike Snow, Brad Abrams, Nikhil Kothari, Jeff Wilcox, John Papa, Tim Sneath, Scorbs (Karen Corby), Shawn Oster, Erik Mork, John Stockton, Joe Stegman, Laurence Moroney, & Scott Gu.

Silverlight.net is my home page, and I bought an iPod to listen to shows like Sparkling Client, .NET Rocks, Herding Code, and Stack Overflow.

The writing is on the wall and you can see it in the Silverlight 3 and Blend 3 Betas -- this is a platform that is going to change how many people will think about software and the web.

In the past year we have completed five significant Silverlight projects: Buzzoggi (a web mashup), Robot Arena (a game), an association list box control, a product configurator for CinemaTech (home theater furniture), and a narrative storytelling device currently being tested at Silverlit Art. In the process of building these I have built over a hundred test projects to explore the patterns used to develop Silverlight applications.

This blog is about sharing what we have learned and sharing the journey.