Telerik blogs

Almost each Windows Phone app implements scenarios in which user input is gathered. These scenarios include designing and implementing Pages with editor controls positioned in a layout panel (mostly stack layouts) with labels above them to describe their purpose and buttons at the end of the page to confirm the input. The validation logic, as well as the synchronization between editors and the properties of the edited object is mostly done manually by handling events, checking input values and setting target properties. Here are a couple of screenshots from our Tasks app demonstrating similar scenarios:

The 'Edit Task' page in the Tasks app made by Telerik The 'Edit Project' page in the Tasks app made by Telerik

The ‘Edit Task’ and ‘Edit Project’ pages contain multiple editors that are bound to the corresponding properties of the business entities used as DataContext. User input is manually handled and the new values are synchronized on the business object after validation.

The development of our Tasks application has led us to the idea of automating the whole process of creation of such input forms. Since we have noticed many common patterns among the editor pages in the Tasks application, we decided to experiment a bit by creating a control that accepts an object instance and populates input fields for the public properties found on this object. Of course the editor fields are different based on the type of the target property they are associated with.

In the simplest scenario, you would put an instance of the DataForm control on your page, bind its CurrentItem to an instance of a business object specific to your application, define any styles or validators if needed, and let the control do the other stuff. RadDataForm will take the business entity, enumerate its public properties and create a type-specific editor for each one of them. These editors will then be put into a layout panel and positioned according to the form's settings.

Since talking is not any helpful without an example, here’s a very simple and quick setup of RadDataForm. Let’s assume we have an instance of the following class:

public class User
{
    private string city;
    private string firstName;
    private string secondName;
    private Gender gender;
    private DateTime dateOfBirth;
    private string password;
    private bool receivesNewsLetter;
 
    public string FirstName
    {
        get
        {
            return this.firstName;
        }
        set
        {
            this.firstName = value;
        }
    }
 
    public string SecondName
    {
        get
        {
            return secondName;
        }
        set
        {
            secondName = value;
        }
    }
 
    public Gender Gender
    {
        get
        {
            return gender;
        }
        set
        {
            gender = value;
        }
    }
 
    public DateTime DateOfBirth
    {
        get
        {
            return dateOfBirth;
        }
        set
        {
            dateOfBirth = value;
        }
    }
 
    public string Password
    {
        get
        {
            return password;
        }
        set
        {
            password = value;
        }
    }
 
    public bool ReceivesNewsLetter
    {
        get
        {
            return receivesNewsLetter;
        }
        set
        {
            receivesNewsLetter = value;
        }
    }
 
    public string City
    {
        get
        {
            return city;
        }
        set
        {
            city = value;
        }
    }
}

To make RadDataForm populate editor fields for its properties you need to simply set the CurrentItem property of the control to this instance:

User user = new User();
this.radDataForm.CurrentItem = user;

And here is the result:

 

For more complex scenarios RadDataForm provides you with an API for styling editor fields, implementing custom editors, changing the editor layout and validating input.

We will cover all this stuff in an upcoming series of blogposts so stay tuned.

You can also take a look at the RadDataForm example in our Telerik Examples solution (source included).

Check out the new RadControls for Windows Phone Q3 2012 release for more new controls.
  


Deyan Ginev
About the Author

Deyan Ginev

Deyan has been with Telerik for more than ​six years working on several different products with main focus on mobile technologies. Deyan is currently working on NativeScript– a platform for developing native mobile apps with JavaScript. Find him on Twitter via
@deyan_ginev.

Comments

Comments are disabled in preview mode.