MVVM Archives - Falafel Software Blog


Windows 10 Development: Adding Design-Time Data with Blend

By | Windows | 2 Comments

This is post 5 of 14 in the series “Developing for Windows 10” In our last post, we installed the MVVM Light Toolkit and defined the basic framework for a simple two-page app with the MVVM pattern. With the ViewModels we created, we now have the containers for the data, but it would be even more helpful to pre-populate them with some sample data to aid in the designing of the app. Design-Time Data Support Fortunately MVVM Light exposes a static property allowing the ViewModel code to detect whether or not it is running inside a visual designer such as Visual Studio…

Read More

Windows 10 Development: Getting Started with the MVVM Light Toolkit

By | Windows | 6 Comments

This is post 4 of 14 in the series “Developing for Windows 10” In the next few posts we’ll dive into the basics of using the MVVM Light Toolkit with Windows 10 to build a simple project two-page with the MVVM design pattern. Today we’ll show how to setup the toolkit in a Windows 10 project, and some of the basic components you’ll need to define to follow the MVVM pattern. MVVM A complete discussion of the MVVM pattern is outside the scope of this document, so if you are new to the concept and want to learn more I suggest taking…

Read More

Make a Kendo MVVM calculated field depend on DataSource data

By | Kendo UI, MVVM | One Comment

Imagine this: You are developing a web page that displays data in a grid but you also want to be able to show various other views and aggregations outside the grid. How would you do it? You could hook up event handlers to the grid’s DataSource and manually update everything when the data changes. But wouldn’t it be nicer if you could just declare MVVM bindings and let the bindings detect all the changes? I think so. Let me know you how it’s done. Scalar bindings First, let’s talk about scalar bindings such at the text and value bindings. You…

Read More

Apps for Office: Creating a Content App for Excel

By | Apps for Office | No Comments

This is post 5 of 9 in the series “Developing Apps for Office” This post continues the deep dive into developing Apps for Office by demonstrating how to create a Content App that runs in Microsoft Excel. The app we build today demonstrates how to work with the Office API within Microsoft Excel to accomplish tasks such as creating tables, binding to selections, and communicating between the document and your app using MVVM. This particular example makes use of the Kendo UI Core framework, as well as Moment.js to work with dates in JavaScript. The app is designed to present…

Read More

Kendo Undocumented: Binding to Parameterized Dependent Methods

By | JavaScript, Kendo UI, MVVM | No Comments

If you’ve been using Kendo MVVM for a while, you might be aware that you can create what they call Dependent Methods: methods that are calculated based on fields in the ViewModel and whose bindings are automatically refreshed when any of those underlying fields changes. But all of the examples only show parameterless functions being used as dependent methods, which might give the impression that you can’t create a dependent method binding with parameters. So, you might end up writing a lot of duplicated code like the one in this simple example:

In this example, the three functions isRed, isGreen,…

Read More

Fading Item Visibility with a Kendo UI Binding

By | JavaScript, Kendo UI, MVVM, Web | 2 Comments

Kendo UI comes with a nice built-in bindings if you’re using the MVVM-style bindings (which is always my recommendation over purely procedural coding). One commonly used binding that comes pre-packaged with Kendo UI is the visibility binding which actually changes the CSS display attribute, not the visibility attribute–Adam has a nice blog post about adding another custom binding that changes the visibility attribute instead. I often find that having UI elements suddenly disappear can create a bad user experience, especially if it causes the way the page lays out at all. Instead of making something appear or disappear suddenly, I like to fade…

Read More

Kendo UI Mobile with MVVM and RequireJS

By | Kendo UI | One Comment

A potent mix for creating elegant mobile applications is Kendo UI Mobile with MVVM and RequireJS. Included is an online sandbox environment with code snippets that will highlight the concepts needed to create more advanced Kendo UI Mobile applications. This has been created using jsFiddle and acts as a starter template to update or fork as needed.

Read More

Creating a Custom Kendo UI Validator

By | JavaScript, Kendo UI, News | One Comment

Kendo UI makes it very easy to do validation with any of their built-in validators. These are built on top of the validation features in HTML5, but have been made to also works in non-HTML5 compliant browsers. The built-in validators work for 80% or more of situations, but occasionally you need to validate something in a unique way that requires some custom logic. Like much of the Kendo UI framework, Kendo UI’s validation widgets make it easy for you to customize them. For validation, the key is to create a custom validation rule when you’re setting up your validator widget, like this:


Read More

Dependent Methods (calculated fields) – a hidden goody in Kendo UI

By | Uncategorized | One Comment

Dependent methods are easy to miss in the Kendo UI documentation, but hugely valuable. On the face of it, dependent methods implement calculated fields, but can actually take any type of data and convert to any other type (if you’ve worked with Silverlight, think Converters). MVVM bindings are updated so that page elements update automatically. Imagine you have a set of severity types: “no problema”, “I’m a little concerned” and “Armageddon”. These can be painted on the page as green, yellow and red flags or you could go with text in normal/italic/bold font. Dependent methods are methods that fire when properties…

Read More

Dirty Children and Kendo UI

By | JavaScript, Kendo UI, MVVM | One Comment

One of the great things about MVVM is the ability to make a change to the underlying ViewModel and the change “automagically” appears in the View.  Kendo UI takes this one step further by allowing you to define a Model (either with or without a DataSource) and all changes will be tracked.  This allows you to either cancel those changes and revert your data to the original state, or automatically detect whether changes have occurred and save those back to your service. This works flawlessly in Kendo, except in one scenario I’ve found.  If you have a hierarchy of objects…

