2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit...

2001 Prentice Hall, Inc. All rights reserved.

Chapter 28 -Microsoft .NET Mobile Internet Toolkit

Outline28.1 Introduction28.2 Setup28.3 Introduction to the Microsoft .NET Mobile Internet

Toolkit and Microsoft .NET Mobile Web Forms28.4 Basic Mobile Web Form Controls28.5 Advanced Mobile Web Forms Controls28.6 .NET Mobile Web Design28.7 Device-Independent Web Design Using Stylesheets

and Templates


28.1 Introduction

• Microsoft® .NET Mobile Internet Toolkit– Create server-side Web applications

– Use Microsoft ® Visual C# .NET or Microsoft ® Visual Basic .NET

– Translates languages into WML


28.2 Setup

• OS requirements– Windows 2000, Windows NT or Windows XP

• Software requirements– Internet Information Services (IIS) – Microsoft .NET Framework (Beta2)

• msdn.microsoft.com/downloads• Installation requirements

– Microsoft Data Access Components 2.6 (v2.7 recommended)

– May need Service Pack 2• Tools > Windows Update

– Microsoft Mobile Internet Toolkit (Beta 2)– Openwave Mobile Browser (UP.SDK 4.1 Simulator)

• developer.phone.com


28.2 Setup

• Microsoft ® Mobile Internet Designer– Part of the Mobile Internet Toolkit

– User interface for creating wireless content.• Drag and drop items into Web pages

– Must download Microsoft Visual Studio .NET [Beta 2]


28.3 Introduction to the Microsoft .NET Mobile Internet and Microsoft .NET Mobile Web Forms

• Device detection– Detects client (incoming) device and generates proper code

for that device• Generates WML, HTML, or cHTML

• ASP .NET– Generates code on the server-end– Creates dynamic Web pages

• Content changed based on code

• Web form page– .aspx file (ASPX) code-behind file– Contains “behind the scenes” code

• e.g., Code which executes when user presses button


28.4 Basic Mobile Web Form Controls

• Mobile controls– Objects used to create mobile applications

• e.g., labels and buttons

– Used in combination with events• Events are signals that are sent when an action takes place

• Directive– Commands that specify information about an ASP .NET page

• Namespace– Feature used to logically group classes together

– Packaged as assemblies• Can be used by other programmers

– System.Web.UI.MobileControls• MobilePage class

– Base class needed to create Mobile Web forms

2001 Prentice Hall, Inc.All rights reserved.

Outline

Welcome.aspx

1 <%-- Fig. 28.1: Welcome.aspx --%>2 <%-- A simple Web Form. --%>3 4 <%-- opening declarations specify file where code is5 stored and the language used to write this code --%>6 <%@ Page Codebehind = "Welcome.cs" 7 Inherits = "WelcomeApp.WelcomePage" Language = "C#" %>8 <%@ Register TagPrefix = "Mobile" 9 Namespace = "System.Web.UI.MobileControls"10 Assembly = "System.Web.Mobile" %>11 12 <Mobile:Form runat = "server" id = "Opening">13 <Mobile:Label id = "StartLabel" runat = "server" 14 Text = "Click Start!" />15 16 <%-- Command object that will execute the method17 "StartButton_OnClick" when it is clicked --%>18 <Mobile:Command runat = "server" id = "StartCommand"19 OnClick = "StartCommand_OnClick" Text = "Start" />20 </Mobile:Form>21 22 <%-- Form "Result" --%>23 <%-- when activated, the method "ResultForm_OnActivate"24 is called --%>25 <Mobile:Form runat = "server" id = "Result" 26 OnActivate = "Result_OnActivate">27 <Mobile:Label runat = "server" id = "ResultLabel" />28 </Mobile:Form>

Language attribute specifies C# as the language used in the application

Inherits Class WelcomeApp.WelcomePage as shown in Fig 28.2

Register directive (@Register) creates TagPrefix to indicate where controls come from

Namespace attribute indicates that prefix Mobile is an alias to namespace System.Web.UI.MobileControls

Assembly attribute set to System.Web.Mobile specifies where pre-existing code is located

Form control creates a Mobile Web Form

Text attribute specifies value to be displayed

OnActivate event calls method Result_OnActivate

Result_OnActivate method sets and displays contents of Label control called ResultLabel

<%@ %> Encloses directives

Page directive (@Page) specifies code-behind file as Welcome.cs

Command control provides user with means to invoke events

Responds to click event (defined in lines 25-28 of Welcome.cs)

Label control displays text values

runat attribute is set to server to specify that this control is executed by the server

Welcome.cs file contains classes and functions called in Web form

id attribute specifies the identifier for this control

Inherits attribute indicates which class is being used by the program


Outline

Welcome.cs

