Monatsarchiv: Mai 2011

Leider ist der Eintrag nur auf English verfügbar.

Die technischen Fortschritte der letzten Zeit, wie schnelle Prozessoren und Datenübertragung, bessere Displays sowie weitere Miniaturisierung, haben es möglich gemacht, dass Anwendungen, die auf einer erweiterten Realität basieren, auf einem Smartphone oder einem Tablet-Computer laufen können. Solche Anwendungen sind dabei, in die alltägliche Welt vorzudringen, und momentan vor allem für die Bereiche Marketing, Verkauf und Werbung konzipiert. Viele sind auch einfach Spielerei, die das Potential der neuen Technik demonstrieren wollen.

In der Industrie gibt es ernstzunehmende Anwendungen mit erweiterter Realität schon seit längerer Zeit. Allerdings musste bislang einiger Aufwand für die Hardware betrieben werden, wie z.B. spezielle Kamerasysteme, Tracking-Sensoren, Displays oder Brillen. Deshalb waren die Anwendungen auf sehr spezielle Bereiche beschränkt.

In meinem letzten Beitrag “Using the Android Interface Definition Language (AIDL) to make a Remote Procedure Call (RPC) in Android” habe ich die Grundlagen erläutert, wie die Kommunikation zwischen Prozessen in Android umgesetzt werden kann. Jetzt werden wir einen Blick auf ein Spezialgebiet in diesem Bereich werfen: Parcelables als Parameter einer AIDL Methode.

Wie im letzten Beitrag beschrieben, ist es möglich, entweder primitive Java Typen innerhalb einer Remote-Method Signature oder irgendeine Klasse, die das android.os.Parcelable Interface implementiert, zu benutzen. Über dies Interface ist es möglich, beliebig komplexe Datentypen zu definieren, die als Parameter oder Rückgabewerte von Methoden während eines Remote Method Aufrufs genutzt werden können.

Ich habe eine modifizierte Version des ersten Beispiel-Apps kreiert, um Ihnen ein einfaches Beispiel zu geben, das ein Parcelable Object als Methoden-Rückgabewert nutzt. Das Beispiel besteht aus einem Service, der ein Parcelable Message Object erzeugt, das die aktuelle Systemzeit sowie das Erscheinungsbild des Textes, wie Farbe, Größe und Stil, enthält. Im zweiten Teil des Beispiels finden Sie eine Activity, die mit dem AIDL IPC ein solches Message Object erzeugt, um die aktuelle Uhrzeit anzuzeigen. Die entsprechenden Projekte sind AIDLRemoteClientUsingParcelableObject für das Client-Projekt (enthält die Activity) und AIDLRemoteMessageServiceUsingParcelableObject für den Server (enthält den Service).

Erweiterte Realität  (englisch: augmented reality) meint allgemein die Erweiterung der Realitätswahrnehmung durch Informationen, die von einem Computer erzeugt werden. Es wird eine zweite, künstliche Ebene in die Umwelt eingeblendet, die in Echtzeit zusätzliche Informationen zur Verfügung stellt.

Stellen Sie sich eine iOS App vor, die ein HTML5 Video bereitstellt, das Sie abspielen und stoppen können, und mit dem Sie interagieren können. Das ist genau das, was wir in diesem Tutorial zusammenbauen wollen.

HTML

Da nur kleine Änderungen notwendig sind, werden wir damit beginnen, den HTML/JS-Code zu bearbeiten, der in diesem Artikel bereitgestellt wird. Zuerst verbinden wir ein JavaScript onclick-Attribut mit jedem der Elemente, die

umgeben. Dazu nehmen wir die setupItems()-Funktion:

var t = $(items[i][3]);

Beachten Sie, dass das Encoding notwendig ist, weil der String oben als Funktionsparameter gegeben ist.

Wie Sie sehen können, wird Overlay.call() mit der entsprechenden Item-ID aufgerufen, wenn Sie auf eine Box klicken. Call() arbeitet ähnlich zu der Art und Weise, wie wir windows.location in einem vorangegangenen Artikel verwendet haben, um Daten an die iOS parent app zu schicken.  Es nimmt die ID und leitet die Seite weiter zu so etwas wie ?cmd=call¶m=2. Diese Zeichenfolge kann später von der iOS-App gelesen werden.

Das ist es auch schon! Starten Sie nun Xcode und erzeugen Sie eine neue, view-based Applikation. Nennen Sie es App Solut InteractiveVideoInterface, und öffnen Sie Ihre ViewController header Datei. Fügen Sie folgenden Code ein:

@interface App_Solut_InteractiveVideoInterfaceViewController : UIViewController {

IBOutlet UIWebView *webView;
IBOutlet UILabel *label;
}
@property(retain, nonatomic) UIWebView *webView;
@property(retain, nonatomic) UILabel *label;

@end