Read More

Silverlight MVVM Simple and Easy

By | C#, MVVM, Silverlight | No Comments

MVVM (Model-View-View Model) is a programming pattern similar to MVC that you can use to decouple the model and the view from business logic. There are many articles on the internet about what MVVM is so I’m not going to talk about that. In this article I want to concentrate on the most basic MVVM application, understanding it, and how to move on from there. This example doesn’t have a Model. More than likely when building even the simplest application you will need access to data. If you create an Entity Framework (ADO.NET Entity Data) Model, this would indeed be…

Read More

Falafel CEO Interviewed on Popular Podcast

By | News | No Comments

This week our CEO, Lino Tadros, is the special guest on  the popular .NET development show, “Yet Another Podcast”. The show is hosted by Jesse Liberty, a Senior Developer-Community Evangelist on the Windows Phone Team. Jesse and Lino discuss developing applications for Windows Phone, MVVM, Silverlight, Visual Studio 11 and more. Lino also makes a big promotional offer during the interview, so if you are itching to learn a little bit about Windows Phone, you are going to want to tune in. Grab the podcast here: http://jesseliberty.com/2012/02/06/yet-another-podcast-59lino-tadres/

Read More

Singleton ViewModels in Silverlight

By | Silverlight | No Comments

The MVVM design pattern works extremely well in Silverlight.  A typical implementation of this pattern is to create a ViewModel for each View or Page in your application.  This gives you a clean separation between your View and ViewModel and it also provides logical separation for your ViewModels so they don’t get bloated.  For larger applications, you may find that each View has multiple ViewModels or a Page is comprised of several UserControls, each of which have their own ViewModel.  Once you get to this point, it can become challenging to communicate between the ViewModels and tie everything together in…

Read More

RadDomainDataSource and being MVVM Friendly

By | Silverlight | One Comment

What makes RadDomainDataSource MVVM friendly and why did Telerik build it? In his excellent blog “An MVVM Approach to Telerik Domain Services for Silverlight“, Rossen Hristov says: “I truly believe that every time someone places an UI element or a control in his view model, a baby kitten dies somewhere.” Here at Falafel, I do believe its company policy not to kill kittens and our code base must reflect this. The secret sauce that allows us to move DomainDataSource functions cleanly into the ViewModel is the QueryableDomainServiceCollectionView (QDSCV) class. RadDomainDataSource is simply a control wrapper around the QDSCV that can…

Read More

Triggering Commands with Actions using Expression Blend

By | Silverlight | No Comments

Expression Blend 4 makes invoking a Command, drag-and-drop simple. Working in Expression Blend 4, I have a project with a “MyCommand.cs”, “MyViewModel.cs” (both from the Using Commands and MVVM blog project) and an unbound button on the main form: In Blend, click on the Assets tab and select the Behaviors item in the list. The list contains both “Actions” and “Behaviors”. Actions vs. Behaviors Silverlight differentiates between “Actions” and “Behaviors”. Actions use “Triggers” (e.g. events, storyboard state changes…) to initiate commands, property changes or some other outcome. For example, a mouse Click event can trigger a command execution. “Behaviors” are similar to Actions…

Read More

Using Commands and MVVM

By | Silverlight | 2 Comments

To separate business action logic from presentation in a Silverlight app, you should be using commands. The logic for “Save Document” or “Post Invoices” really has no place in the page code behind, and certainly doesn’t need to show up twice when invoked from both a button and a menu. Commands encapsulate logic for some business action, e.g. “Save Document”.  that can be bound declaratively in XAML. Commands also fit neatly into the MVVM pattern where the command itself lives in the ViewModel. To create and use a command: Create a class that implement the ICommand interface. ‘Easy-peasy’ — only…

Read More

Calling Silverlight’s PropertyChanged Event Without Mistakes

By | Silverlight | No Comments

Quite often in my copying and pasting frenzies for Silverlight properties that use notifications I will forget to change the string inside the constructor to PropertyChangedEventArgs(string). The string is the name of the property that needs to send the property changed event. More times than not the calling property getter or setter is indeed the property that needs to be changed so I updated my RaisePropertyChanged method to look at the call stack and find the name.   Here’s my NotifyPropertyBase abstract class that I base all my View Models upon: 1: public abstract class NotifyPropertyBase : INotifyPropertyChanged 2: {…

Read More

Getting Properties from a FrameworkElement into a DataTemplate

By | Silverlight | No Comments

I’m sure once you have tried to use DataTemplates in certain controls you will notice that if you give a name to an element you cannot access that element outside the DataTemplate. This makes sense because there will end up being many of these items created in a template and the name you give the element will not be unique. So how would you set an element’s property in the DataTemplate that comes from a FrameworkElement property? It can be done with Dependency Properties.   As a side note, the Dependency Properties in this example will work around the issue…

Read More

Binding a Control’s VisualState to a View-Model Property

By | Silverlight | No Comments

Someone recently asked me for advice on how to bind the visual state of a Silverlight control to a property of the view-model.  Specifically, they had a Boolean property on their view-model named something like IsExpanded that they wanted to control the expanding and collapsing of a control in the view with the value of this view-model property. It was such a fun sounding challenge—and one that seemed like it would be very useful to have for many situations—that I couldn’t resist creating a simple solution.  Here’s What I Created (Silverlight 4 Plug-In Required)   Here’s How I Did It…

Read More