1 // Fig. 28.2: Welcome.cs2 // A simple code-behind file.3 4 namespace WelcomeApp5 {6 using System;7 using System.Web;8 using System.Web.UI;9 using System.Web.UI.MobileControls;10 11 // inherit from System.Web.UI.MobileControls.MobilePage12 public class WelcomePage : 13 System.Web.UI.MobileControls.MobilePage14 {15 protected System.Web.UI.MobileControls.Form Result;16 protected System.Web.UI.MobileControls.Label ResultLabel;17 18 // changes current form when "Start" is clicked19 protected void StartCommand_OnClick( 20 object sender, EventArgs theEvent )21 {22 // change the current form to "ResultForm"23 ActiveForm = Result;24 25 } // end StartButton_OnClick26 27

WelcomePage class is base class specified in line 7 of Welcome.aspx

Defines method StartCommand_OnClick that executes with OnClick event

Identifies form as active, must be explicitly activated

Result is the form defined at the end of Welcome.aspx


Outline

Welcome.cs

28 // displays text when "ResultForm" is activated29 protected void Result_OnActivate( 30 object sender, EventArgs theEvent )31 {32 // change value to be displayed33 ResultLabel.Text = "Welcome to the Microsoft .NET " + 34 "Mobile Internet Toolkit!";35 }36 37 } // end class WelcomePage38 39 } // end namespace WelcomeApp

Method Result_OnActivate sets a welcome message to ResultLabel (line 27 of Welcome.aspx)

Message that is displayedText is accessed as a property using the dot operator



• Forms– Web forms can contain several forms

• Keep track of which form is active

– Web form pages must contain at least one form• Otherwise syntax error

• C# manipulates data through objects– Unlike markup languages which manipulate data with

attributes

– Objects• Data can be accessed or changed using variables, methods and

properties

• Mobile applications

– C# uses properties to manipulate data



• Compile code so the program may be run– Compile class inherited from WelcomeApp.WelcomePage

• Specify all sources that contain pre-existing code used

– Namespaces stored in .dll files (dynamic link library)

– Execute at MS-DOS command prompt• csc /r:system.dll /r:System.Web.dll /r:System.Web.Mobile.dll /target:library /out:bin\Welcome.app.dll Welcome.cs

• /target:library specifies output as a .dll file• /out:bin\WelcomeApp.dll specifies the output

file be placed in bin directory and named WelcomeApp.dll

• Argument Welcome.cs specifies the file to be compiled



– Place resulting file WelcomeApp.dll in bin directory• Located in same virtual directory as Welcome.aspx• If directory does not exist then create in root virtual directory

of Web server (c:\InetPub\wwwroot)



Fig. 28.2 Simple Code-behind file



Fig. 28.3 Compiling a code-behind file


Outline

TipCalculator.aspx

1 <%-- Fig. 28.4: TipCalculator.aspx --%>2 <%-- A Web Form that calculates tips. --%>3 4 <%@ Page Inherits = "System.Web.UI.MobileControls.MobilePage" 5 Language = "C#" %>6 <%@ Register TagPrefix = "Mobile" 7 Namespace = "System.Web.UI.MobileControls"8 Assembly = "System.Web.Mobile" %>9 10 <%-- c# code --%>11 <script runat = "server" language = "C#">12 13 // calculate tip14 protected void GetTipCommand_OnClick( 15 object sender, EventArgs theEvent )16 {17 if ( Page.IsValid )18 {19 decimal tip;20 string dollarAmt;21 tip = Decimal.Parse( TotalAmountTextBox.Text ) * 22 Decimal.Parse( TipPercentageTextBox.Text ) / 23 ( decimal ) 100;24 TipPercentageTextBox.Text = "";25 TotalAmountTextBox.Text = "";26 27 // change tip to a dollar value28 dollarAmt = String.Format( "{0:C}", tip );29 TopLabel.Text = "Tip Amount: " + dollarAmt;30 }31 } // end GetTipCommand_OnClick32 33 </script>34

Method GetTipCommand_OnClick calculates amount of tip based on user input

Page.IsValid checks if form is valid (no errors raised by validators)

<script> tag begins a script with language set by language attribute


Outline

TipCalculator.aspx

35 <Mobile:Form runat = "server" id = "Calculator">36 37 <%-- centered Label --%>38 <Mobile:Label runat = "server" Alignment = "center" 39 Text = "Tip Calculator" id = "TopLabel" />40 41 <%-- validator controls provide an easy way 42 to monitor input --%>43 <Mobile:RequiredFieldValidator id = "TipPercentageValidator"44 ControlToValidate = "TipPercentageTextBox" 45 runat = "server" Text = "This field is required!" />46 47 <Mobile:Label runat = "server" id = "PromptLabel"48 Text = "Enter Tip Percentage:" />49 50 <%-- TextBoxes allow the user to enter information --%>51 <Mobile:TextBox runat = "server" 52 id = "TipPercentageTextBox" />53 54 <%-- Label to add a blank line --%>55 <Mobile:Label runat = "server" id = "Spacer" />56 57 <Mobile:RequiredFieldValidator id = "TotalAmountValidator"58 ControlToValidate = "TotalAmountTextBox" 59 runat = "server" Text = "This field is required!" />6061 <Mobile:Label runat = "server" 62 Text = "Enter Total Amount:" />6364 <Mobile:TextBox runat = "server" 65 id = "TotalAmountTextBox" />66