Speichern Sie die Datei, wechseln Sie zum Interface Builder und bearbeiten Sie die xib Datei des ViewControllers. Ziehen Sie ein WebView und ein Label auf dem Bildschirm und verbinden Sie die Outlets, die soeben erzeugt wurden. Dazu ziehen Sie (während Sie die Strg-Taste gedrückt halten) aus dem WebView Objekt zum Besitzer der Dateien und wählen Sie delegate. Dann das gleiche umgekehrt: ziehen Sie (während Sie die Strg-Taste gedrückt halten, oder nehmen Sie die rechte Maustaste, wenn Sie eine Standardmaus benutzen) vom Besitzer der Dateien zum  WebView und zum Label und wählen Sie die entsprechenden Einträge aus der Liste. Sie haben nun die Verbindung zwischen Ihrem Code und Ihrem Interface geschaffen.

In Ihrer Implementierungs-Datei führen Sie nun ein synthesize für WebView und Label durch:

@synthesize webView;
@synthesize label;

So wie beim WebView Interface-Code fügen wir die folgende Funktion hinzu, um alle Webpage Requests abzufangen.

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *url = [[request URL] absoluteString];
NSArray *urlArray = [url componentsSeparatedByString:@"?"];
NSString *cmd = @"";
NSMutableArray *paramsToPass = nil;
if([urlArray count] > 1) {
NSString *paramsString = [urlArray objectAtIndex:1];
NSArray *urlParamsArray = [paramsString componentsSeparatedByString:@"&"];
cmd = [[[urlParamsArray objectAtIndex:0] componentsSeparatedByString:@"="] objectAtIndex:1];
int numCommands = [urlParamsArray count];
paramsToPass = [[NSMutableArray alloc] initWithCapacity:numCommands-1];
for(int i = 1; i < numCommands; i++){
NSString *aParam = [[[urlParamsArray objectAtIndex:i] componentsSeparatedByString:@"="] objectAtIndex:1];
[paramsToPass addObject:aParam];
}
}
if([cmd compare:@"call"] == NSOrderedSame) {
NSString *message = [[paramsToPass objectAtIndex:0]stringByReplacingPercentEscapesUsingEncoding:NSASCIIStringEncoding];
[label setText:[NSString stringWithFormat:@"You just clicked button #%@", message]];
}
/* Only load the page if it is not an appcall */
NSRange aSubStringRange = [url rangeOfString:@"appcall"];
if(aSubStringRange.length != 0){
NSLog(@"App call found: request cancelled");
return NO;
} else {
return YES;
}
}

Sie sehen, dass der Wert des param Parameters mit einem String verbunden ist, der als Text des Labels benutzt wird. In diesem Szenario schicken alle Video-Overlays ihre eigene ID zur App, wenn auf sie geklickt wird.

Von diesem Punkt an ist Ihre Fantasie frei. Sie können auf den Benutzerinput reagieren und tun, was Sie wollen.

Beispielprojekt herunterladen

Sie finden das Beispielprojekt bei GitHub: InteractiveVideoInterface-Example.

Ein WebView-Element ist eine schnelle und einfache Art, sowohl plattformunabhängige als auch dynamische Inhalte in eine gewöhnliche iOS App zu integrieren. Nun ist es nicht schwierig, das WebView-Element zu benutzen, um Webseiten anzuzeigen, aber die Dinge werden komplizierter, wenn eine Interaktion zwischen der Parent App und der Webseite erforderlich ist. Im Moment gibt es keinen gangbaren Weg für eine Webseite, Nachrichten an den WebView Controller zu senden. Dieser Artikel zeigt, wie man trotz dieser fehlenden Funktion eine Zwei-Wege-Kommunikation implementieren kann. Am Ende des Artikels finden Sie einen Download-Link zu einem vollständigen iOS Beispielprojekt.

JavaScript Code von Ihrer App aus aufrufen

Dieser Teil ist einfach: Nehmen wir an, in Ihrem Projekt benutzen Sie ein WebView-Element für die Anzeige der Seiten. Es gibt eine Methode namens stringByEvaluatingJavaScriptFromString, die die gewünschte Funktionalität bereitstellt. Beispiel:

[myWebView stringByEvaluatingJavaScriptFromString:@"alert('Hello World!');"];

Diese Methode – Sie ahnen es – zeigt eine Warnmeldung, die von Ihrer Webseite geschickt wurde. Auf diese Weise können Sie alle JavaScript-Funktionen aufrufen, die Ihrer Webseite von außen zur Verfügung stehen. Damit ist es ein Kinderspiel, Seiten ohne großen Aufwand zu ändern.

In Ihrer App Funktionen vom WebView-Element aus aufrufen

Der umgekehrte Weg ist weitaus komplizierter. Wir müssen eine Methode finden, wie eine Webseite mit einer App kommunizieren kann. Glücklicherweise bietet das WebView-Element einige hilfreiche Attribute und Ereignisse. Zunächst einmal wird ein Ereignis namens shouldStartLoadWithRequest ausgelöst, wenn eine Seite angefordert wird. Hier ist ein Beispiel für die Implementierung:

