from Zero to Knowing mvvm video 2

This is the second video of our series

In this course you’ll learn the fundamentals of developing advanced XAML MVVM apps in C# .

The MVVM design pattern is fundamentally about dividing up your application into layers (providing a clean separation and boundary between them) and providing the connections between the components in those layers. When all is said and done, that’s what it comes down to. Although Views don’t typically lend themselves to having a clean separation between their look and their behavior like custom controls do (where the separation is enforced), the core reasoning behind maintaining the separation between look and behavior is the same, and many of the same structural principles still apply.

you will learn how to:

Use RIA Services Business Application Template to create a Line of Business (LOB) application project.
Use DataGrid and ListBox controls to implement data binding.
Property Changed implemented
ICommand, Relay Command, Event to command.
Observable Collections
Select one customer action that shows his/her Invoices
XAML Data binding
Triggers
Accessing data
WCF RIA Services
“Master Details” on the mvvm class
Ria Services , Lazy Loading, Including the Child only when extremely Necessary
Separation of Concerns

http://www.xneterp.com/training/videos/FZTK-2/FZTK-2.html


Enyoy

The “From zero to Knowing MVVM” video 1

In this course you will learn how to design and build Windows Silverlight 5 Rich Internet Applications (RIAs) application. This is an introductory course that concentrates on the basic concepts required to build an Model ViewModel with the Pattern. We use Microsoft WCF RIA Services, that  provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations., and the MVVM pattern has proven techniques for building long-lived, well factored software that are widely used in software development today.

http://www.xneterp.com/training/videos/FromZeroTomvvm/InvoicingMVVM.html

There is no audio, but we have included easy to follow instructions on the screen

Our Second Video with audio can be found here http://oscaragreda.wordpress.com/2012/02/19/from-zero-to-knowing-mvvm/

XAML 

This first video will take you from the “Create – New – Silverlight 5 Project” dialog with step by step instructions to create an MVVM connection between the UI and the View Model Class.

-Entity Frameworks Model Frist Approach

-Ria Services SP2

-Step by Step XAML creation of the required DataGrid to hold our data

-Lots of XAML

-Step by step creation of all the part to make our own MVVM

-MVVM methods and properties

-Data Binding

-Namespace definition

-and more

www.xneterp.com/training/videos/FromZeroTomvvm/InvoicingMVVM.html

AdventureWorks Silverlight Deployed Online

I have received several emails asking for the Silverlight AdventureWorksLT application run from the web.

When developers first start building Silverlight applications they typically add all of the code for the application into the XAML’s code-beside file (Home.xaml.cs for example). Although this approach certainly works, is better to follow the MVVM pattern instead to have the UI independent from the Business Logic .

By doing MVVM so you will inherent benefits like

  • Better code re-use
  • Simplified maintenance
  • Modular design of your Application
  • Enhanced testing support.

I’ll focus on the overall benefits achieved by building applications that are based on the MVVM pattern using the AdventureWorksLT famous database to demonstrate an Invoice in MVVM.

so here it is

AdventureWorksLT in Silverlight MVVM

The AdventureWorksLT Application in Silverlight using MVVM

The MVVM Dashboard

The Dashboard uses just one MVVM Class
Communicate between a View and ViewModel using commanding
Create a ViewModelBase class to handle INotifyPropertyChanged notifications
Create a ViewModel class that derives from ViewModelBase and handles data interactions
Bind a ViewModel class to a View in XAML
Bind Silverlight controls to ViewModel properties

The View in MVVM represents the Silverlight screens that you build. This includes the XAML files and the code-beside files that are responsible for showing data to end users. The View’s responsibilities include displaying data and collecting data from end users. A given View isn’t responsible for retrieving data, performing any business rules or validating data.
In this case the View is the one XAML file I called the Dashboard

The ViewModel acts as the middle-man between the View and the Model. It’s responsible for aggregating and storing data that will be bound to a View. For example, a ViewModel may contain a List<State> property and a List<Person> property that may be bound to two ComboBox controls in a View. The ViewModel will retrieve the values held by these two properties from the Model. By using a ViewModel the View doesn’t have to worry about retrieving data and knows nothing about where data comes from.

When developers first start building Silverlight applications they typically add all of the code for the application into the XAML’s code-beside file (MainPage.xaml.cs for example). Although this approach certainly works, by following the MVVM pattern you can take advantage of several inherent benefits including better code re-use, simplified maintenance, more modular code and enhanced testing support. I’ll focus on the overall benefits achieved by building applications that are based on the MVVM pattern throughout the rest of this article.

The Extended Model
Notice how I use an Extended Model class for each Table, to add additional validation capabilities but most important, to create the Calculated Fields

Once the Model and my Extended Model are ready to go the View and ViewModel classes can be created. As mentioned earlier, a View represents a Silverlight screen that end users interact with which includes the XAML file and the associated code-beside file. Rather than adding all of the code to call the Model and retrieve data directly into the View’s code-beside file, the View will rely on a ViewModel class to retrieve data and then bind to the properties of the ViewModel.

The Model-View-ViewModel (MVVM) pattern provides a flexible way to build Silverlight applications that promotes code re-use, simplifies maintenance and supports testing. The pattern consists of three different components including:

The Model (entities and code on the server)

The View (the Silverlight screens)

The ViewModel (the glue between the Model and the View).

An example of the how the Model, View and ViewModel components relate to each other is shown on the next Dashboard:

the Patient is Master of Consultations

Consultations is master of Diagnosis

Diagnosis is master of Prescriptions

Prescriptions of Exams

image

I created the following video to illustrate the pattern

There is no voice on the video but written notes will  guide you through.

image

Here is the Sample Application

http://medlink.codeplex.com/

I am just another Silverlight MVVM Developer.

I hope you enjoy it as much as I have  !!

Adventure Works in Silverlight

there are hundreds of MVVM crazy implementations out there, and on top of that, there are hundred of ways of doing things with MVVM

so why not put attention to the best of the best

John Papa Kung Fu MVVM
http://channel9.msdn.com/Series/Silverlight-Firestarter/Silverlight-Firestarter-2010-Session-4-MVVM-Why-and-How-Tips-and-Patterns-using-MVVM-and-Service-Pat

Ward Bell from IdeaBlade
http://drc.ideablade.com/xwiki/bin/view/Documentation/code-sample-bookshelf

Kyle McClellan
http://blogs.msdn.com/b/kylemc/archive/2011/04/29/mvvm-pattern-for-ria-services.aspx

Dan Wahlin
http://channel9.msdn.com/Series/Silverlight-Firestarter/Silverlight-Firestarter-2010-Session-3-Building-Feature-Rich-Business-Apps-Today-with-RIA-Services

and we created a full Business Application with the current tools..

 

this is a work in progress , so it will be getting better every week

you need

  1. the Small AdventureWorkk LT database http://msftdbprodsamples.codeplex.com/
  2. the free Silverlight Toolkit http://silverlight.codeplex.com/releases/view/43528
  3. nothing else.. no 3rd parties just code

 

 

Main Panel

image

 

The customers Datagrid, has the SalesOrder datagrid inside

image

 

Add New Customer

image

 

Edit

image

 

Master Detail

image

 

 

all in MVVM

image

 

and the very Cool, Blend Designer data

image

 

image

The View Model

http://medlink.codeplex.com/documentation

The ViewModel

For simplicity of this sample application, we created a Folder called Patients inside Views

clip_image002

And put all the View Models class inside there

clip_image004

Let’s take a quick look at one of those ViewModels.

The ViewModel for Patients

clip_image006

We use a class for the Async Load of the data that takes 3 parameters

1. The Ria Services Domain Context to be used to load the data

2. The Query where we tell what Patiends to load.. This is critical, this is why we don’t include the related tables on the ria services class, instead we tell ria to go look for specific data without having to load ALL DATA and make all that data to travel on the web.

3. The results of the operation.. Did it succeed getting the data of did it failed

clip_image008

The collection of Patients to which we will be binding the XAML view

The Current Patient, to which we will be also binding our xaml