TextBox controls display a box on the Web page where user enters information

RequiredFieldValidator control validates user input (makes sure that user enters into required fields)

ControlToValidate attribute sets which control validator checks

Error message that displays if TextBox is empty when user clicks Calculate Tip

Validates TotalAmountTextBox


Outline

TipCalculator.aspx

67 <Mobile:Command runat = "server" 68 OnClick = "GetTipCommand_OnClick" 69 Text = "Calculate Tip" id = "GetTipCommand" />7071 </Mobile:Form> <%-- end form Calculator --%>



Fig. 28.4 Web form with embedded C# code


28.5 Advanced Mobile Web Forms

• Interactive craps game– Web Form page

• Contains two forms

– Instructions (Rules)

• Displayed in a TextView control (displays large text values)

– Game User Interface (Game)


Outline

Craps.aspx

1 <%-- Fig. 28.5: Craps.aspx --%>2 <%-- An interactive mobile craps game. --%>3 4 <%@ Page Codebehind = "Craps.cs" 5 Inherits = "CrapsApp.CrapsPage" Language = "C#" %>6 <%@ Register TagPrefix = "Mobile" 7 Namespace = "System.Web.UI.MobileControls"8 Assembly = "System.Web.Mobile" %>9 10 <Mobile:Form runat = "server" id = "Rules">11 12 <Mobile:Label runat = "server" Alignment = "center" 13 id = "TitleLabel" Text = "--Craps Rules--" />14 15 <%-- game rules for user --%>16 <Mobile:TextView runat = "server" Alignment = "left"17 id = "RulesTextView" Text = "A player rolls 18 two dice. Each die has six faces. These faces contain 19 1, 2, 3, 4, 5 and 6 spots. After the dice have come 20 to rest, the sum of the spots on the two upward faces 21 is calculated. If the sum is 7 or 11 on the first 22 throw, the player wins. If the sum is 2 (snake eyes), 23 3 (trey) or 12 (boxcars) on the first throw 24 (called craps), the player loses (i.e., the house wins). 25 If the sum is 4, 5, 6, 8, 9 or 10 on the first throw, 26 then that sum becomes the player’s 'point.' 27 To win, you must continue rolling the dice until you 28 make your point. The player loses by rolling a 7 29 before making the point." />30 31 <Mobile:Command runat = "server" id = "NewGameCommand"32 OnClick = "NewGameCommand_OnClick" 33 Text = "New Game" />34


Outline

Craps.aspx

35 </Mobile:Form> <%-- end Rules --%>36 37 <Mobile:Form runat = "server" id = "Game" 38 OnActivate = "Game_OnActivate">39 40 <%-- "Status" displays 'point' or a message 41 if the user won or lost --%>42 <Mobile:Label runat = "server" id = "StatusLabel" />43 44 <%-- Panel object used to display objects together --%>45 <%-- in this case a Label and two Images --%>46 47 <Mobile:Panel runat = "server" id = "DicePanel">48 49 <Mobile:Label runat = "server" 50 id = "RollValueLabel" Text = "Your Roll: " />51 52 <Mobile:Image runat = "server" id = "FirstDiceImage"53 alternateText = "DeitelWireless" />54 <Mobile:Image runat = "server" id = "SecondDiceImage"55 alternateText = "DeitelWireless" />56 57 </Mobile:Panel>58 59 <%-- empty Label used to add space --%>60 <Mobile:Label runat = "server" id = "SpaceLabel" />6162 <%-- Label used to store the user's 'point' --%>63 <Mobile:Label runat = "server" id = "PointLabel" />64

StatusLabel displays information about the current game

PointLabel is a dummy Label that stores players point value so it may be passed between forms

Panel control is used to combine several child controls (Label, Image and Image)Label control displays

results of player’s roll

Image controls display the two dice images


Outline

Craps.aspx

65 <Mobile:Command runat = "server" id = "PlayCommand" 66 OnClick = "PlayCommand_OnClick" Text = "Play" />67 <Mobile:Command runat = "server" id = "RollCommand"68 OnClick = "RollCommand_OnClick" Text = "Roll Again" />69 <Mobile:Command runat = "server" id = "QuitCommand" 70 OnClick = "QuitCommand_OnClick" Text = "Quit" />7172 </Mobile:Form> <%-- end Game form --%>

Command objects provide user options to play, roll again or quit


Outline

Craps.cs

Code-behind file for Craps.aspx

