Using Native Appbar of Windows Phone with PhoneGap

After checking various native apps for Windows Phone using Appbar, I thinks why not I should use this native appbar of windows phone in my recent phonegap project. Only problem with this was how I can call methods written in javascript with this native appbar because javascript is not natively supported by Visual Studio for building Windows Phone apps.Below I am going to demonstrating how I accomplished this.

In Windows phone project open MainPage.xaml file and add the following code at the bottom of the file just before </phone:PhoneApplicationPage>

<phone:PhoneApplicationPage.ApplicationBar>
	<shell:ApplicationBar  IsMenuEnabled =”True” Mode=”Default” IsVisible=”True” Opacity=”1”>
		<shell:ApplicationBarIconButton IconUri=”www/images/image1.png” x:Name=”button1” Text=”Button1” Click=”button1_click”/>
        <shell:ApplicationBarIconButton IconUri=”www/images/image2.png” x:Name=”button2” Text=”Button2” Click=”button2_click”/>
	</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
      

Where IsVisible is used to show or hide the AppBar, IconUri is the path of icon used in this bar, Text is the name shown under the button and Click is the name of C-Sharp method invoked on the click of this button.

In the above code I have added two buttons named button1 and button2 Currently these are invoking C-Sharp methods button1_click and button2_click which are auto-generated, you can check check them by opening MainPage.xaml.cs file.

Here you can find these two methods:

private void button1_click(object sender, EventArgs e){}
        

and

private void button2_click(object sender, EventArgs e){} 
        

Now using these methods you can call the javascript methods using the following command

CordovaView.Browser.InvokeScript(“MyMethod1”);
        

Where MyMethod1 is the name of javascript method written in javascript file of your phonegap project.

let us say we have written two methods namely MyMethod1 and MyMethod2 written in javascript file as shown below.

function MyMethod1(){
	alert(“button 1”);
}

function MyMethod2(){
	alert(“button 2”);
}
        

and in MainPage.xaml.cs we have written two methods as shown below

private void button1_click(object sender, EventArgs e){
	CordovaView.Browser.InvokeScript(“MyMethod1”);
}

private void button2_click(object sender, EventArgs e){
	CordovaView.Browser.InvokeScript(“MyMethod2”);
}

        

By using above shown code when I click on the first button It will call the button1_click method of the c-sharp code which redirects the call to MyMethod1 written in javascript file of phonegap project.