7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Titanium Mobile

Titanium Mobile: Die Erstellung eines Bild-Uploaders

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In diesem Tutorial wird gezeigt, wie Sie einen benutzerdefinierten Fortschrittsbalken erstellen, indem Sie mit Titanium Mobile einen Bild-Hochlader erstellen. Im Demo-Projekt können Sie insbesondere ein Bild aus der Geräte-Fotogalerie auswählen und zur Speicherung auf einen Remote-Server hochladen. Sowohl der Titanium Mobile-Code als auch der serverseitige Code werden erläutert. Jetzt fangen wir an!


Projektvorschau

Das Folgende ist eine Vorschau der plattformübergreifenden Anwendung, die wir in dieser Serie erstellen werden:

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Voraussetzungen...

In diesem Tutorial wird davon ausgegangen, dass Sie Titanium Studio ausführen und die neuesten SDK-Updates installiert haben, die zum Zeitpunkt des Schreibens 1.7.5 waren. Da sich dieses Tutorial auf die iOS-Plattform konzentriert, würde der Leser auch davon profitieren, alle Anforderungen für die Entwicklung auf der iOS-Plattform zu haben.


Schritt 1: Die Erstellung eines neuen Projekts

Öffnen Sie Titanium Studio und erstellen Sie ein neues Projekt. Wählen Sie nur die Geräteziele für Android, iPhone und iPad aus. Sie können Ihr neues Projekt beliebig benennen, wir nennen es jedoch "ProgressBar". Geben Sie Ihrem neuen Projekt eine App-ID und eine URL und wählen Sie dann die neueste Titanium SDK-Version aus. Wenn Sie fertig sind, klicken Sie auf "Next" und wählen Sie dann die Vorlage für die Einzelfensteranwendung aus, bevor Sie auf "Finish" klicken.

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Wenn die Vorlagenoption "Single Window Application" in Ihrer Titanium-Version nicht verfügbar ist, können Sie stattdessen den an dieses Lernprogramm angehängten Projektquellcode importieren. Laden Sie die Projektdateien herunter und entpacken Sie sie in das Verzeichnis, aus dem Sie arbeiten möchten. Befolgen Sie dann diese Schritte:

  1. Wählen Sie im Menü Datei die Option "Import", um das Popup-Fenster "Projekt importieren" zu öffnen.
  2. Wählen Sie aus der Liste der Importquellen "Titanium" und dann "Import Existing Titanium Project".
  3. Navigieren Sie im Textfeld Verzeichnis zu dem Ordner, der die heruntergeladenen und entpackten Projektdateien enthält.
  4. Klicken Sie auf die Schaltfläche Fertig stellen. Ein neues Projekt mit dem Namen "ProgressBar" wird erstellt und in Ihrem Projektexplorer-Bereich verfügbar gemacht.

Wenn Sie dies noch nicht getan haben, ist jetzt ein guter Zeitpunkt, um die Projektdateien herunterzuladen und alle Bilder im Verzeichnis "Resources/assets/images" in Ihr eigenes Verzeichnis "Resources/assets/images" unter dem neuen Projekt zu entpacken gerade erstellt. Standardmäßig enthält Titanium auch zwei Symboldateien im Stammverzeichnis Ihres "Resources"-Verzeichnisses mit den Namen KS_nav_ui.png und KS_nav_views.png. Wir benötigen diese ebenfalls nicht. Verschieben Sie beide Dateien in den Papierkorb. Sie können diesen Schritt überspringen, wenn Sie bereits das gesamte Projekt mit der Funktion "Import" importiert haben.


Schritt 2: Die Erstellung der Schnittstelle

Da die Single Window Application-Vorlage der CommonJS-Struktur folgt, unterscheidet sie sich möglicherweise ein wenig von dem, was Sie gewohnt sind. Hier ruft die Datei app.js die Datei ApplicationWindow.js mit 'require' ab, wodurch unser Standardfensterobjekt für die Anwendung instanziiert und zurückgegeben wird. Die ApplicationWindow-Datei instanziiert eine neue Ansicht namens FirstView, die in der Datei FirstView.js im Ordner 'Resources/ui' codiert ist. In diesem FirstView-Ansichtsobjekt werden wir fast das gesamte Tutorial codieren. Löschen Sie vorgenerierten Code im Konstruktor exports.FirstView = function() und ersetzen Sie ihn durch den folgenden:

