Selecteer Bestand > Nieuw.
Laatst bijgewerkt op
2 mei 2021
Webtoepassingen verpakken als systeemeigen mobiele toepassingen (CS5.5)
Dankzij de integratie van Dreamweaver met jQuery Mobile en PhoneGap kunt u webtoepassingen maken en verpakken voor distributie op Android™- en iOS-apparaten. Dreamweaver gebruikt PhoneGap SDK's om het pakket te maken (bestand .apk voor Android en bestand .xcodeproj voor iPhone/iPad)
Nadat u een mobiele toepassing hebt verpakt met Dreamweaver, kunt u de toepassing weergeven in een apparaatemulator of de toepassing naar uw eigen apparaat distribueren.
Opmerking:
De mobiele toepassing die u verpakt met Dreamweaver, is alleen bedoeld voor foutopsporing. De toepassing kan worden uitgevoerd in de Android- en iOS-emulators, of op uw eigen mobiele apparaat als u de toepassing overdraagt, maar u kunt deze mobiele toepassingen voor foutopsporing niet uploaden naar de onlinewinkels van Apple en Android. U kunt uw iOS- of Android-toepassingen alleen uploaden als u ze ook nog ondertekent buiten Dreamweaver. Raadpleeg de Android-documentatie of het programmahandboek op de Apple iOS Provisioning Portal voor meer informatie over het uploaden van toepassingen naar de onlinewinkels van Apple en Android. (Voordat u toegang krijgt tot de Apple iOS Provisioning Portal moet u zich aanmelden bij het Apple Developer Program [gratis] en u inschrijven voor het iOS Developer Program [jaarlijkse betaling].)
Een webtoepassing maken met de startpagina
U kunt elke startpagina gebruiken om uw webtoepassing te maken. Als uw webtoepassing echter systeemeigen functies van mobiele apparaten gebruikt wanneer de toepassing wordt gedistribueerd als mobiele toepassing, moet u de pagina jQuery Mobile (PhoneGap) gebruiken.
De startpagina jQuery Mobile (PhoneGap) bevat het bestand phonegap.js en de overige jQuery Mobile-bestanden. Het bestand phonegap.js bevat de API's die vereist zijn voor de samenwerking met de systeemeigen functies van mobiele apparaten, zoals een GPS, versnellingsmeter, camera enzovoort.
-
-
Selecteer Pagina uit voorbeeld > Mobiele startpagina's > jQuery Mobile (PhoneGap).
-
Klik op Maken.
-
Selecteer jQuery Mobile in het deelvenster Invoegen (Venster > Invoegen). De onderdelen die u kunt toevoegen aan de webtoepassing, worden weergegeven.
-
Plaats de cursor in de ontwerpweergave op de plaats waar u het onderdeel wilt invoegen en klik op het onderdeel in het deelvenster Invoegen. Pas de onderdelen aan met de opties in het dialoogvenster dat verschijnt.
Opmerking:Als u het bestand PhoneGap.js wilt bewerken, moet u het toepassingsframework en de toepassingsinstellingen configureren. Zie de onderwerpen over het maken van toepassingspakketten voor meer informatie.
Bekijk een voorvertoning van de pagina weer in Live View. Bepaalde CSS-klassen worden alleen toegepast in Live View.
Systeemvereisten voor verpakken van toepassingen
Zorg dat uw systeem voldoet aan de volgende vereisten voordat u begint met het verpakken van een toepassing.
MAC OS - iOS
Mac OS X Snow Leopard 10.6.x of hoger
Xcode 3.2.x met de iOS SDK (installatie-instructies verderop).
MAC OS - Android
Mac OS X 10.5.8 of hoger (alleen x86)
Android SDK (installatie-instructies verderop).
Windows - iOS
iOS is alleen beschikbaar voor gebruikers met een Apple-computer
Windows - Android
Windows XP (32-bits), Vista (32- of 64-bits) of Windows 7 (32- of 64-bits)
Android SDK (installatie-instructies verderop).
Een toepassingspakket maken (Windows)
Bekijk deze zelfstudie op Dreamweaver Developer Center voor met informatie, inclusief voorbeeldbestanden, over het maken van een webtoepassing.
-
Open de webtoepassing die u wilt converteren naar een mobiele toepassing. Zorg dat uw webtoepassing is ingesteld als een site in Dreamweaver en dat de site kleiner is dan 25 MB.
Opmerking:Controleer of de toepassing alleen HTML5-, CSS- en JavaScript-bestanden bevat.
-
Selecteer Site > Mobiele toepassingen > Toepassingsframework configureren.
-
Klik op Eenvoudig installeren om de Android-SDK te installeren.
Opmerking:Raadpleeg Tech Note 90408 als u niet kunt installeren met Eenvoudig installeren.
-
Selecteer een locatie waar u de SDK-bestanden wilt installeren en klik op Selecteren. Klik op Opslaan nadat de installatie is voltooid.
-
Selecteer Site > Mobiele toepassingen > Toepassingsinstellingen.
-
Gebruik de informatie in het dialoogvenster om een naam voor het pakket op te geven bij Bundel-id.
-
Geef een naam voor de toepassing op, en de naam van de persoon die de toepassing heeft ontworpen.
-
Geef desgewenst het volgende op:
-
Geef bij PNG van toepassingspictogram een PNG-bestand op dat wordt gebruikt als pictogram voor de toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.
-
Geef een doelpad voor het pakket op.
-
Klik op AVD's beheren om de nieuwste SDK-onderdelen van Google te downloaden en installeren. Gebruik Android SDK and AVD Manager om de Android SDK bij te werken. Zie http://developer.android.com/sdk/adding-components.html voor meer informatie over het gebruik van de Manager.
Opmerking:Wanneer u op Opslaan klikt, wordt het bestand phonegap.js naar de hoofdmap van de site gekopieerd.
-
-
Voer een van de volgende handelingen uit:
Selecteer Site > Mobiele toepassingen > Samenstellen als u uw toepassing rechtstreeks naar een apparaat distribueert. Selecteer een platform/apparaat voor de build.
Selecteer Site > Mobiele toepassingen > Samenstellen en emuleren als u wilt controleren hoe de build eruit ziet in een emulator voordat u de build gaat samenstellen.
Een toepassingspakket maken (Mac OS)
Lees dit artikel op Dreamweaver Developer Center voor een zelfstudie, inclusief voorbeeldbestanden, over het maken van een webtoepassing.
-
Open de webtoepassing die u wilt converteren naar een mobiele toepassing. Zorg dat uw webtoepassing is ingesteld als een site in Dreamweaver en dat de site kleiner is dan 25 MB.
Opmerking:Controleer of de toepassing alleen HTML5-, CSS- en JavaScript-bestanden bevat.
-
Selecteer Site > Mobiele toepassingen > Toepassingsframework configureren.
-
Installeer de SDK voor iOS of Android, afhankelijk van uw vereisten:
Klik op de koppeling Apple iOS Dev Center om de xcode- en iOS-SDK te downloaden en installeren. De toepassing wordt standaard geïnstalleerd in de map OS <versienummer>/developer.
Meld u aan bij Dev Center met uw Apple-id. De registratie is gratis. Maak een account als u nog geen geregistreerde gebruiker bent.
Opmerking:Het SDK-pakket dat u downloadt van Apple Dev Center kunt u gebruiken om te testen. Als u uw toepassing echter uploadt naar de Apple Store, moet u zich registreren als Apple-ontwikkelaar nadat u de vereiste kosten hebt betaald.
- Klik op Eenvoudig installeren om de Android-SDK te installeren.
Opmerking:Raadpleeg Tech Note 90408 als u niet kunt installeren met Eenvoudig installeren.
-
Klik op Opslaan.
-
Selecteer Site > Mobiele toepassingen > Toepassingsinstellingen.
-
Gebruik de informatie in het dialoogvenster om een naam voor het pakket op te geven bij Bundel-id.
-
Geef een naam voor de toepassing op, en de naam van de persoon die de toepassing heeft ontworpen.
-
Voer desgewenst de volgende handelingen uit:
(Android) Geef bij PNG van toepassingspictogram een PNG-bestand op dat wordt gebruikt als pictogram voor de Android-toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.
(Mac® OS 10.6.x) Geef bij PNG van startpagina een PNG-bestand op dat wordt gebruikt als pictogram voor de iOS-toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.
(Mac OS 10.6.x) Selecteer een versie van de iPhone/iPod Touch/iPad waarvoor u het pakket maakt.
Geef een ander doelpad voor het pakket op.
Opmerking:Wanneer u op Opslaan klikt, wordt het bestand phonegap.js naar de hoofdmap van de site gekopieerd.
-
Voer een van de volgende handelingen uit:
Selecteer Site > Mobiele toepassingen > Samenstellen als u uw toepassing rechtstreeks naar een apparaat distribueert. Selecteer een platform/apparaat voor de build.
Selecteer Site > Mobiele toepassingen > Samenstellen en emuleren als u wilt controleren hoe de build eruit ziet in een emulator voordat u de build gaat samenstellen.
