×

Discussion Board

Results 1 to 10 of 10
  1. #1
    Registered User
    Join Date
    Sep 2013
    Posts
    45

    MVVM, Inheritance and custom components

    Hi there, I'm new in WP development and I'm trying to understand how the MVVM pattern works.
    I also need to understand how it does work with inheritance and custom controls as I want to develop an app that requires them.

    So here's a quick sample that I thought, to let you understand what I want to do:
    let's say that I'm making an app in which the user can tap on a button and add a custom component to the main grid.
    Each custom component has some properties and some of them are common properties between each kind of component.

    Coming from Java, I'd just build a base component class and then extend it for each needed component.
    This will cause a structure like this:
    Code:
    BaseComponent
    CircleComponent : BaseComponent
    SquareComponent : BaseComponent
    TriangleComponent : BaseComponent
    Now, considered that MVVM requires a model, a view and a view model, this means that my BaseComponent should be divided into
    Code:
    BaseComponentModel
    BaseComponentViewModel
    BaseComponentView
    The question is: how do I work with MVVM and inheritance?

    Can I do something like this?
    Code:
    CircleComponentModel : BaseComponentModel
    CircleComponentViewModel : BaseComponentViewModel
    CircleComponentView : BaseComponentView
    I'm sorry if I can't make the question clearer, but I'm pretty confused about this MVVM thing!

  2. #2
    Nokia Developer Champion
    Join Date
    Mar 2013
    Posts
    516

    Re: MVVM, Inheritance and custom components

    The model is what holds your data. So perhaps it is a person. And you have derived classes from it like teacher and student that add additional properties.

    The view is what you use to display that data. In your case this might be a list on a collection of objects. To make it adapt to the different variants of your person object you might want to look into DataTemplates. They allow you to define how the actual VisualTree and Bindings look like based on the objects provided in the backing collection.

    The ViewModel is basically the glue between the view and the model. Lets say you're only storing the date of birth in your database and the according person model. Your view though wants to display the age. Therefore you would put the age calculation into the ViewModel. Basically what the ViewModel does is to adapt the interface of the Model to the needs of the view so that you can use DataBinding to directly bind them together. The ViewModel basically uses the Decorator DesignPattern to add functionality required by the View to the Model.

    Quite often you could simply use the model classes themselves and bind them to the View. Although that is not quite MVVM it's done quite often if nothing more is required.

  3. #3
    Registered User
    Join Date
    Sep 2013
    Posts
    45

    Re: MVVM, Inheritance and custom components

    Can you please give me some samples?

    The objects that I'm working with are custom components, and this makes it harder to understand your reply.

    I mean, if it was just about persons, students and teachers it would have been ok, but I'm talking about something like a base custom component and some other components that are extending the first one, adding content and functionalities.
    That's why I don't understand how to use DataTemplate and all this MVVM stuff.

    I can post a sample project, done using the "code-behind" logic, to let you know what there's in my mind and to let you help me migrating it into the MVVM pattern

  4. #4
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    564

    Re: MVVM, Inheritance and custom components

    I think there's a bit of confusion going on here. Why do you think MVVM relates to Custom Controls and DataTemplates?

  5. #5
    Registered User
    Join Date
    Sep 2013
    Posts
    45

    Re: MVVM, Inheritance and custom components

    Well, my custom controls have to get data from somewhere.
    Actually, everything is done in the xaml.cs file of each control, but I want to separate each control's logic and it's view, that's why I'm talking about MVVM.

  6. #6
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    564

    Re: MVVM, Inheritance and custom components

    I think I understand. You don't use MVVM (or MVC) for Custom Controls. MVVM exists because apps can get very big (lots of files and code) and complex very fast, so it's hard to manage all that code over time. MVVM is about breaking your app/system into pieces: Views <> ViewModels <> Models + Services.

    Controls do also need to be broken into pieces by MVVM is overkill. Typically, a User/Custom Control is either a .xaml + .xaml.cs or it's just a .cs file. If you have lots of XAML in your control, you can move the 'repeating bits' out into DataTemplates and maybe store them in a central 'theme' file.

    There are a couple of tutorials of User/Custom Controls on the Wiki...

    http://developer.nokia.com/Community..._Windows_Phone

    http://developer.nokia.com/Community...pression_Blend

    Also, the difference between Custom vs User Control...

    http://www.geekchamp.com/articles/us...rlight-for-wp7

    And finally, for the overall app, I would recommend Caliburn.Micro which is an excellent MVVM framework. There is a bit of a learning curve, but once you get used to it, all the 'automatic' things it does for you really help to get your app built faster. Another Nokia Developer Champion has written some great tutorials...

    http://wp.qmatteoq.com/first-steps-w...-8-the-theory/

  7. #7
    Registered User
    Join Date
    Sep 2013
    Posts
    45

    Re: MVVM, Inheritance and custom components

    Thanks for the reply.

    While I'm spending some time in reading the articles that you've linked, I'd like to write a little more about what I'm trying to achieve, in order to give you a better view of what I'm doing.

    Let's say that I want to develop a kind of dashboard app.
    This app has to show some information about the device, the user and some other things.

    So I thought this dashboard as a container in which we put some plugins and those plugins are used to actually gather and display data.

    To make things a little bit easier, and considering that the plugins share a common structure (like a name, a description, a category and some basic actions), the first thing that comes to my mind is to build a base plugin class and extend it everytime I need a new plugin.
    This will give us all the inheritance's benefits as working with different plugins without actually knowing their type (so that we can call listen to the tap event on a battery plugin as we can do with a calendar one and so on).

    So our dashboard will contain a List<BasePlugin> in which we'll put our active plugins (of course BasePlugin extends UserControl).

    Now, the BasePlugin can provide a basic XAML layout but each plugin will extend BasePlugin and add it's own view controls and to show it's own data.
    This means that the plugin is actually a simple component which shows some data and it doesn't have to do any kind of logic stuff as its job is to read data from the phone (or from a weather service) and display them in its own layout.

    That's why I thought of MVVM:

    BasePluginModel holds the common properties for eahc plugin such as name, description and category
    BasePluginViewModel holds a reference to the model and some actions to be called by buttons or events (the actions may be implemented in the BasePluginViewModel or in the plugin implementation as some of them depend on the plugin type)
    BasePluginView has a simple ContentPresenter to let all the other plugins add content to its root.

    For a simple battery plugin, the implementation would be something like this:
    BatteryPluginModel extends BasePluginModel and has a property which returns the current charge of the battery
    BatteryPluginViewModel extends BasePluginViewModel and implements one of the actions, leaving the other to the base class.
    BatteryPluginView add its content to the BasePluginView and adds a simple TextBox bound to BatteryPluginViewModel.PluginModel.BatteryProperty

    Does it all make sense?

  8. #8
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    564

    Re: MVVM, Inheritance and custom components

    That does make sense. And I can definitely say that MVVM is not suitable for what you're trying to do - in fact, the steps you've listed sound perfectly reasonable on their own.

    MVVM isn't suitable because User Controls are typically tightly bound pieces of functionality (ie. the view of the control must be bound to a particular class/instance). And although you're looking to generalise some of the functionality, that simply makes use of interfaces and class inheritance and nothing more. And at the data layer, you can generalise that to something like an IService which has a mandatory set of method (GetData, etc).

    MVVM is about decoupling the various components of the system so they're not directly aware of each other (eg. a ViewModel doesn't know what a 'service' does, it only cares that it matches a certain Interface). Dependency Injection (DI), Inversion of Control (IoC), and Messaging (Broadcast, Subscribe, etc) are other techniques used.

    I mentioned Caliburn.Micro in my previous post, I'd recommend having a look at Conductors (basically, how it handles muti-part controls such a Pivots which is really a Control that loads other Pages/UserControls) - that maybe relevant?

  9. #9
    Registered User
    Join Date
    Sep 2013
    Posts
    45

    Re: MVVM, Inheritance and custom components

    Got it, I'll take a look at Conductors.

    Thank you again for your help

  10. #10
    Nokia Developer Champion
    Join Date
    Feb 2013
    Location
    Dublin, Ireland
    Posts
    564

    Re: MVVM, Inheritance and custom components

    No problem at all, I use Caliburn.Micro in my Windows Phone and Windows 8 apps, so feel free to post a question here or StackOverflow and I'll do my best to help.

Similar Threads

  1. VideoBrush.SetSource(PhotoCaptureDevice) in ViewModel? (MVVM)
    By fabianhenzler in forum Windows Phone General
    Replies: 2
    Last Post: 2013-07-15, 22:04
  2. Symbian native components under the hood and Custom controls
    By ardsrk in forum Symbian User Interface
    Replies: 1
    Last Post: 2009-05-29, 07:05
  3. S60 & Custom UI Components
    By paolavi in forum Mobile Java Media (Graphics & Sounds)
    Replies: 2
    Last Post: 2009-04-13, 11:53
  4. Multiple inheritance : Custom control + Timer??
    By mayur_24 in forum Symbian User Interface
    Replies: 2
    Last Post: 2005-09-13, 06:28
  5. Custom UI components
    By httpworks in forum Symbian User Interface
    Replies: 0
    Last Post: 2002-11-12, 22:23

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×