ImaginationOverflow

The knowings and experiences of a group of developers.

Monthly Archives: March 2012

WP7 App nº3 and nº4 published!!

                           

(Click on the images to download)

Two more apps by the IO team.

The first is a mobfox client, mobfox is an ads provider that we have been using on our apps, and since I visit the site some times every day, I though that when eventually I get a WP7 this will be useful, at least for me xDD. The app shows all your overall and app reports, just like on the website.

The other app name is What’s Close, it uses the google services to fetch places around your current location and shows details of those locations, the rating other people gave them and lets you get directions to that location, this one was made by @Paletas.

Enjoy

My Vandalized View of Mvvm – Lets code

In the last post I gave an overall view into the MVVM pattern, in this I will put my hands to work and give some examples on what I meant.

In the last post I refereed that the MVVM pattern have three main layers, the view, view model and model. When you are coding to Windows Phone 7 (or WPF in general) the view layer is divided in two parts:

  • The Xaml, the actual user interface.
  • The code behind, code that is associated to behaviors or events of the user interface.

The xaml is just xml, used to define the UI, here is an example:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <Button Content="GetBytes"  Name="GetBytesButton"  />
  <TextBlock Name="textBlock1" Text="TextBlock"  />
</Grid>

Read more of this post

MPLAB X theme – Pseudo WekeRoad Ink

I decided to share with the world my theme on MPLAB X, since my plays on the AVR32 I’ve started working on a embedded company that uses PICs as is main architecture (yup I’m sick too). This problem aside the IDE that we use to program such devices is the MPLAB X (aka NetBeans), and since I’ve WekeRoad on eclipse and visual studio, I tried to make a clone to this IDE.

Here is the preview:

And the download link

To install just unrar to the folder : C:\Users\{your user}\AppData\Roaming\.mplab_ide\dev\v1.00\config

My Vandalized View of Mvvm

As I said before, me and guys are developing stuff to windows phone and what is the architectural pattern for wp7 applications? Model View ViewModel.

So MVVM came after MVC other very popular architectural pattern and I should try to explain one on the concepts of the other. The MVC uses three distinct layers to separate logic:

  • Model – The business layer.
  • View – The presentation layer.
  • Controller – The one responsible to talk and control the other two layers.

Probably the worst error that I’ve made when studying MVVM is to try to connect or treat MVVM as a sub-pattern or a specification of MVC. So try to avoid compare the both until you totally understand MVVM.

MVVM also uses three layers:

  • Model – Same as MVC, your business logic.
  • View – The presentation Layer
  • View Model – The bridge between Model and View, can also be described as the binder.

So what are the differences? The interaction between view and view model is similar to MVC the views notifies the view model that something happened, like a button click, some text inserted etc,etc. The difference is how the view model talks to the view, the view model never (should) call anything related to the view. As an example in MVC is common to you call the view, controller code like view.showData(data) is normal and acceptable since is the way MVC works. In MVVM the view model updates the view changing its own public properties.

 

With the above image, you probably figure out what is happening. The view binds its the graphic elements to properties of the view model, by doing so, it will receive notifications when those properties changed, updating the view. Consider the follow example:

class ViewModel
{
 public string SomeText{get;set;}
 public ICommand SomeOperationThatChangesSomeText {get;set;}

}
class View
{
 Label label;

 public View(ViewModel viewModel)
 {
   label.Text = Bind(viewModel.SomeText);
   viewModel.SomeOperationThaChangesSomeText.Execute();
 }
}

The value of the property Text in the View is binded to the value of the property SomeText in the view model, now imagine that the command SomeOperationThatChangesSomeText changes the value of SomeText, when that happens the labels property Text will “automatically” change to the new value setted by the command.

As you saw there is no direct interaction between view model and the view, that is nice because it completely separates the user interface logic from the business logic.

Note that this post talks only about the practical terms of mvvm there is much more to it, for more details check out the roots of mvvm in the Presentation Model pattern by Martin Fowler

In the next post I’ll show this concepts using the windows phone platform.