Address Editor and Address Viewer in LightSwitch Beta 2

Prologue:

My last article was about Model Windows in LightSwitch. This article is about use of the Address Editor and Address Viewer.

What is Address Editor?

Address Editor in LightSwitch is another type of Layout for the Address fields. If you add an Address Editor in your screen, the LightSwitch automatically arranges the Layout for the address fields. The Address Editor contains the Row and Column layouts.
The Address Editor is used to get the Address field values.

What is Address Viewer?

Address Viewer is nothing but the Read-only Address Editor. i.e. all the structure is same as the Address Editor but you won't be having the Label's and option to edit the Address.

The Address Viewer is used simply to display the entered address.

Let us see how to use the Address Editor and Address Viewer in LightSwitch Application in a demo application.

Quick Note:

In this demo application we are going to design a screen which accepts the Person details as input and saves into the database.

Prepare the Solution:

Fire up the VS 2010; create a LightSwitch Desktop Application with the name "AddressEditorAndViewerInLSBeta2" as shown in the figure.


Follow the [No: #] to create a LightSwitch Desktop Application. For more details about how to create a LightSwitch Desktop Application please read this article.

Creating Entity for Application:

Create a table as shown in the screen by selecting the "create a table" option in the startup screen.



Designing the Screen:

First of all we need to add a New Data Screen to our demo application. We should know about how to add a New Data Screen to a LightSwitch application prior to proceeding with designing the Screen. To know more about how to add a new Data Screen to a LightSwitch Application please read this Article.

Now we know how to do the screen stuff. See the following figure which is the default screen layout for the screen we have created.


So we have to change this screen layout so that the Address Editor and Viewer can be easily explained.


Before adding the Address Editor and Viewer we have to prepare the layout. So delete the Address fields as shown in the above figure.

Adding Address Editor into the Screen:

After preparing the layout to add an Address Editor, just add a new Group.


As shown in the above figure:

• [No: 1] – Select the Person Property which has the Rows Layout.
• [No: 2] – After selecting the Person property you will be having an Add button at the end of the layout tree.
• [No: 3] – Add a new group by selecting the New Group option in the Add button drop down button.

After adding a New Group, just change the Layout type as Address Editor as shown in the figure given below.


See the picture shown below which is the Address Editor with empty values. By default it has some fields.


Now Address Editor is ready for our application. Add the related fields for the Address Editor fields.


Here,

• [No: 1] – Select the "Choose Content" dropdown list of each field.
• [No: 2] – Select the Appropriate fields for the Address Editor default fields.

Adding Address Viewer to the Screen:

As the Address Viewer is used to just display the Address entered in the Address Editor, we have to somewhat tweet the screen.


As shown in the figure we have to follow to add the Address Viewer.

• [No: 1] – Add a new group as we did while adding the Address Editor. Change the Layout type to Model Window and change the Display name. For more details about how to create a model window, please read this article.
• [No: 2] – Select the created new Model Window and add a new group again and change the display name as Address Viewer.
• [No: 3] – Now change the layout of the newly created group under the Model Window as Address Viewer.

Initially a button will be displayed on the screen. While clicking the button it will display the Model Window.

After adding the Model Window, we have to change a property of that.



Change the Label Position to None so that it won't display any label except that button. Initially the button will be stretched to the screen so we need to limit the width of the button.


Set the width and Model Window button alignments as shown in the figure.

Now we have added the Address Viewer to the screen which will be displayed as a Model Window.

As we have seen the Address Viewer is a Read-Only Address Editor it has default fields. So now add the appropriate address fields to the Address Viewer fields.


The above figure shows the Address Viewer added into the screen and bound with the Address fields.

Okay, we are ready to press the Play button. Hit the F5.

Application in Action:



The highlighted area is the Address Editor which is the default layout provided by the LightSwitch. The Button displayed here at the end of the screen is for Model Window which holds the Address Viewer.

Quick Note:

If you add a Model Window into your screen it will be displayed as Button Control.

Now click on the button; you will be getting the Address Viewer with the address values entered into the Address Editor.



The above is the Model Window which has the Address Viewer. You can see the Address Viewer has the same structure as Address Editor but there are no labels because it is a Read-Only control.

Summary:

In this article, we have seen how to use the Address Editor and Address Viewer in the LightSwitch Screen.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.
 
Thanks.