1 // Fig. 28.6: Craps.cs2 // The code-behind file for a game of craps.3 4 namespace CrapsApp5 {6 using System;7 using System.Web;8 using System.Web.UI;9 using System.Web.UI.MobileControls;10 11 public class CrapsPage : 12 System.Web.UI.MobileControls.MobilePage13 {14 protected System.Web.UI.MobileControls.Form Rules; 15 protected System.Web.UI.MobileControls.Form Game;16 protected System.Web.UI.MobileControls.Label StatusLabel;17 protected System.Web.UI.MobileControls.Command 18 PlayCommand;19 protected System.Web.UI.MobileControls.Command 20 RollCommand;21 protected System.Web.UI.MobileControls.Label PointLabel;22 protected System.Web.UI.MobileControls.Label 23 RollValueLabel;24 protected System.Web.UI.MobileControls.Image 25 FirstDiceImage;26 protected System.Web.UI.MobileControls.Image 27 SecondDiceImage;28 protected System.Web.UI.MobileControls.Panel DicePanel;29 30 // special values31 enum Names { snakeEyes = 2, trey = 3, 32 yoLeven = 11, boxCars = 12 };33 34 // called when user wants to begins playing35 protected void NewGameCommand_OnClick(

NewGameCommand_OnClick method is called when user clicks the New Game button


Outline

Craps.cs

36 object sender, EventArgs theEvent )37 {38 ActiveForm = Game;39 40 // PointLabel is used to store the 'point'41 // value, and should not be displayed42 PointLabel.Visible = false;43 44 // Game has not begun, dice not shown45 DicePanel.Visible = false;46 }47 48 // called when game starts49 protected void Game_OnActivate(50 object sender, EventArgs theEvent )51 {52 // user is given option to start game53 PlayCommand.Visible = true;54 PlayCommand.Text = "Play";55 RollCommand.Visible = false;56 StatusLabel.Text = "Press Play to start!";57 }58 59 // begins game and analyzes first roll60 protected void PlayCommand_OnClick( 61 object sender, EventArgs theEvent )62 {63 int sum;64 StatusLabel.Text = "";65 sum = RollDice();6667 // display dice for this roll, store 'point'68 DicePanel.Visible = true;69 PointLabel.Text = sum.ToString();70

Game_OnActivate method is called when Game becomes the active form

Sets Play button to visible and Roll Again button to hidden

PlayCommand_OnClick method handles player’s opening roll

Activates Game form and sets the PointLabel control and DicePanel panel so they are not visible

Receives the value rolled on the dice


Outline

Craps.cs

71 // analyze first roll72 switch ( sum ) {7374 // user has won75 case 7:76 case ( int ) Names.yoLeven:7778 // game is over; user cannot roll again79 RollCommand.Visible = false;80 StatusLabel.Text = "*YOU WIN!!!*";81 PlayCommand.Text = "Play Again";82 break;8384 // user has lost85 case ( int ) Names.snakeEyes:86 case ( int ) Names.trey:87 case ( int ) Names.boxCars:88 RollCommand.Visible = false;89 StatusLabel.Text = "*SORRY. YOU LOSE.*";90 PlayCommand.Text = "Play Again";91 break;9293 // user continues to play if they94 // have neither won nor lost95 default:96 PointLabel.Text = sum.ToString();97 StatusLabel.Text = "Point is " + 98 PointLabel.Text + ".";99 PlayCommand.Visible = false;100101 // user is given option to roll102 RollCommand.Visible = true;103 break;104105 } // end switch

switch statement handles user’s first roll. If user rolls 7 or 11 they win. If the user rolls a 2,3 or 12 they lose.

Default case is executed in other casesUsers roll value is stored in PointLabel and displayed using StatusLabel

Makes Play button invisible and Roll Again button visible


Outline

Craps.cs

106107 } // end PlayCommand_OnClick108109 // executes a roll110 protected void RollCommand_OnClick( 111 object sender, EventArgs theEvent )112 {113 int roll;114 int point = Int32.Parse( PointLabel.Text );115116 roll = RollDice(); 117118 // analyze current roll119 // if both cases are false, user rolls again120 if ( roll == point ) 121 {122 StatusLabel.Text = "*YOU WIN!!!*";123 PlayCommand.Text = "Play Again";124 RollCommand.Visible = false;125 PlayCommand.Visible = true;126 }127 else 128 {129 if ( roll == 7 ) 130 {131 StatusLabel.Text = "*SORRY. YOU LOSE.*";132 PlayCommand.Text = "Play Again";133 RollCommand.Visible = false;134 PlayCommand.Visible = true;135 }136 }137138 } // end RollCommand_OnClick139140 // sends the user back to rules page

RollCommand_OnClick method is called (line 110-138) which rolls the dice again

User wins if they roll their “point”

User loses if they roll a 7


Outline

Craps.cs

