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’ 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.