Como eu crio um aplicativo de panorama simples para o Windows Phone 7 usando o PhoneGap / Cordova?

9

Eu olhei em volta e encontrei vários exemplos de aplicativos HTML5 baseados em PhoneGap / Cordova para o Windows Phone 7, mas nenhum deles parece mostrar como criar um panorama ou um aplicativo de estilo dinâmico, que são alguns dos principais desenha da interface do usuário do sistema operacional. Eu estou olhando para construir um aplicativo que funciona assim:

Panorama:

Pivô:

Eu quero criar esses aplicativos usando HTML5 simples, CSS3 e JS e usar o PhoneGap Build para implantá-los. Eu não desejo usar o Visual Studio. O VS oferece dois controles separados para layouts panorama ou pivô, mas no HTML5, deve haver apenas um controle deslizante que pode ser usado para ambos, com um ajuste para permitir uma coluna de tela múltipla como a página do 'segundo item' no primeiro. exemplo.

Eu também procurei alguns plugins slider jQuery compatíveis com o IE9 que eu poderia ajustar, mas 90% deles não funcionam e o resto é um pouco diferente para tentar se adaptar. Por exemplo, esta transição de slides da página jQuery (lateralmente) funciona bem em todos os navegadores, mas degrada-se a um efeito básico de slide up no navegador WP7.

Estou segmentando vários sistemas operacionais, mas não quero replicar a mesma interface entre todos. A fonte de dados será comum, mas eu quero que eles se pareçam com aplicativos projetados de forma nativa em cada sistema operacional.

Atualização 1:

Encontrado um plugin scroller / slider que realmente responde a eventos de toque no IE Mobile no WP7, mas não t encaixar na borda de cada painel, que é um aspecto importante dos controles pano / pivot.

Check-out também XUI , que tem um plug-in chamado Swipe para detectar eventos swipe / tap, mas mesmo com "xui-ie-2.3.2 .min.js ", o exemplo não faz absolutamente nada no IE Mobile.

Atualização 2:

O mais próximo que eu cheguei de encontrar algo assim é o promissor add-on jqMetro . Ele oferece um estilo Metro completo, incluindo controles panorama, pivô e aparência nativa, mas a parte mais irônica é que os recursos de furto não funcionam no IE Mobile, o que significa que ele não funcionará no aplicativo PhoneGap . Tocar nos cabeçalhos do pivô funciona e muda para essa visualização bem.

Atualização 3:

Desistiu completamente do desenvolvimento de aplicativos híbridos! : -)

    
por aalaap 15.07.2012 в 18:08
fonte

3 respostas

0

A solução é abandonar o usuário de tecnologias da Web para criar aplicativos nativos e ser totalmente nativo. Estruturas de aplicativos híbridos são ruins.

    
por aalaap 04.01.2017 / 13:59
fonte
3

Desculpe pela resposta tardia. Eu também encontrei este problema e aqui está a minha solução: link

Funciona no IE10 no wp8, também deve funcionar em wp7

    
por Grohman 27.03.2013 / 04:00
fonte
2

Você não pode fazer Panorama dentro do PhoneGap por padrão. Você pode ser capaz de encontrar alguns js-lib x-compat que funciona, mas eu realmente não vi um que parece tão bom quanto o Panorama do Windows Phone.

Mas você pode ter várias páginas do PhoneGap dentro de um Panorama. Deixa-me mostrar-te como. Observe que esta solução não seria compatível com x-plat.

Retireophonegapmaisrecenteeconfigure-oporestelink-[ link ].

Crie um novo projeto, chame-o de "pgpanoramaplay" ou algo parecido.

Copie o arquivo "\ www \ index.html" para pelo menos dois outros arquivos no diretório "\ www". Eu nomeei o meu "30tolaunch.html", "dfwiki.html" e "devfish.html".

Marque o conteúdo apenas para mostrar algumas coisas básicas. Para o meu "\ www \ 30tolaunch.html", o corpo html modificado está abaixo.

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

Agora, clique com o botão direito do mouse no projeto e adicione um item Panorama. Pegue o nome padrão de PanoramaPage1.xaml

Altere wmmanifest1.xaml para usar o PanoramaPage1.xaml como objeto de inicialização                 

Abra o PanoramaPage1.xaml. Modifique a parte superior da página para inserir as referências ao espaço do telefone da seguinte forma

Modifique o PanoramaControl da seguinte maneira. Note que eu criei manualmente todos os .html pagex exceto o item.html que já estava lá.

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

Depure, vá e você verá as páginas aparecerem de maneira semelhante à foto no topo deste artigo.

Se você deseja estilizar as páginas do PhoneGap para corresponder aos fundos do Panorama, ajustar as alturas, remover imagens de plano de fundo, etc., default.css é seu amigo. Marque e divirta-se!

    
por Joe Healy 11.12.2012 / 23:13
fonte