-(BOOL)myWebView:(UIWebView*)myWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNaviagtionType)navigationType {
   [...]
}

Was diese Funktion so interessant macht ist, dass sie aufgerufen wird, bevor die Seite tatsächlich geladen wird, und dass sie einen booleschen Wert als Rückgabe erwartet. Der Rückgabewert YES veranlasst das WebView-Element, die gewünschte Seite zu laden, während der Rückgabewert NO keine Seite lädt. Der Plan ist wie folgt: Eine JavaScript-Funktion lädt eine fiktive Seite einschließlich einiger GET-Parameter über window.location. Durch das spezielle URL Stichwort ist die App in der Lage herauszufinden, ob eine echte Seite geladen werden soll oder ob eine In-App Funktion aufgerufen wird (App-Call). An diesem Punkt kann die Funktion entweder den Aufruf stoppen und die Aktion durchführen oder die Seite laden. Die Funktion erledigt also zwei Dinge:

  • Sie prüft, ob ein normaler Link oder ein App-Aufruf angefordert wird und gibt den entsprechenden booleschen Wert zurück.
  • Sie holt die gegebenen Parameter und überprüft, ob sie zu den vordefinierten Aktionen passen.

Basierend auf dem Beispiel von tetontech ist dies der Code, über den wir sprechen:

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
 NSString *url = [[request URL] absoluteString];
 NSLog(@"Requesting: %@",url);
 NSArray *urlArray = [url componentsSeparatedByString:@"?"];
 NSString *cmd = @"";
 NSMutableArray *paramsToPass = nil;
 // isolate command and parameters
 if([urlArray count] < 1){
 NSString *paramsString = [urlArray objectAtIndex:1];
 NSArray *urlParamsArray = [paramsString componentsSeparatedByString:@"&"];
 cmd = [[[urlParamsArray objectAtIndex:0] componentsSeparatedByString:@"="] objectAtIndex:1];
 int numCommands = [urlParamsArray count];
 paramsToPass = [[NSMutableArray alloc] initWithCapacity:numCommands-1];
 for(int i = 1; i < numCommands; i++){
 NSString *aParam = [[[urlParamsArray objectAtIndex:i] componentsSeparatedByString:@"="] objectAtIndex:1];
 [paramsToPass addObject:aParam];
 }
 }
 if([cmd compare:@"toggleWorking"] == NSOrderedSame){
 NSLog(@"Turning working indicator...");
 if([UIApplication sharedApplication].networkActivityIndicatorVisible == NO) {
 [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
 NSLog(@"...on");
 } else {
 [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
 NSLog(@"...off");
 }
 } else if([cmd compare:@"logMessage"] == NSOrderedSame) {
 NSString *message = [[paramsToPass objectAtIndex:0] stringByReplacingOccurrencesOfString:@"%20" withString:@" "];
 NSString *message = [[paramsToPass objectAtIndex:0] stringByReplacingPercentEscapesUsingEncoding:NSASCIIStringEncoding];
 NSLog(@"Received JS message: %@",message);
 }
 // only load the page if it is the initial index.html file
 NSRange aSubStringRange = [url rangeOfString:@"index.html"];
 if(aSubStringRange.length != 0){
 return YES;
 } else {
 NSLog(@"App call found: request cancelled");
 return NO;
 }
}

Wie schon gesagt, extrahiert und isoliert diese Funktion jeden gegebenen Parameter und Befehl und überprüft mit einigen if-Anweisungen, ob ein Befehl erkannt wird. Wenn das der Fall ist, können zusätzliche Parameter verwendet werden, um eine Aktion auszuführen. In diesem Beispiel gibt es nur zwei mögliche Aktionen:

  • Mit der Anforderung ?cmd=toggleWorking wird in der Tab-Leiste des iPad - abhängig von seinem gegenwärtigen Zustand - ein sich drehendes Rädchen ein- oder ausgeschaltet.
  • Die Aktion logMessage kann aufgerufen werden mit: ?cmd=logMessage¶m=Hello%20World. Es wird eine Nachricht als log-Datei an die Debug-Konsole übermittelt.
NSRange aSubStringRange = [url rangeOfString:@"index.html"];
if(aSubStringRange.length != 0){

Die letzte Überprüfung ist sehr wichtig! Angenommen, Ihre Hauptseite heißt index.html, wird dadurch sicher gestellt, dass die Seite einmal beim Start geladen wird. Weitere Anforderungen sind im Moment blockiert, aber Sie kennen sicherlich andere Ansätze, um sicherzustellen, dass App-Aufrufe nicht geladen werden.

Beispielprojekt herunterladen

Gehen Sie zu GitHub und laden sie das WebViewInterface-Example herunter. Quelle: