Creating a Sample Mobile Web Application XML

After learning the basics of a mobile Web application, you can now create a sample mobile Web application. To create a mobile Web application, perform the following steps:

  1. Launch Visual Studio .NET from the Programs menu.
  2. Select File, New, Project.
  3. In the New Project dialog box, create a C# project.
  4. Note?/td>You can also create a mobile Web application in Visual Basic .NET; however, in this chapter, you will create the application in C#.

  5. Select the Mobile Web Application option in the Templates pane.
  6. In the Location text box, specify the name and location of the mobile Web application, and click on the OK button. Visual Studio .NET creates a framework for the mobile Web application, as shown in Figure

The Framework for the Mobile Web Application

The Framework for the Mobile Web Application

As you can see, Visual Studio .NET creates a blank form for your application. When you double-click on the blank form, the code window appears, which contains a default code for a mobile Web application as shown:

The preceding code uses the using statements to include namespaces in your application. In addition to the default namespaces, Visual Studio .NET creates a namespace with the same name as that of your application, Sample Mobile WebApplication. Inside this namespace, Visual Studio .NET creates a public class with the name MobileWebForm1. This class is derived from the System. Web. UI. MobileControls. MobilePage class.

The MobileWebForm1 class declares an instance, Form1, of the Form class. Form1 represents the blank form that is included in the mobile Web application by default. In addition, the MobileWebForm1 class contains the Page_Load() method. You can include the statements required for initializing the mobile page in the Page_Load() method.

You can now add controls to the mobile Web form. At this point, though, it's important to discuss the functioning of the mobile Web application so that you can code the application more easily.

Working of the Mobile Web Application

The working of the mobile Web application is as follows:

  1. The user selects a song in the SelectItem form.
  2. The user clicks on the Show Review button.
  3. Form1 is displayed, which shows the review of the selected song. The review is stored in an XML file.
  4. The user clicks on the Back button.
  5. The SelectItem form is displayed.

Creating the XML File

In the text file, add the following code:

After adding the code, save the file as Songs.xml in the C drive. To view the file, open the file in a Web browser. The Songs.xml file looks like Figure.

The Songs.xml File in the Web Browser

The Songs.xml File in the Web Browser

Adding Controls to the Mobile Web Form

As you have seen, Visual Studio .NET creates a blank form for the application. To this form, add a Label, SelectionList, and Command control. After adding the controls to the form, the form looks like Figure.

The SelectItem Form in Design View

The SelectItem Form in Design View

Now change the properties of the control, as discussed in Table.

Controls in the Mobile Web Form

Controls in the Mobile Web Form

A SelectionList control allows you to display multiple items in the form of a list. To add items to a SelectionList control, perform the following steps:

  1. Click on the SelectionList control to display its properties.
  2. Tip?/td>If the Properties window is not displayed, press the F4 key.

  3. In the Properties window, select the Items property by clicking on the Ellipsis button. The SelectionList1 Properties window is displayed.
  4. Click on the Create New Item button to add an item to the list.
  5. In the Item Text pane, specify the item as Eiffel 65, "Blue".
  6. In the Value text box, specify the value as Blue.
  7. Check the Selected check box.
  8. Repeat steps 4 and 5 to add more items to the SelectionList control.
  9. Note?/td>You can add the Eminem, "The Real Slim Shady,"Eminem,"Stan," Enrique Iglesias, "Bailamos," Enrique Iglesias, "Be With You," Enrique Iglesias, "Escape," Enrique Iglesias, "Hero," Enya, "Only Time," Eric Clapton, "Superman Inside," and Eve 6, "Here's to the Night" items to the SelectionList control.

  10. Click on the OK button to add items to the SelectionList control.

After you add items to the SelectionList control, the form looks like Figure.

The SelectItem Form in Design View.

The SelectItem Form in Design View.

Adding Controls to Form1

When a user selects an item from the SelectionList control and clicks on the Show Review button, the review of the form is displayed in another form. To do this, you need to add another form to the mobile Web page from the Mobile Web Forms toolbox. Now, add a Label, TextView, and Command control to the Web form, and change the properties of the control, as specified in Table.

Controls in the Mobile Web Form

Controls in the Mobile Web Form

After you change the properties of the controls, the mobile Web form looks like Figure.

The Form1 Form in Design View.

The Form1 Form in Design View.

Adding Code to the Controls

The controls that you have added to the form do not perform an operation. To specify the functionality to a control, you need to add code to the control, as discussed in the following sections.

Adding Code to the Command1 Control

When a user selects the song and clicks on the Show Review button, the application reads the review of the selected song from the Songs.xml file and displays the result in Form1. To perform this functionality, add the following code to the Click event of the Command1 control:

The preceding code creates an object, reader, of the XMLTextReader class and initializes it to the Songs.xml file in the C drive. Next, the MoveToContent() method of the XmlReader class is used to check whether the current node in the XML document is a content node. Then the content in the nodes of the XML document are read by using the Read() method.

Next, the HasAttributes property of the XmlReader class is used to check whether the current node has attributes associated with it. The HasAttributes property returns a Boolean type value. If the current node has an associated attribute, the HasAttributes property returns a true value.

If the HasAttributes property returns a true value, the reader object is moved to the first attribute in the current node. Then, an if loop is used to match the value in the attribute of the current node to the value that the user selects. If the values match, the value is displayed in the Label control in Form1. Similarly, the review, which is the next element in the Songs.xml file, is displayed in the TextView control. Finally, the reader object is closed and the control is passed to Form1 by using the ActiveForm property.

Note?/td>
Because the preceding code uses the classes in the System.XML namespace, you need to include this namespace in the beginning of the application by using the following statement: using System.Xml;

Adding Code to the Command2 Control

When the Command2 control is clicked, the user is returned to the SelectItem form. To do this, add the following code to the Click event of the Command2 control:

When you add code to the Command controls, the entire code for the application is as follows:


Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

XML Topics