Anzeige

Tutorial: Webbrowser in 10 Minuten

Notizen Nachdem der Artikel über die neuen Funktionen des WebKits Reaktionen über die fehlenden Funktionen im Safari Webbrowser hervorgerufen hat, wollen wir euch ermuntern es doch einmal selbst zu versuchen.

Macnotes zeigt euch in diesem Tutorial, wie man in 10 Minuten zum eigenen, zugegebener Maßen einfachen, Webbrowser kommt. Alles was ihr dazu benötigt, sind die Entwicklungswerkzeuge von Apple. Programmiererfahrungen unter Mac OS X werden nicht gebraucht, da für dieses Projekt keine einzige Zeile Code geschrieben werden muss.

Das Tutorial wurde unter Leopard erstellt, funktioniert aber im wesentlichen genauso auch unter Tiger.

Neues Projekt anlegen
(1) Es wird Xcode gestartet und ein neues Projekt vom Typ Cocoa Application erstellt. Wir nennen das Projekt Simple Webbrowser.

Neues Projekt anlegen
(2) Das Projektfenster in Xcode sollte jetzt so aussehen. Durch einen Doppelklick auf MainMenu.nib öffnen wir den Interface Builder. Dort ist der größte Teil der Arbeit zu erledigen.

(3) In der Library-Palette suchen wir nach dem WebView-Objekt und ziehen es dann mittels Drag-and-Drop auf das vom Interface Builder angezeigte Fenster unserer Anwendung. Jetzt fügen wir auf die gleiche Weise noch zwei Push-Buttons und ein TextField-Objekt dem Fenster hinzu.

IB Webview
(4) Jetzt werden die einzelnen Elemente so ausgerichtet, dass sie in etwa der Abbildung entsprechen. Dynamisch eingeblendete Hilfslinien erleichtern das Ausrichten.

(5) Damit beim Vergrößern des Fensters das Layout nicht zerstört wird, muss im Inspector des Interface Builders die Größenanpassung für die Elemente richtig eingestellt werden. Der Interface Builder zeigt dabei in einer Animation sofort die entsprechende Einstellung an.

Webview verbinden
(6) Damit der Webview die Information über die darzustellende Webseite erhält, muss ihm eine URL übergeben werden. Die wird in das Textfeld eingetragen. Deshalb werden Textfeld und Webview jetzt verbunden. Dazu mit der Maus bei gedrückter Ctrl-Taste eine Verbindung vom Textfeld zum Webview ziehen. Im Popup-Menü wird die takeStringURLFrom: Aktion ausgewählt.

Button verbinden
(7) Wie mit Textfeld und Webview wird auch mit den Vorwärts- und Rückwärts-Buttons verfahren. Hier werden die Aktionen goBack: und goForward: entsprechend gewählt. Damit sind wir im Interface Builder fertig und kehren zu Xcode zurück.

Neues Projekt anlegen
(8) In Xcode muss jetzt das Webkit-Framework dem Projekt hinzugefügt werden. Nach einem Ctrl-Klick auf den Frameworks-Ordner kann man im Kontextmenü ein “existierendes Framework hinzufügen” auswählen. Jetzt wählt man das Webkit.framework.

Build and Go
(9) Jetzt sind wir fertig und können das Projekt kompilieren und unser Programm ausführen. Im Menü Build > Build and Run wählen. Nach kurzer Wartezeit startet der Webbrowser

Fertig
(10) Unser einfacher Webbrowser bietet keine Komfortfunktionen. Deshalb müssen wir in dem Textfeld immer eine vollständige URL inkl. http:// eingeben.

Fazit
Dieses Tutorial zeigt, wie einfach der Einstieg in die Programmentwicklung unter Mac OS X ist. Apple hat eine Vielzahl an Frameworks geschaffen, mit denen sich die alltäglichen Aufgaben des Programmierers sehr bequem erreichen lassen.

Viel Spaß beim Nachbauen!

Matthias Lange
Autor:
Datum:
Kategorie:
Tags:
Matthias Lange, Redakteur
06.12.2007, 23:18 Uhr
Software
, , , ,  

13 Kommentare , 2 Trackbacks

  1. Profilbild

    07.12.07, 0:11 Uhr, #1

    Sam meint:

    Süß find ich das! :D
    Was aber noch cooler wäre: Ein eigenes Chat Programm. Hab nur noch Probleme mit iChat, Adium und Co. :-/

  2. Profilbild

    [...] Wer schon immer einen eigenen Browser haben wollte kann dies nun ganz einfach mit XCode tun. Wie genau sieht man bei MacNotes. [...]

  3. Profilbild

    07.12.07, 3:49 Uhr, #3

    Josa meint:

    Weiß jemand wie man den “Simple Webbrowser” jetzt noch dazu bringen kann dass er falls nötig http:// einfügt? Das wäre noch sehr cool!

  4. ml

    07.12.07, 8:00 Uhr, #4

    ml (Redaktion) meint:

    @Josa: Ich arbeite bereits am zweiten Teil des Tutorials …

  5. Profilbild

    07.12.07, 10:04 Uhr, #5

    Martin meint:

    Das is voll einfach! Werd ich gleich mal ausprobieren.

  6. Profilbild

    07.12.07, 12:34 Uhr, #6

    rootfriend meint:

    Bei 7) ist etwas unklar, mach ich die Zuweisungen über den Inspektor? Und wenn ja, wo?

  7. ml

    08.12.07, 0:36 Uhr, #7

    ml (Redaktion) meint:

    @rootfriend: Die Zuweisung wird wie in der Abbildung dargestellt in dem Popup-Menü vorgenommen. Ctrl-Drag vom Button zum Webview und das Popup-Menü klappt auf.

  8. Profilbild

    08.12.07, 15:12 Uhr, #8

    rootfriend meint:

    Ahh, danke, in Tiger ist das ohne Kontextmenü, aber das Prinzip ist dasselbe. Gute Anleitung.

  9. Profilbild

    09.12.07, 22:30 Uhr, #9

    Sven meint:

    Hi, vielen Dank für dieses Tutorial. Bin erst seit kurzem Mac-Besitzer. Fand dieses Tutorial als Anwendungsentwickler, aber sehr cool für den Einstieg in Programmierung unter Mac OS X. Bin gespannt auf den zweiten Teil!

  10. Profilbild

    11.12.07, 20:00 Uhr, #10

    Josa meint:

    @ml: Freue mich schon auf den 2ten Teil! :D

  11. Profilbild

    19.01.08, 14:55 Uhr, #11

    Jonas meint:

    Sehr cool, vielen Dank!

  12. Profilbild

    18.02.08, 15:09 Uhr, #12

    Dave meint:

    Ich habe soeben dieses Tutorial gemacht und es ist wirklich sehr gut. Ein Problem besteht jedoch noch immer. Kann ich dem erstellten Browser auch eine Seite angeben, welche dieser automatisch beim Start öffnet?

  13. Profilbild

    [...] wir uns im ersten Teil des Tutorials mit wenigen Klicks und Null Zeilen Programmcode einen einfachen Webbrowser gestrickt [...]

  14. Profilbild

    20.06.08, 20:16 Uhr, #14

    benizio meint:

    sehr cool so ein tutorial!
    freue mich auf weitere!

    gruß!
    benizio

  15. Profilbild

    23.11.08, 18:29 Uhr, #15

    Crazycube meint:

    ich finde das Tutorial sehr gelungen. Vielleicht machst Du bei Gelegenheit mal wieder ein 2..


Anzeige

Dein Kommentar:

Mit einem Facebook-Account kannst du dich auch auf Macnotes anmelden:
Connect with Facebook


  

Mein Macnotes

Daten merken

Neu hier? Ein Macnotes-Account bringt dir viele Vorteile

Anzeige
blogoscoop