ExampleArchiv

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:

Bei der Entwicklung von Anwendungen für das Android OS kommt es vor, dass allgemeine Activities oder Services mit wenig Änderungen in weiteren Anwendungen wieder verwendet werden könnten. Da Sie diese Klassen nicht in jedes einzelnen Projekt kopieren möchten – was zu einem kaum handhabbarem Code führen würde – wäre es besser, einen Weg zu finden, den Quellcode dieser Klassen aus weiteren Projekten heraus zu referenzieren. Für Nicht-Android-Anwendungen kann man das Problem lösen, indem man den Code in mehrere Bibliotheken aufteilt, so dass die gewünschte Funktionalität von mehreren Projekten referenziert werden kann. Solange keine Interaktion mit externen Ressourcen nötig ist, ist das auch in Android Projekten ohne weiteres möglich (erstellen Sie ein jar und referenzieren Sie es in den Projekten). Aber wenn Sie mit externen Ressourcen arbeiten, können diese Klassen nicht innerhalb einer Bibliothek verwendet werden, weil das Android SDK keine passenden IDs innerhalb der “R”-Klasse für externe Ressourcen erzeugt, die in einer referenzierten jar-Datei enthalten sind.

In diesem Beitrag möchte ich Ihnen verschiedene Lösungen für dieses Problem zeigen, wodurch Sie vermeiden können, den Quellcode in die Projekte zu kopieren.