How do I create a simple panorama application for Windows Phone 7 using PhoneGap/Cordova?

Question

I\'ve looked around and found several examples of PhoneGap/Cordova-based HTML5 applications for Windows Phone 7, but none of them seem to show you how to make a panorama or a pi

Answer 1

You can't do Panorama inside of PhoneGap by default. You might be able to find some x-compat js-lib that works, but I really haven't seen one that looks as good as the Windows Phone Panorama.

But you can have multiple PhoneGap pages inside a Panorama. Let me show you how. Note this solution would not be x-plat compatible.

Pull the most recent phonegap down and set it up per this link - [ http://docs.phonegap.com/en/2.2.0/guide_getting-started_windows-phone_index.md.html#Getting%20Started%20with%20Windows%20Phone ].

Create a new project, name it "pgpanoramaplay" or something like that.

Copy the "\www\index.html" out to at least two other files in the "\www" directory. I named mine "30tolaunch.html", "dfwiki.html" and "devfish.html".

Mark up the content just to show some basic stuff. For my "\www\30tolaunch.html" the modified html body is below.

    

        
30tolaunch
        

            
30 Days to Launch an App
            
Great content
            bit.ly/30tolaunch
        
    
    
    
    

Now [right-mouse] the project, and add in a Panorama item. Take the default name of PanoramaPage1.xaml

Change wmmanifest1.xaml to use PanoramaPage1.xaml as startup object

Open PanoramaPage1.xaml. Modify the top of the page to pull in the references to phone gap as follows

Modify the PanoramaControl as follows. Note I've manaually created all the .html pagex except for item.html which was already there.

Debug, Go and you should see the pages show up similar to the pic at the top of this article.

If you want to style the PhoneGap pages up to match the Panorama backgrounds, adjust heights, remove background images, whatever, default.css is your friend . Mark up and enjoy!