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

前端未结

关注

 3  1273

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

相关标签:

3条回答

终归单人心

2021-02-01 10:46

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.

multiple phonegaps in panorama

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.

<body>
    <div class="app">
        <h1>30tolaunch</h1>
        <div>
            <p>30 Days to Launch an App</p>
            <p>Great content</p>
            <a href="http://bit.ly/30tolaunch">bit.ly/30tolaunch</a>
        </div>
    </div>
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

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.

<Grid x:Name="LayoutRoot">
    <controls:Panorama Title="phonegap">
        <!--Panorama item one-->
        <controls:PanoramaItem Header="30tolaunch">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView4" 
                    VerticalAlignment="Stretch"
                    StartPageUri="/app/www/30tolaunch.html"
                />
            </Grid>
        </controls:PanoramaItem>

        <!--Panorama item one-->
        <controls:PanoramaItem Header="index">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView" 
                    VerticalAlignment="Stretch"
                />
            </Grid>
        </controls:PanoramaItem>

        <!--Panorama item two-->
        <controls:PanoramaItem Header="item2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView2" 
                    VerticalAlignment="Stretch"
                    StartPageUri="/app/www/devfish.html"
                />
            </Grid>
        </controls:PanoramaItem>

    <controls:PanoramaItem Header="item3">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <my:CordovaView HorizontalAlignment="Stretch" 
                    Margin="0,0,0,0"  
                    x:Name="PGView3" 
                    VerticalAlignment="Stretch"
                    StartPageUri="/app/www/dfwiki.html"
                />
            </Grid>
        </controls:PanoramaItem>
    </controls:Panorama>
</Grid>

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!

0 讨论(0)

轮回少年

2021-02-01 11:00

Sorry for the late reply. I also encountered this problem and here is my solution: https://github.com/grohman/js-panorama

It works in IE10 on wp8, also should work on wp7

0 讨论(0)
发布评论:

提交评论
- 加载中...
我寻月下人不归

2021-02-01 11:05

The solution is to abandon the user of web technologies to build native-esque apps and go fully native instead. Hybrid app frameworks are evil.

0 讨论(0)
发布评论:

提交评论
- 加载中...