Using mobile controls

Source: Internet
Author: User
Controls Microsoft's. NET version enables you to develop and deploy your applications on a very broad set of platforms. For example, you can deploy your Web application on smart phones (smartphone) and other small-screen devices via ASP.net mobile controls (formerly known as Microsoft Mobile Internet Toolkit). For the same. NET is consistent, ASP.net mobile controls try to hide the differences between devices and make you focus on your business logic. I'll explain how to convert a simple application from asp.net to mobile ASP. NET, and what changes are needed to make your application fit for the mobile Web.

I built a simple Web application that could weather forecasts for some of the selected cities in the Upper Midwest (upper Midwest), and we'll convert it. These data used in weather forecasts are completely random. (The use of random weather forecasts is as accurate as the local reality forecast.) We've just been in two days from a temperature of up to 65 degrees to a place with six feet of snow. I'll introduce you to the design of this program so that you know how to improve your own program. The program includes two vs.net projects ――weatherlib and Weathersite. The Weatherlib contains middle-tier logic. You can create a forecast object and read the forecast data through the indexer (indexer). This program reads the weather forecast data for the next 10 days in form by asp.net the Repeater control, where the DataBinder.Eval () method is used to return a well-formed string for the attribute that describes each forecast element.

Now you can turn this program into a ASP.net mobile control. In the process of transformation, I separate the middle layer that exists in weatherlib and the display layer that exists in weathersite, although this is only a small example. You should also do the same with your program. I haven't let you see the code in the Code detach Class (Code-behind Class) because there's no code written there yet. Code-splitting classes are used to create middle-tier objects and to query their properties.

You may be using a strategy that directs mobile users to different sites. Create a new project with the Vs.net Wizard and select "ASP.net Mobile Web application" under the C # column. Vs. NET creates a new program with a single page that is exactly the same as the usual ASP.net program. However, there are some differences in the generated files. First, the web.config will include two new areas (section) ――mobilecontrols and devicefilters. The mobilecontrols contains a key to support the cookieless data directory. This setting indicates that the contents of the directory are stored in a query string so that the session and verification process can function properly on the mobile device. The devicefilters area is large and is used to provide asp.net with the ability to create content for specific devices. If you have content for a specific device, you must add or modify the area. In most cases, the default settings for this zone are sufficient.

The next two are different in the ASPX page and in the code separator for the page. They all refer to the System.Web.UI.MobileControls namespace, not the System.Web.UI.Controls namespace. The similarity of two namespaces can help you improve your asp.net skills in new areas.

After completing the wizard, you must implement your own display layer in this new project, including referencing the Weatherlib project so that the new mobile Web project can access the shared middle tier. Then, start adding this mobile control so that users can select and browse the weather forecast they choose. Place a drop-down list box in the form so the user chooses the city they want. Add a button to load the weather forecast for the new city. Then, pull down the ObjectList control to display the forecast.

Encapsulation ObjectList
All that remains to be done is to encapsulate the ObjectList in order to see the weather report in form. Asp. NET ObjectList appears to be a mixture of repeater and DataGrid classes. It contains a summary view and a detailed view. The profile view is used to display a property for each value in the list, and a detailed view displays all the fields of an index in the list. You can use a different view to save the screen space. In this program, you will display the dates of each weather forecast so that users can pick the data for the day they are most interested in. They can view the details of the day by clicking on the date. In code, you need to use the LabelField attribute to specify the field of each data element that is used for the profile view.

The field element is used to specify the mapping value of the field in the detailed list. You must add these codes manually, because the ObjectList control does not support adding these fields to the Vs.net Properties window. Note that the documentation for the final beta version of Vs.net 2003 contains two errors. It lists the dataformatstring properties as formatstring, and if you specify your own format and field mappings, AutoGenerateFields will fail; In addition, there will be two identical values in each field displayed.

After modifying the page, you add code to the Page_Load event handler in the code-separated class to create the forecast object and bind it to ObjectList: Forecaster = new
Weatherforecast (city);

Forecastdisplay.datasource =
Forecaster;
if (! IsPostBack)
Forecastdisplay.databind ();




Once you have added these items to the ASPX page and the code-separated class, you can see the page in the browser. You've ported your program to the mobile web.

Porting to mobile controls and testing your site on a real mobile device is different. Maybe you have a nice website, but when you're dealing with the form factor and size of your mobile phone, you get a less-useful program. Microsoft Mobile Explorer (MME) emulator can help you find these issues. The test does not fully guarantee that your program will run on all possible devices, especially the contents of the specified device you created. You can think of it as a baseline test of the phone form factor.

After downloading and installing the emulator, you must configure it to your project. Add it to the vs.net environment in two steps. First, add Mme to the list of browsers. You can go through file | Browse With?command, select the Add button and navigate to the Mme Browser. It will be installed by default in the%program files%\microsoft Mobile explorer\ 3.0\emulator\mmeemu.exe file. Even after you install it, your program will still use IE as the default browser. So the second step, you have to edit the properties of the item. Right-click the project node in Solution Explorer and select Properties, select the Debugging node and set Always use Internet Explorer to False. Now, when you start the program, it will appear in the mobile Explorer emulator.

With this simple ASP.net mobile control introduction, you probably already know how to migrate the ASP.net program to the mobile web, which works for all users. The key problem is that you improve your existing asp.net knowledge because the architecture is the same; just some of the controls are slightly different. You can reduce the amount of code diverted to a mobile device by separating the business logic layer from the display layer. Otherwise the mobile control will be the same as the normal ASP.net control. If you are familiar with the ASP.net program, you will be very handy.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.