141 protected void QuitCommand_OnClick( 142 object sender, EventArgs theEvent )143 {144 ActiveForm = Rules;145 }146147 // creates random values for a roll148 private int RollDice() {149 int die1, die2, dieSum;150 Random rand = new Random();151152 die1 = 1 + rand.Next( 6 );153 die2 = 1 + rand.Next( 6 );154155 // display the proper dice images156 FirstDiceImage.ImageURL = "/dieImg" + 157 die1.ToString() + ".bmp";158 SecondDiceImage.ImageURL = "/dieImg" + 159 die2.ToString() + ".bmp"; 160161 // calculate the sum, the "roll" of the user162 dieSum = die1 + die2;163 RollValueLabel.Text = "Your roll was " +164 dieSum.ToString() + ":";165166 return dieSum;167 }168169 } // end class CrapsPage170171 } // end namespace CrapsApp

RollDice method simulates rolling of 2 dice by generating two random values between 1 and 6 and returning their sum

FirstDieImage and SecondDieImage are set to display proper dice images

Set the location of the image using ImageURL

Sums the values of each die rolled and stores value as a string which is displayed above the images of the dice

Returns value rolled to variable Sum on line 65

QuitCommand_OnClick is called when Quit button is clicked. Changes active form back to the original form that displays the rules of the game


28.5 Advanced Mobile Web Forms

Fig. 28.6 Behind-the-scenes functionality for a game of craps


28.6 .NET Mobile Web Design

• Mobile Internet Toolkit– Web site Design

• Easy to read and navigate

– Create Deitel Wireless Portal Web site• Links to WML-accessible sites

• Consists of five forms and one C# script

– Forms

• First form welcomes user and displays category headings

• Other forms contain links for each category


Outline

DeitelWirelessPortal1.aspx

1 <%-- Fig. 28.7: DeitelWirelessPortal1.aspx --%>2 <%-- A simple mobile Web portal. --%>3 4 <%@ Page Inherits = "System.Web.UI.MobileControls.MobilePage" 5 Language = "C#" %>6 <%@ Register TagPrefix = "Mobile" 7 Namespace = "System.Web.UI.MobileControls"8 Assembly = "System.Web.Mobile" %>9 10 <script runat = "server" language = "C#">11 12 // adds items to a list13 protected void CreateContacts( object sender, 14 EventArgs theEvent )15 {16 // clear the list (from previous executions)17 // add three phone numbers18 PhoneList.Items.Clear();19 PhoneList.Items.Add( "DWP Sales (555)555-1234" );20 PhoneList.Items.Add( "DWP Tech Support (555)555-2468" );21 PhoneList.Items.Add( "DWP Main (555)555-3696" );22 23 } // end CreateContacts24 25 </script>26 27 <Mobile:Form runat = "server" id = "Welcome"> 28 <Mobile:Label runat = "server" id = "WelcomeLabel"29 Text = "Welcome to the Deitel Wireless Portal!" /> 30 31 <%-- when link is clicked user will be sent to --%>32 <%-- the URL specified by NavigateURL --%>33

CreateContacts method allows items to be added to the List object PhoneListList control contains list of items to be displayed

Item elements add items to a ListItem is an instance of the MobileListItem class

Items can be manipulated programatically using the MobileListItemCollection class

Clear method empties the list

Add method adds items to the list

Defines Welcome form which contains Web site’s main menu


Outline


34 <%-- "#" indicates an internal link --%>35 <Mobile:Link runat = "server" 36 NavigateURL = "#General" 37 Text = "General" id = "GeneralLink" />38 <Mobile:Link runat = "server" 39 NavigateURL = "#Financial" 40 Text = "Financial" id = "FinancialLink" />41 <Mobile:Link runat = "server" 42 NavigateURL = "#Travel" 43 Text = "Travel/Food" id = "TravelFoodLink" />44 <Mobile:Link runat = "server" 45 NavigateURL = "#Contact" 46 Text = "Contact" id = "ContactLink" />47 </Mobile:Form>48 49 <Mobile:Form runat = "server" id = "General">50 51 <%-- NavigateURL does not contain "#" --%>52 <%-- user will be sent to another site --%>53 <Mobile:Link runat = "server"54 NavigateURL = "http://mobile.yahoo.com/home" 55 Text = "Yahoo!" id = "YahooLink" />56 <Mobile:Link runat = "server" 57 NavigateURL = "http://www.strategy.com" 58 Text = "Strategy.com" id = "StrategyLink" />59 <Mobile:Link runat = "server" 60 NavigateURL = "http://www.infospace.com" 61 Text = "InfoSpace.com" id = "InfoSpaceLink" />62 </Mobile:Form>63

Link controls create hyperlinks that redirect the user to the other forms or sites

Link displays Text value and navigates to NavigateURL value

# (page anchor) indicates that NavigateURL value is within this ASPX file (internal link)

Defines forms that contain different Web link categories


Outline


64 <Mobile:Form runat = "server" id = "Financial">65 <Mobile:Link runat = "server" id = "WallStreetLink" 66 NavigateURL = "http://wap.wsj.com" 67 Text = "Wall St. Journal" />68 <Mobile:Link runat = "server" id = "FTLink"69 NavigateURL = "http://wap.ft.com" Text = "FT.com" />70 <Mobile:Link runat = "server" id = "JumpLink"71 NavigateURL = "http://123jump.com" 72 Text = "123Jump.com" />73 </Mobile:Form>7475 <Mobile:Form runat = "server" id = "Travel">76 <Mobile:Link runat = "server" id = "CitiwizLink"77 NavigateURL = "http://wap.citiwiz.com/index.wml" 78 Text = "CitiWiz" />79 <Mobile:Link runat = "server" id = "HotelGuideLink"80 NavigateURL = "http://wap.hotelguide.com" 81 Text = "HotelGuide.com" />82 <Mobile:Link runat = "server" id = "ZagatLink"83 NavigateURL = "http://www.zagat.com" Text = "Zagat" />84 </Mobile:Form> <%-- end Travel --%>8586 <Mobile:Form runat = "server" id = "Contact" 87 OnActivate = "CreateContacts">8889 <%-- List object will contain phone numbers --%>90 <Mobile:List runat = "server" id = "PhoneList" />91 </Mobile:Form>

Defines form Contact that displays the items in List control


28.6 .NET Mobile Web Design

Fig 28.7 Demonstrating Lists and Links


28.7 Device-Independent Web Design Using Stylesheets and Templates

• Add controls to Deitel Wireless Portal – Enhance site’s look and feel– AdRotator control

• Creates a rotating advertisement

– Templates and stylesheets

– Produce browser-specific content



• Stylesheet control– Collection of style elements

– Mobile toolkit StyleReference property• Sets control’s font, color, alignment, etc.

• Set style element’s name attribute

– Allow developer to specify style of Web page elements

– Target code to a specific device• Device-Specific Rendering

• Write code for HTML browser without compromising mobile accessibility

– Separates structure from content so it can be easily changed


Outline


1 <%-- Fig. 28.8: DeitelWirelessPortal2.aspx --%>2 <%-- A device-independent Web portal. --%>3 4 <%@ Page Inherits = "System.Web.UI.MobileControls.MobilePage" 5 Language = "C#" %>6 <%@ Register TagPrefix = "Mobile" 7 Namespace = "System.Web.UI.MobileControls"8 Assembly = "System.Web.Mobile" %>9 10 <script runat = "server" Language = "C#" >11 12 // displays the proper text for the current ad13 protected void DeitelAdRotator_OnAdCreated( object sender, 14 AdCreatedEventArgs theEvent )15 {16 if ( theEvent.AlternateText == "ebecHTP" ) {17 BookTitleLabel.Text = "e-Business and e-Commerce " + 18 "How To Program:";19 DescriptionLabel.Text = "This new book carefully " +20 "explains how to program multi-tiered, " + 21 "client/server, database-intensive, Web-based," +22 " e-Business and e-Commerce applications.";23 }24 else if ( theEvent.AlternateText == "XMLHTP" ) {25 BookTitleLabel.Text = "XML How To Program:";26 DescriptionLabel.Text = "Offers a careful " + 27 "explanation of XML-based systems development," +28 " for faculty students and professionals." +29 "Includes extensive pedagogic features, " + 30 "including Internet resources.";31 }

DeitelAdRotator_OnAdCreated method sets Text property of Label controls BookTitleLabel and DescriptionLabel according to advertisement that AdRotator chooses


Outline


32 else if ( theEvent.AlternateText == "ebecFM" ) {33 BookTitleLabel.Text = "e-Business and e-Commerce " + 34 "For Managers:";35 DescriptionLabel.Text = "For all managers, " + 36 "business ownets, and others who need a " + 37 "comprehensive overview of how to build and " +38 "manage an e-Business."; 39 }40 } // end DeitelAdRotator_OnAdCreated41 42 // changes links for IE browsers43 protected void ResolveLinks( object sender, 44 EventArgs theEvent )45 {46 System.Web.Mobile.MobileCapabilities capability = 47 ( System.Web.Mobile.MobileCapabilities ) 48 Request.Browser;49 50 // if the browser name contains "IE", change links51 if ( capability.Browser.IndexOf( "IE" ) != -1 ) {52 YahooLink.NavigateURL = "http://www.yahoo.com";53 WallStreetLink.NavigateURL = "http://www.wsj.com";54 CitiwizLink.NavigateURL = "http://www.citiwiz.com"; 55 HotelGuideLink.NavigateURL = 56 "http://www.hotelguide.com";57 FTLink.NavigateURL = "http://www.ft.com";58 }59 } // end ResolveLinks60


Outline


