iOS 7 – JavaScript w UIWebView. Tutorial.

Czasem zdarza się, że w aplikacji natywnej trzeba dodać kilka funkcjonalności. Na dodatek klient bywa niezdecydowany. Cały czas coś zmienia. Czasem nie warto szukać kolejnych bibliotek i próbować implementować coś co trudno się później modyfikuje. Jeśli znamy dobre rozwiązanie w technologiach webowych, to można je próbować zaimplementować w natywnej aplikacji przy pomocy kontrolki UIWebView. Dziś pokażę w jaki sposób radzę sobie z tym problemem.

Zakładam, że masz już pewne doświadczenie z programowanie na platformę iOS.

Utworzenie projektu.
Tworzymy nowy projekt w XCode z pustą aplikacją. Do niej dodajemy nowy „UIViewController”. Zaznaczamy, aby dodało nam xiba.
Dodanie UIViewController

Następnie w implementacji pliku AppDelegate pod import „AppDelegate.h” dodaj:

#import "WebViewController.h"
@interface AppDelegate ()
@property (strong, nonatomic) WebViewController *viewController;
@end

Następnie podmień metodę „-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:” poniższą:

-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    _viewController = [[WebViewController alloc] initWithNibName:@"WebViewController" bundle:nil];
     self.window.rootViewController = self.viewController;
    
    [self.window makeKeyAndVisible];
    return YES;
}

Właściwie w tym momencie jeszcze nic nie trzeba tłumaczyć. Wszystko powinno być jasne. Po uruchomieniu aplikacji bedzie widoczny widok (.xib) naszego kontrolera. Teraz do niego dodamy kontrolkę UIWebView.

Najpierw w nagłówku naszego kontrolera dodajemy delegację + IBOutlet kontrolki UIWebView, która będzie znajdować się w pliku .xib.

@interface WebViewController : UIViewController <uiwebviewdelegate>
@property (weak, nonatomic) IBOutlet UIWebView *adkuWebView;
@end
</uiwebviewdelegate>

Następnie w pliku .xib musimy dodać kontrolkę UIWebView, do której podpinamy nasz IBOutlet. (Klikamy LPM (lewy przycisk mysz) w kropkę cały czas trzymając ctrl i przeciągając ją do kontrolki). connect WebView

Ostatnia rzecz to podpięcie delegacji dzięki której będą wywoływane specjalne metody przeznaczone dla naszej kontrolki UIWebView.
delegate UIWebView

Wszystko przygotowane. Zamieszczam projekt startowy od którego tak naprawdę można zacząć zabawę.
JavaScript projekt UIWebView (START)

Następnie ściągnij specjalną paczkę, którą przygotowałem na potrzeby tego tutoriala.
Paczka adkujs
Dodaj ją do projektu w taki sposób jak widać na zrzucie ekranu:
folderyDodanie_adkujs
W paczce znajdują się pliki: default.html, pliki CSS no i najważniejsze, pliki JavaScript, a raczej pliki frameworku jQuery oraz jQuery UI. O samych technologiach nie będę się w tym miejscu rozpisywał. Ważne, że mamy fajne efekty, które można stosować.

Teraz w XCode należy dodać referencję do folderu adkujs.
Dodanie w XCode referencji

Już prawie wszystko gotowe. Ostatnią rzeczą jest dodanie poniższego kodu do metody viewDidLoad w kontrolerze „WebViewController”:

//ścieżka pliku default.html
	NSString *defaultFile = [[NSBundle mainBundle] pathForResource:@"default" ofType:@"html" inDirectory:@"./adkujs"];
    //po długości sprawdzamy, czy jest ok.
	if ([defaultFile length]) {
        
		NSError *error = NULL;
		NSString *html = [NSString stringWithContentsOfFile:defaultFile encoding:NSUTF8StringEncoding error:&error];
		if ([html length]) {
            NSURL *myURL = [NSURL fileURLWithPath:defaultFile];
            // załadujmy do webView htmla:
			[self.adkuWebView loadHTMLString:html baseURL:myURL];
			
		}
    }

Jak widać nie ma w nim nic skomplikowanego. Oto efekt naszej pracy:
javaScript-UIWebView-przyklad

Do ściągnięcia
Projekt ukończonego tutoriala JavaScript UIWebView

Uwaga: na dniach ukaże się kolejna część w której pokażę implementację wykresów jqPlot + w jaki sposób można wstrzykiwać dane. Będzie zdecydowanie więcej JavaScriptu. Efekty będą jeszcze bardziej zaskakujące.

You may also like...