Cocoa + Objective-C = program

W tym poście pokażę Wam, jak prosto i szybko tworzy się aplikacje w Objective-C z wykorzystaniem Cocoa.

Schemat postępowania przy tworzeniu aplikacji opartej na GUI

  1. Wykonanie GUI w InterfaceBuilder
  2. Stworznie klas – kontrolerów dla GUI.
  3. Powiązanie klas – kontrolerów z obiektami i zdarzeniami w GUI.
  4. Testowanie rozwiązań

Robimy przeglądarkę WWW

Pierwszą aplikację, jaką dzisiaj stworzymy w oparciu o Cocoa będzie bardzo prosta przeglądarka www. Wykorzystamy do tego wszystkie możliwości jakie dało nam Apple. Poniżej opiszę tylko najważniejsze kroki tworzenia tej aplikacji.

Tworzymy nowy projek: Cocoa Application.

Nowy projekt: Cocoa Application
Nowy projekt: Cocoa Application

Po stworzeniu projektu pokaże się główne okno XCode.

XCode - okno z projektem
XCode - okno z projektem

Przechodzimy do budowania interfejsu graficznego przeglądarki. Z okna projektu, poprzez podwójne kliknięcie na pliku MainMenu.nib. Otworzony zostanie program Interface Builder, dzięki któremu stworzymy GUI dla żytkowników. Na okno aplikacji przeciągamy z przybornika komponenty:

  • Przycisk
  • WebView
  • Pole tekstowe

i otrzymujemy rezultat jak np ten poniżej:

Przykładowy widok GUI aplikacji
Przykładowy widok GUI aplikacji

Następnym krokiem jest dodanie do projektu wykorzystywanego frameworka WebKit z dostępnych w Cocoa posługując się menu programu XCode.

Po dodaniu frameworka tworzymy plik dla naszej klasy – kontrolera.

Dodawanie nowych plików do projektu
Dodawanie nowych plików do projektu

Nazwijmy ten plik i klasę jako AppController. Razem z plikiem .m (implementacją metod klasy) stworzony zostanie plik nagłówkowy .h.

Następnie wypełniamy pliki jak niżej.

Zawartość pliku AppContro6er.h

//import frameworku Cocoa 
#import <Cocoa/Cocoa.h> #import <Cocoa/Cocoa.h>
 
@interface AppController : NSObject {
 
 //wskaźnik do obiektu klasy WebView 
 IBOutlet id webView;
 
 //wskaźnik do pola tekstowego 
 IBOutlet id textFieldAddress;
}
//główna metoda klasy - będzie otwierać wpisany przez użytkownika adres www 
- (IBAction) loadWWW: sender;
@end

Zawartość pliku AppController.m

//import deklaracji klasy AppController 
#import "AppController.h" 
//import frameworka WebKit umożliwiającego wykorzystanie gotowych komponentów 
//do przeglądania www 
#import <WebKit/WebKit.h> 
@implementation AppController
- (IBAction) loadWWW: sender {
 
 //pobranie zawartości pola tekstowego i próba otworzenia dokumentu o adresie 
URL wpisanym do pola tekstowego
 
 [[webView mainFrame] loadRequest:[NSURLRequest requestWithURL:[NSURL URLWith-
String: [textFieldAddress stringValue] ]]];
}
@end

Plik stworzony automatycznie przez XCode main.m pozostawiamy bez zmian. A oto jest jego zawartość:

#import <Cocoa/Cocoa.h> 
int main(int argc, char *argv[]) {
    return NSApplicationMain(argc,  (const char **) argv);
}

Teraz pora na powiązanie obiektów interfejsu z atrybutami klasy AppController. Aby to zrobić musimy na okno projektu Interface Buildera przenieść metodą Drag&Drop plik AppController.h z XCode.

Okno Interface Buildera na które należy przenieść plik AppContro6er.h
Okno Interface Buildera na które należy przenieść plik AppContro6er.h

W ten sposób dołączymy naszą klasę do klas używających GUI. Aby móc ją wykorzystać, musimy na zakładce Classes odnaleźć naszą klasę, zaznaczyć ją i z menu programu wybrać Classes – Instantiate AppController.

Zaznaczamy dodaną klasę, aby stworzyć jej instancję.
Zaznaczamy dodaną klasę, aby stworzyć jej instancję.

Oto rezultat:

Rezultat powiązania obiektu GUI z atrybutem klasy widoczny na oknie Insepctor’a
Rezultat powiązania obiektu GUI z atrybutem klasy widoczny na oknie Insepctor’a

Przechodzimy do ostatniego kroku – powiązania atrybutów naszej klasy z obiektami GUI. Z okna, którego zrzut widzimy powyżej, przeciągamy ikonę AppController na obiekt WebView. Musimy to zrobić trzymając klawisz Ctrl przy kliknięciu na AppController.

Po tym zabiegu, w oknie Inspector’a powinna otworzyć się zakładka, w której powiążemy
obiekt WebView z GUI z atrybutem klasy AppController. Odpowiednie zrzuty ekranu
prezentuję poniżej.

Przeciąganie AppControler na obiekt WebView (z wciśniętym klawiszem Ctrl)
Przeciąganie AppControler na obiekt WebView (z wciśniętym klawiszem Ctrl)
Widok Inspector’a po przeciągnięciu obiektu klasy AppContro6er na obiekt WebView.
Widok Inspector’a po przeciągnięciu obiektu klasy AppContro6er na obiekt WebView.

Po przeniesieniu klasy AppController na obiekt WebView w oknie Inspectora wybieramy atrybut do jakiego obiekt WebView zostanie przypisany (w naszym przypadku atrybut ten nazywa się webView). Zaznaczamy go, a następnie klikamy przycisk Connect. W ten sposób obiekt GUI został związany z atrybutem klasy. Analogicznie postępujemy w przypadku powiązania pola tekstowego.

Okno Inspector’a, w którym wiążemy obiekty GUI z atrybutami klasy.
Okno Inspector’a, w którym wiążemy obiekty GUI z atrybutami klasy.

W przypadku przycisku robimy nieco inaczej. Przycisk należy przenieść na klasę, a nie odwrotnie tj. klasę na przycisk. Tę czynność również wykonujemy z wciśniętym klawiszem Ctrl. Inspector powinien otworzyć panel Connections na zakładce Target/Action wybieramy akcję loadWWW i klikamy przycik Connect.

W ten oto sposób powiązaliśmy kod źródłowy klasy AppController z GUI. Pozostało jedynie skompilować i uruchomić program. Poniżej zamieszczam screenshoty działającej aplikacji.

Zrzuty ekranu z aplikacji Zrzuty ekranu z aplikacji

Obiekt WebView oprócz renderowania stron www umożliwia m.in. czytanie dokumentów PDF.

Każda klasa, będąca fragmentem projektu opartego o Cocoa, powinna dziedziczyć po klasie NSObject.

@interface AppController : NSObject {
...
}

Jeżeli tworzymy jakąś hierachię klas, to oczywiście, tylko klasa bazowa będzie tą, która bezpośrednio dziedziczy po NSObject.

Okno debugera.
Okno debugera.

Jedna myśl do “Cocoa + Objective-C = program”

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.