61 </script>6263 <%-- Stylesheet rendered for64 each form that specifies it --%>65 <Mobile:Stylesheet runat = "server">66 <Style name = "DWPStyle">67 <DeviceSpecific>6869 <%-- Templates created for HTML browsers --%>70 <Choice Filter = "isHTML32">7172 <%-- Template to display "top.bmp" --%>73 <HeaderTemplate>74 <table>75 <tr><td><img src = "top.bmp"></td></tr>76 </table>77 </HeaderTemplate>78 </Choice>7980 <%-- Templates created for other browsers --%>81 <Choice>82 <HeaderTemplate>83 <Mobile:Label runat = "server" 84 StyleReference = "Title" 85 id = "TitleLabel"86 Text = "Deitel Wireless Portal" />87 </HeaderTemplate>88 </Choice>89 </DeviceSpecific> 90 </Style> <%-- end Style DWPStyle --%>91 </Mobile:Stylesheet>92

DeviceSpecific element used to program for different devicesChoice elements contain the

information on what should be rendered for each device

Filter attribute is evaluated and compared to filters specified within the deviceFilters element of Web.config fileisHTML32 filter indicates that this element is for HTML browsers

Template sets define markup that is rendered in specific places in the Web form


Outline


93 <%-- opening page showing dwp image --%>94 <Mobile:Form runat = "server" id = "Welcome">95 <Mobile:Image runat = "server" id = "LogoImage"96 alternateText = "DeitelWireless">97 <DeviceSpecific>9899 <%-- image for IE --%>100 <Choice Filter = "isColor" 101 ImageURL = "logocolor.gif" />102103 <%-- image for UP --%>104 <Choice ImageURL = "logo.bmp" />105106 </DeviceSpecific>107 </Mobile:Image>108 <Mobile:Link runat = "server" NavigateURL = "#MainMenu" 109 Text = "Enter" Alignment = "center"110 id = "MainMenuLink" />111 </Mobile:Form> <%-- end form Welcome --%>112113 <%-- Stylesheet "DWPStyle" specified --%>114 <Mobile:Form runat = "server" id = "MainMenu" 115 StyleReference = "DWPStyle" >116 <Mobile:Link runat = "server" NavigateURL = "#General" 117 Text = "General" id = "GeneralLink" />118 <Mobile:Link runat = "server" NavigateURL = "#Financial" 119 Text = "Financial" id = "FinancialLink" />120 <Mobile:Link runat = "server" NavigateURL = "#Travel" 121 Text = "Travel/Food" id = "TravelFoodLink" />122 <Mobile:Link runat = "server" NavigateURL = "#Contact" 123 Text = "Contact" id = "ContactLink" /> 124 <Mobile:Label runat = "server" Font-Bold = "true" 125 Text = "Specials:" id = "SpecialsLabel" />126 <Mobile:Label runat = "server" Font-Italic = "true" 127 id = "BookTitleLabel" />

Welcome form uses DeviceSpecific and Choice elements to show that Device-Specific Rendering can be done outside of a stylesheet

Link object redirects user to MainMenu

Defines MainMenu which contains several links and three labels


Outline


128 <Mobile:Label runat = "server" id = "DescriptionLabel" />129130 <Mobile:AdRotator runat = "server"131 AdvertisementFile = "AdBanners.xml" 132 id = "DeitelAdRotator"133 OnAdCreated = "DeitelAdRotator_OnAdCreated" >134135 <DeviceSpecific>136 <Choice Filter = "isUP4x" 137 ImageKey = "WirelessImageUrl" />138 </DeviceSpecific>139140 </Mobile:AdRotator>141142 </Mobile:Form>143144 <%-- "ResolveLinks" called for the145 links that need to be changed --%>146 <Mobile:Form runat = "server" id = "General" 147 StyleReference = "DWPStyle" OnActivate = "ResolveLinks">148 <Mobile:Link runat = "server" id = "YahooLink" 149 Text = "Yahoo!" 150 NavigateURL = "http://mobile.yahoo.com/home" />151 <Mobile:Link runat = "server" Text = "Strategy.com" 152 id = "StrategyLink" 153 NavigateURL = "http://www.strategy.com" />154 <Mobile:Link runat = "server" Text = "InfoSpace.com" 155 id = "InfoSpaceLink"156 NavigateURL = "http://www.infospace.com" />157 <Mobile:Link runat = "server" NavigateURL = "#MainMenu" 158 Text = "Main Menu" />159 </Mobile:Form>160

Defines AdRotator

DeviceSpecific element specifies capabilities of incoming device

ImageKey attribute displays image if the incoming device has capabilities specified by the filter


Outline


