Webanwendungen als native mobile Anwendungen verpacken (CS 5.5)

Durch die Unterstützung von jQuery Mobile und PhoneGap in Dreamweaver können Sie Webanwendungen für die Bereitstellung auf Android™- und iOS-Geräten erstellen und zu Paketen zusammenfügen. Dreamweaver verwendet PhoneGap-SDKs, um das Paket zu erstellen (eine .apk-Datei für Android/.xcodeproj für iPhone/iPad)

Nachdem Sie eine mobile Anwendung in Dreamweaver verpackt haben, können Sie sie in einem Geräteemulator anzeigen oder in Ihrem eigenen Gerät bereitstellen.

Hinweis:

Die mobile Anwendung, die Sie mit Dreamweaver verpacken, dient nur dem Zweck der Fehlersuche. Die Anwendung wird auf dem Android- bzw. iOS-Emulator ausgeführt, oder während der Übertragung auf Ihrem eigenen mobilen Gerät, aber Sie können die korrigierten mobilen Anwendungen nicht zu den Apple- und Android-Stores hochladen. Damit Sie iOS- oder Android-Anwendungen hochladen können, müssen Sie sie zusätzlich außerhalb von Dreamweaver signieren. Weitere Informationen zum Hochladen von Anwendungen in die Apple- und Android-Stores finden Sie in der Android-Dokumentation oder im „Program User Guide“ auf dem Apple iOS Provisioning Portal. (Damit Sie auf das Apple iOS Provisioning Portal zugreifen können, müssen Sie sich beim Apple Developer Program registrieren [kostenlos] und sich beim iOS Developer Program einschreiben [Jahresgebühr].)

Erstellen von Webanwendungen mithilfe der Starterseite

Um die Webanwendung zu erstellen, können Sie eine der Starterseiten verwenden. Wenn Ihre Webanwendung bei der Bereitstellung als mobile Anwendung auf Funktionen von Mobilgeräten zurückgreift, sollten Sie jedoch die Seite „jQuery Mobile (PhoneGap)“ verwenden.

Die Starterseite „jQuery Mobile (PhoneGap)“ enthält zusätzlich zu den anderen jQuery Mobile-Dateien die Datei „phonegap.js“. Die Datei „phonegap.js“ enthält die für die Arbeit mit den nativen, mobilen Leistungsmerkmalen (wie GPS, Beschleunigungsmesser, Kamera usw.) erforderlichen APIs.

  1. Wählen Sie „Datei“ > „Neu“.

  2. Wählen Sie „Seite aus Beispiel“ > „Mobile Starter“ > „jQuery Mobile (PhoneGap)“.

  3. Klicken Sie auf „Erstellen“.

  4. Wählen Sie im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) im Popupmenü links oben die Option „jQuery Mobile“ aus. Im Bedienfeld werden Komponenten angezeigt, die Sie in eine Webanwendung einfügen können.

  5. Platzieren Sie in der Entwurfsansicht den Cursor dort, wo die Komponente eingefügt werden soll, und klicken Sie im Bedienfeld „Einfügen“ auf die entsprechende Komponente. Falls ein Dialogfeld eingeblendet wird, passen Sie die Komponenten mithilfe der jeweiligen Optionen an.

    Hinweis:

    Um die Datei „PhoneGap.js“ zu bearbeiten, konfigurieren Sie das Anwendungs-Framework und die Anwendungseinstellungen. Weitere Informationen finden Sie in den Themen über das Erstellen von Anwendungspaketen.

Zeigen Sie eine Vorschau der Seite an, indem Sie die Live-Ansicht aktivieren. Einige der CSS-Klassen werden nur in der Live-Ansicht angewendet.

Systemanforderungen für das Verpacken von Anwendungen

Damit Sie eine Anwendung verpacken können, muss Ihr System den nachfolgenden Anforderungen entsprechen.

Mac OS – iOS

  • Mac OS X Snow Leopard, ab Version 10.6.x

  • Xcode 3.2.x mit dem iOS SDK (Installationsanweisungen siehe unten.)

Mac OS – Android

  • Mac OS X, ab Version 10.5.8 (nur x86)

  • Android SDK (Installationsanweisungen siehe unten.)

Windows – iOS

  • iOS ist nur für Anwender mit einem Apple-Computer verfügbar

Windows – Android

  • Windows XP (32 Bit), Vista (32 oder 64 Bit) oder Windows 7 (32 oder 64 Bit)

  • Android SDK (Installationsanweisungen siehe unten.)

Erstellen von Anwendungspaketen (Windows)

