220 likes | 415 Views
To Do Wireless Internet Applications You Need. a wireless device phones, pagers, PDAs, pocket PC a microbrowser usually installed on the device a wireless gateway provides access to the Internet handles messages from/to Internet and the wireless device using WAP. Microbrowsers.
E N D
To Do Wireless Internet Applications You Need • a wireless device • phones, pagers, PDAs, pocket PC • a microbrowser • usually installed on the device • a wireless gateway • provides access to the Internet • handles messages from/to Internet and the wireless device using WAP
Microbrowsers • are burned into the ROM of the device • have limited memory, screen space, and processing power • applications need to be small and simple • use lots of checkboxes, drop down lists, and default values • are provided by different manufacturers: Nokia, Sony-Ericsson (very proprietary) • are being standardized by the Open Mobile Alliance
WAP • Wireless Application Protocol • supports most wireless networks including CDPD, CDMA, TDMA • supported by Windows and Linux • is a layered protocol • session, transaction, security, transport • is open and scalable • WAP is the equivalent of HTTP for wireless applications
What Happens When You Access the Web using a WAP device: • You turn on the device and open the microbrowser. • The device sends out a radio signal, searching for service from the closest cell tower. • A connection is made with your service provider. • You select a Web site that you wish to view. • A request is sent to a gateway server using WAP. • The gateway server retrieves the information via HTTP from the Web site. • The gateway server encodes the HTTP data as WML. • The WML-encoded data is sent to your device. • You see the wireless Internet version of the Web page you selected.
Markup Languages on Wireless Devices • HTML - XML - XHTML • standard for web pages • Markups specifically for Wireless • HDML - handheld dynamic markup language • cHTML - compact HTML • XHTML Basic (a module of XHTML) • WML - wireless markup language • XHTML Mobile
Developing Wireless Apps • use software development kits • emulators are used as a microbrowser • a number of them are available from • Openwave - has integrated development environment • Motorola • Sony Ericsson • Nokia
Wireless Markup Language • WML was developed using XML • features are available for: • displaying normal text • adding links to other pages • formatting text in simple ways • making a selection among lists
Wireless Markup Language • uses a deck of cards metaphor • a deck is one or more cards (but is not a tag) • deck begins with <wml> and ends with </wml> • cards are transmitted as a single deck but displayed one at a time • <card> … </card> is basically one screen of info • each card must be identified with an id and contain <p> </p> tags • cookies are not supported in WML
Common Formatting Tags in WML • <br /> • <p> </p> • <b> </b> • <i> </i> • <u> </u> • <big> </big> • <small> </small> • <em> </em> • <strong> </strong>
A Simple WML Example <?xml version=“1.0”?> <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id=“first” title=“Hello”> <p> Welcome to the wonderful world of WML </p> </card> </wml>
Navigating Between Cards • use the <a> tag for hyperlinks • linking to a card in the same deck: • <a href=“#card2”>Second card</a> • linking to a card in a different deck: • <a href=“next.wml”>Another deck</a>
Linking in WML <wml> <card title="Hello" id="one" > <p> <small>Welcome to the <b> wonderful</b> world of <i> wireless</i></small> <br/> <a href="#two">Next</a> </p> </card> <card title="Next" id="two"> <p>Another card</p> </card> </wml>
The Actions Do and Go • <do> tells the program what to do when responding to a user event such as pressing a softkey • predefined Do Action softkeys • accept - similar to enter or ok • prev - return to the previous card • help • reset • <go> lets you branch to another card • <go href=“#card2” /> • can be combined with the <do> tag
An Example of Do and Go <wml> <card title="Hello" id="one"> <p> <small>Welcome to the wonderful world of <i> wireless</i></small> <br/> </p> <do type="accept" label="Next"> <go href="#two" /> </do> </card> <card title="Next" id="two"> <p>Another card</p> </card> </wml>
Indirect Events • attributes triggered by user navigation • onenterforward=“#next” • when user moves forward in history • onenterbackward=“#previous” • when user moves backward in history • onpick=“#choiceA” • when user makes a selection from an option list • often embedded in <select> tags (which are embedded in <p> tags) for providing a list of options.
An Onpick Example <wml> <card> <p align="center"><b>***FILMTIME!***</b></p> <p><b>KING KONG NOW PLAYING AT...</b> <select> <option >Theater</option> <option onpick="#rio">Rio</option> <option onpick="#apollo">Apollo</option> <option onpick="#crown">Crown</option> </select> </p> </card> <card id="rio"> <p><b>Rio Theatre</b></p> <p>455 River Street, Anytown</p> <p>111.222.3333</p> <p>3:30, 5:30, 7:30</p> </card>
Events Using a Timer • good for splash screens that auto advance without user input • use ontimer attribute & timer element • <card id=“Welcome” ontimer=“#another_card> • <timer value=“100” /> • 10 timer units is one second
Example of a Splash Screen <wml> <card title="Hello" id="one" ontimer="#two"> <timer value="20” /> <p> <small>Welcome to the </small> </p> </card> <card title="Next" id="two"> <p><b>wonderful</b> world of <i>wireless</i></p> </card> </wml> <wml> <card title="Hello" id="one" ontimer="#two"> <timer value="20” /> <p> <small>Welcome to the </small> </p> </card> <card title="Next" id="two"> <p><b> wonderful</b> world of <i> wireless</i></p> </card>
User Input • form tag as in html is not used • <input>element is similar • attributes of the input element • name - references the value in a variable • value - input value • maxlength - max number of characters to enter • size - width of the box • format - input mask to allow alpha, numeric alphanumeric (not supported by all browsers) • e.g., 10N indicates a 10-digit number • e.g., 2A indicates 2 alphabetic characters
An Input Example <card id="one" title="Get Info"> <p> Name <input name="Uname" maxlength="20"/> Phone <input name="Uphone" format="10N" maxlength="10" size="11" /> State <input name=“Ustate" size=“3" /> <do type="accept"> <go href="#two“ /> </do> </p> </card>
Variables • let you pass data from one card to another • keep variable names to no more than 8 characters • variables are global (other cards can access them) • example (continuation of previous slide): <card id="two" title="Display info"> <p> Value for Name is $Uname <br /> Value for Phone is $Uphone <br /> Value for State is $Ustate </p> </card>
Adding Images in WML • Images are restricted to 1-bit WBMP format bitmaps about 127x127 max. • Go to http://www.waptiger.com/bmp2wbmpto convert a BMP file to WBMP. <wml> <card> <p> <imgsrc="ftlogo.wbmp" alt="FilmTime Logo" width="64" height="39"/> </p> </card> </wml>