161 <Mobile:Form runat = "server" id = "Financial"162 StyleReference = "DWPStyle" OnActivate = "ResolveLinks" >163 <Mobile:Link runat = "server" id = "WallStreetLink" 164 Text = "Wall Street Journal" 165 NavigateURL = "http://wap.wsj.com" />166 <Mobile:Link runat = "server" id = "FTLink" Text = "FT.com"167 NavigateURL = "http://wap.ft.com" />168 <Mobile:Link runat = "server" Text = "123Jump.com"169 NavigateURL = "http://123Jump.com" id = "JumpLink" /> 170 <Mobile:Link runat = "server" NavigateURL = "#MainMenu" 171 Text = "Main Menu" />172 </Mobile:Form>173174 <Mobile:Form runat = "server" id = "Travel" 175 StyleReference = "DWPStyle" OnActivate = "ResolveLinks">176 <Mobile:Link runat = "server" id = "CitiwizLink" 177 Text = "CitiWiz"178 NavigateURL = "http://wap.citiwiz.com/index.wml" />179 <Mobile:Link runat = "server" id = "HotelGuideLink" 180 Text = "HotelGuide.com"181 NavigateURL = "http://wap.hotelguide.com" />182 <Mobile:Link runat = "server" Text = "Zagat"183 NavigateURL = "http://www.zagat.com" id = "ZagatLink" />184 <Mobile:Link runat = "server" NavigateURL = "#MainMenu" 185 Text = "Main Menu" />186 </Mobile:Form> <%-- end Travel --%>187188 <Mobile:Form runat = "server" id = "Contact" 189 StyleReference = "DWPStyle">190


Outline


191 <%-- List with three items created --%>192 <Mobile:List runat = "server" id = "PhoneList" >193 <Item Text = "DWP Sales (555)555-1234" />194 <Item Text = "DWP Tech Support (555)555-2468" />195 <Item Text = "DWP Main (555)555-3696" />196 </Mobile:List>197 <Mobile:Link runat = "server" NavigateURL = "#MainMenu" 198 Text = "Main Menu" />199 </Mobile:Form>



• Web.config file– deviceFilters element

• Name attribute

– specified by the programmer• Compare attribute

– Browser property defined in the browser documentation under Extended Browser Capabilities

• Argument attributes are listed in the Mobile Internet Toolkit documentation

Outline

Web.config

1 <?xml version="1.0" encoding="utf-8" ?>2 3 <configuration>4 <system.web>5 <deviceFilters>6 7 <filter name = "isHTML32" 8 compare = "preferredRenderingType" 9 argument = "html32" />10 <filter name = "isWML11" 11 compare = "preferredRenderingType" 12 argument = "wml11" />13 14 15 <filter name = "isGoAmerica" compare = "browser" 16 argument = "Go.Web" />17 <filter name = "isPocketIE" compare = "browser" 18 argument = "Pocket IE" />19 <filter name = "isUP4x" compare = "type" 20 argument = "Phone.com 4.x Browser" />21 22 23 <filter name = "isEricssonR380" compare = "type" 24 argument = "Ericsson R380" />25 <filter name = "isNokia7110" compare = "type" 26 argument = "Nokia 7110" />27 28 29 <filter name = "prefersGIF" 30 compare = "preferredImageMIME" 31 argument = "image/gif" />32 <filter name = "isColor" 33 compare = "IsColor" 34 argument = "true" />

compare attribute represents browser aspect used to differentiate between possible devices

Sets value of browser aspect

Choice element with isHTML32 filter is chosen if device expects images with MIME type html32


Outline

Web.config

35 <filter name = "prefersWBMP" 36 compare = "preferredImageMIME" 37 argument = "image/vnd.wap.wbmp" />38 <filter name = "supportsCookies" 39 compare = "cookies" 40 argument = "true" />41 <filter name = "supportsJavaScript" 42 compare = "javascript" 43 argument = "true" />44 </deviceFilters>45 </system.web>46 </configuration>


Outline

AdBanners.xml

contains data for different

advertisements used in DeitelWirelessPortal2.aspx

1 <?xml version="1\.0" ?>2 3 <Advertisements>4 <Ad>5 <ImageUrl>\ebecHTP.gif</ImageUrl>6 <WirelessImageUrl>\buyMe.bmp</WirelessImageUrl>7 <NavigateUrl></NavigateUrl>8 <AlternateText>ebecHTP</AlternateText>9 <Impressions>1</Impressions>10 </Ad>11 <Ad>12 <ImageUrl>\XMLHTP.gif</ImageUrl>13 <WirelessImageUrl>\buyMe.bmp</WirelessImageUrl>14 <NavigateUrl></NavigateUrl>15 <AlternateText>XMLHTP</AlternateText>16 <Impressions>1</Impressions>17 </Ad>18 <Ad>19 <ImageUrl>\ebecFM.gif</ImageUrl>20 <WirelessImageUrl>\buyMe.bmp</WirelessImageUrl>21 <NavigateUrl></NavigateUrl>22 <AlternateText>ebecFM</AlternateText>23 <Impressions>1</Impressions>24 </Ad>25 </Advertisements>

NavigateURL is used for ad images that can also be used as linksImpressions element is an example of one of the elements that can be used to make the AdRotator less random

AternateText element contains text that displays if the browser cannot display the image

2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit...

Documents

Transcript of 2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit...