MOBILE COMPUTING

Practical File
sj
Index
1. Hello World Program in WML
2. External Links in WML
3. Multiple Cards Navigation in WML
4. Image Display in WML
5. Tables in WML
6. Forms in WML
7. Events in WML
8. Variables in WML
9. Square Calculator in WML
10. Addition Program in WML
11. WML Calculator
12. Android Hello World
13. Android Login Form
Experiment 1: Hello World Program in WML
Aim

To create a simple WML page that displays "Hello! WML" message.

Theory

WML (Wireless Markup Language) is a markup language used to create pages for mobile
devices. It uses cards as basic units of information. Wireless Markup Language (WML) is
designed for developing applications for mobile devices. A WML document is structured into
decks and cards, where a deck is analogous to an HTML page and a card is similar to a
section of content within that page. To create a card, you define content within the <card>
tag. By using a <p> tag inside the card, you can display text like "Hello! WML", which
ensures the text is presented in a paragraph format on mobile devices.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a r d1" t i t l e =" He l l o WML" >
<p>He l l o! WML</ p>
</ c a r d>
</ wml >

Output

A mobile screen displaying "Hello! WML"

Experiment 2: External Links in WML
Aim

To create and execute external links in WML.

Theory

WML supports hyperlinks through the <a> tag, similar to HTML. WML allows the creation
of hyperlinks to external resources using the <a> tag, much like HTML. These links can point
to other WML cards or external websites, facilitating navigation and interactivity. By
defining the target URL in the <a> tag, users can click on these links to access additional
information or move to different pages.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a r d1" t i t l e =" Ext e r na l Li nks " >
<p>
<a hr e f =" ht t p: / / www. e xa mpl e . c om" >Vi s i t Exa mpl e . c om</ a ><br / >
<a hr e f =" t e l : 1234567890" >Ca l l Us </ a >
</ p>
</ c a r d>
</ wml >

Output

A page with clickable links to a website and phone number

Experiment 3: Multiple Cards Navigation
Aim

To create multiple cards and implement navigation between them.

Theory

WML allows multiple cards within a single document and provides navigation using <do>
tags. WML supports the creation of multiple cards within a single deck, enabling developers
to design multi-page applications. Navigation between these cards is managed through <do>
tags, which define actions such as moving to another card. This feature allows for creating a
structured and interactive user interface within a single WML document.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a r d1" t i t l e =" Fi r s t Ca r d" >
<p>Thi s i s t he f i r s t c a r d</ p>
<do t ype =" a c c e pt " l a be l =" Ne xt " >
<go hr e f =" #c a r d2" / >
</ do>
</ c a r d>

<c a r d i d=" c a r d2" t i t l e =" Se c ond Ca r d" >

<p>Thi s i s t he s e c ond c a r d</ p>
<do t ype =" pr e v" l a be l =" Ba c k" >
<pr e v/ >
</ do>
</ c a r d>
</ wml >

Output

Two cards with navigation buttons to move between them

Experiment 4: Image Display in WML
Aim

To display images in WML page.

Theory

WML supports WBMP (Wireless Bitmap) format images using the <img> tag. Images in
WML are typically in the WBMP (Wireless Bitmap) format, suitable for mobile devices. The
<img> tag is used to embed these images within a card, allowing visual content to be
displayed alongside text. This enhances the user experience by providing graphical elements
that are easily interpreted on small screens.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a r d1" t i t l e =" I ma ge Di s pl a y" >
<p>
<i mg s r c =" i ma ge . wbmp" a l t =" Sa mpl e I ma ge " / >
</ p>
</ c a r d>
</ wml >

Output

A page displaying a WBMP image

Experiment 5: Tables in WML
Aim

To create a table in WML.

Theory

WML supports basic table structure using <table>, <tr>, and <td> tags. WML supports
tables through the <table>, <tr>, and <td> tags, similar to HTML. This allows developers to
organize content in a tabular format, making it easier to present data clearly and efficiently on
mobile devices. Tables in WML provide a structured way to display information such as
schedules, lists, or comparison charts.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a r d1" t i t l e =" WML Ta bl e " >
<p>
<t a bl e c ol umns =" 2" >
<t r >
<t d>Na me </ t d>
<t d>Age </ t d>
</ t r >
<t r >
<t d>J ohn</ t d>
<t d>25</ t d>
</ t r >
</ t a bl e >
</ p>
</ c a r d>
</ wml >

Output

A page with a 2-column table showing name and age

Experiment 6: Forms in WML
Aim

To create a form and display entered data in another card.

Theory

