1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo puedo crear una aplicación de panorama simple para Windows Phone 7 usando PhoneGap/Cordova?

¿Cómo puedo crear una aplicación de panorama simple para Windows Phone 7 usando PhoneGap/Cordova?

2012-07-15 29 views
9

He mirado alrededor y he encontrado varios ejemplos de aplicaciones HTML5 basadas en PhoneGap/Cordova para Windows Phone 7, pero ninguna de ellas te muestra cómo hacer una aplicación de panorama o de estilo pivote, que son algunos de los principales atractivos. de la UI del sistema operativo. Estoy mirando para construir una aplicación que funciona como éstos:¿Cómo puedo crear una aplicación de panorama simple para Windows Phone 7 usando PhoneGap/Cordova?

Panorama:

Windows Phone 7 Panorama example

Pivote:

Windows Phone 7 Pivot example

Quiero construir estas aplicaciones utilizando llanura HTML5, CSS3 y JS y usa PhoneGap Build para implementarlos. No deseo usar Visual Studio. VS ofrece dos controles separados para diseños panorámicos o de pivote, pero en HTML5, debe haber solo un control deslizante que se puede usar para ambos, con un ajuste para permitir una columna de pantallas múltiples como la página de "segundo elemento" en el primer ejemplo.

También busqué algunos complementos del control deslizante jQuery compatibles con IE9 que pudiera modificar, pero el 90% de ellos no funcionan y el resto son un poco diferentes para intentar adaptarlos. Por ejemplo, este jQuery page slide (sideways) transition funciona bien en todos los navegadores, pero se degrada a un efecto de desplazamiento hacia arriba básico en el navegador WP7.

Me estoy dirigiendo a varios sistemas operativos, pero no quiero replicar la misma interfaz en todos. La fuente de datos será común, pero quiero que se vean como aplicaciones diseñadas nativamente en cada sistema operativo.

Update 1:

Encontrado a scroller/slider plugin que realmente responde al tacto eventos en IE Mobile en WP7, pero no encaja con el borde de cada panel, que es un aspecto importante de la pano/pivote controles.

También comprobé XUI, que tiene un complemento llamado Deslizar para detectar eventos de deslizamiento/toque, pero incluso con "xui-ie-2.3.2.min.js", la muestra no hace absolutamente nada en IE Mobile.

Actualización 2:

Lo más cerca que he llegado a encontrar algo como esto es la prometedora jqMetro complemento. Te ofrece un estilo de Metro completo que incluye controles panorámicos, pivotantes y de aspecto nativo, pero la parte más irónica es que las funciones de deslizamiento no funcionan en IE Mobile, lo que significa que no funcionarán en la aplicación PhoneGap'd . Al tocar en los títulos pivote funciona y cambia a esa vista muy bien.

Actualización 3:

dio hasta el desarrollo de aplicaciones híbridas en conjunto! :-)

Fuente

2012-07-15 aalaap

+0

Entonces, ¿está pidiendo a alguien que escriba una aplicación para usted? ¿O dónde está el código con el que estás teniendo problemas? – robertc

+1

Solo necesito código de muestra con comportamiento de panorama/estilo de pivote en HTML; eso es lo que tengo problemas para escribir/encontrar. – aalaap

+0

Mira iScroll 4 (http://cubiq.org/iscroll-4) que ofrece esta funcionalidad en iOS y Android, y funciona en el IE de escritorio con pantalla táctil, no estoy seguro de cómo funcionaría en WP7, aunque creo que es anterior a la plataforma. – Purpletoucan

Respuesta

0

La solución es abandonar el usuario de las tecnologías web para crear aplicaciones nativas-esque e ir completamente nativo en su lugar. Los marcos de aplicaciones híbridas son malvados.

Fuente

2017-01-04 12:59:21 aalaap

2

No se puede hacer Panorama dentro de PhoneGap de manera predeterminada. Es posible que pueda encontrar algo de x-compat js-lib que funcione, pero realmente no he visto uno que se vea tan bien como el Panorama de Windows Phone.

Pero puede tener varias páginas PhoneGap dentro de un Panorama. Déjame enseñarte como. Tenga en cuenta que esta solución no sería compatible con x-plat.

multiple phonegaps in panorama

Tire de la PhoneGap más reciente hacia abajo y la levantó por este enlace - [ http://docs.phonegap.com/en/2.2.0/guide_getting-started_windows-phone_index.md.html#Getting%20Started%20with%20Windows%20Phone].

Crea un nuevo proyecto, llámalo "pgpanoramaplay" o algo así.

Copie "\ www \ index.html" en al menos otros dos archivos en el directorio "\ www". Llamé a los míos "30tolaunch.html", "dfwiki.html" y "devfish.html".

Marque el contenido solo para mostrar algunas cosas básicas. Para mi "\ www \ 30tolaunch.html" el cuerpo html modificado está debajo.

<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>

Ahora [right-mouse] el proyecto, y agregue un elemento de Panorama. Tomar el nombre predeterminado de PanoramaPage1.xaml

Cambio wmmanifest1.xaml utilizar PanoramaPage1.xaml como objeto de inicio

abierto PanoramaPage1.xaml. Modificar la parte superior de la página para tirar en las referencias a la brecha de teléfono de la siguiente

Modificar el PanoramaControl de la siguiente manera. Nota: he creado manualmente todo el .html pagex, excepto el item.html que ya estaba allí.

<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 y debería ver las páginas aparecer de manera similar a la imagen en la parte superior de este artículo.

Si desea aplicar estilo a las páginas de PhoneGap para que coincidan con los fondos de Panorama, ajustar alturas, eliminar imágenes de fondo, lo que sea, default.css es su amigo. Marque y disfrute!

Fuente

2012-12-11 22:13:25

Cuestiones relacionadas

 Cuestiones relacionadas