Welcome!

Industrial IoT Authors: Pat Romanski, William Schmarzo, Elizabeth White, Stackify Blog, Yeshim Deniz

Related Topics: Industrial IoT

Industrial IoT: Article

Creating a Mobile Solution

Creating a Mobile Solution

There's been a great deal of discussion about how Web services will be used, which is typical as any new technology begins to emerge from its infancy. An estimate being tossed about is that, of all of the Web services expected to be created, less than 1% currently exists. As we know, a Web service isn't meant to live primarily as a standalone component, but as part of a virtual application or several applications.

This article demonstrates one such scenario by building a mobile application using a Web service in conjunction with an increasingly popular technology: ASP.NET mobile controls.

I'm assuming that the reader has some familiarity with ASP.NET, specifically C#, VB.NET, and Web services. To ensure that the example runs properly, the Microsoft .NET Framework and the Microsoft Mobile Internet Toolkit (MMIT) must be installed on the Web server. You must also have an established connection to the Internet.

Following is a brief introduction to ASP.NET mobile controls.

ASP.NET Mobile Controls
Simply put, ASP.NET mobile controls are Web-based elements such as forms, labels, textboxes, command buttons, or hyperlinks that are rendered on a mobile device (or a PC's Web browser). Mobile controls are Microsoft's answer to the need to create mobile solutions for a variety of supported devices without having to write code for each.

To enable the .NET Framework to render the appropriate output for the device dynamically, the MMIT mentioned above is installed as well. It works in conjunction with the .NET Framework so that once the Internet Information Server (IIS) receives HTTP requests, content can be created for mobile screens on any number of .NET-supported devices (based on the HTTP USER AGENT server variable in the HTTP header). Once a match is made with the device type, the Web server then compiles the page using an appropriate converter and responds with the resulting content that device needs. Some of the devices currently supported by .NET are the Pocket PC, Mitsubishi T250, Nokia 7110 and 6210, Sprint Touchpoint, Samsung Touchpoint, and Microsoft Internet Explorer 5.5 or greater, with promises of increased support for additional devices in the coming year.

A Simple Mobile Page
Development begins with a single mobile page, which is a file with an ASPX filename extension that exists on a .NET Web server. One or more mobile forms can exist within a mobile page, with multiple mobile controls contained within each mobile form. Having all the display code located in one file helps improve application performance.

We must first include the .NET compiler declarations in Listing 1 at the top of the mobile page to make use of mobile controls. As you'll notice, I've indicated that server-side script will appear in C#. After these two statements, all mobile controls in the mobile page contain the "mobile" prefix created in the register directive, followed by the name of the element. For example, to ultimately have access to two mobile forms, each containing a textbox with text, we can use the code in Listing 2.

As I mentioned earlier, we can have multiple mobile forms within one page. This may lead you to ask how the device knows which form to display. Without any intervention the first mobile form in the series will be the screen that appears by default on the device. In the example Form1 will appear first. However, a property called ActiveForm can be set programmatically to let the mobile page determine which mobile form to display based on a given action. For instance, since Form1 is the initial mobile form in the series, it will appear first. Yet in Listing 3 the onclick event for the mobile:Command element, Button1, contains a routine that sets the ActiveForm property to Form2 when it's clicked, thus displaying Form2.

To test this out yourself, create the directory c:\inetpub\wwwroot\ XMLJournal. Now create a file called MobileTest.aspx within the XMLJournal directory, and enter the three code segments (Listings 1-3 in succession) within this file. To see it work, we can use Internet Explorer to browse to the page (http://localhost/XMLJournal/MobileTest.aspx). It'll be rendered in HTML as if it were a regular Web page.

The advantages of ASP.NET mobile controls become clear in that we can also view this mobile page in the Microsoft Mobile Explorer (MME) emulator (more about this below). Figure 1 shows how this is displayed in comparison from that of Internet Explorer output.

Since MME requires WML content, the output sent from the Web server will be different from that of Internet Explorer. The only major difference in how it's rendered is that the button appears as a link. This element conversion is performed by the Web server.

With this brief understanding of how ASP.NET mobile controls operate, let's now look at our featured mobile solution, Sojourner.

Building the Sojourner Application
Sailors, pilots, hikers - they all want to have weather information on their particular location available at any given time. With the increasing pervasiveness of wireless Web-enabled devices, mobile users can receive information about their location by entering the postal code or city/country combination.

We'll address this need by creating a tool called Sojourner that contains a mobile interface for selecting these values and getting information about a particular area. Figure 2 shows the solution architecture. We'll look at AreaWeatherWS, an ASP.NET Web service in VB.NET that will retrieve specific information from a weather site based on a postal code and return the weather. Finally, the mobile page, which is written in C#, handles presentation logic, calling this Web service as needed and rendering its results for the given mobile device.

To run the code on www.sys-con.com yourself, we assume that you're using http://localhost/Sojourner as the virtual directory, which corresponds to c:\inetpub\wwwroot\Sojourner. Within this directory another folder called bin must be created.

Sojourner Web Service
This Web service is written in VB.NET to showcase the .NET Framework's ability to handle different languages. The Web service uses a technique known as screen scraping. We can see the code in Listing 4, which is saved as AreaWeatherWS.asmx in c:\inetpub\wwwroot\Sojourner.

There are a couple of things to note. In VB.NET we make the various functions available for consumption within the Web service by using a <WebMethod> attribute before the routine name. This particular WebMethod contains a function called GetWeather, which accepts a parameter called query. When this function is executed, an HTTP request is invoked to the weather Web site using that parameter. Based on the HTML generated, it uses regular expressions to parse out the text needed for our display, which is contained in the class GetWeatherMatch. This class contains the string Weather, which is returned by the Web service. Once this code has been entered, we can test it as described below.

Using the WSDL Test Page
Using Internet Explorer, we can see the Web Service Description Language test page by entering the Web service's URI in the address window (e.g., http://localhost/Sojourner/AreaWeatherWS.asmx). This will display a screen showing each of the consumable WebMethods as hyperlinks. As we click on a WebMethod link, we can impersonate a consuming application by entering values as if they were being received from an application. We have only one method, GetWeather, so we click on it to see the next screen in Figure 3.

Figure 4 shows the XML result generated in a new browser window when a value is entered in the text field and the Invoke button is pressed. Since we specified the Namespace as http://localhost/Sojourner within the Web service code, we won't see references to tempuri.org. The result is returned in a long string called Weather. The element Weather is nested within the GetWeatherMatch class element. This is the class that was returned based on the regular expression result in the string Weather when we invoked the HTTP request to the site.

Once we're confident that the Web service is working correctly, we must create a proxy so that consuming applications can use it.

Creating the Web Service Proxy
After the code has been entered, we compile the Web service proxy using a couple of utilities, wsdl.exe and vbc.exe (since this is a Visual Basic.NET file). To shield us from entering the myriad of switches required for each, I created a batch file called ProxyCompiler that can either be double-clicked or run at the command line. The file sets the appropriate path and executes the compilation applications (see Listing 5). Since we're working within the c:\inetpub\wwwroot\Sojourner directory, ProxyCompiler can be placed in the Sojourner directory with the AreaWeatherWS.asmx file.

Before running this batch file, you should verify all directory paths to ensure that they correctly point to the appropriate executables on your machine. When the proxy is created using the wsdl utility (see Listing 5), the namespace AreaWeatherWS is specified using the switch /n:AreaWeatherWS. This will be imported later into our consuming application's code. After ProxyCompiler is run, we must copy the resulting AreaWeatherWS.dll into the bin directory mentioned earlier. Now we're ready to have a consumer make use of it.

The Mobile Page: SojournerMobilePage.aspx
The mobile page code in Listing 6 contains many of the same elements we addressed previously, such as the Page and Register directives. However, we have some new items to discuss. First, there's an Import directive that includes a Namespace attribute with the value AreaWeatherWS. This is how the mobile page makes use of the Web service.

This is followed by the frmMain mobile form, which is initially displayed when the mobile page is called. The first two labels are used for identification and instructions. The textbox is where the user enters the postal code, city/state, or city/country combination. Finally, the command button executes the ViewWeather routine, which makes a call to the Area Weather Web service for the weather information.

The second mobile form contains only two elements: a label (lblWeather) that will contain the weather information and a command button (btnBack) to take the user back to the main form by executing the ReturnToMain routine below.

The C# server-side script contains two functions. The first makes frmMain the active form so it'll be displayed when the user selects the btnBack command button. The second routine is where the bulk of the work occurs. Since the namespace AreaWeatherWS was declared above, we can instantiate it within the mobile page as the object WeatherService. (We could have called it anything we wished.) With this namespace we have the GetWeatherClass available for the application's use. To remove the unwanted HTML from the weather information string provided by the Web service, a series of regular expressions functions transform the string into a suitable format. This string is inserted into the Text property of the label control (lblWeather.Text). Finally, the frmWeatherData is made the active form and the weather information is populated on the screen.

Now that we've verified that the application works the way we want it to, we can use a different mobile device emulator to test it (the Nokia 6210, available from YOURWAP.com). Let's take a look at its interface in Figure 5. We'll use the postal code from the previous example, 16001, for Butler, Pennsylvania. We can see the succession as we go from left to right, top to button. Once the Go! button is pressed, weather information will be returned. We can try this again by pressing the Back button and choosing "Paris, France", "90210", "Topeka, Kansas". Please note that all locations may not be available.

Conclusion
The Sojourner mobile application doesn't have the rich display of standard Web sites. The instructions are terse, and there's little to provide the optimal user experience. However, with mobile applications we must keep in mind that screen real estate and speed are two issues that must be placed at the top of the priority list when developing for mobile devices. This is addressed quite well, minimizing the amount of user entries required and displaying information in an easy-to-read format. This allows our users to travel as they must and have access to the information they need.

To improve on this solution, the next step would be to have the device intermittently receive current coordinates from a GPSS satellite based on the user's current position. As it receives coordinates, the device would then send these values to the Web service as movement occurs, and information would be displayed on the device in a real-time fashion, thus requiring minimal user intervention.

*  *  *

I trust this has been a useful introduction to ASP.NET mobile controls and, in particular, how a Web service can be used to create a viable mobile solution. By serving as a data retrieval component, the Web service frees the mobile page to handle the display-related issues. In this way we conform the application to an appropriate separation of presentation and business logic.

Additional Information
More information about ASP.NET mobile controls and the .NET Framework is available in ASP.NET Mobile Controls: Adaptive Web Content for Mobile Devices with the MMIT (Wrox).

You can download the Microsoft Mobile Internet Toolkit for use with the .NET Framework from http://msdn.microsoft.com/downloads/ default.asp?url=/downloads/sample.asp?url=/MSDN-FILES/027/001/ 516/msdncompositedoc.xml.

To download the Microsoft Mobile Emulator, go to www.microsoft.com/MOBILE/phones/mme/mmemulator.asp.

Download the YOURWAP suite of emulators from www.yourwap.com.

Sources

  • The Weather Underground: www.wunderground.com
  • Sussman, D., et al. (2001). Professional ASP.NET. Wrox.
  • More Stories By Neil Raybould

    Neil Raybould is a software developer with
    Crossoft Inc., a company specializing in Intranet development. He is also Vice President of the Pittsburgh .NET Developers’ Group (www.pghdotnet.org) and has co-authored the following books available from Wrox Press: Beginning ASP.NET Mobile Controls: Adaptive Web Content for Mobile Devices with the MMIT, Beginning ASP.NET using C# and Beginning ASP.NET using VB.NET.

    Comments (0)

    Share your thoughts on this story.

    Add your comment
    You must be signed in to add a comment. Sign-in | Register

    In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


    IoT & Smart Cities Stories
    Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
    The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
    The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
    We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
    The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
    There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
    Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
    At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
    Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
    BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.