WML supports form elements like input fields and select boxes. Data can be passed between
cards using variables. WML forms allow user input through various tags such as <input>,
<select>, and <option>. These elements collect data from users, which can then be processed
and displayed in another card using <do> tags. This functionality enables interactive forms
and user feedback mechanisms within mobile applications.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" f or m" t i t l e =" I nput For m" >
<p>
Na me : <i nput na me =" us e r " t ype =" t e xt " / ><br / >
Age : <s e l e c t na me =" a ge " >
<opt i on va l ue =" 20" >20</ opt i on>
<opt i on va l ue =" 21" >21</ opt i on>
<opt i on va l ue =" 22" >22</ opt i on>
</ s e l e c t >
<do t ype =" a c c e pt " l a be l =" Submi t " >
<go hr e f =" #r e s ul t " / >
</ do>
</ p>
</ c a r d>

<c a r d i d=" r e s ul t " t i t l e =" Re s ul t " >

<p>
Na me : $( us e r ) <br / >
Age : $( a ge )
</ p>
</ c a r d>
</ wml >

Output

Two cards: one with a form and another showing submitted data
Experiment 7: Events in WML
Aim

To demonstrate the usage of onpick and ontimer events.

Theory

WML supports events like onpick (triggered when selecting an option) and ontimer (triggered
after a time delay). WML supports event handling through attributes like onpick and ontimer.
The onpick event triggers actions when an item is selected, while ontimer activates after a
specified duration. These events enable dynamic and time-based interactions, making WML
pages more responsive and engaging for users.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a r d1" t i t l e =" Eve nt s De mo" ont i me r =" #c a r d2" >
<t i me r va l ue =" 30" / >
<p>
Thi s c a r d wi l l r e di r e c t i n 30 s e c onds
<s e l e c t >
<opt i on onpi c k=" #c a r d2" >Go t o Ca r d 2</ opt i on>
</ s e l e c t >
</ p>
</ c a r d>

<c a r d i d=" c a r d2" t i t l e =" Se c ond Ca r d" >

<p>We l c ome t o Ca r d 2</ p>
</ c a r d>
</ wml >

Output

A card with automatic redirect and manual selection option

Experiment 8: Variables in WML
Aim

To demonstrate variable usage in WML.

Theory

WML supports variables that can store and display values. WMLScript, which is used in
conjunction with WML, allows for the manipulation of variables. By using tags like
<setvar>, developers can define and set variable values that can be dynamically displayed on
a WML page. This feature is useful for creating interactive and personalized content.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a r d1" t i t l e =" Va r i a bl e s " >
<p>
<s e t va r na me =" me s s a ge " va l ue =" He l l o Wor l d" / >
The me s s a ge i s : $( me s s a ge )
</ p>
</ c a r d>
</ wml >

Output

A page displaying the value of a variable

Experiment 9: Square Calculator
Aim

To create a program that calculates the square of a number.

Theory

WML can perform basic arithmetic operations using variables. WMLScript can perform
arithmetic operations, such as calculating the square of a number. By taking user input, the
script processes the number and displays the result, demonstrating simple computational
capabilities within a mobile-friendly environment.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" i nput " t i t l e =" Squa r e Ca l c ul a t or " >
<p>
Ent e r numbe r : <i nput na me =" num" t ype =" t e xt " f or ma t =" *N" / >
<do t ype =" a c c e pt " l a be l =" Ca l c ul a t e " >
<go hr e f =" #r e s ul t " >
<s e t va r na me =" s qua r e " va l ue =" $( num) *$( num) " / >
</ go>
</ do>
</ p>
</ c a r d>

<c a r d i d=" r e s ul t " t i t l e =" Re s ul t " >

<p>
Squa r e of $( num) i s $( s qua r e )
</ p>
</ c a r d>
</ wml >

Output

Two cards showing input and result of square calculation

Experiment 10: Addition Program
Aim

To create a program that adds two numbers.

Theory

WML can perform addition using variables and setvar tag. WMLScript also supports basic
arithmetic operations like addition. By accepting two numbers as input, the script calculates
their sum and displays the result on the WML page. This showcases the ability to handle
basic mathematical functions within a WML application.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" i nput " t i t l e =" Addi t i on" >
<p>
Fi r s t numbe r : <i nput na me =" num1" t ype =" t e xt " f or ma t =" *N" / ><br / >
Se c ond numbe r : <i nput na me =" num2" t ype =" t e xt " f or ma t =" *N" / >
<do t ype =" a c c e pt " l a be l =" Add" >
<go hr e f =" #r e s ul t " >
<s e t va r na me =" s um" va l ue =" $( num1) +$( num2) " / >
</ go>
</ do>
</ p>
</ c a r d>

<c a r d i d=" r e s ul t " t i t l e =" Re s ul t " >

<p>
Sum of $( num1) a nd $( num2) i s $( s um)
</ p>
</ c a r d>
</ wml >

Output

Two cards showing input fields and sum result

Experiment 11: Calculator
Aim

To create a basic calculator in WML.

Theory

WML can perform basic arithmetic operations using variables and multiple cards. A
calculator application in WML uses WMLScript to perform basic arithmetic operations.
Users input numbers and select operations, and the script processes these inputs to display the
result. This demonstrates how WML and WMLScript can be combined to create functional
and interactive mobile applications.

Code
<? xml ve r s i on=" 1. 0" ? >
<! DOCTYPE wml PUBLI C " - / / WAPFORUM/ / DTD WML 1. 1/ / EN"
" ht t p: / / www. wa pf or um. or g/ DTD/ wml _1. 1. xml " >
<wml >
<c a r d i d=" c a l c ul a t or " t i t l e =" Ca l c ul a t or " >
<p>
Fi r s t numbe r : <i nput na me =" num1" t ype =" t e xt " f or ma t =" *N" / ><br / >
Se c ond numbe r : <i nput na me =" num2" t ype =" t e xt "
f or ma t =" *N" / ><br / >
Ope r a t i on:
<s e l e c t na me =" op" >
<opt i on va l ue =" a dd" >Add</ opt i on>
<opt i on va l ue =" s ub" >Subt r a c t </ opt i on>
<opt i on va l ue =" mul " >Mul t i pl y</ opt i on>
<opt i on va l ue =" di v" >Di vi de </ opt i on>
</ s e l e c t >
<do t ype =" a c c e pt " l a be l =" Ca l c ul a t e " >
<go hr e f =" #r e s ul t " >
<s e t va r na me =" r e s ul t " va l ue =" $( num1) " / >
</ go>
</ do>
</ p>
</ c a r d>

<c a r d i d=" r e s ul t " t i t l e =" Re s ul t " >

<one ve nt t ype =" one nt e r f or wa r d" >
<r e f r e s h>
<s e t va r na me =" r e s ul t " va l ue =" 0" / >
<s e t va r na me =" r e s ul t " va l ue =" $( num1) +$( num2) "
i f =" $( op) ==' a dd' " / >
 <s e t va r na me =" r e s ul t " va l ue =" $( num1) - $( num2) "
i f =" $( op) ==' s ub' " / >
<s e t va r na me =" r e s ul t " va l ue =" $( num1) *$( num2) "
i f =" $( op) ==' mul ' " / >
<s e t va r na me =" r e s ul t " va l ue =" $( num1) / $( num2) "
i f =" $( op) ==' di v' " / >
</ r e f r e s h>
</ one ve nt >
<p>
Re s ul t : $( r e s ul t )
</ p>
</ c a r d>
</ wml >

Output

A calculator interface with operation selection and result display

Experiment 12: Android Hello World
Aim

To create a simple Android application displaying a welcome message.

Theory

Android applications use XML layouts and Java/Kotlin code to create user interfaces.
Developing a simple Android application involves creating an activity that displays a greeting
message, such as "Hello, welcome to Android Lab". This introductory project helps new
developers understand the basics of Android app development, including activity lifecycle,
user interface design, and basic event handling.

Code

activity_main.xml

<? xml ve r s i on=" 1. 0" e nc odi ng=" ut f - 8" ? >

<Li ne a r La yout xml ns : a ndr oi d=" ht t p: / / s c he ma s . a ndr oi d. c om/ a pk/ r e s / a ndr oi d"
a ndr oi d: l a yout _wi dt h=" ma t c h_pa r e nt "
a ndr oi d: l a yout _he i ght =" ma t c h_pa r e nt "
a ndr oi d: gr a vi t y=" c e nt e r " >

<Te xt Vi e w
a ndr oi d: l a yout _wi dt h=" wr a p_c ont e nt "
a ndr oi d: l a yout _he i ght =" wr a p_c ont e nt "
a ndr oi d: t e xt =" He l l o, we l c ome t o Andr oi d La b"
a ndr oi d: t e xt Si z e =" 20s p" / >

</ Li ne a r La yout >

MainActivity.java

pa c ka ge c om. e xa mpl e . he l l owor l d;

i mpor t a ndr oi d. a pp. Ac t i vi t y;

i mpor t a ndr oi d. os . Bundl e ;

publ i c c l a s s Ma i nAc t i vi t y e xt e nds Ac t i vi t y {

@Ove r r i de
pr ot e c t e d voi d onCr e a t e ( Bundl e s a ve dI ns t a nc e St a t e ) {
s upe r . onCr e a t e ( s a ve dI ns t a nc e St a t e ) ;
s e t Cont e nt Vi e w( R. l a yout . a c t i vi t y_ma i n) ;
}
}

Output

An Android app screen displaying "Hello, welcome to Android Lab

Experiment 13: Android Login Form

Aim

To create a login form in Android with validation.

Theory

Android provides EditText widgets for input and Button widgets for actions. An Android
login activity prompts the user to enter a username and password, validating these credentials
against predefined values. If the entered credentials are correct, a welcome message is
displayed. This exercise introduces developers to user authentication processes, UI design,
and handling user inputs in Android applications.

Code

activity_main.xml

<? xml ve r s i on=" 1. 0" e nc odi ng=" ut f - 8" ? >

<Li ne a r La yout xml ns : a ndr oi d=" ht t p: / / s c he ma s . a ndr oi d. c om/ a pk/ r e s / a ndr oi d"
a ndr oi d: l a yout _wi dt h=" ma t c h_pa r e nt "
a ndr oi d: l a yout _he i ght =" ma t c h_pa r e nt "
a ndr oi d: or i e nt a t i on=" ve r t i c a l "
a ndr oi d: pa ddi ng=" 16dp" >

<Edi t Te xt
a ndr oi d: i d=" @+i d/ us e r na me "
a ndr oi d: l a yout _wi dt h=" ma t c h_pa r e nt "
a ndr oi d: l a yout _he i ght =" wr a p_c ont e nt "
a ndr oi d: hi nt =" Us e r na me " / >

<Edi t Te xt
a ndr oi d: i d=" @+i d/ pa s s wor d"
a ndr oi d: l a yout _wi dt h=" ma t c h_pa r e nt "
a ndr oi d: l a yout _he i ght =" wr a p_c ont e nt "
a ndr oi d: hi nt =" Pa s s wor d"
a ndr oi d: i nput Type =" t e xt Pa s s wor d" / >

<But t on
a ndr oi d: i d=" @+i d/ l ogi nBut t on"
a ndr oi d: l a yout _wi dt h=" ma t c h_pa r e nt "
a ndr oi d: l a yout _he i ght =" wr a p_c ont e nt "
a ndr oi d: t e xt =" Logi n" / >
</ Li ne a r La yout >

MainActivity.java

pa c ka ge c om. e xa mpl e . l ogi na pp;

i mpor t a ndr oi d. a pp. Ac t i vi t y;

i mpor t a ndr oi d. os . Bundl e ;
i mpor t a ndr oi d. vi e w. Vi e w;
i mpor t a ndr oi d. wi dge t . But t on;
i mpor t a ndr oi d. wi dge t . Edi t Te xt ;
i mpor t a ndr oi d. wi dge t . Toa s t ;

publ i c c l a s s Ma i nAc t i vi t y e xt e nds Ac t i vi t y {

pr i va t e Edi t Te xt us e r na me ;
pr i va t e Edi t Te xt pa s s wor d;
pr i va t e But t on l ogi nBut t on;

@Ove r r i de
pr ot e c t e d voi d onCr e a t e ( Bundl e s a ve dI ns t a nc e St a t e ) {
s upe r . onCr e a t e ( s a ve dI ns t a nc e St a t e ) ;
s e t Cont e nt Vi e w( R. l a yout . a c t i vi t y_ma i n) ;

us e r na me = f i ndVi e wByI d( R. i d. us e r na me ) ;
pa s s wor d = f i ndVi e wByI d( R. i d. pa s s wor d) ;
l ogi nBut t on = f i ndVi e wByI d( R. i d. l ogi nBut t on) ;

l ogi nBut t on. s e t OnCl i c kLi s t e ne r ( ne w Vi e w. OnCl i c kLi s t e ne r ( ) {

@Ove r r i de
publ i c voi d onCl i c k( Vi e w v) {
i f ( us e r na me . ge t Te xt ( ) . t oSt r i ng( ) . e qua l s ( " a dmi n" ) &&
pa s s wor d. ge t Te xt ( ) . t oSt r i ng( ) . e qua l s ( " pa s s wor d" ) ) {
Toa s t . ma ke Te xt ( Ma i nAc t i vi t y. t hi s ,
" We l c ome " + us e r na me . ge t Te xt ( ) . t oSt r i ng( ) ,
Toa s t . LENGTH_SHORT) . s how( ) ;
} el s e {
Toa s t . ma ke Te xt ( Ma i nAc t i vi t y. t hi s ,
" I nva l i d c r e de nt i a l s " ,
Toa s t . LENGTH_SHORT) . s how( ) ;
}
}
}) ;
}
}

Output
An Android app with username and password fields and a login button. Shows welcome
message for correct credentials (admin/password) or error for invalid ones.