Data Forms are found in just about every LOB application–can’t we make it easier?
Creating Line-of-Business (LOB) applications can become tedious, especially if you’re designing a data entry screen. Typically, you gather data from your users with a TextBlock, TextBox, CheckBox, RadioButton and for so forth. You begin by dragging those onto your designer, name the controls and position them where they look nice on the screen. Any additional data validation will need to come from code. If you left out a field, it's back to the designer, as you have to reposition your UI elements. I’m pleased to announce that your life just got a lot easier with DataForm in UI for Windows Universal.
A Common Data Form Layout
Before we take a look at how we implement our DataForm control, let’s look at how we do it currently.
The MainPage.xaml for a typical data form may look like the following:
<StackPanelGrid.Row="1"Margin="50"> <TextBlock TextWrapping="Wrap"Text="E-Mail: "/> <TextBoxx:Name="txtEmail"TextWrapping="Wrap"/> <TextBlock TextWrapping="Wrap"Text="First Name: "/> <TextBoxx:Name="txtFirstName"TextWrapping="Wrap"/> <TextBlock TextWrapping="Wrap"Text="Last Name: "/> <TextBoxx:Name="txtLastName"TextWrapping="Wrap"/> <TextBlock TextWrapping="Wrap"Text="Title: "/> <StackPanelOrientation="Horizontal"> <RadioButtonx:Name="rdMr"Content="Mr."/> <RadioButtonx:Name="rdMrs"Content="Mrs."/> <RadioButtonx:Name="rdMiss"Content="Miss."/> </StackPanel> <TextBlock TextWrapping="Wrap"Text="Company: "/> <TextBoxx:Name="txtCompany"TextWrapping="Wrap"/> <TextBlock TextWrapping="Wrap"Text="Phone Number: "/> <TextBoxx:Name="txtPhoneNumber"TextWrapping="Wrap"/></StackPanel>Which results in the following screen:
Each input field is given a name and some properties have been set. So far, we have seen a lot of XAML and are using a simple StackPanel to display the data properly.
What if you could define your UI through a class and have it generate your UI automatically? That's where the new DataForm comes into play.
Using DataForm Included in UI for Universal
After you have installed the Windows Software Development Kit (UWP), you will see the following templates:
Begin by using the Blank App (Universal Windows) template and adding references to the following files:
- Telerik.Core.dll
- Telerik.Data.dll
- Telerik.UI.Xaml.Input.dll
- Telerik.UI.Xaml.Primitives.dll
- Telerik.UI.Xaml.Controls.Data.dll
We are going to use the DataForm to automatically generate our UI in our app, so let’s begin by adding a class to this project to collect contact details. As you can see from the screenshot, the contact details on the first page include E-mail, First Name, Last Name, Title, Company and Phone Number. You can name the class Contact, and we will add the other fields later. The code contained in this file looks like this:
publicclassContact{ privatestringemail; privatestringfirstName; privatestringlastName; privateUserTitle title; privatestringcompany; privatestringphonenumber; publicenumUserTitle { Mr, Mrs, Miss } publicstringEmail { get { returnthis.email; } set { this.email = value; } } publicstringFirstName { get { returnthis.firstName; } set { this.firstName = value; } } publicstringLastName { get { returnlastName; } set { lastName = value; } } publicUserTitle Title { get { returntitle; } set { title = value; } } publicstringCompany { get { returnthis.company; } set { this.company = value; } } publicstringPhoneNumber { get { returnphonenumber; } set { phonenumber = value; } }}A Look at Our MainPage.xaml
Our UI is simply going to reference the DataForm control. Let’s go ahead and add the proper XML namespace as shown below:
xmlns:telerikDF="using:Telerik.UI.Xaml.Controls.Data"Add the following code snippet to the Grid already located on the MainPage.xaml.
<telerikDF:RadDataFormx:Name="radDataForm"/>Switching Back to Our MainPage.xaml.cs File
We will need to add in the following code to set the Item property of the DataForm displayed on the screen:
Contact _contact = newContact();publicMainPage(){ this.InitializeComponent(); this.radDataForm.Item = _contact;}Once complete, we see this:
As you can see, it automatically generated our UI based off the class that we instantiated. But, you may want to edit the field names as right now the “FirstName” needs a space between it (along with the other fields), or maybe you want to rearrange your UI to put the Company name after your last name. This is easily accomplished by adding the following property attribute to the class as shown below:
[Label("First Name :")][Index(1)]publicstringFirstName{ get { returnthis.firstName; } set { this.firstName = value; }}With this small change, we now have Labels with the correct spacing, and by using the Index property attribute, we changed our UI without going back inside our XAML file. We can finish this app up by adding a button and accessing the data the user entered with the click event handler.
privateasync voidButton_Click(objectsender, RoutedEventArgs e){ var messageDialog = newMessageDialog("First Name : "+ _contact.FirstName + Environment.NewLine + "Last Name : "+ _contact.LastName); await messageDialog.ShowAsync();}
Wrap-Up
Now our DataForm is starting to become alive! You could submit the data to a webserver, perform validation and so forth. I hope this helped; if you would like early access to a preview build of our Windows 10 controls, email universalwindows@telerik.com. Until next time, happy coding!
