1. Dom
  2. Pytanie i odpowiedź
  3. Jak utworzyć prostą aplikację panoramiczną dla systemu Windows Phone 7 przy użyciu aplikacji PhoneGap/Cordova?

Jak utworzyć prostą aplikację panoramiczną dla systemu Windows Phone 7 przy użyciu aplikacji PhoneGap/Cordova?

2012-07-15 10 views
9

Rozejrzałem się i znalazłem kilka przykładów aplikacji HTML5 opartych na PhoneGap/Cordova dla Windows Phone 7, ale żaden z nich nie pokazuje, jak zrobić panoramę lub aplikację w stylu przestawnym, które są głównymi atrakcjami interfejsu użytkownika systemu operacyjnego. Szukam zbudować aplikację, która działa jak te:Jak utworzyć prostą aplikację panoramiczną dla systemu Windows Phone 7 przy użyciu aplikacji PhoneGap/Cordova?

Panorama:

Windows Phone 7 Panorama example

Pivot:

Windows Phone 7 Pivot example

Chcę zbudować te aplikacje przy użyciu zwykłego HTML5, CSS3 i JS i użyć Build PhoneGap do ich wdrożenia. Nie chcę używać Visual Studio. VS oferuje dwie osobne formanty dla panoram lub układów przestawnych, ale w HTML5 powinna istnieć tylko jedna kontrolka suwaka, która może być użyta dla obu, z poprawką pozwalającą na kolumnę z wieloma ekranami, taką jak strona "drugiego elementu" w pierwszym przykład.

Szukałem również niektórych wtyczek jQuery zgodnych z IE9, które mogłem poprawić, ale 90% z nich nie działa, a reszta jest trochę zbyt inna, aby spróbować i dostosować. Na przykład ta jQuery page slide (sideways) transition działa dobrze w każdej przeglądarce, ale pogarsza się do podstawowego efektu przesuwanego w przeglądarce WP7.

Jestem ukierunkowany na wiele systemów operacyjnych, ale nie chcę replikować tego samego interfejsu we wszystkich. Źródło danych będzie powszechne, ale chcę, aby wyglądały jak natywnie zaprojektowane aplikacje na każdym systemie operacyjnym.

Aktualizacja 1:

Znaleziony a scroller/slider plugin że faktycznie reaguje na dotyk wydarzenia na IE Mobile na WP7, ale nie są przyciągane do krawędzi każdego panelu, co jest ważnym aspektem pano/pivot sterownica.

Również wyewidencjonowany XUI, który ma wtyczkę o nazwie Swipe, aby wykryć zdarzenia przeciągnij/dotknij, ale nawet z "xui-ie-2.3.2.min.js", próbka nie robi absolutnie nic w IE Mobile.

Aktualizacja 2:

Najbliżej Doszedłem do znalezienia coś takiego jest obiecujący jqMetro add-on. Daje Ci pełny styl Metro, w tym panoramy, obroty i natywnie wyglądające elementy sterujące, ale najbardziej ironicznym aspektem jest to, że funkcje przeciągania nie działają w IE Mobile, co oznacza, że ​​nie będą działać w aplikacji PhoneGap'd . Stukanie w nagłówki przestawne działa i przełącza się do tego widoku.

Update 3:

Dał się hybrydowy rozwoju aplikacji w ogóle! :-)

Źródło

2012-07-15 aalaap

+0

Czy prosisz kogoś o napisanie aplikacji? Lub gdzie jest kod, z którym masz problem? – robertc

+1

Po prostu potrzebuję przykładowego kodu z zachowaniem stylu panoramy/pivota w HTML - właśnie to mam problem z zapisaniem/znalezieniem. – aalaap

+0

Spójrz na iScroll 4 (http://cubiq.org/iscroll-4), który oferuje tę funkcjonalność w systemach iOS i Android, i działa w IE na ekranach dotykowych, ale nie wiem, jak by to działało na WP7, chociaż myślę, że poprzedza platformę. – Purpletoucan

Odpowiedz

0

Rozwiązaniem jest porzucenie użytkownikowi technologii internetowych, aby zbudować rodzimy bajek Disneya aplikacje i przejdź w pełni natywny. Hybrydowe struktury aplikacji są złe.

Źródło

2017-01-04 12:59:21 aalaap

2

Nie można domyślnie wykonywać panoramy wewnątrz PhoneGap. Być może uda Ci się znaleźć x-compat js-lib, który działa, ale tak naprawdę nie widziałem takiego, który wygląda tak dobrze, jak Panorama Windows Phone.

Ale w panoramie można mieć wiele stron PhoneGap. Pokażę ci jak. Zauważ, że to rozwiązanie nie będzie kompatybilne z x-plat.

multiple phonegaps in panorama

Pull najnowszą PhoneGap dół i ustawić go na ten link - [ http://docs.phonegap.com/en/2.2.0/guide_getting-started_windows-phone_index.md.html#Getting%20Started%20with%20Windows%20Phone].

Utwórz nowy projekt, nazwij go "pgpanoramaplay" lub coś w tym stylu.

Skopiuj plik "\ www \ index.html" do co najmniej dwóch innych plików w katalogu "\ www". Nazwałam moje "30tolaunch.html", "dfwiki.html" i "devfish.html".

Oznacz zawartość, aby pokazać podstawowe rzeczy. Dla mojego "\ www \ 30tolaunch.html" zmodyfikowany korpus html znajduje się poniżej.

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

Teraz [prawy przycisk myszy] projekt i dodaj element panoramy. Take domyślna nazwa PanoramaPage1.xaml

Zmień wmmanifest1.xaml używać PanoramaPage1.xaml jako obiekt startowego

Otwarte PanoramaPage1.xaml. Modyfikacja górę strony ciągnąć w odnośnikach do szczeliny telefonu następująco

modyfikować PanoramaControl następująco. Uwaga Zrobiłem manaually wszystkie strony .html z wyjątkiem item.html, które już tam były.

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

Debuguj, idź i powinieneś zobaczyć strony pokazane podobnie do zdjęcia u góry tego artykułu.

Jeśli chcesz dopasować strony PhoneGap do tła Panorama, dopasuj wysokości, usuń obrazy tła, cokolwiek, default.css jest twoim przyjacielem. Oznacz i baw się dobrze!

Źródło

2012-12-11 22:13:25

Powiązane problemy

 Powiązane problemy