Menu
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 pivot style app, which are some of the main draws of the UI of the OS. I'm looking to build an app that works like these:
Panorama:
Pivot:
I want to build these apps using plain HTML5, CSS3 and JS and use PhoneGap Build to deploy them. I do not wish to use Visual Studio. VS offers two separate controls for panorama or pivot layouts, but in HTML5, there should be just one slider control which can be used for both, with a tweak to allow for a multi-screen column like the 'second item' page in the first example.
I also looked for some IE9-compatible jQuery slider plugins that I could tweak, but 90% of them don't work and the rest are a little too different to try and adapt. For example, this jQuery page slide (sideways) transition works fine in every browser, but degrades to a basic slide up-type effect in the WP7 browser.
I am targeting multiple OSes, but I don't want to replicate the same interface across all. The data source will be common, but I want them to look like natively designed applications on each OS.
Update 1:
Found a scroller/slider plugin that actually responds to touch events on IE Mobile on WP7, but it doesn't snap to the edge of each panel, which is an important aspect of the pano/pivot controls.
Also checked out XUI, which has a plugin called Swipe to detect swipe/tap events, but even with "xui-ie-2.3.2.min.js", the sample does absolutely nothing in IE Mobile.
Update 2:
The closest I've come to finding something like this is the promising jqMetro add-on. It gives you a full-on Metro style including panorama, pivot and native-looking controls, but the most ironic part is that the swipe features don't work on IE Mobile, which means it won't work in the PhoneGap'd application. Tapping on the pivot headings works and switches to that view just fine.
Update 3:
Gave up hybrid app development altogether! :-)
214
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
78
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.
<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!
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
