How to Add Mobile Pages to Your Application-white Paper

  • Published on
    21-Apr-2015

  • View
    73

  • Download
    7

Transcript

<p>qwertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwertyuio pasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjk How to add Mobile Pages to your application lzxcvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwertyuio pasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmqwertyuiopasdfghjk lzxcvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwertyuio pasdfghjklzxcvbnmqwertyuiopasd fghjklzxcvbnmrtyuiopasdfghjklzxc2/12/2011 Kamakshi Pant</p> <p>1. OVERVIEWMobile devices smart phones, feature phones, and tablets continue to grow in popularity as a means to access the Web. The infrastructure that supports "Wireless web is becoming larger and more reliable with the advent of time. For many web developers and web-oriented businesses, this means its increasingly important to provide a great browsing experience for visitors using those devices. These days mobile devices are part of our life style and most of us cant live with out them. When these mobile devices are connected to the Internet, the powers of the mobile devices are endless. We can deliver timely data to the user at any place and any time. Traditionally mobile applications are developed using WML, WMLScript and WBMP with a server. For dynamic WML applications, developers used ASP, JSP, PHP, etc. Still these applications serve WML on the fly. The Mobile Devices includes Cell Phones, Two Way Pagers, Palm Pilots, Pocket PCs and Auto PCs. Few of these devices support WML, few support HTML and few support both WML and HTML. If we want to satisfy all the mobile devices then we must build your application in both WML and limited HTML. ASP.NET has provided the facility to develop Mobile Pages since its Version V2.0, however with time the usage became more and more easier. Infact in the latest V4.0 these features are in built. This Paper describes various ways to serve pages optimized for mobile devices from your ASP.NET Web Forms / MVC application, and suggests architectural and design issues to consider when targeting a broad range of devices. This document also explains why the ASP.NET Mobile Controls from ASP.NET 2.0 to 3.5 are now obsolete, and discusses some modern alternatives.</p> <p>2. The challenges of supporting mobile devices todayEven though mobile browsers now almost universally support HTML, you will still face many challenges when aiming to create great mobile browsing experiences:</p> <p>Screen size - Mobile devices vary dramatically in form, and their screens are often much smaller than desktop monitors. So, you may need to design completely different page layouts for them. Input methods Some devices have keypads, some have styluses, others use touch. You may need to consider multiple navigation mechanisms and data input methods. Standards compliance Many mobile browsers do not support the latest HTML, CSS, or JavaScript standards. Bandwidth Cellular data network performance varies wildly, and some end users are on tariffs that charge by the megabyte.</p> <p>Theres no one-size-fits-all solution; the application will have to look and behave differently according to the device accessing it. Depending on what level of mobile support one wants, this can be a bigger challenge for web developers than the desktop browser wars ever was. Developers approaching mobile browser support for the first time often initially think its only important to support the latest and most sophisticated smart phones (e.g., Windows Phone 7, iPhone, or Android), perhaps because developers often personally own such devices. However, cheaper phones are still extremely popular, and their owners do use them to browse the web especially in countries where mobile phones are easier to get than a broadband connection. The business will need to decide what range of devices to support by considering its likely customers. For eg: If an online brochure for a luxury health spa is to be build , then business might make a decision only to target advanced smart phones, whereas if a ticket booking system for a cinema is to be created, then visitors with less powerful feature phones are to be accounted for.</p> <p>3. Options to Add Mobile PagesBefore we get to the specific technical details of ASP.NET Web Forms or MVC, we should note that web developers in general have three main possible options for supporting mobile browsers:</p> <p>1. Do nothing You can simply create a standard, desktop-oriented web application, and</p> <p>rely on mobile browsers to render it acceptably. o Advantage: Its the cheapest option to implement and maintain no extra work o Disadvantage: Gives the worst end-user experience: The latest smartphones may render your HTML just as well as a desktop browser, but users will still be forced to zoom and scroll horizontally and vertically to consume your content on a small screen. This is far from optimal. Older devices and feature phones may fail to render your markup in a satisfactory way. 2. Solve the problem on the client With careful use of CSS and progressive enhancement you can create markup, styles, and scripts that adapt to whatever browser is running them. For example, with CSS 3 media queries, you could create a multi-column layout that turns into a single column layout on devices whose screens are narrower than a chosen threshold. o Advantage: Optimizes rendering for the specific device in use, even for unknown future devices according to whatever screen and input characteristics they have</p> <p>Advantage: Easily lets you share server-side logic across all device types minimal duplication of code or effort o Disadvantage: Mobile devices are so different from desktop devices that you may really want your mobile pages to be completely different from your desktop pages, showing different information. Such variations can be inefficient or impossible to achieve robustly through CSS alone, especially considering how inconsistently older devices interpret CSS rules. This is particularly true of CSS 3 attributes. o Disadvantage: Provides no support for varying server-side logic and workflows for different devices. You cant, for example, implement a simplified shopping cart checkout workflow for mobile users by means of CSS alone. o Disadvantage: Inefficient bandwidth use. You server may have to transmit the markup and styles that apply to all possible devices, even though the target device will only use a subset of that information. 3. Solve the problem on the server If your server knows what device is accessing it or at least the characteristics of that device, such as its screen size and input method, and whether its a mobile device it can run different logic and output different HTML markup. o Advantage: Maximum flexibility. Theres no limit to how much you can vary your server-side logic for mobiles or optimize your markup for the desired, devicespecific layout. o Advantage: Efficient bandwidth use. You only need to transmit the markup and styling information that the target device is going to use. o Disadvantage: Sometimes forces repetition of effort or code (e.g., making you create similar but slightly different copies of your Web Forms pages or MVC views). Where possible you will factor out common logic into an underlying layer or service, but still, some parts of your UI code or markup may have to be duplicated and then maintained in parallel. o Disadvantage: Device detection is not trivial. It requires a list or database of known device types and their characteristics (which may not always be perfectly up-to-date) and isnt guaranteed to accurately match every incoming request. This document describes some options and their pitfalls later.</p> <p>o</p> <p>To get the best results, most developers find they need to combine options (2) and (3). Minor stylistic differences are best accommodated on the client using CSS or even JavaScript, whereas major differences in data, workflow, or markup are most effectively implemented in server-side code. Since ASP.NET Web Forms and MVC are both primarily server-side technologies, this white paper will focus on server-side techniques that let produce different markup and logic for mobile browsers. Of course, you can also combine this with any client-side technique (e.g., CSS 3 media queries, progressive-enhancement JavaScript), but thats more a matter of web design than ASP.NET development.</p> <p>4. Developing Mobile Web Pages using Asp.net 2.0/3.5Developing ASP.NET pages for mobile device browsers does not differ substantially from developing pages for desktop browsers. To help in creating applications for mobile devices, ASP.NET provides a System.Web.Mobile namespace devoted specifically to mobile Web development.</p> <p>We can create a Web page from the MobilePage base class and add controls from the System.Web.Mobile namespace. This namespace defines a suite of Web server controls and adapters that are especially useful when creating applications that need to be available to many different mobile devices, such as cell phones. ASP.NET 2.0 also provides a control-adaptive architecture that allows custom device adapters to be created for ASP.NET 2.0 Web server controls. The adapters can create custom rendering for a control based on the requesting browser. With the adaptive architecture, you can create custom adapters for ASP.NET Web server controls to render output specific to the devices that access your application on desktop browsers. Whether developing for desktop browsers or mobile devices, development follows the standard .NET event-driven model in which your application responds to user requests, button clicks, and so on.</p> <p>A.</p> <p>Mobile Application Architecture</p> <p>Although ASP.NET integrates technology to make ASP.NET mobile Web application development follow the same paradigm as traditional Web application development, the architecture's primary intent is not to allow you to create single pages that can target browsers in both desktop and mobile devices. The limitations of browsers on mobile devices often mean that pages designed for desktop browsers cannot translate to mobile device browsers. For example, if you create an ASP.NET Web page that includes a site header, a navigation bar along the top of the page, a secondary navigation structure along the side of the page, and then content in the rest of the page, the page will render as designed in a desktop browser. In that case, there is usually ample space to render all the controls and still provide a scrollable content area. However, in many mobile device browsers, this layout would be impossible. Many mobile devices have a smaller screen area than desktop monitors, so even navigation becomes a multi-step process in which the user must click several controls to get to page content. Presentation logic follows a similar pattern. For example, when the user fills in a Web form using a desktop browser, the user can see many controls on the screen at once. When the form is validated on the server, validation errors can be displayed next to the controls. With a mobile device, form input and validation can be much harder to display in a format that is usable. Additionally, for mobile devices you might choose to provide shortcuts that allow the user to fill in information with less typing because the device might be difficult to type on. For these reasons, you must create separate pages in your ASP.NET Web application for use in desktop and mobile device browsers. A page developed specifically for mobile device browsers allows you to break down presentation logic into smaller pieces that work better for the device's display area and input hardware.</p> <p>B.</p> <p>Mobile Web Server Controls</p> <p>The ASP.NET 2.0 System.Web.Mobile namespace is devoted specifically to mobile Web development. You create a mobile Web page from the MobilePage base class and add mobile Web server controls from the System.Web.Mobile namespace. Mobile Web server controls have a number of specialized adapters in the .NET</p> <p>Framework and are therefore especially geared to developing mobile Web applications that target a wide range of mobile devices.</p> <p>C. ASP.NET Web Server Controls and the Adapter ArchitectureMost ASP.NET 2.0 Web server controls adhere to the unified adapter architecture. This means that all controls can behave differently depending on the requesting device by calling a custom adapter that provides appropriate behaviors for that device, such as creating the proper markup language. If an adapter is configured in the browser definitions file for the requesting device or browser, ASP.NET calls the adapter at each life-cycle stage of a Web server control. The adapter can then adjust rendered output for example, and handle any device-specific view state logic or device idiosyncrasies. Browser definition files can be found in the Browsers folder of the .NET Framework Config directory or in the App_Browsers folder of a Web application. There are currently no adapters provided for the ASP.NET controls. There are, however, a rich set of adapters for the ASP.NET mobile controls to provide for a wide variety of devices and browsers. You can create custom adapters for each device and have the ASP.NET page framework use those adapters when a specific device accesses your page.</p> <p>D.</p> <p>Choosing Custom Adapters or Mobile Controls</p> <p>For pages targeting mobile devices, mobile Web server controls are used and pages are inherited from MobilePage. These controls support many mobile devices, such as cell phones. ASP.NET includes mobile Web server controls for a wide variety of general Web development and mobile-specific needs. Additionally, mobile-control device adapters already exist for major devices and their markup languages. Microsoft will continue to provide adapter updates for the mobile Web server controls when major markup languages evolve. This enables you to support new markup languages with the same controls that you are already using. For example, if we are creating an e-commerce site that supports desktop browsers as well as a large array of mobile devices, we would create a set of ASP.NET pages that inherit from the Page class, and a separate set of pages that inherit from the MobilePage base class and use mobile controls. There are scenarios where using ASP.NET Web server controls and writing custom adapters makes sense. These typically will be applications for rich desktop browsers where browser behavior variations are required, or for applications to be targeted by a constrained device class for which mobile controls and their feature set is not warranted.</p> <p>Since ASP.NET Web Forms and MVC are both primarily server-side technologies, this white paper will focus on server-side techniques that help produce different markup and logic for mobile browsers. This server side Technique can be combined with any</p> <p>client-side technique (e.g., CSS 3 media queries, progressive-enhancement JavaScript), but t...</p>