Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Displaying the MessageBox in PhoneGap for Windows Phone

DZone's Guide to

Displaying the MessageBox in PhoneGap for Windows Phone

· Mobile Zone ·
Free Resource

The PhoneGap API provides the method “notification.alert” to display the alert or message box to the end user in the Windows Phone App.

For example , if you want to display the messagebox on the click of the button , include the following

<script type="text/javascript">

function Button1_onclick()

{ navigator.notification.alert("Hi"); }

</script>

<p>

<input id="Button1" type="button" value="Click" onclick="return Button1_onclick()" />

</p>

When the user clicks on the button “Button1″ , you should see a message box similar to the native Windows Phone MessageBox :)

The function navigator.notification.alert accepts the following parameters

  • Message – Dialog message to be displayed on the messagebox
  • callback function – function to be invoked when the dialog is dismissed
  • Title – Title to be displayed on the Dialog. Note that by default this is “Alert” as seen in the above screenshot
  • Name for Button – Name or caption of the button to be displayed



function Button1_onclick()
{
navigator.notification.alert("Welcome",null,"Custom Title","Custom name");
}
Note that the fourth parameter , the name or caption of the button remains “OK” even when you try to provide a custom name.



Now I will show you how to create a MessageBox with confirmation ( OK and Cancel ) using PhoneGap.  If you were doing a Windows Phone Development using Silverlight and C# , you would use the below code to display the messagebox with confirmation.

 

MessageBox.Show("Do you want to continue ?", "Confirmation", MessageBoxButton.OKCancel);

The MessageBox.Show returns MessageBoxResult.

The PhoneGap provides the navigator.notification.confirm method to do the same.

You could use the notification.confirm method to display a Confirmation Dialog in Windows Phone using PhoneGap.

navigator.notification.confirm accept the following parameters

  • Message – Dialog message to be displayed on the messagebox
  • callback function – function to be invoked when the dialog is dismissed
  • Title – Title to be displayed on the Dialog. Note that by default this is “Alert” as seen in the above screenshot
  • Names for Button – Name or caption for the button to be displayed.

Since MessageBox.Show has only 2 MessageBoxButton’s OK and OK, Cancel , you will notice that the Names for Button will always be OK and Cancel in Windows Phone despite what is specified.

function Button1_onclick()
{
navigator.notification.confirm('Do you Want to Continue ?',null, 'Confirmation'

Now , if you want to know which button was clicked, include the function in the 2nd parameter of the confirm method like the below sample code.

 

<script type="text/javascript">

function selectedbutton(button)

{

navigator.notification.alert('You clicked ' + button.toString());

}

function Button1_onclick()

{

navigator.notification.confirm('Do you Want to Continue ?', selectedbutton, 'Confirmation');

}

</script>


I hope this tutorial has been helpful!

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}