Model and Business Logic

clip_image010

Here are partial classes for each entity on the Server

clip_image012

Calculated Fields

clip_image014

Vertical Formulas

Data binding XAML

clip_image016

clip_image018

Commands

clip_image020

clip_image022

clip_image024

clip_image026

clip_image028

The Tooltip bound to the RowLoded event

image

clip_image032

Lazy Loading

Imagine there are 500 Patients and each patient has 3 consultations, then every time you load the consultations collection (or customers in your case) data all of it will be loaded, a a lot of data will be travelingyou’re your SQL server to the hosting where your Silverlight app resides,

Unless you tell to the Ria services Domain Context to go get ONLY the consultations for the Current (in screen) patient.

That is what we do here

clip_image034

clip_image036

Current Collection

The selected one on the screen

clip_image038

clip_image040

Busy Indicator

clip_image042

clip_image044

clip_image046

Add New Command

clip_image048

Delete Current Entity

clip_image050

Print

clip_image052

Selection Changed Command, MVVM

clip_image054

clip_image056

ComboBoxes Data

clip_image058

XAML

clip_image060

On the ViewModel

clip_image062

clip_image064

Needs to be a friendly field on the Table,

If some Combobox do not display data is because you have to choose a value

if you need to get in touch with me or ask me for the road map on the project

Oscar_Agreda@xneterp.com

 

Silverlight MVVM Code Smith Templates

We created a set of CodeSmith Templates based on this MVVM implementation

Microsoft hired a group of top Silverlight Business experts to create the MVVM PDC presentation for the creation of truly Silverlight Business Application using the MvvM pattern, unfortunately the sample application from the presentation  is not very useful and extremely small, besides there are many topics that were not covered, John Papa would have needed 40 hours to truly explain the whole Kung Fu MVVM Implementation.

That is why we created a set of templates that we like to call our Robot (yes CodeSmith is a robot that you can teach everything and it will do it for you)

It takes and existing  Databases Schema and uses the awesome power of CodeSmith to create a Full Silverlight Business Application based on your exiting Model.

Also creates the extensions so you can add the Business Logic, like calculated Fields, etc

http://johnpapa.net/pdc10kungfu

clip_image001

explaines here
http://channel9.msdn.com/Series/Silverlight-Firestarter/Silverlight-Firestarter-2010-Session-4-MVVM-Why-and-How-Tips-and-Patterns-using-MVVM-and-Service-Pat

The following application show the power of CodeSmith

clip_image002

http://medlink.codeplex.com/

Here is my email

oscar@BusinessApplicationsNow.com

all of our knowledge creating Silverlight Business Applications into a set of CodeSmith Templates

clip_image003

A set of Templates will generate a full Silverlight Application

no DLLS, Pure C# and XAML

Because LightSwitch for example, utilizes DLL so the developers is not able to see the XAML to modify it. in our case we allow the developer to see the code, as you can see on the CodePlex application

clip_image004

clip_image005

CodeSmith has proven that no mater with Technology Microsoft adopts next. It could be  Jupiter merging Silverlight with HTML5

With Codesmith we can make the changes and we are in business once again

image

it creates the following

Child Windows to edit data

Child Windows to add new records

WorkWith Grids to select the data, etc etc

Navigation Pages and User Controls to make the give the application an ERP functionality

clip_image001[5]

You can see the FULL application here

http://medlink.codeplex.com

CodeSmith XAML Templates

As I get more and more comfortable with Entity Framework, Ria Services and XAML on the VS 2010,  I realize that there are some simple things within the XAML that can be automatically generated from the Database using code generator like Code Smith,  that Microsoft absolutely miss by doing in in T4. One of these features is the ability to add more attributes to the XAML created when you drag and drop a Datasource in the current XAML Page, Child Window or Custom Control.

I think the best way to describe what my templates generate is to create a video and show you.

http://blip.tv/file/3938656

It is a work in progress

Here are the templates

www.xneterp.com\SL4_Ria_Templates.zip

Follow

Get every new post delivered to your Inbox.

Join 25 other followers