 2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit Outline 28.1 Introduction 28.2 Setup 28.3 Introduction.

 2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit Outline 28.1 Introduction 28.2 Setup 28.3 Introduction to the Microsoft.NET Mobile Internet Toolkit and Microsoft.NET Mobile Web Forms 28.4 Basic Mobile Web Form Controls 28.5 Advanced Mobile Web Forms Controls 28.6.NET Mobile Web Design 28.7 Device-Independent Web Design Using Stylesheets and Templates

 2001 Prentice Hall, Inc. All rights reserved. 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

 2001 Prentice Hall, Inc. All rights reserved. 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

 2001 Prentice Hall, Inc. All rights reserved. 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]

 2001 Prentice Hall, Inc. All rights reserved. 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

 2001 Prentice Hall, Inc. All rights reserved. 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 2 3 4 <%-- opening declarations specify file where code is 5 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 13 <Mobile:Label id = "StartLabel" runat = "server" 14 Text = "Click Start!" /> 15 16 <%-- Command object that will execute the method 17 "StartButton_OnClick" when it is clicked --%> 18 <Mobile:Command runat = "server" id = "StartCommand" 19 OnClick = "StartCommand_OnClick" Text = "Start" /> 20 21 22 23 <%-- when activated, the method "ResultForm_OnActivate" 24 is called --%> 25 <Mobile:Form runat = "server" id = "Result" 26 OnActivate = "Result_OnActivate"> 27 28 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

 2001 Prentice Hall, Inc. All rights reserved. Outline Welcome.cs 1 // Fig. 28.2: Welcome.cs 2 // A simple code-behind file. 3 4 namespace WelcomeApp 5 { 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.MobilePage 12 public class WelcomePage : 13 System.Web.UI.MobileControls.MobilePage 14 { 15 protected System.Web.UI.MobileControls.Form Result; 16 protected System.Web.UI.MobileControls.Label ResultLabel; 17 18 // changes current form when "Start" is clicked 19 protected void StartCommand_OnClick( 20 object sender, EventArgs theEvent ) 21 { 22 // change the current form to "ResultForm" 23 ActiveForm = Result; 24 25 } // end StartButton_OnClick 26 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

 2001 Prentice Hall, Inc. All rights reserved. Outline Welcome.cs 28 // displays text when "ResultForm" is activated 29 protected void Result_OnActivate( 30 object sender, EventArgs theEvent ) 31 { 32 // change value to be displayed 33 ResultLabel.Text = "Welcome to the Microsoft.NET " + 34 "Mobile Internet Toolkit!"; 35 } 36 37 } // end class WelcomePage 38 39 } // end namespace WelcomeApp Method Result_OnActivate sets a welcome message to ResultLabel (line 27 of Welcome.aspx ) Message that is displayed Text is accessed as a property using the dot operator

 2001 Prentice Hall, Inc. All rights reserved. 28.4 Basic Mobile Web Form Controls 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

 2001 Prentice Hall, Inc. All rights reserved. 28.4 Basic Mobile Web Form Controls 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

 2001 Prentice Hall, Inc. All rights reserved. 28.4 Basic Mobile Web Form Controls –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 )

 2001 Prentice Hall, Inc. All rights reserved. Outline TipCalculator.aspx 1 2 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 11 12 13 // calculate tip 14 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 value 28 dollarAmt = String.Format( "{0:C}", tip ); 29 TopLabel.Text = "Tip Amount: " + dollarAmt; 30 } 31 } // end GetTipCommand_OnClick 32 33 34 Method GetTipCommand_OnClick calculates amount of tip based on user input Page.IsValid checks if form is valid (no errors raised by validators) tag begins a script with language set by language attribute

 2001 Prentice Hall, Inc. All rights reserved. Outline TipCalculator.aspx 35 36 37 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 51 <Mobile:TextBox runat = "server" 52 id = "TipPercentageTextBox" /> 53 54 55 56 57 <Mobile:RequiredFieldValidator id = "TotalAmountValidator" 58 ControlToValidate = "TotalAmountTextBox" 59 runat = "server" Text = "This field is required!" /> 60 61 <Mobile:Label runat = "server" 62 Text = "Enter Total Amount:" /> 63 64 <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

 2001 Prentice Hall, Inc. All rights reserved. Outline TipCalculator.aspx 67 <Mobile:Command runat = "server" 68 OnClick = "GetTipCommand_OnClick" 69 Text = "Calculate Tip" id = "GetTipCommand" /> 70 71

 2001 Prentice Hall, Inc. All rights reserved. 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 )

 2001 Prentice Hall, Inc. All rights reserved. Outline Craps.aspx 1 2 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 11 12 <Mobile:Label runat = "server" Alignment = "center" 13 id = "TitleLabel" Text = "--Craps Rules--" /> 14 15 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

 2001 Prentice Hall, Inc. All rights reserved. Outline Craps.aspx 35 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 43 44 45 46 47 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 58 59 60 61 62 63 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

 2001 Prentice Hall, Inc. All rights reserved. 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" /> 71 72 Command objects provide user options to play, roll again or quit

 2001 Prentice Hall, Inc. All rights reserved. Outline Craps.cs Code-behind file for Craps.aspx 1 // Fig. 28.6: Craps.cs 2 // The code-behind file for a game of craps. 3 4 namespace CrapsApp 5 { 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.MobilePage 13 { 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 values 31 enum Names { snakeEyes = 2, trey = 3, 32 yoLeven = 11, boxCars = 12 }; 33 34 // called when user wants to begins playing 35 protected void NewGameCommand_OnClick( NewGameCommand_OnClick method is called when user clicks the New Game button

 2001 Prentice Hall, Inc. All rights reserved. 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 displayed 42 PointLabel.Visible = false; 43 44 // Game has not begun, dice not shown 45 DicePanel.Visible = false; 46 } 47 48 // called when game starts 49 protected void Game_OnActivate( 50 object sender, EventArgs theEvent ) 51 { 52 // user is given option to start game 53 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 roll 60 protected void PlayCommand_OnClick( 61 object sender, EventArgs theEvent ) 62 { 63 int sum; 64 StatusLabel.Text = ""; 65 sum = RollDice(); 66 67 // 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

 2001 Prentice Hall, Inc. All rights reserved. Outline Craps.cs 71 // analyze first roll 72 switch ( sum ) { 73 74 // user has won 75 case 7: 76 case ( int ) Names.yoLeven: 77 78 // game is over; user cannot roll again 79 RollCommand.Visible = false; 80 StatusLabel.Text = "*YOU WIN!!!*"; 81 PlayCommand.Text = "Play Again"; 82 break; 83 84 // user has lost 85 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; 92 93 // user continues to play if they 94 // have neither won nor lost 95 default: 96 PointLabel.Text = sum.ToString(); 97 StatusLabel.Text = "Point is " + 98 PointLabel.Text + "."; 99 PlayCommand.Visible = false; 100 101 // user is given option to roll 102 RollCommand.Visible = true; 103 break; 104 105 } // 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 cases Users roll value is stored in PointLabel and displayed using StatusLabel Makes Play button invisible and Roll Again button visible

 2001 Prentice Hall, Inc. All rights reserved. Outline Craps.cs 106 107 } // end PlayCommand_OnClick 108 109 // executes a roll 110 protected void RollCommand_OnClick( 111 object sender, EventArgs theEvent ) 112 { 113 int roll; 114 int point = Int32.Parse( PointLabel.Text ); 115 116 roll = RollDice(); 117 118 // analyze current roll 119 // if both cases are false, user rolls again 120 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 } 137 138 } // end RollCommand_OnClick 139 140 // 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

 2001 Prentice Hall, Inc. All rights reserved. Outline Craps.cs 141 protected void QuitCommand_OnClick( 142 object sender, EventArgs theEvent ) 143 { 144 ActiveForm = Rules; 145 } 146 147 // creates random values for a roll 148 private int RollDice() { 149 int die1, die2, dieSum; 150 Random rand = new Random(); 151 152 die1 = 1 + rand.Next( 6 ); 153 die2 = 1 + rand.Next( 6 ); 154 155 // display the proper dice images 156 FirstDiceImage.ImageURL = "/dieImg" + 157 die1.ToString() + ".bmp"; 158 SecondDiceImage.ImageURL = "/dieImg" + 159 die2.ToString() + ".bmp"; 160 161 // calculate the sum, the "roll" of the user 162 dieSum = die1 + die2; 163 RollValueLabel.Text = "Your roll was " + 164 dieSum.ToString() + ":"; 165 166 return dieSum; 167 } 168 169 } // end class CrapsPage 170 171} // 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

 2001 Prentice Hall, Inc. All rights reserved. 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

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal1.aspx 1 2 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 11 12 // adds items to a list 13 protected void CreateContacts( object sender, 14 EventArgs theEvent ) 15 { 16 // clear the list (from previous executions) 17 // add three phone numbers 18 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 CreateContacts 24 25 26 27 28 <Mobile:Label runat = "server" id = "WelcomeLabel" 29 Text = "Welcome to the Deitel Wireless Portal!" /> 30 31 32 33 CreateContacts method allows items to be added to the List object PhoneList List 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 listDefines Welcome form which contains Web site’s main menu

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal1.aspx 34 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 48 49 50 51 52 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 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

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal1.aspx 64 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 74 75 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 85 86 <Mobile:Form runat = "server" id = "Contact" 87 OnActivate = "CreateContacts"> 88 89 90 91 Defines form Contact that displays the items in List control

 2001 Prentice Hall, Inc. All rights reserved. 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

 2001 Prentice Hall, Inc. All rights reserved. 28.7 Device-Independent Web Design Using Stylesheets and Templates 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

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal2.aspx 1 2 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 11 12 // displays the proper text for the current ad 13 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

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal2.aspx 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_OnAdCreated 41 42 // changes links for IE browsers 43 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 links 51 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 ResolveLinks 60

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal2.aspx 61 62 63 <%-- Stylesheet rendered for 64 each form that specifies it --%> 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 <Mobile:Label runat = "server" 84 StyleReference = "Title" 85 id = "TitleLabel" 86 Text = "Deitel Wireless Portal" /> 87 88 89 90 91 92 DeviceSpecific element used to program for different devices Choice 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 file isHTML32 filter indicates that this element is for HTML browsers Template sets define markup that is rendered in specific places in the Web form

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal2.aspx 93 94 95 <Mobile:Image runat = "server" id = "LogoImage" 96 alternateText = "DeitelWireless"> 97 98 99 100 <Choice Filter = "isColor" 101 ImageURL = "logocolor.gif" /> 102 103 104 105 106 107 108 <Mobile:Link runat = "server" NavigateURL = "#MainMenu" 109 Text = "Enter" Alignment = "center" 110 id = "MainMenuLink" /> 111 112 113 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 link s and three label s

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal2.aspx 128 129 130 <Mobile:AdRotator runat = "server" 131 AdvertisementFile = "AdBanners.xml" 132 id = "DeitelAdRotator" 133 OnAdCreated = "DeitelAdRotator_OnAdCreated" > 134 135 136 <Choice Filter = "isUP4x" 137 ImageKey = "WirelessImageUrl" /> 138 139 140 141 142 143 144 <%-- "ResolveLinks" called for the 145 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 160 Defines AdRotator DeviceSpecific element specifies capabilities of incoming device ImageKey attribute displays image if the incoming device has capabilities specified by the filter

 2001 Prentice Hall, Inc. All rights reserved. Outline DeitelWirelessPo rtal2.aspx 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 173 174 <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 187 188 <Mobile:Form runat = "server" id = "Contact" 189 StyleReference = "DWPStyle"> 190

 2001 Prentice Hall, Inc. All rights reserved. 28.7 Device-Independent Web Design Using Stylesheets and Templates 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

 2001 Prentice Hall, Inc. All rights reserved. Outline Web.config 1 2 3 4 5 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

 2001 Prentice Hall, Inc. All rights reserved. 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 45 46

 2001 Prentice Hall, Inc. All rights reserved. Outline AdBanners.xml contains data for different advertisements used in DeitelWirelessPort al2.aspx 1 2 3 4 5 \ebecHTP.gif 6 \buyMe.bmp 7 8 ebecHTP 9 1 10 11 12 \XMLHTP.gif 13 \buyMe.bmp 14 15 XMLHTP 16 1 17 18 19 \ebecFM.gif 20 \buyMe.bmp 21 22 ebecFM 23 1 24 25 NavigateURL is used for ad images that can also be used as links Impressions 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 Outline 28.1 Introduction 28.2 Setup 28.3 Introduction.

Similar presentations

Presentation on theme: " 2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit Outline 28.1 Introduction 28.2 Setup 28.3 Introduction."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

 2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit Outline 28.1 Introduction 28.2 Setup 28.3 Introduction.

Similar presentations

Presentation on theme: " 2001 Prentice Hall, Inc. All rights reserved. Chapter 28 -Microsoft.NET Mobile Internet Toolkit Outline 28.1 Introduction 28.2 Setup 28.3 Introduction."— Presentation transcript:

Similar presentations

About project

Feedback