Oben haben wir die Grundstruktur unseres Fortschrittsbalkens und eine Schaltfläche erstellt, mit der der Benutzer die Fotogalerie auf seinem Gerät öffnen und ein Bild auswählen kann, das er hochladen möchte. Führen Sie die Anwendung jetzt im Simulator aus, und in der Mitte des Bildschirms sollte eine einzelne Schaltfläche angezeigt werden, die ungefähr so aussieht:

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Schritt 3: Auswählen eines Bildes aus der Galerie

Nachdem wir unsere grundlegende Benutzeroberfläche eingerichtet haben, fügen wir btnChoosePhoto einen Ereignis-Listener und -Handler hinzu, mit dem unser Benutzer ein Foto aus seiner Galerie auswählen kann. Geben Sie den folgenden Code direkt vor der Zeile 'self.add (btnChoosePhoto);' ein.

In diesem "Klick" -Ereignishandler öffnen wir die Galerie und überprüfen im Erfolgsabschnitt des Codes, ob der ausgewählte Medientyp ein Foto war, indem wir das Objekt mit dem konstanten Wert Ti.Media.MEDIA_TYPE_PHOTO vergleichen. Wenn diese Prüfung erfolgreich ist, übergeben wir als nächstes unser event.media-Objekt an eine neue Funktion namens UploadPhotoToServer. Hier führen wir sowohl den Datei-Upload durch als auch dem Benutzer unseren Fortschrittsbalken beim Hochladen.


Schritt 4: Die Erstellung des PHP-Servercodes zum Akzeptieren und Speichern unseres hochgeladenen Fotos

Wir werden unseren Servercode erstellen, um unser Foto aus der Ferne zu speichern und seine URL mit PHP zurückzugeben. PHP ist eine bekannte Web-Sprache, die von vielen gängigen Webhosting-Diensten unterstützt wird. Erstellen Sie eine neue Datei mit dem Namen upload.php und geben Sie den folgenden Code in diese Datei ein:

Dieses grundlegende PHP-Skript nimmt einfach eine POSTED-Datei namens 'media' auf und speichert sie dann mit einem zufälligen fünfstelligen Dateinamen der JPG-Erweiterung, der von der Funktion randomFileName() generiert wird. Wenn es uns gelingt, das Foto erfolgreich zu speichern, gibt das Skript den Remote-URL-Speicherort unseres neuen Fotos aus, andernfalls wird "false" ausgegeben, wenn dies fehlschlägt.

Jetzt müssen Sie die Datei upload.php speichern und auf Ihren Server übertragen. Darüber hinaus müssen Sie einen neuen Ordner im selben Verzeichnis wie Ihre upload.php-Datei mit dem Namen "uploads" erstellen. Dies ist der Ordner, in dem unsere Bilder gespeichert werden. Stellen Sie sicher, dass der Bildordner über die richtigen Schreibberechtigungen verfügt (normalerweise CHMOD 770). Andernfalls funktioniert unser PHP-Skript nicht.

Beachten Sie, dass Sie, wenn Sie keinen Zugriff auf einen PHP-Server haben, immer ein Skript in der Sprache Ihrer Wahl (.NET, Ruby usw.) schreiben können, das dieselbe Aufgabe ausführt.


Schritt 5: Hochladen eines Fotos und Anzeigen des Fortschritts über unsere benutzerdefinierte Fortschrittsleiste

Bevor wir unsere Funktion erstellen, müssen wir einige kleine Dinge tun. Die erste besteht darin, eine Variable namens androidUploadProgress oben in unserer exports.FirstView-Deklaration zu erstellen. Dadurch wird der ungefähre Upload-Fortschritt unseres Datei-Uploads auf Android-Geräten verfolgt. Leider unterstützt Titanium Mobile für Android zum Zeitpunkt des Schreibens die Fortschrittsvariable während des onsendstream-Ereignisses nicht, was bedeutet, dass wir nicht genau berechnen können, wie weit wir durch den Upload auf Android-Geräten sind, und daher einen Best-Guess-Ansatz verwenden müssen.

Außerdem müssen wir in der Datei "i18n/en/strings.xml" eine neue Zeichenfolgenvariable erstellen, die den Speicherort unseres Server-Upload-Skripts enthält. Fügen Sie das folgende Zeichenfolgenelement nach dem vorhandenen "welcome" hinzu und ersetzen Sie die URL durch den Speicherort Ihres eigenen PHP-Skripts.

Lassen Sie uns jetzt unsere UploadPhotoToServer-Funktion erstellen, indem Sie den folgenden Code in Ihre FirstView.js-Datei eingeben. Der beste Ort für diese Funktion befindet sich unter dem Abschnitt oben, in dem die Statusleiste auf iOS-Geräten ausgeblendet ist. Dies beginnt mit if(Ti.Platform.osname == 'iphone'. Diese Funktion überprüft, ob unser Benutzer online ist, und erstellt in diesem Fall einen neuen HTTPClient, der die Mediendaten an unseren PHP-Server sendet, wo sie gespeichert und die vollständige URL des hochgeladenen Bildes zurückgegeben werden.

Dies ist eine langwierige Funktion und bildet das "Fleisch" unserer Titananwendung. Lassen Sie uns sie also Stück für Stück durchgehen. Lassen Sie uns zunächst die Funktion selbst zusammen mit dem Anfangscode erstellen, der die Schaltfläche "Choose Photo" ausblendet, und dem Benutzer stattdessen unseren Fortschrittsbalken anzeigen:

Sie werden feststellen, dass wir auf unsere Anzeigekomponenten zugreifen, indem wir auf deren Index im untergeordneten Objekt von FirstView verweisen. Wir hätten unsere Anzeigekomponenten auch einfach oben in unserer FirstView.js-Datei deklarieren und dann instanziieren können. Wir haben uns jedoch dafür entschieden, die folgenden Schritte auszuführen, damit Sie verstehen, wie Sie auf das untergeordnete Element einer übergeordneten Ansicht zugreifen können. Als Nächstes müssen wir unser XHR-HttpClient-Objekt instanziieren und alle erforderlichen Ereignishandler erstellen, um zu verfolgen, wann unser HttpClient-Upload ausgeführt wird und ob er fehlschlägt oder erfolgreich war. Fügen Sie den folgenden Code unter dem zuvor eingegebenen hinzu. Beachten Sie, wie wir mit L("server") aus unserer Datei strings.xml auf die zuvor im Lernprogramm festgelegte Zeichenfolgeeigenschaft "server" zugreifen und wie das Parameterobjekt, das unser HttpClient-Beitrag sendet, "media" heißt und genau mit dem übereinstimmt "media" FILE-Objekt, das von unserem PHP-Skript erwartet wird.

Bearbeiten wir nun die onsendstream-Ereignishandlerfunktion. In dieser Funktion berechnen wir den aktuellen Upload-Fortschritt unserer Datei und erweitern die Breite des Fortschrittsbalkens entsprechend. Beachten Sie, dass wir dies für Android etwas anders machen als für iOS, da die onsendstream-Eigenschaft "progress" derzeit für Android nicht implementiert ist.

Versuchen Sie jetzt, Ihre Anwendung im Simulator auszuführen. Nachdem Sie ein Galerie-Foto ausgewählt haben, sollte Ihr Fortschrittsbalken angezeigt und beim Hochladen der Datei größer werden. Es sollte genauso aussehen wie das folgende:

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article

Schritt 6: Fertig stellen

Schließlich müssen wir die Ereignishandlerfunktion zum Entladen erweitern. Darin müssen wir sicherstellen, dass der Fortschrittsbalken 100% anzeigt (insbesondere für Android), und wir müssen feststellen, ob die Datei erfolgreich auf den Server hochgeladen wurde oder nicht, indem wir überprüfen, ob die Eigenschaft responseText auf "false" gesetzt ist. Wenn dies nicht der Fall ist, können wir davon ausgehen, dass alles in Ordnung war, und unseren Benutzern einen Bestätigungsdialog anzeigen, in dem sie ihr neu hochgeladenes Bild im Webbrowser öffnen können. Wir setzen dann unser Layout und alle Objekteigenschaften zurück, wenn wir für den nächsten Foto-Upload bereit sind.

Das ist es! Führen Sie die Anwendung jetzt entweder im Simulator (Android oder iPhone) oder auf Ihrem Gerät aus. Die Fortschrittsanzeige für das Hochladen von Dateien sollte weiterhin von 0 bis 100% animiert sein. Nach Abschluss sollte ein Warndialogfeld wie das folgende angezeigt werden, in dem Sie das neu hochgeladene Foto im Browser anzeigen können.

Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Android SDK Progress Bar ArticleAndroid SDK Progress Bar ArticleAndroid SDK Progress Bar Article
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.