Erläuterungen zum Erstellen einer Webanwendung samt Beispieldateien finden Sie in diesem Tutorial im Dreamweaver Developer Center.

  1. Öffnen Sie die Webanwendung, die Sie in eine mobile Anwendung konvertieren möchten. Ihre Webanwendung muss in Dreamweaver als Site eingerichtet sein und weniger als 25 MB umfassen.

    Hinweis:

    Achten Sie darauf, dass die Anwendung nur HTML5-, CSS- und JavaScript-Dateien enthält.

  2. Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungs-Framework konfigurieren“.

  3. Klicken Sie auf „Einfache Installation“, um das Android SDK zu installieren.

    Hinweis:

    Wenn die einfache Installation fehlschlägt, lesen Sie bitte die TechNote 90408.

  4. Wählen Sie den Pfad zu dem Ordner aus, in dem die SDK-Dateien installiert werden sollen, und klicken Sie auf „OK“. Wenn die Installation abgeschlossen ist, klicken Sie auf „Speichern“.

  5. Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungseinstellungen“.

  6. Geben Sie als Bundle-ID einen Namen für das Paket ein und beachten Sie dabei die Anweisungen im Dialogfeld.

  7. Geben Sie einen Anwendungsnamen und den Namen des Verfassers ein, also der Person, die die Anwendung entwickelt hat.

  8. Optional können Sie noch folgende Angaben vornehmen:

    1. Wählen Sie als Anwendungssymbol-PNG die PNG-Datei aus, die als Symbol für die Anwendung verwendet werden soll. Dreamweaver ändert die Größe des Symbols in die Standardgröße um, wenn Sie das nicht bereits selbst gemacht haben.

    2. Geben Sie einen Zielpfad für das Paket an.

    3. Um die neuesten SDK-Komponenten von Google herunterzuladen, klicken Sie auf „AVDs verwalten“. Verwenden Sie das Dialogfeld „Android SDK and AVD Manager“, um das Android SDK zu aktualisieren. Weitere Informationen zur Arbeit mit dem Manager finden Sie unter http://developer.android.com/sdk/adding-components.html.

      Hinweis:

      Wenn Sie in den Anwendungseinstellungen auf „Speichern“ klicken, wird die Datei „phonegap.js“ in das Stammverzeichnis der Site kopiert.

  9. Führen Sie einen der folgenden Schritte aus:

    • Wenn Sie Ihre Anwendung direkt für ein bestimmtes Gerät bereitstellen, wählen Sie „Site“ > „Mobile-Anwendungen“ > „Build“. Wählen Sie eine Plattform bzw. ein Gerät für den Build.

    • Wenn Sie sehen wollen, wie der Build auf einem Emulator ausschaut, bevor Sie den Build erstellen, wählen Sie „Site“ > „ Mobile-Anwendungen“ > „Erstellen und emulieren“.

Anwendungspakete erstellen (Mac OS)

Ein Tutorial zum Erstellen einer Webanwendung samt Beispieldateien finden Sie in diesem Artikel im Dreamweaver Developer Center.

  1. Öffnen Sie die Webanwendung, die Sie in eine mobile Anwendung konvertieren möchten. Ihre Webanwendung muss in Dreamweaver als Site eingerichtet sein und weniger als 25 MB umfassen.

    Hinweis:

    Achten Sie darauf, dass die Anwendung nur HTML5-, CSS- und JavaScript-Dateien enthält.

  2. Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungs-Framework konfigurieren“.

  3. Installieren Sie je nach Bedarf das SDK für iOS oder Android:

    • Klicken Sie auf den Link „Apple iOS Dev Center“, um das xcode- und das iOS-SDK zu installieren. Standardmäßig wird die Anwendung im Ordner „OS <Versionsnummer>/developer“ installiert.

      Melden Sie sich mit Ihrer Apple-ID beim Dev Center an. Die Registrierung ist kostenlos. Erstellen Sie ein Konto, wenn Sie noch kein registrierter Benutzer sind.

    Hinweis:

    Das SDK-Paket, das Sie vom Apple Dev Center herunterladen, können Sie zu Testzwecken verwenden. Um Ihre Anwendung jedoch in den Apple Store hochzuladen, müssen Sie sich als Apple-Entwickler registrieren, nachdem Sie die erforderlichen Gebühren bezahlt haben.  

    • Klicken Sie auf „Einfache Installation“, um das Android SDK zu installieren.

    Hinweis:

    Wenn die einfache Installation fehlschlägt, lesen Sie bitte die TechNote 90408.

  4. Klicken Sie auf „Speichern“.

  5. Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungseinstellungen“.

  6. Geben Sie als Bundle-ID einen Namen für das Paket ein und beachten Sie dabei die Anweisungen im Dialogfeld.

  7. Geben Sie einen Anwendungsnamen und den Namen des Verfassers ein, also der Person, die die Anwendung entwickelt hat.

  8. Optional können Sie noch folgende Angaben vornehmen:

    • (Android.) Wählen Sie als Anwendungssymbol-PNG die PNG-Datei aus, die als Symbol für die Android-Anwendung verwendet werden soll. Dreamweaver ändert die Größe des Symbols in die Standardgröße um, wenn Sie das nicht bereits selbst gemacht haben.

    • (Mac® OS 10.6.x.) Wählen Sie als Startbildschirm-PNG die PNG-Datei aus, die als Symbol für die iOS-Anwendung verwendet werden soll. Dreamweaver ändert die Größe des Symbols in die Standardgröße um, wenn Sie das nicht bereits selbst gemacht haben.

    • (Mac OS 10.6.x.) Wählen Sie die iPhone-/iPod Touch-/iPad-Version aus, für die Sie das Paket erstellen.

    • Legen Sie einen anderen Zielpfad für das Paket fest.

    Hinweis:

    Wenn Sie in den Anwendungseinstellungen auf „Speichern“ klicken, wird die Datei „phonegap.js“ in das Stammverzeichnis der Site kopiert.

  9. Führen Sie einen der folgenden Schritte aus:

    • Wenn Sie Ihre Anwendung direkt für ein bestimmtes Gerät bereitstellen, wählen Sie „Site“ > „Mobile-Anwendungen“ > „Build“. Wählen Sie eine Plattform bzw. ein Gerät für den Build.

    • Wenn Sie sehen wollen, wie der Build auf einem Emulator ausschaut, bevor Sie den Build erstellen, wählen Sie „Site“ > „Mobile-Anwendungen“ > „Erstellen und emulieren“.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie