Home

Dashcode Benutzerhandbuch

1. 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Ein gutes Beispiel f r eine Eigenschaft mit mehreren Bindungen ist die Eigenschaft queryInProgress der Datenquelle feedDataSource in der Vorlage RSS f r Webprogramme Diese Eigenschaft der Datenquelle ist an die Eigenschaften visible und animating des Elements activityIndicator Aktivit tsanzeige im Arbeitsbereich gebunden Dadurch ist beim Ausf hren des Programms sichergestellt dass die Aktivit tsanzeige nur sichtbar ist wenn eine Abfrage aktiv ist und dass sie sich dreht bis die Abfrage beendet ist Wie bereits im Abschnitt ndern der Eigenschaften eines Elements bzw Objekts Seite 54 erw hnt k nnen Sie die Bindungen auch im Informationsfenster Bindungen anzeigen und ndern Das Informationsfenster Bindungen stellt die Bindungen elementorientiert dar w hrend sie in der Datenmodellansicht eher bindungsorientiert betrachtet werden Im Informationsfenster Bindungen werden die bindbaren Eigenschaften des momentan ausgew hlten Elements in Verbindung mit Steuerelementen zum Erstellen und ndern von Bindungen angezeigt Besteht f r eine Eigenschaft bereits eine Bindung wird der Name der Datenquelle sowie der vollst ndige Schl sselpfad der gebundenen Eigenschaft in der Datenquelle im Informationsfenster Bindungen angezeigt Verwenden von HTML CSS und JavaScript Programmierschnittstellen Wenn der Q
2. Hinzuf gen oder Entfernen eines Webprogramms Wenn Sie ein Webprogramm Projekt anlegen erstellt Dashcode standardm ig zwei Produkte ein mobiles Safari Webprogramm ein Webprogramm das f r Safari auf dem iPhone optimiert ist und ein Safari Webprogramm f r Computersysteme Im Abschnitt Erstellen eines Projekts mithilfe einer Vorlage Seite 47 wurde bereits beschrieben dass Sie nachdem Sie eine Vorlage f r Ihr Projekt ausgew hlt haben entscheiden k nnen ob Sie beide Produkte erstellen m chten oder nur eines Bevor Sie ein Produkt zum vorhandenen Projekt hinzuf gen oder aus dem Projekt entfernen sollten Sie sich mit der Struktur der Dateien in Ihrem Projekt besch ftigen In einem Projekt zur Erstellung von zwei Produkten befinden sich die folgenden Dateien und Ordner auf der obersten Ebene root der Liste Dateien dar ber hinaus k nnen noch einige andere optionale Dateien und Ordner vorhanden sein m Der Ordner safari enth lt alle Dateien und Elemente die ausschlie lich im Safari Webprogramm verwendet werden m Der Ordner Images enth lt alle Bilder die von beiden Produkten verwendet werden m Die Datei index html ist die bergeordnete HTML Datei f r das Projekt m Der Ordner mobile enth lt alle Dateien und Elemente die ausschlie lich im mobilen Safari Webprogramm verwendet werden m Der Ordner Parts enth lt Dashcode Elemente und andere Codedateien die von beiden Produkten verwendet werden
3. masterView Location E itemstist vB Itemsrow i SP itemTitle 3 splitter E detailview v Ej detailBox BE detailHeader E Tith Bi line C8 rit GE detailDescription E video 2 Tabo Description Datenquellen Ce 8 itemsList URL http www apple coni trailers home xmi current xml lej Lar a lt Bid 303 EI 22 Rounds runtime 2 28 E rating PG 13 studio 20th Century Fox LME ohn CNE Ii t 95 4 Lassen Sie die Maustaste los wenn das Objekt Title hervorgehoben wird Nun wird ein Kontextmen angezeigt in dem die bindbaren Eigenschaften f r dieses Objekt aufgelistet sind In unserem Fall m sste das Kontextmen die folgenden Eintr ge enthalten text editable visible enabled html und class 5 W hlen Sie die Option text aus Wenn Sie au erhalb des Kontextmen s klicken wird die Bindung nicht erstellt und Sie m ssen wieder mit Schritt 2 beginnen Nachdem alle Schritte ausgef hrt wurden wird ein neues graues Tastensymbol im Datenmodell angezeigt Dieses Tastensymbol m sste sich neben der Eigenschaft t i t 1 e befinden und die Aufschrift itemTitle text tragen Erstellen von Bindungen f r das Safari Webprogramm 39 2009 06 09 2009 Apple Inc All Rights Reserved 40 KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Hinweis Wird in dem grauen Tastensymbol neben der Eigenschaft t i t 1 e ein anderer Text angezeigt
4. Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten In dieser Einf hrung wird beschrieben wie Sie mithilfe von Dashcode Version 3 0 oder neuer ein Projekt erstellen mit dem zwei Produkte gleichzeitig entwickelt werden k nnen ein Safari Webprogramm und ein spezielles mobiles Safari Webprogramm Ein Safari Webprogramm ist ein dedizierter Teil einer Website der Safari Benutzern interaktive und eigenstandige Funktionen bereitstellt Bei einem mobilen Safari Webprogramm das auch iPhone Webprogramm genannt wird handelt es sich um Webinhalte die f r Safari auf dem iPhone optimiert sind und den Benutzern von iPhone OS basierenden Ger ten interaktive und eigenst ndige Funktionen bereitstellt In dieser schrittweisen Einf hrung werden Sie Folgendes lernen m Konfigurieren und Verwenden eines Projekts mit dem zwei Produkte entwickelt werden m Anpassen der Benutzeroberfl che f r beide Produkte m Festlegen einer Datenquelle m Verwenden von Bindungen zur automatischen Aktualisierung der Benutzeroberfl chen der beiden Produkte mit den vom Server bereitgestellten Daten Bei dieser Einf hrung handelt es sich um die dritte Einf hrung im vorliegenden Dokument Wenn Sie zun chst ein Dashboard Widget entwickeln m chten sollten Sie die erste Einf hrung Einf hrung in die Erstellung eines Dashboard Widgets Seite 13 lesen Wenn Sie ein mobiles Safari Webprogramm und nicht ein Safari Webprogramm f r Compu
5. m getCurrentView Mit dieser Methode kann die derzeit aktive Ansicht abgerufen werden m getAllViews Mit dieser Methode kann ein JavaScript Array der Ansichten im Stapel Layout abgerufen werden Es empfiehlt sich den Array Index zu verwenden um die n chste Ansicht abzurufen m setCurrentView Diese Methode verwendet die folgenden Parameter a newView Die neue Ansicht die angezeigt werden soll a isReverse Ein boolescher Wert der angibt ob der bergang umgekehrt ausgef hrt werden soll der PUSH bergang definiert beispielsweise einen umgekehrten bergang a makeTopVisible Ein boolescher Wert der angibt dass die neue Ansicht ganz nach oben verschoben werden soll Mit der Methode setCurrentView wird als aktuelle Ansicht die bergebene Ansicht festgelegt der bergang und die Position werden entsprechend festgelegt 100 Geteiltes Layout 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente m setCurrentViewWithTransition Diese Methode hnelt der Methode setCurrentView enth lt aber zus tzlich den Parameter transition nach dem Parameter newV i ew damit ein bergang festgelegt werden kann Weitere Informationen zu Ubergangsobjekten finden Sie im Abschnitt Stapel Layout berg nge Stapel Layout berg nge Das Objekt Transition verarbeitet die berg nge zwischen den Ansichten eines Stapel Layout Containers Standardm ig verarbeitet das Objekt Transition einige berg
6. front Img genannt und w hlen Sie Fenster gt Informationen einblenden Mithilfe des Informationsfensters k nnen Sie die Eigenschaften des ausgew hlten Elements ndern z B Aussehen und Verhalten Klicken Sie oben im Informationsfenster auf das Symbol f r F llung amp Linien die zweite Taste von links Klicken Sie auf den Titel Stil falls dieser nicht bereits ausgew hlt ist um die momentanen Werte f r die F llung die Linien die Eckenabrundung und die Deckkraft einzublenden Klicken Sie auf das Farbfeld und w hlen Sie eine neue Farbe im angezeigten Fenster Farben aus Probieren Sie verschiedene F lllungen aus bis Sie die passende Kombination gefunden haben Wenn Sie andere Effekte ndern m chten etwa den Glaseffekt klicken Sie auf den Titel Effekte um diese Werte einzublenden vlg Abbildung 1 4 Abbildung 1 4 Anpassen des Vorderseitenbilds mit dem Informationsfenster F llung amp Linien Farbe amp Muster frontimg mem T 0 Stil Effekte M Glas Glanz a 35 8 Ton o x D ele 00 J 0 Horizont s pr Zi j AGE STUNDEN MIN SEK 75 gt gt Kr mmung Ere tel r o 15 2 M Einschnitt Tiefe nf Schatten u 19 2 Hervorhebung A J mn 30 Nachdem Sie den Hauptteil des Widgets angepasst haben k nnen Sie ein Foto von sich aus iPhoto zum Widget hinzuf gen Sie k nnen ber das Fenster Bibliothek auf Ihre iPhoto Mediathek
7. gt ber eine eigene Dashboard Umgebung die zum Ausf hren und Testen eines Widgets genutzt werden kann ohne dass das Widget in Dashboard ge ffnet werden muss Dar ber hinaus verf gt Dashcode ber ein Simulationsprogramm mit dem Safari und Safari auf dem iPhone simuliert werden k nnen damit Sie beide Produkte auf einfache Weise testen k nnen wenn Sie an einem Projekt arbeiten mit dem zwei Webprogramme erstellt werden Hinweis Wenn auf dem Computer auf dem Dashcode ausgef hrt wird auch das iPhone SDK installiert ist ffnet Dashcode das iPhone Simulationsprogramm wenn Sie ein mobiles Safari Webprogramm ausf hren Ist SDK nicht installiert wird das mobile Safari Webprogramm im Dashcode Simulationsprogramm ge ffnet Neben der M glichkeit Widgets und Webprogramme auszuf hren bietet Dashcode auch Tools die Sie beim Debugging und Beheben von potenziellen Fehlern unterst tzen Dieses Kapitel enth lt Informationen ber die Ablaufverfolgung von Ereignissen Events und ber die Pr fung von Variablenwerten w hrend der Ausf hrung eines Widgets oder Webprogramms Ferner finden Sie hier Informationen zur Bereitstellung eines Widgets und eines Webprogramms Testen eines Widgets oder Webprogramms W hlen Sie Debug gt Ausf hren oder klicken Sie in der Symbolleiste auf Ausf hren um ein Widget oder ein Webprogramm in Dashcode auszuf hren Abh ngig von der Art Ihres Projekts geschieht daraufhin Folgendes m Bei Wi
8. im Navigationsbereich ausw hlen Stellen Sie sicher dass Sie in den folgenden Abschnitten sofern verf gbar die entsprechenden Werte eingeben Identifikation Die Werte in diesem Abschnitt werden zur detaillierten Identifizierung des Widgets verwendet Die angegebene Widget Identifizierung wird von Dashboard verwendet um das Widget von anderen Widgets unterscheiden zu k nnen Widget Identifizierungen werden in der Regel in umgekehrter Domain Notation angegeben und beginnen mit der Domain der obersten Ebene wie beispielsweise com gefolgt vom Namen des Unternehmens bzw des Erstellers wie etwa apple und einem eindeutigen Produktnamen wie my fabulous widget Daraus ergibt sich dann die Widget Identifizierung com apple my fabulous widget Dar ber hinaus muss auch eine eindeutige Versionsnummer eingegeben werden Diese Nummer wird von Dashboard verwendet um unterschiedliche Versionen eines Widgets unterscheiden zu k nnen damit immer die aktuellste Version ausgef hrt wird Hinweis Die Felder Widget Identifizierung und Version entsprechen den Werten CFBundleldentifier und CFBundleVersion in der Datei Info plist wie unter Dashboard Info plist Keys beschrieben Eigenschaften In diesem Abschnitt finden Sie alle vorlagenspezifischen Optionen Wenn Sie ein importiertes oder ge ffnetes Widget oder die Vorlage Leer verwenden fehlt dieser Abschnitt Im Kapitel Erstellen eines Projekts mithilfe eines vorhandenen Dashboard W
9. klicken Sie auf Platzieren und w hlen Sie die Bilddatei aus Sobald das Bild platziert ist k nnen Sie es bewegen und in der Gr e ver ndern Importieren Wenn Sie ein bestimmtes Bild als Webprogramm Symbol verwenden m chten k nnen Sie auf Importieren klicken und das gew nschte Bild im daraufhin angezeigten Dialogfenster ausw hlen In externem Editor ffnen Wenn Sie das Webprogramm Symbol in einem anderen Programm anpassen m chten k nnen Sie auf In externem Editor ffnen klicken Das Symbol wird daraufhin in Ihrem standardm igen PNG f higen Programm ge ffnet Entwerfen eines Favicons 60 Ein Safari Webprogramm sollte ein Favicon haben eine Abk rzung f r Favorite Icon damit es im Browser visuell identifiziert werden kann In der Regel zeigt ein Browser der Favicons unterst tzt diese im Adressfeld und in den Lesezeichen sowie in Verlaufslisten an Ein Browser der das Browsen mithilfe von Tabs unterst tzt zeigt das Favicon unter Umst nden auch neben dem Namen des Webprogramms im Tab an Wenn Sie ein charakteristisches Favicon bereitstellen k nnen die Benutzer Ihr Webprogramm leicht erkennen Sie k nnen das Favicon im Favicon Symboldesigner festlegen Klicken Sie im Navigationsbereich auf Favicon um den Favicon Symboldesigner einzublenden Favicons k nnen in zwei Gr en erstellt werden 32 x 32 Pixel und 16 x 16 Pixel Die kleineren Favicons k nnen von allen Browsern verwendet werden die Favicons
10. sollten Sie die Bindung l schen indem Sie auf das L schsymbol links im Tastensymbol klicken und die beschriebenen Schritte erneut ausf hren Das L schsymbol ist ein X Sie k nnen Fehler beim Binden von Objekten vermeiden indem Sie darauf achten dass in dem kleinen grauen Feld das angezeigt wird wenn Sie den Mauszeiger ber den Arbeitsbereich bewegen der Name des richtigen Objekts angezeigt wird Erstellen der restlichen Bindungen Sie m ssen nun Bindungen zu den Elementen in der Detailansicht Ihres Safari Webprogramms erstellen Obwohl diese neuen Bindungen zwischen unterschiedlichen Eigenschaften der Datenquelle und unterschiedlichen Elemente erstellt werden ist die Vorgehensweise hnlich wie in den Schritten 2 bis 5 im Abschnitt Erstellen der ersten Bindung Seite 38 Die neuen Bindungen m ssen f r Eigenschaften der Datenquelle itemsList erstellt werden Blenden Sie das Datenmodell f r diese Datenquelle ein indem Sie in der Liste Datenquellen auf den Eintrag itemsList klicken Die vier neuen Bindungen die erstellt werden m ssen sind nachfolgend beschrieben Es ist nicht erforderlich die Bindungen in der angegebenen Reihenfolge zu erstellen aber Sie m ssen alle Bindungen unter Verwendung der hier angegebenen Eigenschaften und Objekte erstellen Vergewissern Sie sich zun chst dass das Dreiecksymbol neben der Eigenschaft selection nach unten weist da sich alle Eigenschaften die im Folgenden verwendet we
11. um den Breakpoint vor bergehend zu deaktivieren Die Farbe des Pfeil ndert sich von blau in grau Bewegen Sie den Breakpoint aus dem Randbereich um ihn zu entfernen Pr fen von Speicherwerten 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 7 Testen und Bereitstellen Dar ber hinaus k nnen Sie einen Breakpoint auch mithilfe eines speziellen Breakpoints Fensters definieren Sie k nnen das Breakpoints Fenster entweder durch Doppelklicken auf den Rand oder durch Auswahl von Debug gt Breakpoints Fenster einblenden anzeigen Klicken Sie im Breakpoints Fenster auf die Plustaste und geben Sie entweder einen Dateinamen und eine Zeilennummer oder einen Funktionsnamen an bei dem der Breakpoint eingef gt werden soll Wenn Sie beispielsweise bei Datei Untitled js in Zeile 42 einen Breakpoint definieren m chten w rden Sie Untitled js 42 eingeben Alternativ dazu k nnen Sie auch den Namen der Funktion angeben bei der eine Unterbrechung erfolgen soll zum Beispiel showFront in einem Widget Neben dem Breakpoint k nnen Sie auch eine Bedingung f r den Breakpoint angeben Eine Bedingung ist eine JavaScript Anweisung die entweder den Wert true oder false annimmt Nimmt die Bedingung den Wert true an wenn bei der Ausf hrung der Breakpoint bergeben wird wird die Ausf hrung unterbrochen Im Breakpoints Fenster k nnen Sie einen Breakpoint entfernen indem Sie ihn in der Tabelle ausw hlen und auf die Minustaste k
12. var name dsource selection valueForKey name document location http www google com search client googlet amp q name Mit diesen Codezeilen werden die folgenden Aktionen ausgel st m Mit der ersten Codezeile wird eine lokale Variable mit der Bezeichnung dsource erstellt Dieser Variablen wird der Wert der Datenquelle mit der Bezeichnung 1 ist zugewiesen In der Vorlage Browser liefert die Datenquelle 1 ist die Detailseite mit den statischen Informationen ber den ausgewahlten Park m Mit der zweiten Codezeile wird eine lokale Variable mit der Bezeichnung name erstellt Dieser Variablen wird der Wert der Eigenschaft name des ausgew hlten Parks zugewiesen In einer Datenquelle wird jede Datenkategorie durch eine andere Eigenschaft dargestellt In der Datenquelle 1 ist enth lt die Eigenschaft name den Namen des ausgew hlten Parks m Mit der dritten Codezeile wird das Webprogramm angewiesen die Suchergebnisse f r den Park anzuzeigen der mit der Eigenschaft name angegeben wird Hinweis Sie ben tigen keine speziellen Kenntnisse ber Datenquellen oder Eigenschaften um diese Einf hrung abzuschlie en Eine ausf hrliche Beschreibung dieser Begriffe finden Sie im Abschnitt Anzeigen der Datenquellen und Bindungen eines Projekts Seite 64 Nachdem Sie den Code f r den Event Handler der Taste hinzugef gt haben sollte der Code im Quellcode Editor wie in Abbildung 2 4 dargestellt aussehen Abbildung 2 4 Hi
13. 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten 3 Kopieren Sie die folgende URL Adresse und setzen Sie die Adresse in das Feld URL oben in der Datenmodellansicht ein http www apple com trailers home xml current xml 4 Klicken Sie auf die Taste Neu laden gebogener Pfeil die sich rechts neben dem Feld URL befindet oder drticken Sie den Zeilenschalter Wenn Sie die URL Adresse richtig eingegeben haben aktualisiert Dashcode die Datenmodellansicht und zeigt die Struktur der neuen Datenquelle an sowie einige aktuelle Filmtrailerdaten der Apple Website Sehen Sie sich das Datenmodell nun etwas genauer an Sie werden feststellen dass es sich um eine hierarchische Struktur handelt Jeder Teil der Hierarchie ist eine Eigenschaft und wird in einer separaten Zeile angezeigt Enth lt eine Eigenschaft weitere Eigenschaften befindet sich links neben ihrem Namen ein Dreiecksymbol Im Datenmodell werden auch die Bindungen und die Bindungssteuerelemente angezeigt In Abbildung 3 7 sehen Sie rechts neben der Eigenschaft content auf der obersten Hierarchieebene ein graues Tastensymbol mit der Aufschrift i temsList dataArray Dieses Tastensymbol steht stellvertretend f r eine bestehende Bindung die Dashcode standardm ig ber die Vorlage Browser herstellt Das bedeutet dass das Objekt itemsList im Arbeitsbereich seine Informationen von der Eigenschaf
14. 09 2009 Apple Inc All Rights Reserved Kapitel 7 Kapitel 8 Anhang A INHALT Hinzuf gen oder Entfernen eines Webprogramms 71 Hinzuf gen von Code f r eigene Controller 72 Codevervollst ndigung mit Code Sense 72 Codebausteine 73 Hinzuf gen und Bewegen von Dateien und Ordnern 73 Ressourcenzugriff f r Widgets 74 Einstellungen f r die Codebearbeitung 75 Testen und Bereitstellen 77 Testen eines Widgets oder Webprogramms 77 Ausf hrungsprotokoll und Tracing 79 Pause und schrittweise Ausf hrung 79 Pr fen von Speicherwerten 80 Breakpoints Unterbrechungspunkte 80 Codeauswertung 81 Bereitstellen eines Widgets 81 Bereitstellen eines Webprogramms 82 Erweiterte Themen zu Widgets 85 Lokalisierung 85 Plug Ins f r Widgets 85 Dashcode Vorlagen 87 Widget Vorlagen 87 Die Widget Vorlage Leer 87 Vorlage Countdown 87 Vorlage Karten 88 Die Widget Vorlage RSS 88 Die Widget Vorlage Podcast 89 Vorlage Photocast 89 Vorlage Quartz Composer 89 Vorlage Video Podcast 90 Vorlage Messger t 90 Vorlage T glicher RSS Feed 90 Webprogramm Vorlagen 91 Die Webprogramm Vorlage Leer 91 Die Vorlage Browser 91 Die Webprogramm Vorlage Podcast 91 Die Webprogramm Vorlage RSS 92 Die Vorlage Dienstprogramm 92 2009 06 09 2009 Apple Inc All Rights Reserved INHALT Anhang B Uberarbeitungen Dashcode Elemente 93 Aktivit tsanzeige 93 Zur ck Taste 93 Box 94 Browser 94 Arbeitsbereic
15. Attribute k nnen Sie einen Ort angeben der standardm ig angezeigt wird wenn Benutzer auf die Taste tippen Das Element Kartentaste umfasst JavaScript Code f r die Ausf hrung einiger Standardaktionen etwa Methoden zum Abrufen und Festlegen der anzuzeigenden Adresse Ist die Taste aktiviert wird standardm ig eine Karte f r den derzeit angegebenen Ort angezeigt Mit der Methode setAddress k nnen Sie festlegen dass Benutzer den Ort auf der Karte dynamisch ndern k nnen Quartz Composer Bei dem Element Quartz Composer handelt es sich um einen Bereich der eine Quartz Composer Komposition enth lt Wenn Sie eine Komposition w hrend der Ausf hrung eines Widgets ndern m chten verwenden Sie die JavaScript API des Quartz Composer Webkit Plug Ins Weitere Informationen ber die JavaScript APl des Quartz Composer Webkit Plug Ins finden Sie im Dokument Quartz Composer WebKit Plug in JavaScript Reference QuickTime Hinweis Das Element QuickTime ist in Dashcode 3 0 nicht mehr verf gbar Es wird in bereits bestehenden Projekten nach wie vor unterst tzt ist aber in der Bibliothek nicht mehr vorhanden Im Abschnitt Video Seite 103 finden Sie Informationen zu einem hnlichen Element das sie stattdessen verwenden k nnen Bei dem Element QuickTime handelt es sich um einen Bereich der f r die Wiedergabe von QuickTime Medien verwendet wird Verwenden Sie die QuickTime JavaScript Methoden um die Wiedergabe eines
16. Bild an der richtigen Position befindet k nnen Sie das Element Bild l schen und den Vorgang wiederholen Passen Sie die Gr e des Elements Bild mithilfe der Aktivpunkte an bis es optimal im wei en Feld platziert ist Das Projektfenster m sste nun hnlich wie in Abbildung 3 9 aussehen Anpassen der Benutzeroberfl che des mobilen Safari Webprogramms 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Abbildung3 9 Arbeitsbereich des mobilen Safari Webprogramms nach dem Hinzuf gen des Elements Bild zur Detailseite e00 MeinKinoTrailerProjekt oO Safari Mobile Safari TE QE QE v EM Ohne mner 100 vB browser Ei header Y BQ stackLayout BE listtevei BB deraillevei Y E detail ox GR detailTitie GR detailSubtitie T detailDescription D o coer Title Location Description per lt gt rrr Er TT 100 Arbeitsablauf Oberfl che gestalten COD Bewegen Sie Objekte aus der Bibliothek in den Arbeitsbereich und ndern Sie die Eigenschaften der Objekte in den Informationen F gen Sie zus tzliche Browser Ebenen in den Attribut Informationen hinzu Bibliothek Arbeitsbereich Informationen Als erledigt markieren J rrer rrer 400 300 200 Daten anpassen Handler amp Code hinzuf gen Attribute festlegen Webclip Symbol entwerf
17. F r Webprogramme die im Vollbildmodus ausgef hrt werden k nnen ist ein Webclip Symbol unverzichtbar Die Benutzer k nnen ein Webprogramm nur im Vollbildmodus ausf hren wenn Sie auf das Webclip Symbol tippen Weitere Informationen zu den Modi in denen Ihr Webprogramm ausgef hrt werden kann finden Sie im Abschnitt Programmattribute f r mobile Safari Webprogramme Seite 50 Hinweis Da das iPhone und der iPod touch dem von Ihnen bereitgestellten Symbol automatisch die entsprechende Rundung der Ecken und den Schattenwurf hinzuf gt sollten Sie diese Effekte nicht selbst hinzuf gen Sie k nnen jedoch steuern ob automatisch ein Glaseffekt hinzugef gt wird indem Sie den entsprechenden Wert im Bereich Programmattribute eingeben weitere Informationen hierzu finden Sie im Abschnitt Programmattribute f r mobile Safari Webprogramme Seite 50 Sie k nnen das Symbol Ihres Programms mithilfe des Webclip Symboldesigners entwerfen Klicken Sie im Navigationsbereich auf Webclip Symbol um den Webclip Symboldesigner einzublenden Blenden Sie das Informationsfenster F llung amp Linien ein um das Aussehen des Hauptteils des Symbols anzupassen Sie k nnen die Art der F llung die Deckkraft und den Linienstil anpassen Die Symbolleiste unten im Webclip Symboldesigner bietet zus tzliche Konfigurationsoptionen f r diese Symbole Platzieren Wenn Sie ein Bild wie etwa ein Logo auf dem Webprogramm Symbol platzieren m chten
18. Informationen hierzu finden Sie im Abschnitt Hinzuf gen und Bewegen von Dateien und Ordnern Seite 73 Hinweis Wenn Sie den Namen einer Datei ndern m ssen Sie auch alle Referenzen auf diese Datei entsprechend ndern Dateireferenzen befinden sich in der Regel in den HTML Dateien und im Falle von Widgets in der Datei Info plist berpr fen Sie diese Dateien und aktualisieren Sie alle Referenzen auf alte Dateinamen Wenn Sie eine HTML CSS JavaScript oder plist Datei in der Liste Dateien ausw hlen wird der Quellcode Editor mit dem Inhalt der ausgew hlten Datei unterhalb des Arbeitsbereichs angezeigt Im Quellcode Editor k nnen Sie die HTML CSS und JavaScript Dateien bearbeiten die Ihr Widget oder Webprogramm implementieren Weitere Informationen ber die Codierung mit HTML CSS und JavaScript finden Sie im Abschnitt Verwenden von HTML CSS und JavaScript Programmierschnittstellen Seite 66 ber dem Textbereich des Quellcode Editors sehen Sie zwei Einblendmen s links befindet sich ein Einblendmen mit dem Dateiverlauf und rechts daneben in einigen F llen ein Einblendmen mit den Funktionen Im Einblendmen mit dem Dateiverlauf werden die Textdateien und Datenquellen angezeigt die Sie zuletzt im Quellcode Editor bearbeitet oder angezeigt haben Wenn Sie aus diesem Einblendmen Anzeigen des Quellcodes eines Projekts 63 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen vo
19. Sie Debug gt In die Unterroutine oder klicken Sie in der Symbolleiste auf In die Unterroutine um die n chste Codezeile auszuf hren und zu den Funktionsaufrufen zu verzweigen um zu sehen welche Auswirkungen die betreffende Codezeile hat N chster Schritt Wahlen Sie Debug gt N chster Schritt oder klicken Sie in der Symbolleiste auf N chster Schritt um die n chste Codezeile auszuf hren um zu sehen welche Auswirkungen die betreffende Codezeile hat Bis zum Ende W hlen Sie Debug gt Bis zum Ende oder klicken Sie in der Symbolleiste auf Bis zum Ende um die aktuelle Funktion bis zum Ende auszuf hren Die Ausf hrung wird angehalten wenn die Funktion beendet ist damit Sie die zugeh rigen Variablen pr fen k nnen bevor diese bergeben werden Die Ausf hrung wird angehalten sobald eine Ausnahmebedingung auftritt In diesem Fall wird die Ausf hrung des Webprogramms oder Widgets angehalten und dem Ausf hrungsprotokoll wird ein Eintrag hinzugef gt der das Problem beschreibt Wenn Sie auf den Eintrag klicken wird die Codezeile hervorgehoben in der die Ausnahme ausgel st wurde Diese Option ist standardm ig aktiviert Sie k nnen diese Option deaktivieren indem Sie das H kchen neben Debug gt Unterbrechung bei Ausnahmen entfernen Pr fen von Speicherwerten In der Stackframes amp Variablen Tabelle wird der Wert der Variablen angezeigt die ein Widget oder Webprogramm verwendet Wird das Widget b
20. Sie die Werte von Variablen pr fen m chten Wenn Sie die Ausf hrung anhalten m chten w hlen Sie Debug gt Anhalten oder klicken Sie in der Symbolleiste auf Pause Wenn das Widget oder Webprogramm angehalten ist wird das Ausf hrungsprotokoll durch die Stackframes amp Variablen Tabelle ersetzt Sie k nnen nun die Werte von Variablen der aktuellen Funktion sowie die Werte der globalen Variablen pr fen Die Codezeile bei der die Ausf hrung angehalten wurde wird im Quellcode Editor hervorgehoben Mithilfe der Symbole unterhalb des Quellcode Editors k nnen Sie eine Hierarchie der Funktionen anzeigen die zu der momentan ausgef hrten Funktion f hrt Wenn Sie innerhalb der Hierarchie auf den Namen einer anderen Funktion klicken werden die Variablen dieser Funktion in der Stackframes amp Variablen Tabelle angezeigt Der zugeh rige Code ist im Quellcode Editor zu sehen Sie k nnen auch nach einer spezifischen Variable suchen indem Sie den Variablennamen in das Suchfeld in der Symbolleiste eingeben Wenn Sie die Variablen gepr ft haben k nnen Sie die Ausf hrung des Widgets oder Webprogramms wie folgt fortsetzen Ausf hrungsprotokoll und Tracing 79 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 7 Testen und Bereitstellen Fortsetzen Wahlen Sie Debug gt Fortsetzen oder klicken Sie in der Symbolleiste auf Fortsetzen um die Ausf hrung ohne Unterbrechung fortzusetzen In die Unterroutine Wahlen
21. Sie k nnen auch im Suchfeld das sich unten im Fenster Bibliothek befindet den Begriff Bild eingeben Bewegen Sie das Element Bild in den Arbeitsbereich und platzieren Sie es links neben dem Objekt Description das Sie zuvor verschoben haben Verwenden Sie die Aktivpunkte auf der Rahmenlinie des Elements Bild um die Gr e des Elements wie gew nscht anzupassen Bevor Sie den oberen Rand des Bildes mit dem oberen Rand der Beschreibung ausrichten m ssen Sie die Art und Weise ndern wie Dashcode das Bild im Verh ltnis zu den anderen Elemente im Arbeitsbereich anzeigt Gehen Sie wie folgt vor 1 Klicken Sie in der Symbolleiste von Dashcode auf die blaue Informationstaste um das Informationsfenster zu ffnen Sie k nnen auch Fenster gt Informationen einblenden ausw hlen ffnen Sie das Informationsfenster Ma e indem Sie in der Symbolleiste des Informationsfenster auf die Taste mit dem kleinen Lineal klicken 2 Wahlen Sie das Element Bild im Arbeitsbereich aus Der Titel des Informationsfensters ndert sich in Ma e image 3 W hlen Sie im Abschnitt Layout des Informationsfensters Ma e die Option Absolut im Einblendmen Verschieben Sie anschlie end das Element Bild so dass seine obere Kante mit der oberen Kante des Objekts Description ausgerichtet ist Bewegen Sie dabei die Mitte des Elements Bild nicht die Aktivpunkte Wechseln Sie zur ck zur Bibliothek und suchen Sie nach dem Element V
22. Vorlagen Hinweis Widgets die mit der Vorlage Quartz Composer erstellt werden sind mit Mac OS X 10 4 7 und neuer kompatibel Vorlage Video Podcast Mit der Vorlage Video Podcast wird ein Widget erstellt das Episoden eines Video Podcasts anzeigt und abspielt Sie k nnen diese Vorlage anpassen indem Sie das Design im Arbeitsbereich ndern und eine URL Adresse f r den Video Podcast angeben den das Widget abspielen soll Legen Sie den Video Podcast Feed und weitere Attribute fest indem Sie im Navigationsbereich auf Widget Attribute klicken und die im Abschnitt Eigenschaften verf gbaren Optionen anpassen Folgende Optionen stehen zur Verf gung Podcast URL Setzen Sie die URL Adresse f r einen Video Podcast ein Aktualisierungen suchen Geben Sie an wie oft das Widget pr fen soll ob neue Episoden verf gbar sind Vorlage Messger t Mit der Vorlage Messger t wird ein Widget mit Skalenmarkierungen Zeiger und Statusanzeigen erstellt das f r diverse Kontrollfunktionen eingesetzt werden kann Zum ndern der Datenquellen f r das Zeigerinstrument und die Statusanzeigen k nnen Sie die Datei CommandMonitor js in der Liste Dateien ausw hlen und Quellcode hinzuf gen der die gew nschten Datenquellen interpretiert und die Ergebnisse an das Zeigerinstrument und die Statusanzeigen weiterleitet Vorlage T glicher RSS Feed Mit der Vorlage T glicher RSS Feed wird ein Widget erstellt das einzelne Artikel o
23. anzuzeigen Einige dieser Komponenten die Dashcode Elemente genannt werden k nnen ber den Programmcode angepasst werden F r die Elemente die ber den Programmcode angepasst werden k nnen finden Sie in diesem Anhang einige empfohlene Vorgehensweisen Blenden Sie im Navigationsbereich die Liste Dateien ein und w hlen Sie die gew nschte Datei aus um den Programmcode anzuzeigen ber den die einzelnen Elementen implementiert werden Hinweis Wenn Sie in Dashcode Version 3 0 und neuer ein Element anpassen m chten k nnen Sie nderungen am Programmcode in der Regel vermeiden indem Sie die Anpassungen stattdessen mithilfe der Datenquellen und Bindungen vornehmen Ausf hrliche Informationen hierzu finden Sie in den Abschnitten Hinzuf gen einer Datenquelle Seite 66 und Erstellen von Bindungen Seite 67 Einige Elemente in diesem Anhang sind speziell f r die Verwendung in Webprogrammen nicht in Widgets konzipiert und sind entsprechend gekennzeichnet Nachdem Sie ein Element zum Arbeitsbereich hinzugef gt haben k nnen Sie seine Attribute mithilfe des Informationsfensters Attribute ndern mithilfe des Informationsfensters Bindungen die erforderlichen Bindungen definieren und mithilfe des Informationsfensters Behaviors Event Handler zuweisen Eine ausf hrliche Beschreibung der Informationsfenster finden Sie im Abschnitt ndern der Eigenschaften eines Elements bzw Objekts Seite 54 Aktivit tsa
24. bis das Objekt det ai 1Box hervorgehoben wird und eine blaue Linie unter dem Objekt image angezeigt wird 4 Lassen Sie die Maustaste los Das Objekt vi deo befindet sich im Navigationsbereich nun direkt unter dem Objekt image Nachdem Sie die neuen Elemente entsprechend platziert haben m sste das Projektfenster hnlich wie das Projektfenster in Abbildung 3 6 aussehen Beachten Sie die Positionen der Objekte image und video im Navigationsbereich Anpassen der Benutzeroberflache des Safari Webprogramms 35 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Abbildung 3 6 Der Arbeitsbereich des Safari Webprogramms nach dem Hinzuf gen der neuen Elemente e0900 MeinKinoTrailerProjekt ow m N aa Ausf hren Pause Darstellung Informationen Bibliothek Suchen zl MeinKinoTrailerProjekt E splitLayout masterView E splitter a Description E detailview E detail8ox BE detailHeader E line T detailDescription image 100 Arbeitsablauf Oberfl che gestalten COT E Bewegen Sie Objekte aus der Bibliothek in den Arbeitsbereich und andern Sie die Eigenschaften der Objekte in den Informationen Andern Sie die Ausrichtung des geteilten Layouts Bibliothek Arbeitsbereich Informationen 2 Als erledigt markieren Daten anpassen Erforderlich Handler amp Code hinzuf gen T 500 vO au Attribute fe
25. dass Webseiten nur Informationen von den Internet Domains anfordern d rfen von denen sie stammen Wenn Sie ein Webprogramm erstellen das Informationen von anderen Websites abruft m ssen Sie in Dashcode angeben dass das Programm auf dem betreffenden Server simuliert werden soll wie im Abschnitt Testen eines Widgets oder Webprogramms Seite 77 beschrieben Sie haben die M glichkeit Ihren Webserver anders zu konfigurieren und das Webprogramm zu ndern sodass Informationen von anderen Websites abgerufen werden k nnen Die Anleitungen hierzu gehen jedoch ber den Rahmen dieses Dokuments hinaus Wenden Sie sich bei Bedarf an den Administrator Ihres Webservers Bereitstellen eines Webprogramms 83 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 7 Testen und Bereitstellen 84 Bereitstellen eines Webprogramms 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 8 Erweiterte Themen zu Widgets Neben den Kernfunktionen zum Entwerfen Codieren und Testen eines Widgets bietet Dashcode zus tzliche weiterf hrende Funktionen zur Entwicklung von ma geschneiderten Widgets In diesem Kapitel werden neben Lokalisierungsverfahren auch die M glichkeiten zur Integration eines in Objective C geschriebenen Plug Ins beschrieben Lokalisierung Im Abschnitt Lokalisierung der Widget Attribute k nnen Sie bersetzte Zeichenfolgen f r Ihr Widget eingeben W hlen Sie Widget Attribute im Navigationsbereich um d
26. den Seiten zu wechseln Werden die Objekte front und back im Navigationsbereich nicht angezeigt k nnen Sie auf das Dreiecksymbol neben dem Namen des Widgets klicken Entwerfen der Oberfl che 53 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Wenn eine Seite im Arbeitsbereich sichtbar ist k nnen Sie Elemente zu dieser Seite hinzuf gen bzw neu anordnen Klicken Sie im Navigationsbereich auf den entsprechenden Namen um mit der jeweils anderen Seite zu arbeiten Hinzuf gen von Elementen zu einer Widget Benutzeroberfl che Dashcode stellt Ihnen eine Reihe von Steuerelementen Formen und Darstellungsmodi Views zur Verf gung die Elemente genannt werden W hlen Sie Fenster gt Bibliothek einblenden und klicken Sie auf Elemente um die in Dashcode verf gbaren Elemente anzuzeigen Einige Elemente sind nur f r bestimmte Produkte geeignet Aus diesem Grund werden im Fenster Bibliothek nur die Elemente angezeigt die in dem Produkt verwendet werden k nnen das im momentan aktiven Projekt ausgew hlt wurde In Dashcode 3 0 werden beispielsweise unterschiedliche Elemente angezeigt wenn Sie in Ihrem Projekt zwischen dem Safari Webprogramm und dem mobilen Safari Webprogramm umschalten Dar ber hinaus werden bei einem Projekt mit dem ein Webprogramm erstellt wird andere Elemente angezeigt als bei einem Projekt mit dem ein Widget erstellt w
27. die Benutzer Ihr Webprogramm auch noch verwenden k nnen wenn keine Verbindung mehr zum Netzwerk besteht Wenn Sie dieses Markierungsfeld aktivieren sollten Sie unbedingt den Abschnitt Unterst tzen der Offline Nutzung eines Webprogramms Seite 70 lesen um die Voraussetzungen f r den Offline Betrieb Ihres Webprogramms zu pr fen Bereitstellen von Attributen f r ein Webprogramm 49 2009 06 09 2009 Apple Inc All Rights Reserved 50 KAPITEL 4 Starten eines Projekts Programmattribute f r mobile Safari Webprogramme Wenn Sie in Dashcode 3 0 oder neuer die Programmattribute f r ein mobiles Safari Webprogramm festlegen das Teil eines Projekts ist mit dem zwei Produkte entwickelt werden m ssen Sie zun chst sicherstellen dass die Taste Mobile Safari in der Produktleiste ausgew hlt ist Wenn Sie mit Dashcode Version 3 0 oder neuer ausschlie lich ein mobiles Safari Webprogramm entwickeln oder wenn Sie eine fr here Version von Dashcode verwenden ist dieser Schritt nicht erforderlich Geben Sie in den folgenden Abschnitten des Bereichs Programmattribute sofern verf gbar die entsprechenden Werte ein Allgemein Der Wert f r Seitentitel wird zur Kennzeichnung des mobilen Safari Webprogramms verwendet Geben Sie im Feld Seitentitel einen aussagekr ftigen visuell lesbaren Namen f r Ihr Webprogramm ein Der angegebene Titel bildet ist das Objekt lt tit1e gt Ihrer Webseite und wird in der Titelleiste von S
28. f r alle Versionen von Mac OS X 10 4 bereitgestellt werden soll In den meisten F llen empfiehlt es sich ein Widget f r die Nutzung in Mac OS X 10 4 3 oder neuer bereitzustellen da hierbei kleinere Widgets generiert werden Wenn Sie Ihr Widget beispielsweise per E Mail versenden wollen klicken Sie im Bereich Ausf hren amp Freigeben auf die Taste Auf der Festplatte sichern und w hlen den gew nschten Speicherort aus M chten Sie sicherstellen dass Ihr Widget Projekt vor dem Bereitstellen automatisch auf der Festplatte gesichert wird markieren Sie das Feld Projekt vor dem Bereitstellen auf der Festplatte sichern Beachten Sie bitte dass dieses Feld erst verf gbar ist nachdem Sie das Widget Projekt einmal gesichert haben W hlen Sie Ablage gt Widget f r Dashboard bereitstellen wenn das Widget ausschlie lich zum Eigengebrauch verwendet wird Das Widget wird in diesem Fall auf Ihrem Computer installiert Codeauswertung 81 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 7 Testen und Bereitstellen Bereitstellen eines Webprogramms Wenn Sie Ihr Webprogramm bereitstellen m chten k nnen Sie festlegen wo und wie Dashcode den Programmcode und die Ressourcendateien Ihres Programms speichern soll Zu diesen Dateien geh ren alle HTML CSS und JavaScript Dateien Bilddateien und das Webclip Symbol bzw das Favicon f r Ihr Programm Beachten Sie dass Dashcode w hrend der Implementierung einige Dashcode s
29. in der Produktleiste noch immer ausgew hlt ist und klicken Sie auf Ausf hren um Ihr Produkt zu testen Wenn Sie Ihr Webprogramm zum ersten Mal ausf hren seit Sie die Apple Website als Datenquelle dataSource im Abschnitt Festlegen einer Datenquelle und Anzeigen des Datenmodells Seite 36 angegeben haben zeigt Dashcode ein Dialogfenster an in dem Sie gefragt werden ob eine Simulation der Programmausf hrung in der Domain die die Website bereitgestellt erfolgen soll Klicken Sie in diesem Dialogfenster auf Simulieren damit Sie die Daten der Website sehen k nnen Die Anzeige m sste hnlich aussehen wie das in Abbildung 3 1 Seite 28 dargestellte Safari Webprogramm Vermutlich wird jedoch eine andere Liste mit Filmen angezeigt da dies davon abh ngt welche Filmtrailer gerade verf gbar sind Bl ttern Sie durch die Master Liste und w hlen Sie einen Filmtitel aus Klicken Sie auf die Wiedergabetaste des Videoelements um den Trailer f r den ausgew hlten Film zu sehen Testen des Safari Webprogramms 41 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Anpassen der Benutzeroberfl che des mobilen Safari Webprogramms 42 Da das Safari Webprogramm bereits funktionsf hig ist k nnen Sie sich nun dem mobilen Safari Webprogramm zuwenden An der Master Liste auf der ersten Seite m ssen Sie keine nderungen vornehmen Auf der De
30. je nachdem welches Produkt momentan ausgew hlt ist Wenn Sie ein Produkt zu einem Projekt hinzuf gen m chten mit dem nur ein Produkt erstellt wird k nnen Sie Ablage gt Produkt XXX hinzuf gen ausw hlen wobei anstelle von XXX entweder Safari oder Mobile Safari steht und das Produkt angibt das hinzugef gt wird Hinzuf gen von Code f r eigene Controller Wenn Sie ein Webprogramm anpassen m chten indem Sie Darstellungsmodi wie eine Detailansicht ndern oder hinzuf gen sollten Sie auch den Code zur Steuerung dieser Modi hinzuf gen Alle Darstellungsmodi in einem Webprogramm werden durch ein JavaScript Controller Objekt gesteuert Das Controller Objekt bernimmt die Konfiguration der Benutzeroberfl che in dem jeweiligen Darstellungsmodus damit dieser korrekt angezeigt wird und damit alle auftretenden Aktivit ten verarbeitet werden k nnen Wenn Sie ein Element Liste oder Gitter hinzuf gen k nnen Sie einen Controller programmieren der die Daten dynamisch bereitstellt oder Sie k nnen f r die Liste eine Bindung an eine Eigenschaft array in einer Datenquelle definieren Dar ber hinaus k nnen Sie diese Vorgehensweisen auch kombinieren und auf der einen Seite Bindungen verwenden um die Anzahl der Zeilen und die Daten f r jede Zeile abzurufen und auf der anderen Seiten mithilfe eines Controllers die einzelnen Zeilen zu konfigurieren Weitere Informationen ber einige der Elemente die Sie zu Ihrem Webprogramm h
31. selbst einen Namen zuweisen Wenn Sie mit einem neuen Projekt beginnen lautet der Name Ohne Titel Sie legen einen Namen fest indem Sie oben im Navigationsbereich Ohne Titel durch Doppelklicken ausw hlen und den gew nschten Namen eingeben z B Nationalparks Jetzt sollten Sie Ihr Projekt sichern W hlen Sie Ablage gt Sichern um das Projekt zu sichern Geben Sie dem Projekt einen Namen und w hlen Sie einen Speicherort Das Projekt umfasst das Webprogramm und alle Informationen die Dashcode zum Erstellen des Programms ben tigt Testen des Standardprogramms Ihr neues mobiles Safari Webprogramm funktioniert bereits auch wenn es bisher nur Platzhalterdaten umfasst Sie k nnen dies testen indem Sie in der Symbolleiste von Dashcode auf die gr ne Taste Ausf hren klicken alternativ k nnen Sie auch Debug gt Ausf hren w hlen Dashcode ffnet das Webprogramm in einem Simulationsprogramm Hinweis Wenn auf Ihrem Computer das iPhone SDK Software Development Kit installiert ist ffnet Dashcode das mobile Safari Webprogramm im iPhone Simulatorprogramm das von SDK bereitgestellt wird Ist das iPhone SDK auf Ihrem Computer nicht installiert ffnet Dashcode das mobile Safari Webprogramm in seinem eigenen Simulationsprogramm Nehmen Sie sich einen Moment Zeit und probieren Sie das Programm aus In der Kopfzeile der ersten Seite sollte der Titel Parks oder ein anderer von Ihnen gew hlter Titel angezeigt werd
32. und festlegen welcher der beiden Teilbereiche flexibel sein soll flexibel bedeutet in diesem Zusammenhang dass der betreffende Teilbereich komplett ausgeblendet werden kann wenn die Fenstergr e ver ndert wird Stapel Layout Das Element Stapel Layout ist f r die Verwendung in Webprogrammen konzipiert Ein Stapel Layout ist ein Bereich der austauschbare Ansichten Views des Programms enth lt Sie k nnen das Informationsfenster Attribute verwenden um Ansichten zum Stapel Layout hinzuzuf gen und daraus zu entfernen Au erdem k nnen Sie bergangsstile festlegen die beim Austauschen verwendet werden sollen Sie k nnen beispielsweise den bergang zwischen den Ansichten von PUSH bei dem die neue Ansicht die alte Ansicht seitlich wegschiebt in FADE ndern bei der die neue Ansicht ber der alten Ansicht eingeblendet wird Hinweis Auch wenn es m glich ist bestimmte Aspekte wie Farbe Hintergrund oder Textattribute anzupassen wird davon abgeraten das Layout oder die R nder der integrierten Ansichten des Stapel Layouts zu ndern Sollen R nder hinzugef gt werden k nnen Sie eine Box als Teil der Ansicht hinzuf gen und die R nder der Box ndern Stapel Layout Methoden Das Element Stapel Layout umfasst verschiedene Methoden f r den Zugriff auf die enthaltenen untergeordneten Ansichten und das Festlegen von berg ngen zwischen diesen Ansichten Sie k nnen insbesondere die folgenden Methoden verwenden
33. unterst tzen Das Erstellen einer 32 x 32 Pixel Version Ihres Favicon ist optional da diese Gr e von einigen Browsern ignoriert wird die Favicons werden einfach vor dem Anzeigen skaliert Die Symbolleiste unten im Favicon Symboldesigner bietet die folgenden Optionen zum Entwerfen eines Favicons Entwerfen eines Favicons 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Importieren Wenn Sie ein bestimmtes Bild als Favicon verwenden m chten k nnen Sie auf Importieren klicken und das gew nschte Bild im daraufhin angezeigten Dialogfenster ausw hlen In externem Editor ffnen Wenn Sie ein Favicon in einem anderen Programm anpassen m chten k nnen Sie auf In externem Editor ffnen klicken Das Favicon wird daraufhin in Ihrem standardm igen ICO f higen Programm ge ffnet Dashcode aktualisiert das Favicon in Ihrem Projekt wenn Sie die nderungen sichern die Sie im externen Bearbeitungsprogramm vorgenommen haben Entwerfen eines Favicons 61 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms 62 Entwerfen eines Favicons 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Nachdem Sie ein Projekt angelegt und die Benutzeroberflache entworfen haben k nnen Sie die Implementi
34. wird allgemein empfohlen die Option Seitenzoom zu deaktivieren genauer gesagt das Feld Benutzern erlauben den Seiten Zoom anzupassen Webclip Mit den Werten in diesem Abschnitt steuern Sie wie Ihr Webprogramm auf einem iPhone und iPod touch angezeigt wird Dar ber hinaus legen Sie auch fest wie das Symbol f r Ihren Webclip erstellt und angezeigt wird In iPhone OS 2 0 und neuer k nnen Sie Ihr mobiles Safari Webprogramm auch im Vollbildmodus ausf hren in diesem Fall werden die Safari Symbolleiste und die Navigationsleiste ausgeblendet Wenn Sie diese Funktion hinzuf gen m chten m ssen Sie auch ein Symbol f r den Webclip bereitstellen da der Benutzer ein Webprogramm ausschlie lich durch Tippen auf ein Webclip Symbol im Vollbildmodus ffnen kann durch Navigieren zum Programm in Safari auf dem iPhone kann das Programm nicht im Vollbildmodus ge ffnet werden Wenn Sie sich entschieden haben den Bereitstellen von Attributen f r ein Webprogramm 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 4 Starten eines Projekts Vollbildmodus nicht zu unterst tzen sollten Sie die Bereitstellung eines Webclip Symbols trotzdem in Erw gung ziehen damit die Benutzer Ihr Webprogramm auf komfortable Weise ffnen k nnen Aktivieren Sie das Markierungsfeld Als Programm im Vollbildmodus anzeigen Safari Symbolleiste und Navigationsleiste ausblenden um Ihr mobiles Safari Webprogramm im Vollbildmodus verf gbar zu mac
35. wird der gesicherte Projektname angezeigt in diesem Fall MeinKinoTrailerProjekt Sichern und Testen der Standardwebprogramme 31 2009 06 09 2009 Apple Inc All Rights Reserved 32 KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Abbildung 3 3 Das standardm ige Safari Webprogramm im Dashcode Simulationsprogramm 6 606 National Parks Dashcode a gt Le nttp localhost 58272 index htmi come Haleakala Bryce Canyon Hawaii USA Carisbad Caverns The scenery in Haleakala is amazing this time of year Cuyahoga Valley Death Valley Denali Preserve Grand Canyon Joshua Tree Kings Canyon Mesa Verde Shenandoah Yellowstone Yosemite Nachdem Sie das Safari Webprogramm getestet haben k nnen Sie das Simulationsprogramm beenden und mit dem Testen des mobilen Safari Webprogramms beginnen Wahlen Sie dazu Beenden aus dem Programmmen des Simulationsprogramms oder dr cken Sie die Tastenkombination Befehl Q bzw klicken Sie auf das rote Schlie feld das sich oben links im Simulatorfenster befindet Sie k nnen auch in Dashcode auf die rote Stopptaste in der Symbolleiste klicken Gehen Sie wie folgt vor um das mobile Safari Webprogramm zu testen 1 Klicken Sie in der Produktleiste auf die Taste Mobile Safari 2 Klicken Sie in der Dashcode Symbolleiste auf die gr ne Taste Ausf hren oder w hlen Sie Debug gt Ausf hren Hinweis Wenn auf Ihrem Comp
36. wurden mit gebotener Sorgfalt auf ihre Richtigkeit gepr ft Apple bernimmt keine Haftung f r eventuelle Druckfehler Apple Inc 1 Infinite Loop Cupertino CA 95014 408 996 1010 Apple the Apple logo Dashcode iCal iPhoto iPod Mac Mac OS Macintosh Monaco Objective C Quartz QuickTime Safari and Xcode are trademarks of Apple Inc registered in the United States and other countries Finder iPhone and MobileMe are trademarks of Apple Inc Adobe Acrobat and PostScript are trademarks or registered trademarks of Adobe Systems Incorporated in the U S and or other countries Helvetica and Times are registered trademarks of Heidelberger Druckmaschinen AG available from Linotype Library GmbH Java and all Java based trademarks are trademarks or registered trademarks of Sun Microsystems Inc in the U S and other countries Gleichzeitig ver ffentlicht in den USA und in Kanada Obwohl Apple dieses Dokument auf Richtigkeit gepr ft hat SIND APPLE ODER SEINE VERTRETER WEDER AUSDR CKLICH NOCH IMPLIZIT IN KEINEM FALL HAFTBAR F R DEN INHALT DIESES DOKUMENTS SEINE QUALIT T GENAUIGKEIT MARKTF HIGKEIT ODER EIGNUNG F R EINEN BESTIMMTEN ZWECK FOLGLICH ERHALTEN SIE DIESES DOKUMENT OHNE M NGELGEW HR UND SIE DER LESER BERNEHMEN DAS GESAMTE RISIKO HINSICHTLICH SEINER QUALIT T UND GENAUIGKEIT IN KEINEM FALL IST APPLE HAFTBAR F R DIREKTE INDIREKTE BESONDERE ZUF LLIGE SCH DEN ODER FOLGESCH DE
37. zu den Dashcode Vorlagen finden Sie im Kapitel Dashcode Vorlagen Seite 87 In Dashcode Version 3 0 und neuer k nnen Sie ein Safari Webprogramm f r Computersysteme oder ein mobiles Safari Webprogramm oder beides erstellen Standardm ig erstellt Dashcode ein Projekt mit dem zwei Produkte entwickelt werden k nnen Auf diese Weise haben Sie die M glichkeit die gleichen Daten und zum Teil auch den gleichen Programmcode f r die Entwicklung unterschiedlicher Benutzeroberfl chen f r die einzelnen Produkte einzusetzen Wenn Sie mit einem Projekt nur eine Art von Webprogramm erstellen m chten m ssen Sie das Markierungsfeld Entwickeln f r f r den Produkttyp deaktivieren der nicht erstellt werden soll Das Markierungsfeld Entwickeln f r wird zwischen den Vorlagensymbolen und der zugeh rigen Beschreibung angezeigt Nach dem Ausw hlen einer Vorlage m ssen Sie unter Umst nden bestimmte Werte eingeben damit das Widget oder Webprogramm richtig funktioniert Stellen Sie insbesondere bei Widgets sicher dass alle erforderlichen Werte f r die Abschnitte Identifikation und Eigenschaften eingegeben werden Weitere Informationen hierzu finden Sie im Abschnitt Bereitstellen von Attributen f r ein Dashboard Widget Seite 48 Erstellen eines Projekts mithilfe einer Vorlage 47 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 4 Starten eines Projekts Erstellen eines Projekts mithilfe eines vorhandenen Dash
38. zugreifen W hlen Sie Fenster gt Bibliothek einblenden und klicken Sie auf Fotos um die iPhoto Mediathek anzuzeigen Navigieren Sie zum gew nschten Foto und bewegen Sie es auf Ihr Widget das im Arbeitsbereich angezeigt wird Passen Sie die Gr e des Fotos mithilfe der angezeigten Aktivpunkte an Anpassen des Widgets 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 1 Einf hrung in die Erstellung eines Dashboard Widgets Geben Sie anschlie end anstelle von Ereignistitel einen beliebigen Text wie bis zu meinem Geburtstag ein W hlen Sie den Text Ereignistitel aus klicken Sie im Informationsfenster auf das Symbol f r Attribute die linke Taste und geben Sie im Feld Wert den gew nschten Text ein Sie k nnen den Text auch im Hauptteil des Widgets durch Doppelklicken aktivieren und durch den neuen Text ersetzen Hinzuf gen von Funktionen mithilfe von Elementen Nun k nnen Sie zu Ihrem personalisierten Dashboard Widget das einen Countdown bis zu Ihrem Geburtstag anzeigt eine Taste hinzuf gen die direkt zum Apple Store f hrt damit Ihre Freunde und Ihre Familie Ihnen ein Geburtstagsgeschenk kaufen k nnen Hierf r verwenden Sie ein Element Elemente sind Steuerelemente und Darstellungsmodi die Sie in die Oberfl che Ihres Widgets integrieren k nnen W hlen Sie Fenster gt Bibliothek einblenden und klicken Sie auf Elemente Sie k nnen das Suchfeld unten im Fenster verwenden um nach einem b
39. Dashcode Benutzerhandbuch Tools gt Scripting amp Automation 2009 06 09 Apple Inc 2009 Apple Inc Alle Rechte vorbehalten Kein Teil dieser Dokumentation darf ohne vorherige schriftliche Einwilligung von Apple Inc in irgendeiner Form mechanisch elektronisch durch Fotokopie Aufzeichnung oder andere Weise reproduziert zur ckentwickelt oder bertragen werden Es gelten die folgenden Ausnahmen Einzelpersonen sind hierdurch berechtigt die Dokumentation auf einem einzelnen Computer ausschlie lich f r den eigenen Gebrauch zu speichern und Kopien der Dokumentation f r den eigenen Gebrauch zu erstellen vorausgesetzt die Dokumentation enth lt den Apple Copyright Hinweis Das Apple Logo ist eine Marke der Apple Inc Die Verwendung des ber die Tastatur erzeugten Apple Logos Wahl Umschalt K f r kommerzielle Zwecke ohne vorherige schriftliche Einwilligung von Apple kann als Markenmissbrauch und unlauterer Wettbewerb gerichtlich verfolgt werden Apple erteilt Ihnen im Hinblick auf die in diesem Dokument beschriebenen Technologien keine Lizenzen weder durch ausdr ckliche Vereinbarung geschlossene noch implizite Lizenzen Apple beh lt sich alle Urheberrechte im Hinblick auf die in diesem Dokument beschriebenen Technologien vor Dieses Dokument soll Programmentwickler dabei unterst tzen Programme f r Computer zu entwickeln die von Apple hergestellt sind Die Informationen in diesem Dokument
40. Films zu steuern bzw um seine Eigenschaften zu ndern Weitere Informationen ber die JavaScript Methoden des QuickTime Plug Ins finden Sie im Dokument Javascript Scripting Guide for QuickTime 98 E Mail Taste 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente Liste in abgerundetem Rechteck Das Element Liste in abgerundetem Rechteck stellt eine Liste mit einer Zeilengruppe bereit die von den R ndern abgesetzt und mit einem Rechteck mit abgerundeten Ecken umrandet ist Das Element Liste in abgerundetem Rechteck enth lt eine anpassbare Zeilenvorlage mit deren Hilfe Sie neue Zeilen in der Liste erstellen k nnen Sie k nnen statische Daten f r die Anzeige in den Zeilen angeben oder Ihr Webprogramm so konfigurieren dass die Daten dynamisch bereitgestellt werden wenn das Programm ausgef hrt wird Wenn Sie mit Dashcode Version 3 0 und neuer arbeiten k nnen Sie die Daten mithilfe von Datenquellen und Bindungen dynamisch bereitstellen Informationen hierzu finden Sie in den Abschnitten Hinzuf gen einer Datenquelle Seite 66 und Erstellen von Bindungen Seite 67 Sie k nnen jedoch auch den Controller Code f r die Liste anpassen damit die Daten dynamisch bereitgestellt werden wenn das Programm ausgef hrt wird Diese Einstellungen nehmen Sie im Informationsfenster Attribute vor Im Folgenden wird die Anpassung des Controller Codes der Liste beschrieben Eine Liste in einem abgerund
41. Installieren und Ausf hren von Dashcode Seite 10 lesen und die Anleitungen zum Laden und Installieren von Dashcode befolgen Ausw hlen einer Vorlage Starten Sie Dashcode durch Doppelklicken auf das Dashcode Symbol Ein neues Projektfenster wird ge ffnet Darin wird ein Dialogfenster angezeigt in dem Sie zuerst die Art des Projekts ausw hlen das Sie erstellen m chten in diesem Fall Dashboard und anschlie end die Art des Widgets Dazu w hlen Sie eine der Bevor Sie beginnen 13 2009 06 09 2009 Apple Inc All Rights Reserved 14 KAPITEL 1 Einf hrung in die Erstellung eines Dashboard Widgets angebotenen Vorlagen aus Vorlagen sind eine praktische Ausgangsbasis f r das Erstellen g ngiger Widgets Klicken Sie auf das Symbol einer Vorlage um eine kurze Beschreibung der Funktion des entsprechenden Widgets anzuzeigen F r das Widget Geburtstag wird in dieser Einf hrung die Vorlage Countdown verwendet Klicken Sie auf das Symbol dieser Vorlage und anschlie end auf Ausw hlen Nun wird ein Projektfenster mit einem neuen Widget ge ffnet das auf der Vorlage Countdown basiert Abbildung 1 2 Abbildung 1 2 Projektfenster mit einem neuen Dashboard Widget 600 Ohne Titel Le front Fe B back Es Widget Attribute Fi a Standardbild Ex FRB wieger symbot A Ausf hren amp Freigeben augen i Arbeitsablauf Countdown anpassen CTD Legen Sie das Zielereignis f r Ihr Widget fest Count
42. Joshua Tree gt Zwar handelt es sich bei den von der Vorlage Browser bereitgestellten Informationen zu den Nationalparks nur um Platzhaltertexte aber sie verdeutlichen einige der Verkn pfungen zwischen den Seiten Im n chsten Schritt Informationen zu den Seitenansichten im Stapel Layout Seite 22 erfahren Sie mehr ber diese Verkn pfungen Bevor Sie fortfahren sollten Sie die Simulation beenden W hlen Sie dazu Beenden aus dem Programmmen des Browser Simulators oder dr cken Sie die Tastenkombination Befehl Q Sie k nnen auch in Dashcode auf die rote Stopptaste klicken Informationen zu den Seitenansichten im Stapel Layout 22 In einem Browser hnlichen mobilen Safari Webprogramm k nnen Benutzer von einer Seite zur n chsten navigieren Wie Sie bereits beim Testen gesehen haben unterst tzt Ihr Webprogramm bereits die M glichkeit ein Objekt in der bergeordneten Liste auszuw hlen und die zugeh rigen Informationen in der Detailansicht einzublenden Eine der wichtigsten Grundelemente f r diese Struktur ist das Stapel Layout Informationen zu den Seitenansichten im Stapel Layout 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms Falls das Stapel Layout noch nicht im Navigationsbereich eingeblendet ist zeigen Sie es an indem Sie auf das Dreiecksymbol neben Nationalparks und darunter neben Browser klicken Wenn Sie auf das D
43. KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten a Suchen Sie im Datenmodell unter der Eigenschaft poster nach der Eigenschaft xl arge b Bewegen Sie das Bindungssteuerelement der Eigenschaft x1arge zum Objekt image im Arbeitsbereich es handelt sich hierbei um das Element Bild das Sie im Abschnitt Anpassen der Benutzeroberfl che des Safari Webprogramms Seite 33 hinzugef gt haben c W hlen Sie die Option scr aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen 4 Stellen Sie eine Bindung zwischen dem Trailer des ausgew hlten Films und dem Element Video her a Suchen Sie im Datenmodell unter der Eigenschaft preview nach der Eigenschaft large b Bewegen Sie das Bindungssteuerelement der Eigenschaft 1 arge zum Objekt video im Arbeitsbereich es handelt sich hierbei um das Element Bild das Sie im Abschnitt Anpassen der Benutzeroberfl che des Safari Webprogramms Seite 33 hinzugef gt haben c W hlen Sie die Option scr aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen Mit der Erstellung dieser Bindungen sind alle Schritte abgeschlossen die f r ein Safari Webprogramm erforderlich sind das dem in Abbildung 3 1 Seite 28 dargestellten Programm hnelt Testen des Safari Webprogramms Wenn Sie Ihr Projekt l ngere Zeit nicht gesichert haben sollten Sie dies nun tun Vergewissern Sie sich dass die Taste Safari
44. Liste der Elemente bis Sie die Push Taste gefunden haben und bewegen Sie dieses Element anschlie end auf Ihre Detailseite im Arbeitsbereich Hinzuf gen von Funktionen mithilfe von Elementen 23 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms W hlen Sie die Taste auf der Detailseite durch Doppelklicken aus und weisen Sie eine Beschriftung zu Sie k nnen die Beschriftung auch in das Feld Beschriftung des Informationsfensters Attribute der Taste eingeben M glicherweise muss die Taste vergr ert werden damit die gew hlte Beschriftung vollst ndig angezeigt wird Abbildung 2 3 zeigt die neue Taste auf der Detailseite bevor eine neue Beschriftung hinzugef gt wird Abbildung 2 3 Hinzuf gen eines Elements zur Benutzeroberfl che des mobilen Safari Webprogramms BOO ui Code Fotos Elemente Bibliothek Kurzwahltaste Eine anpassbare Kurzwahltaste Markierungsfeld Ein Steuerelement zum Ausw hlen nicht exklusiver Optionen um Push Taste Eine anpassbare Taste Raute Taste Eine anpassbare Taste m Push Taste Eine Push Taste ruft eine JavaScript Funktion oder Methode auf wenn darauf geklickt wird Verwenden Sie die Behavior Informationen um Event Handler Funktionen oder Methoden zuzuweisen In den Informationen zu Farbe amp Muster k nnen Sie die Ecken abrunden und Farbe und Muster anpassen In den At
45. N DIE DURCH FEHLER ODER UNGENAUIGKEITEN IN DIESEM DOKUMENT ENTSTEHEN und zwar auch dann wenn Apple auf die M glichkeit solcher Sch den hingewiesen wurde DIE OBEN GENANNTEN GEW HRLEISTUNGEN UND EINSCHR NKUNGEN GELTEN AUSSCHLIESSLICH UND TRETEN AN STELLE ALLER M NDLICHEN ODER SCHRIFTLICHEN AUSDR CKLICHEN ODER IMPLIZITEN VEREINBARUNGEN Kein Apple H ndler Apple Vertreter oder Apple Mitarbeiter ist berechtigt nderungen Erweiterungen oder Erg nzungen an dieser Gew hrleistung vorzunehmen Einige Rechtsordnungen lassen den Ausschluss impliziter Gew hrleistungen oder die Beschr nkung der Haftung von beil ufig entstandenen Sch den oder Folgesch den nicht zu so dass DIE oben genannten Ausschl sse und Einschr nkungen f r Sie m glicherweise nicht zutreffen Diese Gew hrleistung erteilt Ihnen spezielle Rechte M glicherweise stehen Ihnen andere Rechte zu die je nach Rechtsordnung variieren k nnen Vorwort Kapitel 1 Kapitel 2 Kapitel 3 Inhalt Einf hrung zum Dashcode Benutzerhandbuch 9 Zielgruppen 9 Aufbau dieses Dokuments 9 Installieren und Ausf hren von Dashcode 10 Melden von Fehlern 10 Zus tzliche Informationen 11 Einf hrung in die Erstellung eines Dashboard Widgets 13 Bevor Sie beginnen 13 Ausw hlen einer Vorlage 13 Festlegen des gew nschten Datums 15 Testen des Countdowns 15 Anpassen des Widgets 16 Hinzuf gen von Funktionen mithilfe von Elementen 17 Eingeben des Codes zur Anzei
46. Schritte ausf hren lernen Sie wie Sie eine Widget Vorlage ausw hlen Erscheinungsbild und Code des Widgets anpassen und das Widget f r andere bereitstellen Mithilfe dieser Einf hrung k nnen Sie sich schnell und einfach mit der Erstellung von Dashboard Widgets in Dashcode vertraut machen Im Anschluss an diese Einf hrung finden Sie in diesem Dokument zwei weitere Einf hrungen Einf hrung in die Erstellung eines mobilen Safari Webprogramms Seite 19 und Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Seite 27 Danach wird n her auf die Entwicklungsumgebung von Dashcode eingegangen und beschrieben wie das Programm die Entwicklung von Widgets und Webprogrammen unterst tzt Wenn die praktischen bungen zum Erstellen eines Webprogramms f r Sie nicht von Interesse ist k nnen Sie mit Kapitel Starten eines Projekts Seite 47 fortfahren das weitere Informationen zu Dashcode enth lt Bevor Sie beginnen In dieser Einf hrung werden Sie ein Dashboard Widget erstellen das einen Countdown f r Ihren Geburtstag anzeigt Dieses Widget hnelt dem Widget in Abbildung 1 1 Abbildung 1 1 Das Widget Geburtstag 22119445 Geschenk kaufen bis zu meinem Geburtstag Bevor Sie beginnen sollten Sie sicherstellen dass Dashcode auf Ihrem Macintosh Computer installiert ist der Speicherort lautet Developer Applications Ist Dashcode noch nicht installiert sollten Sie den Abschnitt
47. Selbstverst ndlich enth lt ein Projekt mit dem ausschlie lich ein mobiles Safari Webprogramm erstellt wird den Ordner safari nicht Im umgekehrten Fall enth lt ein Projekt mit dem ausschlie lich ein Safari Webprogramm erstellt wird den Ordner mobile nicht Hinzuf gen oder Entfernen eines Webprogramms 71 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Wichtig Die Datei index html auf der obersten Ebene root bernimmt die Funktion der bergeordneten HTML Datei f r das Projekt Bei einem Projekt zur Erstellung von zwei Produkten bzw bei einem reinen Safari Projekt enth lt die Datei index html das Tag base dessen Attribut href auf den Speicherort safari auf Ihrem Server verweist Bei einem reinen mobilen Safari Produkt verweist das Tag base in der bergeordneten Datei index html auf den Speicherort mobile auf Ihrem Server Dashcode f gt diesen standardm igen Speicherort automatisch hinzu sodass die URL Adresse Ihres Programms beispielsweise http meinserver com anstelle von http meinserver com safari lauten kann Beachten Sie diese Besonderheit wenn Sie auf Ressourcen verweisen die sich auf Ihrem Server befinden Wenn Sie an einem Projekt zur Erstellung von zwei Produkten arbeiten k nnen Sie eines der Produkte entfernen indem Sie Ablage gt Produkt XXX l schen ausw hlen wobei anstelle von XXX Safari oder Mobile Safari steht
48. Sie die Liste mit den Schritten des Arbeitsablaufs die Sie durch den Entwicklungsprozess f hrt Wenn die einzelnen Schritte des Arbeitsablaufs nicht angezeigt werden sollen k nnen Sie diese ausblenden indem Sie Darstellung gt Schritte ausw hlen oder auf das Symbol mit dem H kchen unten im Projektfenster klicken dieses Symbol ist in Abbildung 3 2 optisch hervorgehoben Anstelle der Schritte des Arbeitsablaufs k nnen Sie auch eine Liste der Datenquellen bzw Codedateien f r das aktuelle Produkt anzeigen Klicken Sie hierf r unten im Projektfenster auf das Symbol f r die Datenquellen dieses Symbol befindet sich links neben dem Symbol f r die Schritte des Arbeitsablaufs und ist ein kleiner Ausw hlen einer Vorlage 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Kreis mit einem Quadrat in der Mitte Soll die Dateiliste angezeigt werden w hlen Sie Darstellung gt Dateien oder klicken Sie auf das Symbol mit der Liste unten im Projektfenster dieses Symbol befindet sich links neben dem Symbol f r die Datenquellen und sieht wie eine Miniatur einer ungeordneten Liste aus Sichern und Testen der Standardwebprogramme Es ist nicht erforderlich dass Sie Anpassungen an Ihrem Projekt vornehmen um die Funktionsweise der Standardwebprogramme zu testen Allerdings empfiehlt es sich das Projekt zu sichern bevor nderungen vorgenommen w
49. Zeichen gek rzt wird bzw standardm ig auf 10 Zeichen und Auslassungspunkte hinzuf gt Hinzuf gen eines Handlers f r ein Ereignis Event Wenn Sie mithilfe des Informationsfensters Behaviors einen Event Handler hinzuf gen wie im Abschnitt ndern der Eigenschaften eines Elements bzw Objekts Seite 54 beschrieben wird die neue Handler Funktion in die JavaScript Datei des Projekts eingef gt Wenn Sie im Informationsfenster Behaviors auf den Pfeil neben dem Namen der Handler Funktion klicken wird der Quellcode Editor mit dem Code der ausgew hlten Funktion unterhalb des Arbeitsbereichs angezeigt Sie k nnen anschlie end eigenen Programmcode als Event Handler f r das Ereignis hinzuf gen Weitere Informationen zur Verwendung des Quellcode Editors finden Sie im Abschnitt Anzeigen des Quellcodes eines Projekts Seite 63 Weitere Informationen ber JavaScript und die Dashboard Programmierschnittstellen finden Sie im Abschnitt Verwenden von HTML CSS und JavaScript Programmierschnittstellen Seite 66 Unterst tzen der Offline Nutzung eines Webprogramms 70 Sie haben die M glichkeiten den Benutzern die Verwendung Ihres Webprogramms auch dann zu erlauben wenn keine Verbindung mehr zum Netzwerk besteht Hierf r k nnen Sie das Attribut mani fest nutzen das in der HTML 5 Spezifikation enthalten ist Als Wert f r das Attribut mani fest wird die URL Adresse einer Datei angegeben die die Ressourcen enth lt d
50. afari auf dem iPhone angezeigt Darstellung Mit den Werten in diesem Abschnitt wird gesteuert wie Ihr mobiles Safari Webprogramm auf einem iPhone oder iPod touch angezeigt wird Drehen Benutzer das Ger t vom Hochformat ins Querformat k nnen Webseiten skaliert und so an die neue Ausrichtung des Displays angepasst werden F r das Attribut Ausrichtung sind zwei Optionen verf gbar m Seitenbreite anpassen Bei Auswahl dieser Option wird die Fenstergr e des Webprogramms angepasst d h die Breite erh ht oder verringert wenn das Ger t gedreht wird Diese Option wird generell f r mobile Safari Webprogramme empfohlen da das Webprogramm f r den Benutzer damit eher wie eigenst ndiges Programm und nicht wie eine Webseite wirkt m Seite durch Zoomen anpassen Bei Auswahl dieser Option ndert sich die Breite des Fensters Ihres mobilen Safari Webprogramms nicht wenn das Ger t gedreht wird daf r aber die Skalierung Der Inhalt des Webprogramms wird also etwas gr er dargestellt Die Auswahl dieser Option empfiehlt sich wenn das Layout des Webprogramms komplex ist und sich die Breite bei einem Wechsel vom Hochformat ins Querformat nicht ndern soll Mit der Option Seitenzoom in diesem Abschnitt wird gesteuert ob Benutzer Ihr Webprogramm bei der Anzeige auf dem iPhone oder iPod touch einzoomen k nnen Da das Webprogramm iPhone und iPod touch Benutzern als eigenst ndiges Programm und nicht als Webseite pr sentiert werden soll
51. angstypen und einige bergangseigenschaften bergangsobjekte werden mit der Konstruktorfunktion Transition wie folgt erstellt Transition type duration timing Die Parameter der Funktion Transition bergang geben den bergangstyp die Dauer des bergangs und die Beschleunigungskurve des bergangs an Beachten Sie dass Sie diese Eigenschaften auch nach der Erstellung eines bergangsobjekts im Informationsfenster festlegen k nnen Folgende bergangstypen sind verf gbar m Iransition NONE_ TYPE Die neue Ansicht wird einfach anstelle der alten Ansicht angezeigt m Transition PUSH_TYPE Ein zweidimensionaler bergang bei dem die neue Ansicht die alte Ansicht seitlich aus dem Anzeigebereich schiebt m Transition DISSOLVE_TYPE Ein zweidimensionaler bergang mit dem sich die alte Ansicht langsam in die neue Ansicht aufl st m Transition SLIDE_TYPE Ein zweidimensionaler bergang mit dem die neue Ansicht von einer Ecke des Anzeigebereichs aus ber die alte Ansicht geschoben wird m Transition FADE_TYPE Ein zweidimensionaler bergang mit dem die neue Ansicht ber der alten Ansicht eingeblendet wird m Transition FLIP_TYPE Ein dreidimensionaler bergang mit dem die alte Ansicht umgedreht wird sodass die neue Ansicht zu sehen ist m Transition CUBE_TYPE Ein dreidimensionaler bergang mit dem die alte und die neue Ansicht wie die angrenzenden Seiten eines W rfels angezeigt werden der beim D
52. ard zu ffnen eignet sich Dashcode auch hervorragend zum Testen des Widgets und zur Behebung eventuell auftretender Probleme Nach dem Laden zeigt das Widget einen Countdown bis zu Ihrem n chsten Geburtstag an Wenn Sie mit der Funktionsweise des Widgets zufrieden sind k nnen Sie die Ausf hrung beenden indem Sie Debug gt Stopp ausw hlen Jetzt sollten Sie Ihr Widget Projekt sichern W hlen Sie Ablage gt Sichern um das Projekt zu sichern Geben Sie dem Projekt einen Namen und w hlen Sie einen Speicherort Das Widget wird in einem Widget Projekt gesichert das neben dem eigentlichen Widget auch Informationen enth lt die Dashcode f r die Erstellung des Widgets ben tigt Festlegen des gew nschten Datums 15 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 1 Einf hrung in die Erstellung eines Dashboard Widgets Anpassen des Widgets 16 Obwohl Sie nun bereits ein voll funktionsf higes Dashboard Widget erstellt haben sollten Sie es noch etwas individueller gestalten Mit den Designwerkzeugen von Dashcode ist es einfach das Aussehen des Widgets anzupassen W hlen Sie das Widget im Navigationsbereich aus es sollte den Namen haben den Sie beim Sichern des Projekts vergeben haben Der Bereich mit den Widget Attributen wird nun durch den Arbeitsbereich ersetzt ndern Sie zuerst die Farbe des Hauptteils Ihres Widgets Klicken Sie im Arbeitsbereich auf den Hauptteil des Widgets auch Vorderseitenbild bzw
53. arstellungs und Verhaltensoptionen wie das Einblenden eines Rands oder die Anzeige von Zeilennummern neben dem Quellcode Optionen f r den Zeilenumbruch und die Einr ckfunktion der Tabulatortaste Diese Einstellungen k nnen Sie im Bereich Bearbeitung vornehmen m Der Quellcode kann auf der Basis der Codesyntax auch farbig dargestellt werden Sie k nnen die Schriftart die Gr e und die Farbe des Texts im Bereich Formatieren festlegen m Dashcode bietet zus tzlich eine Funktion zum automatischen Vervollst ndigen des Codes die Code Sense genannt wird wie im Abschnitt Codevervollstandigung mit Code Sense Seite 72 beschrieben ber dem Quellcode Editor steht ein Einblendmen zur Verf gung das die in einer Datei enthaltenen Funktionen Symbole zeigt Zu den Einstellungen im Bereich Code Sense geh rt auch eine Einstellung zur Strukturierung dieser Funktionen Dar ber hinaus stehen in diesem Bereich auch Einstellungen f r die Codevervollst ndigung zur Verf gung Einstellungen f r die Codebearbeitung 75 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen 76 Einstellungen f r die Codebearbeitung 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 7 Testen und Bereitstellen Nachdem Sie den Code f r Ihr Widget oder Webprogramm geschrieben haben sollten Sie es testen um sicherzustellen dass es wie erwartet funktioniert Dashcode verf
54. beitsablauf C Oberfl che gestalten CTD _ Bewegen Sie Objekte aus der Bibliothek in den Arbeitsbereich und ndern Sie die Eigenschaften der Objekte in den Informationen ndern Sie die Ausrichtung des geteilten Layouts re Bibliothek Arbeitsbereich Informationen 2 Als erledigt markieren Daten anpassen Erforderlich F Handler amp Code hinzuf gen C Attribute festlegen Favicon entwerfen D Testen amp Freigeben oe amp il Den gr ten Teil des Fensters nimmt der Arbeitsbereich ein in dem Sie das Design f r das Webprogramm entwerfen Die Leiste zwischen dem Arbeitsbereich und der Symbolleiste ist die Produktleiste die Tasten zum Umschalten zwischen den beiden Produkten enth lt In Abbildung 3 2 Seite 30 k nnen Sie sehen dass standardm ig die Benutzeroberfl che des Safari Webprogramms im Arbeitsbereich angezeigt wird die Taste Safari in der Produktleiste ist optisch hervorgehoben Wenn Sie in der Produktleiste auf die Taste Mobile Safari klicken wird die Benutzeroberfl che des mobilen Safari Webprogramms angezeigt Auf der linken Seite des Projektfensters befindet sich der Navigationsbereich der verwendet wird um zwischen den einzelnen Werkzeugen zu wechseln die f r die Erstellung des Webprogramms zur Verf gung stehen Wenn Sie zwischen den beiden Produkten umschalten ndert sich auch der Inhalt des Navigationsbereichs entsprechend Unten im Navigationsbereich vgl Abbildung 3 2 sehen
55. board Widgets Dashcode kann aus einem vorhandenen Widget ein neues Projekt erstellen Wenn Sie in Dashcode an einem bestehenden Projekt weiterarbeiten m chten m ssen Sie es importieren Beim Importieren eines Widgets wird es in ein neues Widget Projekt kopiert und der Codegenerator wird aktiviert Sobald der Codegenerator aktiv ist stehen auch alle Design und Verwaltungswerkzeuge von Dashcode zur Verf gung W hlen Sie Ablage gt Widget importieren oder klicken Sie in der Vorlagen bersicht auf Importieren um ein Widget zu importieren Hinweis Wenn Ihr Widget Runtime Objekte enth lt etwa aus einem Apple Button oder einer Apple Scroll Area erstellte Objekte zwei Apple Klassen die Apple den Entwicklern von Widgets zur Verf gung stellt werden diese nicht im Arbeitsbereich angezeigt da deren Konstruktoren nicht ausgef hrt werden wenn das Widget angezeigt wird Nachdem Sie ein Widget in ein Dashcode Projekt importiert haben k nnen Sie im Bereich mit den Widget Attributen Werte zur Identifizierung Ihres Widgets festlegen Weitere Informationen hierzu finden Sie im Abschnitt Bereitstellen von Attributen f r ein Dashboard Widget Seite 48 Bereitstellen von Attributen f r ein Dashboard Widget 48 F r jedes Widget Projekt sind bestimmte Werte erforderlich damit das Widget richtig funktioniert Sie k nnen diese Werte im Bereich mit den Widget Attributen festlegen der angezeigt wird wenn Sie Widget Attribute
56. chlie end die folgenden Schritte aus 1 Zeigt das Dreiecksymbol neben movieinfo noch nicht nach unten klicken Sie auf das Symbol um die Hierarchie zu ffnen Klicken Sie anschlie end auf das Dreiecksymbol neben der Eigenschaft info diese Eigenschaft ist der Eigenschaft movieinfo untergeordnet 2 Klicken Sie auf das Bindungssteuerelement neben der Eigenschaft title und halten Sie die Maustaste gedr ckt dies ist die erste Eigenschaft in der Hierarchie der Eigenschaft info 3 Bewegen Sie das Bindungssteuerelement bei gedr ckter Maustaste zum Objekt Title im Arbeitsbereich es handelt sich hierbei um das ganz oben in der Master Liste stehende Wort Title im Arbeitsbereich Erstellen von Bindungen f r das Safari Webprogramm 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Sie sehen nun eine blaue Verbindungslinie zwischen dem Bindungssteuerelement und dem Objekt Title sowie ein kleines graues Feld mit dem Namen des Objekts in diesem Fall itemTitle vgl Abbildung 3 8 Abbildung 3 8 Blaue Verbindungslinie zwischen der Eigenschaft einer Datenquelle und einem Objekt im Arbeitsbereich 00 MeinKinoTrailerProjekt ww m OM as Ausf hren Pause Darstellung Informationen Bibliothek Suchen et afai een Mobile Safari TARN nanan RAT SSSR OR Re ANRT RAR Tbe Free A MeinKinoTrailerProjekt me p rte E splitLayout
57. d Widgets zu erfahren Entwickler die noch wenig Erfahrung mit der Erstellung von Widgets oder Webprogrammen haben lernen das Erstellen einfacher Projekte und k nnen sich ber die Leistungsmerkmale von Dashcode informieren Erfahrene Entwickler k nnen das Dokument nutzen um den Entwicklungsprozess mit Dashcode zu beschleunigen und zu optimieren Aufbau dieses Dokuments Dieses Dokument enth lt die folgenden Kapitel m Einf hrung in die Erstellung eines Dashboard Widgets Seite 13 Informationen zum Erstellen eines ersten Dashboard Widgets mit Dashcode m Einf hrung in die Erstellung eines mobilen Safari Webprogramms Seite 19 Informationen zum Erstellen eines einfachen mobilen Safari Webprogramms mithilfe von Dashcode Zielgruppen 9 2009 06 09 2009 Apple Inc All Rights Reserved VORWORT Einf hrung zum Dashcode Benutzerhandbuch m Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Seite 27 Informationen zum Erstellen eines Projekts mit dem sowohl ein mobiles Safari Webprogramm als auch ein Safari Webprogramm entwickelt wird m Starten eines Projekts Seite 47 Eine bersicht ber die unterschiedlichen Vorgehensweisen beim Arbeiten mit Dashcode m Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Seite 53 Eine Beschreibung der Werkzeuge die Dashcode f r die Erstellung der Benutzeroberfl che eines Widgets oder Webprogramms bereitstell
58. das dem in Abbildung 3 1 Seite 28 dargestellten Programm hnelt Testen des mobilen Safari Webprogramms Wenn Sie Ihr Projekt l ngere Zeit nicht gesichert haben sollten Sie dies nun tun Vergewissern Sie sich dass die Taste Mobile Safari in der Produktleiste noch immer ausgew hlt ist und klicken Sie auf Ausf hren um Ihr Produkt zu testen Das Dialogfenster in dem Sie gefragt werden ob Sie eine Simulation der Programmausf hrung in der Domain www app1e com ausf hren m chten wird nicht angezeigt da Dashcode die Simulation so lange in der von Ihnen angegeben entfernten Domain ausf hrt bis sie die Domain ndern Auf der ersten Seite m ssten Sie nun eine lange Liste mit aktuellen Filmtiteln sehen Wenn Sie auf einen Titel klicken m ssten eine Bewertung eine Beschreibung und ein Posterbild f r den Film angezeigt werden Testen des mobilen Safari Webprogramms 45 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten N chste Schritte Herzlichen Gl ckwunsch Sie haben mit Dashcode ein Projekt erstellt mit dem zwei Produkte in Form von zwei Webprogrammen entwickelt wurden Weitere Informationen zum Bereitstellen Ihrer Produkte finden Sie im Abschnitt Bereitstellen eines Webprogramms Seite 82 46 N chste Schritte 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 4 Starten eines Projekts Wenn Sie ein neue
59. de und Erstellen von Bindungen Hinweis Wenn Sie im Falle eines Projekts zur Erstellung von zwei Produkten einen Teil des einen Produkts in das andere Produkt kopieren werden bestehende Bindungen nicht mitkopiert Hinzuf gen einer Wertetransformation Bei einer Wertetransformation handelt es sich um eine Funktion die einen Wert aus der Datenquelle abruft und in einen entsprechenden Anzeigewert konvertiert auf der Basis anderer Informationen in der Datenquelle bzw anhand von Kontextinformationen im Programmcode Diese Funktion ist n tzlich wenn Sie beispielsweise einen Temperaturwert von Fahrenheit in Celsius umwandeln m chten oder um einen numerischen Wert im W hrungsformat anzuzeigen Da bei einer Wertetransformation das Datenmodell analysiert und anhand der Kontextinformationen bestimmte Entscheidungen getroffen werden m ssen werden Sie die Wertetransformation in der Regel selbst definieren Dashcode bietet jedoch einige generische Wertetransformationen wie etwa eine Umkehrfunktion die Sie verwenden k nnen ffnen Sie zun chst das Informationsfenster Bindungen und gehen Sie anschlie end wie folgt vor 1 W hlen Sie das Element der Benutzeroberfl che aus das an das Objekt der Datenquelle gebunden ist das Sie konvertieren m chten 2 Klicken Sie auf das Textfeld Wertetransformation In der daraufhin angezeigten Einblendliste sind die generischen Wertetransformationen enthalten sowie alle Wertetransformationen di
60. dellansicht f r die Datenquelle des Feeds feedDataSource anpassen Informationen zum Einblenden der Datenmodellansicht finden Sie im Abschnitt Anzeigen der Datenquellen und Bindungen eines Projekts Seite 64 Die Vorlage Dienstprogramm Mit der Vorlage Dienstprogramm k nnen Sie ein Webprogramm entwickeln das einen Texteingabebereich anzeigt Im Safari Produkt wird eine Symbolleiste Objekt toolbar im Navigationsbereich mit Steuerelementen zum Bearbeiten angezeigt Im mobilen Safari Produkt ist zus tzlich eine R ckseite verf gbar die zum Anzeigen von Einstellungen bzw einer anderen Ansicht verwendet werden kann Objekt settings im Navigationsbereich Sie passen diese Vorlage f r ein mobiles Safari Produkt an indem Sie Ihren Inhalt in der Vorderansicht Objekt front im Navigationsbereich und die Einstellungen oder alternativen Ansichten die Sie anbieten m chten in der Einstellungsansicht Objekt settings platzieren Belassen Sie die Informationstaste an ihrer Position auf der Vorlage befindet sich diese Taste rechts unten in der Vorderansicht da die Benutzer wissen dass sie ber diese Taste die R ckansicht des mobilen Safari Webprogramms einblenden k nnen Webprogramm Vorlagen 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente Dashcode umfasst eine Reihe spezifischer Komponenten die Sie auf der Oberfl che Ihres Widgets oder Webprogramms verwenden k nnen um Informationen
61. der Bilder einer RSS Quelle anzeigt Es eignet sich f r RSS Feeds die nicht h ufig aktualisiert werden da immer nur ein Artikel angezeigt wird Sie k nnen die Vorlage anpassen indem Sie das Design im Arbeitsbereich ndern und eine URL Adresse f r den RSS Feed angeben den das Widget anzeigen soll Legen Sie den RSS Feed und weitere Attribute fest indem Sie im Navigationsbereich auf Widget Attribute klicken und die im Abschnitt Eigenschaften verf gbaren Optionen anpassen Folgende Optionen stehen zur Verf gung RSS Feed URL Setzen Sie die URL Adresse f r einen RSS Feed ein RSS Feed Typ Geben Sie an welche Art von Informationen der Feed bereitstellt Im Falle von HTML Dateien w hlen Sie beispielsweise die Option HTML W hlen Sie die Option Bild aus wenn Ihr Feed Bilder bermittelt z B einen Comicstrip oder ein Foto das t glich aktualisiert wird Widget Vorlagen 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG A Dashcode Vorlagen Webprogramm Vorlagen Alle Dashcode Vorlagen f r Webprogramme stehen sowohl f r Projekte mit denen zwei Produkte erstellt werden als auch f r Projekte mit denen nur ein Produkt erstellt wird zur Verf gung Im Abschnitt Erstellen eines Projekts mithilfe einer Vorlage Seite 47 finden Sie weitere Informationen zu diesen beiden Projekttypen Alle Vorlagen f r Webprogramme erm glichen das Festlegen bestimmter Optionen im Bereich Programmattribute Weitere I
62. dgets wird das Widget wird in Dashcode ausgef hrt ohne dass es im Programm Dashboard ge ffnet werden muss Das Widget verh lt sich dabei genauso wie in Dashboard m Bei Webprogrammen wird das Webprogramm im entsprechenden Simulationsprogramm ausgef hrt ohne dass es bereitgestellt und auf einem Ger t ausgef hrt werden muss Das Simulationsprogramm f hrt das Webprogramm so aus wie es in Safari auf dem iPhone bzw in Safari ausgef hrt werden w rde Wenn Sie iPhone SDK auf Ihrem Computer installiert haben stehen beim Testen eines mobilen Safari Webprogramms in Dashcode Version 3 0 und neuer zwei Anzeigeoptionen zur Verf gung m Ausf hrung des Webprogramms mit sichtbarer Safari Oberfl che die Safari Symbolleiste und die Navigationsleiste werden angezeigt Damit simulieren Sie was die Benutzer sehen wenn sie mit Safari auf dem iPhone zu Ihrem Webprogramm navigieren m Ausf hrung des Webprogramms mit ausgeblendeter Safari Oberfl che d h im Vollbildmodus Damit simulieren Sie was die Benutzer sehen wenn sie ein mobiles Safari Webprogramm das im Vollbildmodus ausgef hrt werden kann durch Tippen auf das zugeh rige Webclip Symbol ffnen Testen eines Widgets oder Webprogramms 77 2009 06 09 2009 Apple Inc All Rights Reserved 78 KAPITEL 7 Testen und Bereitstellen Sie k nnen auf diese Optionen zugreifen indem Sie auf die Taste Ausf hren im Projektfenster von Dashcode klicken und die Maustaste gedr ckt ha
63. dienen Weitere Informationen finden Sie im Abschnitt Bereitstellen von Attributen f r ein Dashboard Widget Seite 48 Einige Widget Vorlagen verf gen ber vorlagenspezifische Attribute die Sie im Abschnitt Eigenschaften des Bereichs Widget Attribute festlegen k nnen Diese Attribute werden in den folgenden Abschnitten beschrieben Die Widget Vorlage Leer Mit der Vorlage Leer f r Widgets wird ein leeres Widget angelegt das die grundlegenden Dateien und Bilder enth lt die f r die Widget Erstellung ben tigt werden Ein Widget das mithilfe dieser Vorlage erstellt wird enth lt keine weiteren vordefinierten Funktionen Vorlage Countdown Mit der Vorlage Countdown wird ein Widget mit einem vordefinierten Countdown Timer erstellt der einer digitalen Anzeige gleicht Zum Anpassen dieser Vorlage k nnen Sie ein Foto oder eine Grafik einf gen und das Zielereignis f r den Countdown definieren Klicken Sie hierf r im Navigationsbereich auf Widget Attribute und passen Sie die im Abschnitt Eigenschaften verf gbaren Optionen an Folgende Optionen stehen zur Verf gung Zieltyp Geben Sie als Zieltyp f r Ihr Widget ein bestimmtes Datum und eine Uhrzeit bzw einen freigegebenen iCal Kalender an Wenn Sie dem Widget einen freigegebenen iCal Kalender zuweisen erfolgt der Countdown bis zum n chsten im Kalender eingetragenen Termin Nach diesem Termin erfolgt der Countdown wieder bis zum n chsten Kalendereintrag und so weit
64. down Eigenschaften Kalender ver ffentlichen B Als erledigt markieren Attribute festlegen CGTD Fe Standardbild anzeigen i Widget Symbol entwerfen Testen amp Freigeben F CAMEE AE Wi 5 95 Auf der linken Seite des Projektfensters befindet sich der Navigationsbereich der verwendet wird um zwischen den einzelnen Werkzeugen zu wechseln die f r die Erstellung des Widgets zur Verf gung stehen Den gr ten Teil des Fensters nimmt der Arbeitsbereich ein in dem Sie die Benutzeroberflache f r das Widget entwerfen Unten im Navigationsbereich vgl Abbildung 1 2 sehen Sie die Liste mit den Schritten f r den Arbeitsablauf die Sie durch den Entwicklungsprozess f r Ihr Widget f hrt Jeder Schritt ist ein Meilenstein bei der Widget Erstellung und zeigt Ihnen welche Aufgaben Sie ausf hren m ssen und wo Sie die entsprechenden Optionen und Funktionen finden Wenn Sie einen Schritt abschlie en k nnen Sie ihn als erledigt markieren und mit dem n chsten Schritt fortfahren Ausw hlen einer Vorlage 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 1 Einf hrung in die Erstellung eines Dashboard Widgets Hinweis Wenn die einzelnen Schritte des Arbeitsablaufs nicht angezeigt werden sollen k nnen Sie diese ausblenden indem Sie Darstellung gt Schritte ausw hlen oder auf das Symbol mit dem H kchen unten im Projektfenster klicken dieses Symbol ist in Abbildung 1 2 optisch hervorgehoben Anstelle des Arbeitsablauf
65. dung 2 1 Abbildung 2 1 Ein neues mobiles Safari Webprogramm unter Verwendung der Vorlage Browser ane Ohne Titel oO A informationen Bibliothek Suchen PV Tab rrr aba N gh rrr B splitLayout r kes Programmattribute ea Favicon S A Ausf hren amp Freigeben F Item gt EN Item Arbeitsablauf F Item Oberfl che gestalten COT _ Bewegen Sie Objekte aus der E Item Bibliothek in den Arbeitsbereich und ndern Sie die Eigenschaften F der Objekte in den Informationen C Item Andern Sie die Ausrichtung des z geteilten Layouts ro Item Bibliothek Arbeitsbereich E Informationen F Item D Als erledigt markieren 3 Item Daten anpassen Erforderlich Handler amp Code hinzuf gen Attribute festlegen Favicon entwerfen m 600 Testen amp Freigeben CMER amp Il 43 33 Auf der linken Seite des Projektfensters befindet sich der Navigationsbereich der verwendet wird um zwischen den einzelnen Werkzeugen zu wechseln die f r die Erstellung des Webprogramms zur Verf gung stehen Den gr ten Teil des Fensters nimmt der Arbeitsbereich ein in dem Sie die Benutzeroberflache f r das Webprogramm entwerfen Unten im Navigationsbereich vgl Abbildung 2 1 sehen Sie die Liste mit den Schritten f r den Arbeitsablauf die Sie durch den Entwicklungsprozess f r Ihr Webprogramm f hrt Jeder Schritt ist ein Meilenstein bei der Webprogramm Erstellung und zeigt Ihnen welche Aufgaben Sie ausf hren
66. e Position eines Objekts innerhalb des bergeordneten Elements immer gleich unabh ngig von den Positionen der anderen Objekte Anders ausgedr ckt ein absolut positioniertes Element beh lt seine Position immer bei selbst wenn andere zugeh rige Objekte im selben Element vergr ert oder verkleinert werden Bei der absoluten Positionierung k nnen Sie komplizierte Anordnungen genau steuern die dynamische Gr enanpassung wird allerdings nur sehr eingeschr nkt unterst tzt Anordnen und Sch tzen von Elementen 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Die Position eines relativ im Dokumentfluss positionierten Elements wird im Gegensatz dazu in Bezug auf die Positionen der zugeh rigen Elemente im Dokument bestimmt Bei der relativen Positionierung werden zugeh rige Elemente vertikal der Reihe nach angezeigt Die Position eines einzelnen Elements h ngt also von seiner Position in der Objektreihenfolge ab Wird ein Element nach unten erweitert werden alle zugeh rigen Elemente danach um denselben Wert verschoben Ihre Gr en oder relativen Positionen werden dabei beibehalten Dank der Flexibilit t die die Positionierung im Dokumentfluss erlaubt wird die dynamische Gr enanpassung in hohem Ma e unterst tzt allerdings l sst sich das Layout damit nicht sehr pr zise steuern Da Widgets meist ihre Gr e beibehalten bzw eine kleine Zahl
67. e Sie bereits in Ihr Projekt integriert haben 3 W hlen Sie eine der vorhandenen Funktionen aus oder geben Sie den Namen der Funktion ein die Sie programmieren m chten Dr cken Sie anschlie end den Zeilenschalter Wenn Sie eine vorhandene Wertetransformation ausw hlen zeigt Dashcode einen Pfeil an Wenn Sie auf diesen Pfeil klicken k nnen Sie die Funktion im Quellcode Editor sehen Wenn Sie einen Namen f r die neue Wertetransformation eingeben f gt Dashcode die neue Funktion in die JavaScript Datei Ihres Projekts ein und zeigt die Funktion im Quellcode Editor an Sie k nnen anschlie end eigenen Programmcode hinzuf gen der die Transformation ausf hrt In der zu Dashcode geh renden Datei transformers js sind mehrere integrierte Wertetransformationen enthalten Sie k nnen einige dieser Wertetransformationen anpassen indem Sie die Standardparameter ndern Die Wertetransformation zum K rzen von Zeichenfolgen DC transformer Truncated k rzt beispielsweise die eingelesene Zeichenfolge automatisch auf 10 Zeichen Sie k nnen dies ndern indem Sie die Wertetransformation bearbeiten Die Datei transformers js enth lt die folgenden Wertetransformationen m DC transformer Boolean ist eine Transformation die den booleschen Wert TRUE bergibt wenn der eingelesene Wert gleich dem Wert ist den Sie als Wahrwert festgelegt haben Sie k nnten beispielsweise die Zeichenfolge rot als Wahrwert festlegen Wenn Sie diese Wertetransforma
68. e den Abschnitt Installieren und Ausf hren von Dashcode Seite 10 lesen und die Anleitungen zum Laden und Installieren von Dashcode befolgen Ausw hlen einer Vorlage Starten Sie Dashcode durch Doppelklicken auf das Dashcode Symbol Ein neues Projektfenster wird ge ffnet und zeigt ein Dialogfenster mit zwei Arten von Projekten an Safari und Dashboard sowie eine Reihe von Vorlagen f r jeden Projekttyp Vorlagen sind eine praktische Ausgangsbasis f r das Erstellen g ngiger Webprogramme und Widgets Wenn Sie wissen m chten welche Funktionen eine bestimmte Vorlage bietet w hlen Sie sie aus und lesen Sie die kurze Beschreibung W hlen Sie f r diese Einf hrung den Projekttyp Safari aus Gehen Sie anschlie end wie folgt vor um ein auf der Vorlage Browser basierendes Webprogramm zu erstellen das f r Safari auf dem iPhone optimiert ist 1 W hlen Sie die Vorlage Browser Bevor Sie beginnen 19 2009 06 09 2009 Apple Inc All Rights Reserved 20 KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms 2 Klicken Sie auf das Markierungsfeld Entwickeln f r Safari um es zu deaktivieren Vergewissern Sie sich dass das Markierungsfeld Entwickeln f r Mobile Safari weiterhin aktiviert ist 3 Klicken Sie auf Ausw hlen Daraufhin wird ein Projektfenster ge ffnet das die erste Seite eines neuen mobilen Safari Webprogramms anzeigt das auf der Vorlage Browser basiert vgl Abbil
69. e die zugeh rigen bergeordneten Eigenschaften auch Vorg nger oder Eltern genannt optisch hervor Jeder Eigenschaft ist ein Symbol zugeordnet das ihren Datentyp angibt A Attribut Boolescher Wert zany E objexy EB Zeichenfolge Wenn eine Datenquelle ein Array mit Eigenschaften des gleichen Typs enth lt wird das Array durch ein Symbol dargestellt das einen Stapel des betreffenden Datentyps zeigt Ein Array mit Zeichenfolgen w rde beispielsweise durch folgendes Symbol dargestellt Hat eine Datenquelle Zugriff auf die tats chlichen Daten wenn Sie beispielsweise die URL Adresse eines RSS Feeds angegeben haben oder statische Daten bereitstellen werden die Daten rechts neben dem Namen der Eigenschaft angezeigt Handelt es sich bei dem Wert der Eigenschaft um ein Array zeigt Dashcode die Gesamtzahl der Array Mitglieder an und blendet Pfeile ein mit deren Hilfe sie durch das Array bl ttern k nnen Dabei werden die Array Mitglieder innerhalb eines Rahmens angezeigt dieser Rahmen wird eingeblendet wenn Sie auf das Dreiecksymbol klicken Wenn Sie den Mauszeiger ber den Namen einer Eigenschaft bewegen zeigt Dashcode einen Hilfetext an der den Schl sselpfad der Eigenschaft und ihren Datentyp enth lt Der Schl sselpfad gibt die Position der Eigenschaft innerhalb der Hierarchie an Ein Schl sselpfad f r eine Eigenschaft mit der Bezeichnung property_n wird wie folgt angezeigt property_l property_2 pro
70. e hier gezeigt zu aktualisieren document getElementById horizontalLevelIndicator object setValue 10 Achten Sie darauf dass der an set Value bergebene Wert innerhalb des Bereichs liegt der im Informationsfenster Attribute f r das Element Pegelanzeige definiert ist Gitter 97 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente E Mail Taste Das Element E Mail Taste ist f r die Verwendung in einem Webprogramm konzipiert Mit der E Mail Taste k nnen Benutzer auf einfache Weise eine E Mail senden Im Informationsfenster Attribute k nnen Sie den Standardempf nger E Mail Adresse sowie den Betreff angeben der verwendet werden soll wenn Benutzer auf die Taste tippen Das Element E Mail Taste enth lt JavaScript Code f r die Ausf hrung einiger standardm iger Aktionen z B Methoden zum Abrufen und Festlegen der E Mail Adresse und des Betreffs Ist die Taste aktiviert wird standardm ig ein Anzeigebereich zum Verfassen der Nachricht ge ffnet In den Feldern An und Betreff wird die aktuell definierte Adresse sowie der Betreff angegeben Mit den Methoden setEmai Address und setSubject k nnen Sie Benutzern erlauben die E Mail Adresse und den Betreff dynamisch zu ndern Kartentaste Das Element Kartentaste ist f r die Verwendung in einem Webprogramm konzipiert Mit der Kartentaste k nnen Benutzer auf einfache Weise eine Karte f r einen Ort anzeigen Im Informationsfenster
71. ef gt hat Geben Sie zwischen den geschweiften Klammern die folgende Codezeile ein widget openURL http store apple com Der Programmcode sollte im Quellcode Editor wie in Abbildung 1 5 gezeigt aussehen Hinzuf gen von Funktionen mithilfe von Elementen 17 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 1 Einf hrung in die Erstellung eines Dashboard Widgets Abbildung 1 5 Eine Funktion im Quellcode Editor 416 ac gt n raviors n 417 function showAppleStore event 418 EA T 2 e widget openURL http wnww apple com store 420 Events Handler onclick showAppleStore e 422 ondbiclick 2 ondrag 424 ondragend p ondragenter ondragleave ondragover ondragstart ondrop onmousedown onmousemove 3 onmouseout 434 onmouseover 435 onmouseup Testen Sie Ihr Widget erneut indem Sie Debug gt Ausf hren ausw hlen Klicken Sie auf die Taste die Sie hinzugef gt haben und pr fen Sie ob ein neues Safari Fenster mit der Apple Store Website angezeigt wird Denken Sie daran Ihr Projekt regelm ig zu sichern damit die vorgenommenen nderungen nicht verloren gehen Bereitstellen Ihres Widgets 18 Herzlichen Gl ckwunsch Sie haben gerade Ihr erstes Dashboard Widget mit Dashcode erstellt W hlen Sie Ablage gt Widget bereitstellen um das Widget im Dashboard zu ffnen Klicken Sie im angezeigten Dialogfenster zuerst auf F r Dashboard bereitstell
72. eines Widgets befinden mit Ausnahme der Textelemente wie Text Textbereich und Textfeld in das Standardbild eines Widgets integriert Andere Elemente die Text enthalten wie Einblendmen s werden ebenfalls integriert Es wird davon abgeraten Text im Standardbild eines Widgets zu verwenden da sich die Texte der Oberfl che ndern k nnen wenn das Widget lokalisiert wird Aus diesem Grund sollten Sie alle Teile die Text enthalten aus dem Standardbild des Widgets F hren Sie die folgenden Schritte aus um ein Element aus dem Standardbild eines Widgets zu entfernen 1 W hlen Sie das Widget Objekt im Navigationsbereich aus damit es im Arbeitsbereich angezeigt wird 2 Wahlen Sie das Element das aus dem Standardbild entfernt werden soll im Arbeitsbereich aus 3 Blenden Sie das Informationsfenster Attribute ein wie im Abschnitt ndern der Eigenschaften eines Elements bzw Objekts Seite 54 beschrieben 4 Deaktivieren Sie die Option Im Standardbild anzeigen In der Symbolleiste unter der Vorschau des Standardbilds werden zus tzliche Konfigurationsoptionen f r Standardbilder angeboten Sync starten Sync stoppen Standardm ig aktualisiert Dashcode das Standardbild eines Widgets wenn sich die Widget Oberfl che ndert Klicken Sie auf Sync stoppen wenn diese Funktion deaktiviert werden soll Klicken Sie auf Sync starten wenn diese Funktion wieder aktiviert werden soll Platzieren des Schlie feldes f r e
73. eines vorhandenen Dashboard Widgets 48 Bereitstellen von Attributen f r ein Dashboard Widget 48 Bereitstellen von Attributen f r ein Webprogramm 49 Programmattribute f r Safari Webprogramme 49 Programmattribute f r mobile Safari Webprogramme 50 ffnen eines vorhandenen Dashboard Widgets 51 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms 53 Entwerfen der Oberfl che 53 Anzeigen der Widget Seiten 53 Hinzuf gen von Elementen zu einer Widget Benutzeroberfl che 54 Verwenden von Fotos aus iPhoto 54 ndern der Eigenschaften eines Elements bzw Objekts 54 Anordnen und Sch tzen von Elementen 56 Vergleich zwischen absoluter und relativer Positionierung 56 Suchen nach Objekten bzw Elementen 57 Lineale und Hilfslinien 57 Platzieren des Schlie feldes f r ein Widget 58 Deaktivieren des Arbeitsbereichs 58 Anzeigen des Standardbilds eines Widgets in der Vorschau 58 Entwerfen eines Widget Symbols 59 Entwerfen eines Webclip Symbols 59 Entwerfen eines Favicons 60 Hinzuf gen von Quellcode und Erstellen von Bindungen 63 Anzeigen des Quellcodes eines Projekts 63 Anzeigen der Datenquellen und Bindungen eines Projekts 64 Verwenden von HTML CSS und JavaScript Programmierschnittstellen 66 Hinzuf gen einer Datenquelle 66 Erstellen von Bindungen 67 Hinzuf gen einer Wertetransformation 69 Hinzuf gen eines Handlers f r ein Ereignis Event 70 Unterst tzen der Offline Nutzung eines Webprogramms 70 2009 06
74. ements bzw Objekts 54 Im Informationsfenster werden Informationen zu dem im Arbeitsbereich ausgew hlten Objekt bzw Element angezeigt die auch ge ndert werden k nnen Sie k nnen ein spezifisches Informationsfenster ausw hlen indem Sie auf eine der Tasten oben im Informationsfenster klicken Das Informationsfenster enth lt die folgenden untergeordneten Informationsfenster von links nach rechts Hinzuf gen von Elementen zu einer Widget Benutzeroberfl che 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms m Iminformationsfenster Attribute k nnen Sie die ID des ausgew hlten Objekts wird in JavaScript als Referenz auf das Objekt verwendet sowie seine CSS Klasse ndern und festlegen ob das Element im Standardbild des Widgets oder Webprogramms angezeigt werden soll Dar ber hinaus k nnen noch die spezifischen Parameter f r das ausgew hlte Objekt angepasst werden m Sofern es das ausgew hlte Objekt zul sst k nnen Sie mithilfe des Informationsfensters F llung amp Linien den Stil des Objekts anpassen und Effekte hinzuf gen Folgende Stilanpassungen k nnen vorgenommen werden a F llung einfarbig Farbverlauf oder Bild a Rundung der Ecken Deckkraft und Reflexion a Linienfarbe und Linienst rke Folgende Effekte k nnen hinzugef gt werden Q Glas Steuerelemente f r Glanz Ton Horizont und Kr mmung a Einschnitt Ste
75. en Ein Webprogramm das mithilfe dieser Vorlage erstellt wird enth lt keine weiteren vordefinierten Funktionen Die Vorlage Browser Mit der Vorlage Browser wird ein Webprogramm erstellt das die Navigation durch mehrere Inhaltsebenen unterst tzt Ein mit der Vorlage Browser entwickeltes Webprogramm eignet sich gut f r die Anzeige hierarchischer Informationen durch die Benutzer bl ttern k nnen Das von der Vorlage Browser bereitgestellte Webprogramm enth lt eine Listenansicht f r die bergeordnete Inhaltsebene und eine Detailansicht f r die zweite Inhaltsebene Durch Auswahl eines Objekts aus der bergeordneten Liste wird automatisch die zu diesem Objekt geh rende Detailansicht angezeigt Sie k nnen weitere Listenebenen hinzuf gen und diese Detailansichten mit Inhalten erg nzen Die Webprogramm Vorlage Podcast Mit der Vorlage Podcast wird ein Webprogramm erstellt das Episoden eines von Ihnen ver ffentlichten Podcasts anzeigt und abspielt Die Vorlage ist so definiert dass standardm ig eine Liste mit Episoden angezeigt wird die abgespielt werden wenn Benutzer sie ausw hlen Webprogramm Vorlagen 91 2009 06 09 2009 Apple Inc All Rights Reserved 92 ANHANG A Dashcode Vorlagen Sie k nnen diese Vorlage anpassen indem Sie die URL Adresse eines von Ihnen ver ffentlichten Podcasts angeben Hierf r k nnen Sie beispielsweise im Feld URL der Datenmodellansicht der Podcast Datenquelle podcastDataS
76. en In der Titelleiste sofern diese angezeigt wird sollten Sie den Titel Nationalparks sehen Beachten Sie dass beim Klicken auf ein Zeilenelement auf der ersten Seite eine neue Seite mit Informationen ber das Objekt angezeigt wird Auf der zweiten Seite gibt es einige weitere Dinge die Sie beachten sollten m Der Titel der zweiten Seite ist mit dem Namen des Zeilenelements identisch das auf der ersten Seite ausgew hlt wurde Informationen zur Vorlage 21 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms m Links neben dem Titel ist eine Zur ck Taste mit dem Titel Parks zu sehen dem Titel der ersten Seite Durch Klicken auf diese Taste gelangen Sie zur ck zur ersten Seite m Der auf der zweiten Seite angezeigte Text enth lt den Namen des ausgew hlten Zeilenelements Die beiden Seiten Ihres Webprogramms sollten hnlich aussehen wie die in Abbildung 2 2 dargestellten Seiten Abbildung 2 2 Das standardm ige Browser basierende mobile Safari Webprogramm enth lt eine Seite auf bergeordnete Seite links und eine Detailseite rechts al Carrier gt 12 37 PM al Carrier gt 12 39 PM Parks Acadia gt CRE Acadia Bryce Canyon gt Maine USA The scenery in Acadia is amazing this Carlsbad Caverns gt time of year Cuyahoga Valley gt Death Valley gt Denali Preserve gt Grand Canyon gt Haleakala gt
77. en Testen amp Freigeben 32 E oe TT Erstellen von Bindungen f r das mobile Safari Webprogramm Hinweis Die Bindungen die Sie f r Ihr Safari Webprogramm erstellt haben gelten nicht f r Ihr mobiles Safari Webprogramm Das bedeutet dass Sie die Schritte in diesem Abschnitt ausf hren m ssen um die entsprechenden Bindungen zu erstellen Die Datenquelle die Sie im Abschnitt Festlegen einer Datenquelle und Anzeigen des Datenmodells Seite 36 festgelegt haben ist jedoch f r beide Produkte verf gbar und muss nicht neu definiert werden In diesem Abschnitt werden Sie f nf Bindungen erstellen eine Bindung zu einem Objekt auf der Seite mit der Master Liste und vier Bindungen zu Objekten auf der Detailseite Vergewissern Sie sich zuerst ob die Taste Mobile Safari in der Produktleiste ausgew hlt ist bevor Sie mit den Anpassungen beginnen Erstellen von Bindungen f r das mobile Safari Webprogramm 43 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Erstellen einer Bindung zu einem Objekt auf der Seite mit der Master Liste Mit der ersten Bindung die Sie erstellen wird festgelegt welche Eigenschaft der Datenquelle die Filmtitel f r die Master Liste Ihres Webprogramms liefert Eine Erkl rung f r die Begriffe Datenquelle und Eigenschaft finden Sie im Abschnitt Festlegen einer Datenquelle und Anzeigen des Dat
78. en W hlen Sie Fenster gt Bibliothek einblenden und klicken Sie auf Code um die Codebausteine anzuzeigen Wenn Sie einen der Codebausteine zu Ihrem Projekt hinzuf gen m chten bewegen Sie den gew nschten Baustein aus der Codebibliothek in den Quellcode Editor Neben den von Dashcode bereitgestellten Codebausteinen k nnen Sie auch eigene Bausteine in der Bibliothek sichern und sp ter wieder verwenden Bewegen Sie hierf r einfach die gew nschten Bausteine aus dem Quellcode Editor in eine Gruppe die Sie in der Codebibliothek erstellen W hlen Sie im Aktionsmen unter der Liste in der Codebibliothek die Option New Group aus Hinzuf gen und Bewegen von Dateien und Ordnern Sie k nnen in Dashcode zus tzliche Dateien und Ordner zu einem Widget oder Webprogramm hinzuf gen Obwohl dies relativ selten erforderlich sein wird kann es beim Strukturieren zahlreicher Dateien oder Funktionsbereiche sehr n tzlich sein Blenden Sie die Liste Dateien ein und w hlen Sie anschlie end Ablage gt Neu und JavaScript Datei CSS Datei oder Datei um eine neue Datei hinzuzuf gen Nachdem Sie die neue Datei erstellt haben k nnen Sie deren Inhalt anzeigen und bearbeiten wie im Abschnitt Anzeigen des Quellcodes eines Projekts Seite 63 beschrieben W hlen Sie Ablage gt Neu gt Ordner um einen neuen Ordner zu Ihrem Projekt hinzuzuf gen Bewegen Sie alle Objekte die zu diesem Ordner hinzugef gt werden sollen auf da
79. en Wenn Sie ein Messger t als Pr felement einsetzen m chten aktivieren Sie die Option Bei Mouse Down im Informationsfenster Attribute und geben Sie im Informationsfenster Behaviors eine eigene Handler Funktion f r das Ereignis onchange an Der Handler wird aufgerufen sobald sich der Wert des Messger ts ndert Wenn Sie das Messger t zur grafischen Darstellung von Daten verwenden m ssen Sie seinen Wert mithilfe von JavaScript aktualisieren Verwenden Sie die Methode setValue um den Wert wie hier gezeigt zu aktualisieren document getElementById gauge object setValue 50 Achten Sie darauf dass der an set Value bergebene Wert innerhalb des Bereichs liegt der im Informationsfenster Attribute f r das Element Messger t definiert ist Vorw rts Taste 2009 06 09 2009 Apple Inc All Rights Reserved Gitter Bild ANHANG B Dashcode Elemente Mit dem Element Gitter k nnen die Daten in einem Zellenraster formatiert werden Im Informationsfenster Attribute k nnen Sie das Design des Gitters bearbeiten und festlegen ob das Gitter die Daten statisch oder dynamisch erh lt Mit dem Element Bild wird ein Bereich definiert in dem bei der Programmausf hrung ein Bild angezeigt wird Sie k nnen auch ein statisches Bild bereitstellen indem Sie im Informationsfenster Attribute den Speicherort dieses Bildes angeben Dar ber hinaus k nnen Sie im Informationsfenster F llung amp Linien die Stile und Effek
80. en m ssen Sie diese Objekte explizit aktivieren Weitere Informationen ber den Ressourcenzugriff und dar ber welche Elemente aktiviert werden m ssen finden Sie im Abschnitt Ressourcenzugriff f r Widgets Seite 74 Sie k nnen auch das Aussehen und das Verhalten des Quellcode Editors ndern wie im Abschnitt Einstellungen f r die Codebearbeitung Seite 75 beschrieben Anzeigen der Datenquellen und Bindungen eines Projekts 64 Dashcode unterst tzt die Verwendung von Datenquellen und Bindungen um Quelldaten auf einfache und effiziente Weise in Ihre Benutzeroberfl che zu laden und die Anzeige mit den Daten zu synchronisieren Unter einer Datenquelle versteht man Daten die entweder aus einer entfernten Quelle wie einem RSS Feed oder einem lokalen Objekt wie einer Liste stammen Eine Bindung ist eine Verkn pfung zwischen einer spezifischen Eigenschaft oder einem Attribut in der Datenquelle und einer Eigenschaft eines Elements im Arbeitsbereich Klicken Sie unten im Navigationsbereich auf das Symbol f r die Datenquellen ein kleiner Kreis mit einem Quadrat in der Mitte um die Datenquellen in Ihrem Projekt anzuzeigen Daraufhin wird im Navigationsbereich die Liste mit den Datenquellen eingeblendet In dieser Liste k nnen Sie Datenquellen hinzuf gen l schen oder umbenennen wie im Abschnitt Hinzuf gen einer Datenquelle Seite 66 beschrieben W hlen Sie eine Datenquelle in der Liste Datenquellen aus um e
81. en und anschlie end auf Installieren um Ihr Widget in Dashboard anzuzeigen W hlen Sie Ausf hren amp Freigeben im Navigationsbereich aus um Ihr Widget anderen bereitzustellen Das daraufhin angezeigte Fenster enth lt den Projektnamen den Sie unter Testen des Countdowns Seite 15 ausgew hlt haben Dieser kann jedoch durch einen beliebigen anderen Namen ersetzt werden Au erdem k nnen Sie festlegen mit welcher Mac OS X Version Ihr Widget mindestens kompatibel sein soll Klicken Sie auf Auf der Festplatte sichern um das Widget zu sichern Nun k nnen Sie das Widget an Freunde senden oder auf Ihrer Webseite ver ffentlichen F r die Archivierung steht Ihnen der Befehl Ablage gt Komprimieren im Finder zur Verf gung Bereitstellen Ihres Widgets 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms In dieser Einf hrung wird beschrieben wie Sie mit Dashcode ein Projekt anlegen mit dem ein mobiles Safari Webprogramm erstellt wird Bei einem mobilen Safari Webprogramm das auch iPhone Webprogramm genannt wird handelt es sich um Webinhalte die f r Safari auf dem iPhone optimiert sind und dem Benutzer ein programm hnliches Nutzungserlebnis bieten Wenn Sie die nachfolgend beschriebenen Schritte ausf hren lernen Sie wie Sie eine Vorlage ausw hlen den Code anpassen und das Programm f r andere bereitstellen Mithilfe dieser Einf hrung k nne
82. en verf gbaren Optionen anpassen Folgende Optionen stehen zur Verf gung Karten API Key Geben Sie den Karten API Key in das entsprechende Feld ein Weitere Informationen zum Anmelden f r den Karten API finden Sie unter Google Maps API auf der Google Website f r Entwickler Ausgangsadresse Geben Sie die Startadresse an die in Ihrem Widget angezeigt werden soll Mashup URL Setzen Sie die URL Adresse f r Ihren Karten Feed ein Weitere Informationen zum Ver ffentlichen angepasster Karten finden Sie unter How to Create a Map auf der Google Website f r Entwickler Hinweis Die besten Ergebnisse erhalten Sie wahrscheinlich wenn Sie die Anzahl der Punkte in der KML Datei auf ungef hr 60 und die Dateigr e ohne Komprimierung auf ungef hr 1 MB einschr nken Die Widget Vorlage RSS Mit der Vorlage RSS wird ein Widget erstellt mit dem die berschriften einer RSS Quelle angezeigt werden Es eignet sich f r RSS Feeds die sehr h ufig aktualisiert werden da mehrere berschriften gleichzeitig angezeigt werden Sie k nnen die Vorlage anpassen indem Sie das Design im Arbeitsbereich ndern und eine URL Adresse f r den RSS Feed angeben den das Widget anzeigen soll Legen Sie den RSS Feed und weitere Attribute fest indem Sie im Navigationsbereich auf Widget Attribute klicken und die im Abschnitt Eigenschaften verf gbaren Optionen anpassen Folgende Optionen stehen zur Verf gung RSS Feed URL Setzen Sie die URL Adresse
83. en die gerundeten Ecken und den Schattenwurf eines Webclip Symbols nicht beeinflussen da diese Attribute immer automatisch hinzugef gt werden m Von Safari erstelltes Symbol verwenden Verwenden Sie diese Option um den Benutzern die M glichkeit zu geben ein eigenes Webclip Symbol f r Ihr mobiles Safari Webprogramm zu verwenden ffnen eines vorhandenen Dashboard Widgets Wenn Sie die Design und Projektverwaltungswerkzeuge von Dashcode umgehen m chten k nnen Sie ein vorhandenes Widget in Dashcode ffnen ohne es in ein neues Projekt zu importieren Wenn Dashcode ein Widget ffnet haben Sie nur Zugriff auf den Quellcode und alle Debugging Werkzeuge nicht aber auf die Designwerkzeuge Wahlen Sie Ablage gt ffnen und w hlen Sie im Fenster ffnen das gew nschte Widget aus Sie k nnen auch Ablage gt Neues Projekt w hlen und in der Vorlagen bersicht auf die Taste Bestehende ffnen klicken Wenn Sie ein Widget mit Dashcode ffnen ist der Arbeitsbereich gesch tzt Das bedeutet dass die Designwerkzeuge von Dashcode mit denen HTML CSS und Bilddateien f r ein Widget generiert werden k nnen deaktiviert sind Wenn Sie ein vorhandenes Widget ffnen anstatt es in ein neues Projekt zu importieren zeigt Dashcode ein Schlosssymbol am unteren Rand des Arbeitsbereichs an ffnen eines vorhandenen Dashboard Widgets 51 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 4 Starten eines Projekts 52 O
84. enmodells Seite 36 Klicken Sie im Navigationsbereich auf das Objekt 1 istLevel um die Master Liste im Arbeitsbereich anzuzeigen Wird das Objekt 1istLevel im Navigationsbereich nicht angezeigt k nnen Sie auf die Dreiecksymbole neben browser und stackLayout klicken um das Objekt einzublenden Wird die Liste Datenquellen noch nicht im Navigationsbereich angezeigt k nnen Sie auf das Symbol f r die Datenquellen unten links im Projektfenster klicken ein kleiner Kreis mit einem Quadrat in der Mitte W hlen Sie in der Liste Datenquellen den Eintrag dataSource um das zugeh rige Datenmodell einzublenden Sie werden feststellen dass die URL Adresse die Sie f r Ihr Safari Webprogramm eingegeben haben bereits im Feld URL angezeigt wird Klicken Sie auf das Dreiecksymbol neben der Eigenschaft content und gehen Sie wie folgt vor um eine Bindung zwischen den Filmtiteln und den Zeilentiteln in der Master Liste zu erstellen 1 Suchen Sie im Datenmodell unter der Eigenschaft info nach der Eigenschaft title 2 Bewegen Sie das Bindungssteuerelement der Eigenschaft tit e zum Objekt rowTitle im Arbeitsbereich Das Objekt rowTitle befindet sich ganz oben in der Liste und enth lt das Wort Item 3 W hlen Sie die Option text aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen Erstellen von vier Bindungen zu Objekten auf der Detailseite Sie werden nun vier Bindungen erstellen die auf der Detailseite ben ti
85. enutzeroberfl che so ndern dass Sie der Benutzeroberfl che der fertigen Produkts hnelt Vergewissern Sie sich zuerst ob die Taste Safari in der Produktleiste ausgew hlt ist bevor Sie mit den nderungen beginnen Damit links neben der Beschreibung gen gend Platz f r das Posterbild des ausgew hlten Filmtrailers zur Verf gung steht m ssen Sie das Objekt Description Beschreibung nach rechts verschieben Gehen Sie wie folgt vor 1 Klicken Sie im Arbeitsbereich auf das Wort Description Um das Objekt detailDescription wird ein rechteckiger Rahmen angezeigt Auf der Rahmenlinie befinden sich in regelm igen Abst nden kleine Aktivpunkte mit deren Hilfe Sie die Gr e des Rahmens ver ndern k nnen 2 Bewegen Sie den Aktivpunkt in der Mitte der linken Rahmenlinie des Objekts detailDescription nach rechts bis das Wort Description auf der Detailseite im Arbeitsbereich horizontal zentriert ist Nun m ssen Sie noch zwei neue Elemente zum Arbeitsbereich hinzuf gen Klicken Sie in der Dashcode Symbolleiste auf die Taste Bibliothek oder w hlen Fenster gt Bibliothek einblenden um die Bibliothek zu ffnen Klicken Sie im Fenster Bibliothek auf Elemente um die verf gbaren Dashcode Elemente zu sehen Damit das Posterbild des ausgew hlten Films in Ihrem Webprogramm angezeigt werden kann m ssen Sie das Element Bild hinzuf gen Bl ttern Sie durch die Liste der Elemente bis Sie das Element Bild gefunden haben
86. er Lesen Sie Mac Grundkurs Lektion 10 iCal wenn Sie weitere Informationen ber iCal und das Ver ffentlichen des Kalenders ben tigen Wenn erreicht Wenn das Zielereignis eintritt kann der Countdown gestoppt oder eine Timerfunktion aktiviert werden die ab dem Ereignis hochz hlt Wenn Sie Aktion ausf hren ausw hlen und einen Event Handler angeben kann eine JavaScript Funktion ausgel st werden die es dem Widget erm glicht auf ein Ereignis mit einer bestimmten Programmfunktion zu reagieren Widget Vorlagen 87 2009 06 09 2009 Apple Inc All Rights Reserved 88 ANHANG A Dashcode Vorlagen Anzeige In diesem Abschnitt k nnen Sie festlegen ob die Trennzeichen zwischen den Zeiteinheiten blinken und ob f r einstellige Zeiteinheiten f hrende Nullen angezeigt werden sollen Vorlage Karten Mit der Vorlage Karten wird ein Widget erstellt mit dem bestimmte Orte und ortsspezifische Informationen auf einer Karte angezeigt werden k nnen Sie k nnen diese Vorlage anpassen indem Sie das Design im Arbeitsbereich ndern und die URL Adresse einer von Ihnen ver ffentlichten Karte angeben Dar ber hinaus k nnen Sie festlegen wie das Widget die ortsspezifischen Informationen anzeigen soll Die Vorlage Karten kann in Verbindung mit KML Dateien und GeoRSS Feeds verwendet werden Legen Sie die Zielkarte und weitere Attribute fest indem Sie im Navigationsbereich auf Widget Attribute klicken und die im Abschnitt Eigenschaft
87. erden W hlen Sie Ablage gt Sichern um das Projekt zu sichern Geben Sie Ihrem Projekt einen Namen z B MeinKinoTrailerProjekt und w hlen Sie einen Speicherort aus Das Projekt umfasst beide Webprogramme und die Informationen die Dashcode zum Erstellen der Programme ben tigt Wenn Sie Dashcode beenden k nnen Sie das Programm durch Doppelklicken auf das gesicherte Projekt wieder ffnen Ihre neuen Webprogramme funktionieren bereits auch wenn sie bisher nur Platzhalterdaten anzeigen Sie k nnen dies pr fen indem Sie zun chst das Safari Webprogramm testen 1 Vergewissern Sie sich dass in der Produktleiste die Taste Safari hervorgehoben ist 2 Klicken Sie in der Symbolleiste von Dashcode auf die gr ne Taste Ausf hren alternativ k nnen Sie auch Debug gt Ausf hren w hlen Dashcode ffnet nun das Safari Webprogramm in einem Simulationsprogramm Nehmen Sie sich einen Moment Zeit und probieren Sie das Webprogramm aus Wenn Sie links im Fenster auf den Namen eines Parks klicken werden rechts Informationen ber diesen Park angezeigt Die Liste links im Fenster wird Master Liste genannt da sie die vollst ndige Liste aller anzeigbaren Objekte enth lt Der Bereich rechts im Fenster wird Detailbereich oder Detailansicht genannt da er Details zu dem in der Master Liste ausgew hlten Objekt enth lt Abbildung 3 3 zeigt das Safari Webprogramm im Dashcode Simulationsprogramm In der Titelleiste des Simulationsprogramms
88. ereich oder im Navigationsbereich aus Daraufhin werden im Informationsfenster Bindungen die bindbaren Eigenschaften des Elements angezeigt 2 Klicken Sie im Informationsfenster Bindungen auf das Dreiecksymbol links neben der Elementeigenschaft an die das Element gebunden werden soll 3 Aktivieren Sie das Markierungsfeld Bindung an und w hlen Sie eine Datenquelle aus dem Einblendmen 4 ffnen Sie das Einblendmen Schl sselpfad um die Eigenschaften der obersten Ebene der ausgew hlten Datenquelle einzublenden 5 W hlen Sie im Einblendmen Schl sselpfad eine Eigenschaft der Datenquelle aus Handelt es sich bei der gew nschten Eigenschaft der Datenquelle um eine untergeordnete Eigenschaft ein Kind der Eigenschaft der obersten Ebene k nnen Sie erneut auf den Pfeil im Einblendmen klicken um eine Liste der Kinder der aktuellen Eigenschaft anzuzeigen Durchsuchen Sie die Kind Eigenschaften bis Sie die gew nschte Eigenschaft gefunden haben Da Bindungen eng mit den Objekte der Benutzeroberfl che integriert sind m ssen Sie die Bindungen f r jedes der Produkte separat definieren wenn Sie an einem Projekt arbeiten mit dem zwei Produkte erstellt werden Dies liegt daran dass jedes Produkt unterschiedliche Elemente zum Anzeigen der Daten verwendet auch wenn die gleiche Datenquelle verwendet wird Erstellen von Bindungen 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellco
89. erung anpassen indem Sie Code Datenquellen oder Bindungen zu Ihrem Widget bzw zu Ihrem Webprogramm hinzuf gen In diesem Kapitel werden folgende Themen behandelt m Anzeigen der Dateien und Datenquellen die zu einem Projekt geh ren m Schreiben von eigenem Programmcode zum Ausf hren von Aufgaben die nicht automatisch von der Vorlage bereitgestellt werden m Hinzuf gen von Datenquellen und Binden dieser Datenquellen an die Elemente der Benutzeroberfl che m Schreiben einer Wertetransformation die den Wert einer Eigenschaft in eine f r die Anzeige geeignete Version konvertiert Dar ber hinaus wird in diesem Kapitel gezeigt wie Ressourcen wie beispielsweise Dateien au erhalb des Projekts oder Netzwerkressourcen aktiviert werden k nnen Schlie lich werden auch die Programmeinstellungen beschrieben die direkten Einfluss auf die Codierung in Dashcode haben Anzeigen des Quellcodes eines Projekts Dashcode integriert alle HTML CSS und JavaScript Dateien aus denen sich ein Widget oder Webprogramm zusammensetzt Wenn Sie Funktionen hinzuf gen m chten die von der Vorlage nicht bereitgestellt werden m ssen Sie die nderungen in diesen Implementierungsdateien vornehmen W hlen Sie Darstellung gt Dateien um die Implementierungsdateien Ihres Projekts anzuzeigen Unter dem Navigationsbereich wird nun eine Dateiliste angezeigt In der Liste Dateien k nnen Sie Dateien und Ordner hinzuf gen duplizieren und umbenennen Weitere
90. estimmten Element oder Elementtyp zu suchen Klicken Sie auf Raute Einblendmen und bewegen Sie die Taste aus dem Fenster Bibliothek in den Hauptteil Ihres Widgets W hlen Sie die Tastenbeschriftung durch Doppelklicken aus geben Sie den Text Hier gibt s Geschenke ein und dr cken Sie den Zeilenschalter M glicherweise muss die Taste vergr ert werden damit die neue Beschriftung vollst ndig angezeigt wird Eingeben des Codes zur Anzeige des Apple Store Damit die Taste den Benutzer nach dem Klicken zum Apple Store f hrt m ssen Sie der Taste ein bestimmtes Verhalten auch Behavior zuweisen Klicken Sie im Informationsfenster auf das Symbol f r Behaviors die Taste ganz rechts Im daraufhin angezeigten Fenster Behaviors k nnen Sie Ereignissen Events bestimmte Event Handler zuweisen Klicken Sie im Arbeitsbereich auf die Taste Durch Doppelklicken auf die Spalte Handler neben dem Event onclick definieren Sie einen neuen Event Handler Geben Sie einen Namen f r die neue Funktion ein wie beispielsweise showApp1 eStore und dr cken Sie den Zeilenschalter Klicken Sie auf den Pfeil neben dem gerade festgelegten Funktionsnamen um den Quellcode Editor unterhalb des Arbeitsbereichs anzuzeigen In diesem Editor k nnen Sie Programmcode eingeben um Funktionen zu Ihrem Widget hinzuzuf gen Wenn Sie auf den Pfeil klicken wird der Programmcode f r die Funktion showAppleStore angezeigt die Dashcode in den Quellcode Ihres Widgets eing
91. eten Rechteck die Daten dynamisch erh lt ben tigt ein Controller Objekt f r eine statische Liste in einem abgerundeten Rechteck ist kein Controller Objekt erforderlich Das Listen Controller Objekt muss zwei erforderliche Datenquellen Methoden implementieren numberOfRows und prepareRow Mit der R ckfragemethode numberOfRows wird die Gesamtzahl der Zeilen in der Liste zur ckgegeben Die Methode prepareRow wird einmal pro Zeile aufgerufen w hrend diese vorbereitet wird und verwendet die erhaltenen Werte zum F llen der Zeile Diese Werte werden mit den folgenden drei Argumenten an die Methode prepareRow bermittelt m rowElement Hierbei handelt es sich um das bergeordnete Objekt der gesamten Zeile Mit diesem Objekt k nnen Sie f r jede Listenzeile Handler f r Klickaktionen definieren m rowlIndex Hierbei handelt es sich um den nullbasierten Index der Zeile Mithilfe dieses Werts k nnen Sie die passenden Zeilendaten in programmspezifischen Datenstrukturen suchen m templateElements Hierbei handelt es sich um ein Verzeichnis das einen Eintrag zu jedem Objekt in der Vorlagenzeile enth lt das ber eine ID verf gt Alle Schl ssel im Verzeichnis gelten als ID und der zugeordnete Wert ist das Objekt im Argument rowElement das den Originalobjekten der Vorlage entspricht z B rowTit le Mit den Werten die diesen Objekten zugeordnet sind k nnen Sie die jeweiligen Stellen in der Zeile f llen Eine Liste in einem abgerundeten Rec
92. f r einen RSS Feed ein Artikel anzeigen Legen Sie fest wie viele Artikel das Widget anzeigt und aus welchem Zeitraum die angezeigten Artikel stammen sollen Anzeige Geben Sie an ob das Datum und die Uhrzeit und oder eine Markierung f r neue Eintr ge zusammen mit den Artikeln angezeigt werden soll Widget Vorlagen 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG A Dashcode Vorlagen Die Widget Vorlage Podcast Mit der Vorlage Podcast wird ein Widget erstellt das Episoden eines Podcasts anzeigt und abspielt Sie k nnen diese Vorlage anpassen indem Sie das Design im Arbeitsbereich ndern und eine URL Adresse f r den Podcast angeben den das Widget abspielen soll Legen Sie den Podcast Feed und weitere Attribute fest indem Sie im Navigationsbereich auf Widget Attribute klicken und die im Abschnitt Eigenschaften verf gbaren Optionen anpassen Folgende Optionen stehen zur Verf gung Podcast URL Setzen Sie die URL Adresse f r einen Podcast ein Aktualisierungen suchen Geben Sie an wie oft das Widget pr fen soll ob neue Episoden verf gbar sind Vorlage Photocast Mit der Vorlage Photocast wird ein Widget erstellt das eine Diashow mit Fotos aus einem iPhoto Photocast anzeigt Sie k nnen diese Vorlage anpassen indem Sie das Design im Arbeitsbereich ndern und eine URL Adresse f r den Photocast angeben den das Widget anzeigen soll Legen Sie den Photocast und weitere Attribute fest indem Sie i
93. ffnen eines vorhandenen Dashboard Widgets 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Nachdem Sie ein Projekt wie im Kapitel Starten eines Projekts Seite 47 beschrieben gestartet haben k nnen Sie mit den Designwerkzeugen von Dashcode die Oberfl che des Widgets oder Webprogramms entwerfen In diesem Kapitel wird der Arbeitsbereich beschrieben Hierbei handelt es sich um den Bereich in Dashcode in dem das Design der Oberflache festgelegt werden kann Dar ber hinaus erhalten Sie Tipps f r die Gestaltung einer Benutzeroberflache Des Weiteren erfahren Sie wie Dashcode Elemente zu einem Projekt hinzugef gt werden und wie mithilfe des Informationsfensters Anpassungen am Erscheinungsbild oder Verhalten eines Elements vorgenommen werden k nnen Lesen Sie dieses Kapitel um N heres ber die Verwendung der Designwerkzeuge von Dashcode und ber die Erstellung Bearbeitung und Anzeige Ihres Widgets oder Webprogramms in der Vorschau zu erfahren Entwerfen der Oberfl che Dashcode umfasst einen Bereich in dem Sie die Elemente der Benutzeroberfl che eines Webprogramms oder eines Widgets anordnen Dieser Bereich wird Arbeitsbereich genannt und wird im Hauptteil des Projektfensters angezeigt wenn Sie Ihr Widget oder Webprogramm im Navigationsbereich ausw hlen Sie k nnen die Elemente einer Oberfl che beliebig bewegen und in der Gr e ver ndern
94. ge des Apple Store 17 Bereitstellen Ihres Widgets 18 Einf hrung in die Erstellung eines mobilen Safari Webprogramms 19 Bevor Sie beginnen 19 Ausw hlen einer Vorlage 19 Informationen zur Vorlage 21 Testen des Standardprogramms 21 Informationen zu den Seitenansichten im Stapel Layout 22 Hinzuf gen von Funktionen mithilfe von Elementen 23 Schreiben von Code zum Ausf hren einer Suche 24 Bereitstellen Ihres mobilen Safari Webprogramms 26 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten 27 Bevor Sie beginnen 27 Ausw hlen einer Vorlage 29 Sichern und Testen der Standardwebprogramme 31 Anpassen der Benutzeroberfl che des Safari Webprogramms 33 Festlegen einer Datenquelle und Anzeigen des Datenmodells 36 Erstellen von Bindungen f r das Safari Webprogramm 38 Erstellen der ersten Bindung 38 Erstellen der restlichen Bindungen 40 Testen des Safari Webprogramms 41 2009 06 09 2009 Apple Inc All Rights Reserved Kapitel 4 Kapitel 5 Kapitel 6 INHALT Anpassen der Benutzeroberfl che des mobilen Safari Webprogramms 42 Erstellen von Bindungen f r das mobile Safari Webprogramm 43 Erstellen einer Bindung zu einem Objekt auf der Seite mit der Master Liste 44 Erstellen von vier Bindungen zu Objekten auf der Detailseite 44 Testen des mobilen Safari Webprogramms 45 N chste Schritte 46 Starten eines Projekts 47 Erstellen eines Projekts mithilfe einer Vorlage 47 Erstellen eines Projekts mithilfe
95. geblendeten Bilder ein gemeinsames bergeordnetes Container Element besitzen Das ist wichtig da der bergang durch die Abmessungen des bergeordneten Container Elements beschr nkt ist Der Container sorgt insbesondere daf r dass mit den berg ngen kein bersch ssiger Inhalt erzeugt wird Beachten Sie dass Sie als Ubergangsparameter der Methode setCurrentViewWithTransition f r das Stapel Layout bergangsobjekte verwenden k nnen Weitere Informationen zu den Methoden f r das Element Stapel Layout finden Sie im Abschnitt Stapel Layout Methoden Seite 100 Stapel Layout 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente Video Das Element Video ist ein Bereich in dem die Videowiedergabe erfolgt und in dem Steuerelemente f r die Wiedergabe angezeigt werden Das Element Video verwendet das HTML 5 Element video Das bedeutet dass Video in die Webansicht eingebunden ist und nicht mit dem QuickTime Plug In gerendert werden muss Auf diese Weise k nnen Videos besser mit den anderen Webinhalten integriert und anspruchsvolle Layouts und Effekte realisiert werden Video 103 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente 104 Video 2009 06 09 2009 Apple Inc All Rights Reserved BERARBEITUNGEN Dokument Uberarbeitungen Diese Tabelle beschreibt die Anderungen im Dokument Dashcode Benutzerhandbuch Datum Hinwei
96. gt werden Klicken Sie im Navigationsbereich auf das Objekt detail Level um die Detailseite im Arbeitsbereich anzuzeigen W hlen Sie in der Liste Datenquellen die Datenquelle 1 ist aus um das zugeh rige Datenmodell einzublenden Vergewissern Sie sich zun chst dass das Dreiecksymbol neben der Eigenschaft selection im Datenmodell nach unten weist da sich alle Eigenschaften die im Folgenden verwendet werden in der Hierarchie dieser Eigenschaft befinden 1 Stellen Sie eine Bindung zwischen dem Titel des ausgew hlten Films und dem Titel im wei en Feld her a Suchen Sie im Datenmodell unter der Eigenschaft info nach der Eigenschaft title b Bewegen Sie das Bindungssteuerelement der Eigenschaft title zum Objekt detailTitleim Arbeitsbereich Das Objekt detai1Title enth lt das Wort Title das im Arbeitsbereich angezeigt wird c W hlen Sie die Option text aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen 2 Stellen Sie eine Bindung zwischen der Bewertung des ausgew hlten Films und dem Untertitel im wei en Feld her 44 Erstellen von Bindungen f r das mobile Safari Webprogramm 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten a Suchen Sie im Datenmodell unter der Eigenschaft info nach der Eigenschaft rating b Bewegen Sie das Bindungssteuerelement der Eigenschaft rating zum Objekt detailSubtitle im A
97. gung verwendet wird und EASE bedeutet dass sich die Geschwindigkeit allm hlich erh ht oder verringert Mit der Funktion Transition EASE_IN_TIMING wird der bergang beispielsweise langsam gestartet und allm hlich beschleunigt Mit der Funktion Transition EASE_OUT_TIMING wird der bergang dagegen zum Ende hin allm hlich verlangsamt Sie k nnen auch eine Richtung f r die berg nge Transition PUSH_TYPEund Transition SLIDE_TYPE angeben Folgende Richtungen sind verf gbar m Transition RIGHT_TO_LEFT_DIRECTION m Transition LEFT_TO_RIGHT_DIRECTION m Transition TOP_TO_BOTTOM_DIRECTION m Transition BOTTOM_TO_TOP_DIRECTION Abschlie end legen Sie eine Richtung f r die vier dreidimensionalen berg nge fest Folgende Richtungen sind f r diese berg nge verf gbar m Transition RIGHT_TO_LEFT_DIRECTION m Transition LEFT_TO_RIGHT_DIRECTION Das Ubergangsobjekt enth lt die Methode per form die den Ubergang ausf hrt Folgende Parameter werden an die Methode per form Ubergeben m new iew Die Ansicht die im Anschluss an den bergang zu sehen sein wird m oldView Die Ansicht die momentan zu sehen ist vor dem bergang m isReverse Ein boolesches Flag das angibt ob der bergang umgekehrt ausgef hrt werden soll Der bergang PUSH kann beispielsweise umgekehrt angewendet werden die berblendung sieht in beide Richtungen gleich aus Mit der Methode perform wird gew hrleistet dass die ein
98. h 94 Kurzwahltaste 95 Spalten Layout 95 Edge to Edge Liste 95 Vorw rts Taste 96 Messger t 96 Gitter 97 Bild 97 Anzeige 97 Pegelanzeigen 97 E Mail Taste 98 Kartentaste 98 Quartz Composer 98 QuickTime 98 Liste in abgerundetem Rechteck 99 Geteiltes Layout 100 Stapel Layout 100 Stapel Layout Methoden 100 Stapel Layout berg nge 101 Video 103 Dokument Uberarbeitungen 105 2009 06 09 2009 Apple Inc All Rights Reserved Kapitel 1 Kapitel 2 Kapitel 3 Abbildungen Einf hrung in die Erstellung eines Dashboard Widgets 13 Abbildung 1 1 Abbildung 1 2 Abbildung 1 3 Abbildung 1 4 Abbildung 1 5 Das Widget Geburtstag 13 Projektfenster mit einem neuen Dashboard Widget 14 Abschnitt Eigenschaften der Vorlage Countdown 15 Anpassen des Vorderseitenbilds mit dem Informationsfenster F llung amp Linien 16 Eine Funktion im Quellcode Editor 18 Einf hrung in die Erstellung eines mobilen Safari Webprogramms 19 Abbildung 2 1 Abbildung 2 2 Abbildung 2 3 Abbildung 2 4 Ein neues mobiles Safari Webprogramm unter Verwendung der Vorlage Browser 20 Das standardm ige Browser basierende mobile Safari Webprogramm enth lt eine Seite auf bergeordnete Seite links und eine Detailseite rechts 22 Hinzuf gen eines Elements zur Benutzeroberfl che des mobilen Safari Webprogramms 24 Hinzuf gen von Code zum Ausl sen einer Aktion bei Aktivierung der Taste 25 Einf hrung in die Erstellu
99. hcode mithilfe des Xcode Tools Installationsprogramms installieren Sie finden Dashcode nach der Installation im Ordner Developer Applications Melden von Fehlern 10 Sollten Sie in der Apple Software oder in der Apple Dokumentation Fehler finden m chten wir Sie bitten diese Fehler an Apple zu melden Sie k nnen auch Verbesserungsvorschl ge einreichen und uns mitteilen welche Funktionen in zuk nftigen Versionen eines Produkts oder Dokuments enthalten sein sollten Verwenden Sie f r die Meldung von Fehlern und f r die Einreichung von Verbesserungsvorschl gen bitte das Formular das Sie auf der Seite Bug Reporting der ADC Website finden http developer apple com bugreporter Installieren und Ausf hren von Dashcode 2009 06 09 2009 Apple Inc All Rights Reserved VORWORT Einf hrung zum Dashcode Benutzerhandbuch F r die Meldung von Fehlern sind ein g ltiger ADC Anmeldename und ein Kennwort erforderlich Auf der Seite Bug Reporting erfahren Sie wie Sie kostenlos einen Anmeldenamen beantragen k nnen Verwenden Sie die Dashcode Komponente Version X um einen Dashcode Fehler zu melden Zus tzliche Informationen Ausf hrliche Informationen zum Erstellen von Webprogrammen die mit dem iPhone und iPod touch kompatibel sind finden Sie im Dokument Safari Web Content Guide for iPhone OS Anleitungen zum Gestalten der Benutzeroberfl che f r ein solches Programm finden Sie im Dokument iPhone Human Interface Guidelines fo
100. hen Dies erm glicht den Benutzern das ffnen Ihres Webprogramms im Vollbildmodus wenn Sie auf das Wekclip Symbol tippen Die Benutzer dr cken auf die Home Taste um ein Webprogramm zu beenden das im Vollbildmodus ausgef hrt wird Wenn Sie die Option Als Programm im Vollbildmodus anzeigen Safari Symbolleiste und Navigationsleiste ausblenden aktiviert haben k nnen Sie auch einen der drei folgenden Stile f r die Statusleiste ausw hlen m Grau m Schwarz m Schwarz Transparent Verwenden Sie das Einblendmen um den Stil f r die Statusleiste auszuw hlen der am besten zu Ihrem Webprogramm passt Sie k nnen den Stil f r die Statusleiste nur ausw hlen wenn Sie die Option Als Programm im Vollbildmodus anzeigen Safari Symbolleiste und Navigationsleiste ausblenden aktiviert haben Das liegt daran dass das Aussehen der Statusleiste automatisch an das Aussehen der Safari Navigationsleiste angepasst wird wenn diese sichtbar ist F r das Attribut Symbol sind zwei Optionen verf gbar m Eigenes Symbol verwenden Verwenden Sie diese Option wenn Sie ein eigenes Webclip Symbol f r Ihr mobiles Safari Webprogramm entwerfen m chten Ausf hrliche Informationen hierzu finden Sie im Abschnitt Entwerfen eines Webclip Symbols Seite 59 Wenn Sie diese Option verwenden k nnen Sie auch angeben ob automatisch ein Glaseffekt hinzugef gt werden soll indem Sie das Markierungsfeld Glaseffekt hinzuf gen aktivieren Sie k nn
101. hteck enth lt auch die ffentliche Eigenschaft rows die Zugriff auf alle Zeilenelemente in der Liste gew hrt Werden die Daten f r die Liste dynamisch bereitgestellt k nnen Sie mit der Eigenschaft rows derzeit gef llte Zeilen in der R ckfragemethode prepareRow anzeigen w hrend die Liste weiter gef llt wird Die Anzeige aller Zeilen ist jedoch erst m glich wenn die Liste vollst ndig gef llt ist Sowohl f r statische als auch f r dynamische Listen ist die Eigenschaft rows u erst n tzlich um nach dem F llen der Liste Zugriff auf bestimmte Zeilen zu erhalten Erh lt Ihre Liste in einem abgerundeten Rechteck die Daten dynamisch sollten Sie unbedingt die Funktion reloadData aufrufen damit die Liste neu geladen wird und den aktualisierten Inhalt anzeigt Beachten Sie dass die Funktion reloadData automatisch aufgerufen wird wenn das Listenelement initialisiert wird F gen Sie dazu die folgenden Codezeile zu Ihrem Listen Controller hinzu document getElementById myList object reloadData Liste in abgerundetem Rechteck 99 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente Geteiltes Layout Das Element Geteiltes Layout ist f r die Verwendung in Safari Webprogrammen konzipiert Ein geteiltes Layout ist ein Bereich der aus zwei in der Gr e anpassbaren Teilbereichen mit einer Trennlinie besteht Im Informationsfenster Attribute k nnen Sie die Ausrichtung des geteilten Layouts anpassen
102. ideo In diesem Element wird der ausgew hlte Filmtrailer angezeigt Dar ber hinaus verf gt es ber Steuerelemente f r die Wiedergabe Bewegen Sie das Element Video in die untere H lfte des Arbeitsbereichs unter das Element Bild das Sie gerade hinzugef gt haben und unter das Wort Description ndern Sie mithilfe der Aktivpunkte die Gr e des Elements Video bis die Anordnung im Arbeitsbereich Ihren Vorstellungen entspricht berpr fen Sie im Navigationsbereich ob sich die gerade hinzugef gten Objekte image und video innerhalb des Objekts detai1Box befinden Gehen Sie wie folgt vor Anpassen der Benutzeroberfl che des Safari Webprogramms 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten 1 Bewegen Sie das Objekt image im Navigationsbereich langsam nach oben bis das Objekt detai1Box hervorgehoben wird und unter dem Objekt detailDescription eine blaue Linie angezeigt wird vgl Abbildung 3 5 Abbildung3 5 Das Objekt image wird im Navigationsbereich zum Objekt detai Box bewegt H MeinKinoTrailerProjekt v FA splitLayout gt EJ masterView gt EJ splitter v E detailview gt BF detailHeader line Description 2 Lassen Sie die Maustaste los Das Objekt image befindet sich im Navigationsbereich nun direkt unter dem Objekt detailDescription 3 Bewegen Sie nun das Objekt video ebenfalls langsam nach oben
103. idgets 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 4 Starten eines Projekts Dashcode Vorlagen Seite 87 finden Sie Informationen zu den spezifischen Eigenschaften der einzelnen Vorlagen Bereitstellen von Attributen fiir ein Webprogramm F r jedes Webprogramm Projekt m ssen bestimmte Werte bereitgestellt werden damit die Produkte richtig funktionieren Sie k nnen diese Werte im Bereich Programmattribute festlegen der angezeigt wird wenn Sie Programmattribute im Navigationsbereich ausw hlen Auch wenn nur der Seitentitel ein erforderliches Attribut ist empfiehlt es sich dennoch die anderen Werte festzulegen damit ihr Webprogramm wie beabsichtigt funktioniert Einige Vorlagen verf gen im Bereich Programmattribute ber einen Abschnitt Eigenschaften in dem Sie vorlagenspezifische Optionen festlegen k nnen Weitere Informationen zu den Optionen die Sie f r eine Vorlage festlegen k nnen finden Sie in den Beschreibungen der einzelnen Vorlagen im Abschnitt Webprogramm Vorlagen Seite 91 In Dashcode Version 3 0 und neuer unterscheiden sich einige der Programmattribute in Abh ngigkeit davon ob Sie ein Safari Webprogramm oder ein mobiles Safari Webprogramm entwickeln Wenn Sie beide Art von Webprogrammen entwickeln sehen Sie unter der Symbolleiste eine Produktleiste mit den Tasten Safari und Mobile Safari Klicken Sie auf diese Tasten um zwischen den Attributen f r die einzelnen Produk
104. idgets testen indem Sie Darstellung gt Symbolleiste anpassen ausw hlen Bewegen Sie im daraufhin angezeigten Dialogfenster das Einblendmen Sprache in die Symbolleiste des Projektfensters und klicken Sie auf Fertig Sie k nnen nun eine Sprache aus dem Einblendmen Sprache ausw hlen um die lokalisierte Version Ihres Widgets zu sehen Klicken Sie in der Symbolleiste auf Ausf hren um das Widget in der ausgew hlten Sprache auszuf hren Plug Ins f r Widgets Mit Dashcode k nnen Sie einem Widget ein Widget Plug In zuweisen Wenn Sie mit Xcode ein eigenes Widget Plug In erstellt haben und dieses in Ihr Widget integrieren m chten w hlen Sie Widget Attribute im Navigationsbereich und klicken Sie im Abschnitt Widget Plug In auf W hlen W hlen Sie anschlie end das gew nschte Widget Plug In aus Lokalisierung 85 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 8 Erweiterte Themen zu Widgets Weitere Informationen Uber Widget Plug Ins finden Sie unter Creating a Widget Plug in im Dokument Dashboard Programming Topics 86 Plug Ins f r Widgets 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG A Dashcode Vorlagen Apple stellt eine Reihe von Dashcode Vorlagen bereit In diesem Anhang werden die Funktionen der einzelnen Dashcode Vorlagen beschrieben Widget Vorlagen Bei allen Widget Vorlagen k nnen Sie im Bereich Widget Attribute Werte festlegen die zur Identifizierung des Widgets
105. ie Ihr Webprogramm im Cache ben tigt damit das Programm auch offline ausgef hrt werden kann Hinzuf gen eines Handlers f r ein Ereignis Event 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Hinweis Dashcode f gt dem Attribut manifest automatisch alle Dateien hinzu die von Ihrem Projekt ben tigt werden Sie k nnen das Attribut manifest ndern nachdem Sie Ihr Projekt implementiert bzw auf Festplatte gesichert haben Dashcode verwendet f r die manifest Datei standardm ig den Namen OfflineApp manifest und f gt die Datei dem entsprechenden Produktordner Safari bzw Mobile Ihres gesicherten Projekts und den implementierten Projektordnern hinzu Zum Aktivieren der Offline Nutzung Ihres Webprogramms aktivieren Sie das Markierungsfeld Offline Darstellung im Abschnitt Allgemein des Bereichs Programmattribute Dashcode f gt das Attribut manifest zum Element HTML in der Datei index htm hinzu Dashcode stellt Ihnen zur Unterst tzung der Offline Nutzung Ihres Webprogramms einige Codebausteine zur Verf gung die Sie verwenden k nnen um nderungen im Online Status abzufragen und entsprechend zu reagieren Sie k nnen angeben ob Sie diese Events erhalten m chten wenn sich der Benutzer an oder abmeldet und Sie k nnen gegebenenfalls zus tzlichen Code schreiben um die Benutzeroberfl che zu aktualisieren oder auf andere Ressourcen zuzugreifen
106. ie Widget Attribute anzuzeigen Klicken Sie auf die Plustaste und w hlen Sie eine Sprache wenn Ihr Widget f r eine andere Sprache lokalisiert werden soll Neben dem Namen der Sprache in der ersten Tabelle k nnen Sie einen bersetzten Namen f r Ihr Widget eingeben Dieser Name wird im Finder und in der Widget Leiste von Dashboard f r das Widget verwendet Die Tabelle auf der rechten Seite enth lt alle Zeichenfolgen die in Ihrem Widget verwendet werden In dieser Tabelle k nnen Sie durch Doppelklicken auf einen Begriff in der Spalte Wert die bersetzten Versionen f r die Zeichenfolgen eingeben Sie k nnen zus tzliche Kombinationen aus Schl ssel und Wert f r die Lokalisierung hinzuf gen indem Sie auf die Plustaste klicken einen eindeutigen Schl sselnamen und anschlie end die lokalisierte Version rechts neben dem Schl ssel eingeben Wenn Sie eine Sprache f r die Lokalisierung hinzuf gen wird ein sprachspezifischer Projektordner zum Widget hinzugef gt Neben den bersetzten Zeichenfolgen k nnen Sie alle lokalisierten Ressourcen wie Style Sheets oder Bilder in einem sprachspezifischen Projektordner ablegen W hlen Sie Darstellung gt Dateien um alle sprachspezifischen Ordner anzuzeigen Sie erkennen die Ordner an der Erweiterung proj Weitere Informationen ber die Widget Lokalisierung finden Sie unter Localizing Widgets im Dokument Dashboard Programming Topics Sie k nnen die lokalisierte Version Ihres W
107. ie auf Sync starten wenn diese Funktion wieder aktiviert werden soll Platzieren Wenn Sie ein Bild wie etwa ein Logo auf dem Widget Symbol platzieren m chten klicken Sie auf Platzieren und w hlen Sie die Bilddatei aus Sobald das Bild platziert ist k nnen Sie es bewegen und in der Gr e ver ndern Importieren Wenn Sie ein bestimmtes Bild als Widget Symbol verwenden m chten k nnen Sie auf Importieren klicken und das gew nschte Bild im daraufhin angezeigten Dialogfenster ausw hlen In externem Editor ffnen Wenn Sie das Widget Symbol in einem anderen Programm anpassen m chten k nnen Sie auf In externem Editor ffnen klicken Das Symbol wird daraufhin in Ihrem standardm igen PNG f higen Programm ge ffnet Entwerfen eines Webclip Symbols Ein mobiles Safari Webprogramm kann ein Webclip Symbol bereitstellen das die Benutzer auf ihrer Home Seite platzieren und als eine Art Lesezeichen f r das Programm verwenden k nnen Wenn ein Benutzer auf ein Webclip Symbol tippt wird das Webprogramm automatisch ge ffnet ohne dass der Benutzer zu diesem Programm navigieren muss Webclip Symbole sollten einfach ansprechend und leicht zu erkennen sein Entwerfen eines Widget Symbols 59 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Das Bereitstellen eines Webclip Symbols ist f r die meisten mobilen Safari Webprogramme sehr sinnvoll
108. in Widget 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Importieren Wenn Sie ein bestimmtes Bild als Standardbild eines Widgets verwenden m chten k nnen Sie auf Importieren klicken und das gew nschte Bild im daraufhin angezeigten Dialogfenster ausw hlen In externem Editor ffnen Wenn Sie das Standardbild in einem anderen Programm anpassen m chten k nnen Sie auf In externem Editor ffnen klicken In diesem Fall wird das in Dashcode angezeigte Standardbild in Ihrem standardm igen PNG f higen Programm ge ffnet Entwerfen eines Widget Symbols Mit dem Widget Symboleditor k nnen Sie ein Widget Symbol entwerfen Das Widget Symbol wird in der Widget Leiste des Dashboards und im Widget Manager angezeigt W hlen Sie Widget Symbol im Navigationsbereich um den Widget Symboleditor anzuzeigen Blenden Sie das Informationsfenster F llung amp Linien ein um die Darstellung des Hauptteils des Widget Symbols anzupassen Sie k nnen die Art der F llung die Eckenabrundung die Deckkraft und den Linienstil anpassen Die Symbolleiste unten im Widget Symboleditor bietet zus tzliche Konfigurationsoptionen f r Widget Symbole Sync starten Sync stoppen Standardm ig synchronisiert Dashcode das Aussehen der Vorderseite eines Widgets mit dem Widget Symbol Klicken Sie auf Sync stoppen wenn diese Funktion deaktiviert werden soll Klicken S
109. ine grafische Darstellung ihrer Struktur im Quellcode Editor unterhalb des Arbeitsbereichs anzuzeigen Diese grafische Darstellung wird Datenmodell genannt und zeigt die Struktur der Datenquelle die Datentypen der darin enthaltenen Eigenschaften und sofern m glich eine Vorschau der Daten Sie k nnen die Datenmodellansicht verwenden um Bindungen zu erstellen und sehen auf einen Blick welche Elemente der Benutzeroberfl che Bindungen zu den Eigenschaften in der Datenquelle haben Weitere Informationen zum Erstellen von Bindungen finden Sie im Abschnitt Erstellen von Bindungen Seite 67 Wenn Sie den Zeiger ber eine bestehende Bindung im Datenmodell bewegen k nnen Sie sehen welche Elemente Bindungen zu Eigenschaften in der ausgew hlten Datenquelle haben Das verkn pfte Element wird im Arbeitsbereich hervorgehoben Dashcode zeigt in der Datenmodellansicht die hierarchische Struktur der Datenquelle an Die neben den einzelnen Eigenschaften angezeigten Dreiecksymbole bedeuten dass es f r die betreffende Eigenschaft weitere untergeordnete Eigenschaften gibt die auch als Kinder bezeichnet werden Wenn Sie auf das Anzeigen der Datenquellen und Bindungen eines Projekts 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Dreiecksymbol klicken wird eine Liste der untergeordneten Eigenschaften eingeblendet Wird der Zeiger ber eine Kind Eigenschaft bewegt hebt Dashcod
110. inweis Wenn Sie ein Widget weitergeben oder ein Webprogramm bereitstellen m chten sollten Sie darauf achten dass nur standardm ige Mac OS X Schriften wie etwa Helvetica Neue Times oder Monaco verwendet werden m Im Informationsfenster Bindungen k nnen Sie die Bindungen zwischen einer Datenquelle und spezifischen Eigenschaften des ausgew hlten Elements festlegen und anpassen F r jede bindbare Eigenschaft des Elements k nnen Sie die Datenquelle angeben zu der die Bindung hergestellt werden soll sowie den Schl sselpfad des Objekts in der Datenquelle eine Wertetransformation sowie Platzhalterwerte Weitere Informationen zur Wertetransformation finden Sie im Abschnitt Hinzuf gen einer Wertetransformation Seite 69 Es ist nicht zwingend erforderlich zum Erstellen der Bindungen das Informationsfenster Bindungen zu verwenden Sie k nnen stattdessen Verbindungslinien zwischen den Objekten in der Datenmodellansicht und den Elementen im Arbeitsbereich bzw in der Liste im Navigationsbereich ziehen Informationen zum Einblenden der Datenmodellansicht finden Sie im Abschnitt Anzeigen der Datenquellen und Bindungen eines Projekts Seite 64 Weitere Informationen zum Erstellen von ndern der Eigenschaften eines Elements bzw Objekts 55 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Bindungen finden Sie im Abschnitt Erstellen
111. inzuf gen k nnen finden Sie im Abschnitt Dashcode Elemente Seite 93 Weitere Informationen ber JavaScript und die Dashboard Programmierschnittstellen finden Sie im Abschnitt Verwenden von HTML CSS und JavaScript Programmierschnittstellen Seite 66 Codevervollst ndigung mit Code Sense 72 Der Quellcode Editor von Dashcode verf gt ber eine Codevervollst ndigungsfunktion die auf der Basis des teilweise eingegebenen Texts m gliche Variablen und Funktionsnamen vorschl gt Wenn Code Sense einen Vorschlag anbietet wird der von Ihnen eingegebene Text unterstrichen Dr cken Sie die Tastenkombination Wahl esc um eine Liste der Vorschl ge anzuzeigen Verwenden Sie die Auf und Abw rtspfeile um die gew nschte Funktion auszuw hlen Dr cken Sie die Tabulatortaste um das Symbol hinzuzuf gen Dr cken Sie die Taste esc wenn die Vorschlagsliste wieder ausgeblendet werden soll Hinzuf gen von Code f r eigene Controller 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Weitere Informationen zu den Code Sense Einstellungen finden Sie im Abschnitt Einstellungen f r die Codebearbeitung Seite 75 Codebausteine Dashcode verf gt ber eine Reihe mehrfach verwendbarer Codeteile die Codebausteine genannt werden Jeder Codebaustein stellt eine bestimmte Funktion bereit die Sie zur Optimierung Ihres Widgets oder Webprogramms verwenden k nn
112. ird Wenn Sie ein Element zu der Oberfl che eines Widgets oder Webprogramms hinzuf gen m chten bewegen Sie es aus der Elemente Bibliothek in den Hauptteil des Widgets oder Webprogramms im Arbeitsbereich Sobald sich ein Element im Arbeitsbereich befindet k nnen Sie seine Eigenschaften ndern wie im Abschnitt ndern der Eigenschaften eines Elements bzw Objekts Seite 54 beschrieben Zus tzliche Informationen zum Anordnen von Elementen auf der Oberfl che Ihres Projekts finden Sie im Abschnitt Anordnen und Sch tzen von Elementen Seite 56 Eine Reihe von Dashcode Elementen k nnen auch ber den Programmcode manipuliert werden Im Kapitel Dashcode Elemente Seite 93 finden Sie ausf hrliche Informationen zu diesen Elementen Verwenden von Fotos aus iPhoto Sie k nnen ein beliebiges Foto aus Ihrer iPhoto Mediathek in den Arbeitsbereich bewegen um es in ein Widget oder Webprogramm zu integrieren W hlen Sie Fenster gt Bibliothek einblenden und klicken Sie auf Fotos um die iPhoto Mediathek anzuzeigen Sobald sich das Foto im Arbeitsbereich befindet k nnen Sie es beliebig anordnen wie im Abschnitt Anordnen und Sch tzen von Elementen Seite 56 beschrieben und seine Eigenschaften anpassen wie im Abschnitt ndern der Eigenschaften eines Elements bzw Objekts Seite 54 beschrieben Hinweis F r die iPhoto Mediathek ist iPhoto 6 oder neuer erforderlich ndern der Eigenschaften eines El
113. iste bzw das Gitter selbst zur Datenquelle Das liegt daran dass Dashcode die Elemente Liste und Gitter mithilfe von Datenquellen und Bindungen implementiert und nicht mithilfe von Controller Objekten Das bedeutet dass Sie die Eigenschaft selection einer Datenquelle Liste oder Gitter die das ausgew hlte Objekt in einer Zeile oder Zelle darstellt an ein anderes Element im Arbeitsbereich binden k nnen beispielsweise an ein Element in der Detailansicht Den Speicherort einer Datenquelle geben Sie mithilfe einer URL Adresse zu einem JSON oder XML Feed an Sie k nnen auch den lokalen Pfad einer Datei mit statischen Daten als Datenquelle angeben Es ist nicht erforderlich den Speicherort f r eine Datenquelle anzugeben die ein Element Liste oder Gitter darstellt In Abh ngigkeit von der f r Ihr Projekt verwendeten Vorlage gibt es zwei M glichkeiten den Speicherort einer Datenquelle anzugeben Bei allen Projekten k nnen Sie in der Datenmodellansicht der neuen Datenquelle eine URL Adresse eingeben w hlen Sie die neue Datenquelle in der Liste Datenquellen aus um das Datenmodell einzublenden Bei Projekten die auf den Vorlagen RSS Podcast Karten Photocast Video Podcast oder T glicher RSS Feed basieren k nnen Sie die URL Adresse auch im Abschnitt Eigenschaften des Bereichs Widget Attribute bzw Programmattribute eingeben Wenn Sie eine g ltige URL Adresse eingegeben haben aktualisiert Dashcode da
114. k wird vom Element Browser automatisch verarbeitet Arbeitsbereich 94 Bei dem Element Arbeitsbereich handelt es sich um einen anpassbaren Bild bzw Zeichenbereich den Sie einem Widget hinzuf gen k nnen Unter Using the Canvas wird erl utert wie Sie mit JavaScript in einem Arbeitsbereich zeichnen k nnen Box 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente Kurzwahltaste Das Element Kurzwahltaste ist f r die Verwendung in einem Webprogramm konzipiert Mit der Kurzwahltaste k nnen Benutzer auf einfache Weise einen Telefonanruf t tigen Im Informationsfenster Attribute k nnen Sie eine Telefonnummer angeben die standardm ig gew hlt wird wenn Benutzer auf diese Taste tippen Das Element Kurzwahltaste umfasst JavaScript Code f r die Ausf hrung einiger Standardaktionen etwa Methoden zum Abrufen und Festlegen der Telefonnummer Ist die Taste aktiviert wird standardm ig die aktuell festgelegte Telefonnummer gew hlt wenn der Benutzer auf die Taste tippt Mit der Methode setPhoneNumber k nnen Sie festlegen dass Benutzer die Telefonnummer dynamisch ndern k nnen Spalten Layout Das Element Spalten Layout ist ein Bereich in dem Sie Inhalte nebeneinander anordnen k nnen Dieses Element ist besonders f r Webprogramme von Nutzen da die Inhalte in den Spalten absolut oder relativ zum Texfluss positioniert werden k nnen Wenn eine Spalte beispielsweise Bilder mit fester G
115. kten an Safari und Dashboard sowie eine Reihe von Vorlagen f r jeden Projekttyp Vorlagen sind eine praktische Ausgangsbasis f r das Erstellen g ngiger Webprogramme und Widgets Wenn Sie wissen m chten welche Funktionen eine bestimmte Vorlage bietet w hlen Sie das Symbol der Vorlage aus und lesen Sie die kurze Beschreibung W hlen Sie f r diese Einf hrung den Projekttyp Safari aus Gehen Sie anschlie end wie folgt vor um ein Projekt zu erstellen mit dem zwei Browser Webprogramme erstellt werden 1 W hlen Sie die Vorlage Browser 2 Vergewissern Sie sich dass beide Markierungsfelder Entwickeln f r aktiviert sind beide Markierungsfelder sind standardm ig aktiviert 3 Klicken Sie auf Ausw hlen Das Dialogfenster wird ausgeblendet und im Projektfenster wird die erste Seite eines neuen Webprogramms angezeigt das auf der Vorlage Browser basiert vgl Abbildung 3 2 Ausw hlen einer Vorlage 29 2009 06 09 2009 Apple Inc All Rights Reserved 30 KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Abbildung 3 2 Ein neues Projekt zur Entwicklung von zwei Produkten 000 Ohne Titel z Te ow O a Ausf hren Pause Darstellung Safari Mobile Safari LL Khe re PS ELLES EE D Pe RENE EET ENT lee eee e P BUELL LU LE Ti oF 0 1bo 20 sho abo sho bo re Y a Ohne Titel CEE Title E splitLayout a Location Description FR Programmattribute Ar
116. ley Death Valley Denali Preserve Grand Canyon Haleakala Nachdem Sie nun die Standardansicht und das Standardverhalten der beiden erstellten Produkte gesehen haben k nnen Sie mit den Anpassungen beginnen damit beide Produkte die Filmtrailer hnlich wie in Abbildung 3 1 Seite 28 dargestellt anzeigen Beenden Sie jedoch zuerst die Simulation des mobilen Safari Webprogramms Wie nach dem Testen des Safari Webprogramms k nnen Sie die Simulation beenden indem Sie Beenden aus dem Programmmen des Simulationsprogramms ausw hlen die Tastenkombination Befehl Q dr cken oder auf das rote Schlie feld klicken das sich oben links im Simulatorfenster befindet Sie k nnen auch in Dashcode auf die rote Stopptaste in der Symbolleiste klicken Anpassen der Benutzeroberfl che des Safari Webprogramms Wenn Sie das fertige Safari Webprogramm in Abbildung 3 1 Seite 28 mit dem Standardprodukt in Abbildung 3 3 Seite 32 vergleichen werden Ihnen einige Unterschiede auf der Detailseite auffallen Das fertige Safari Webprogramm zeigt unter anderem die folgenden Details ber den ausgew hlten Film an m Titel m Bewertung m Posterbild m Beschreibung Trailer Anpassen der Benutzeroberfl che des Safari Webprogramms 33 2009 06 09 2009 Apple Inc All Rights Reserved 34 KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten In diesem Abschnitt wird beschrieben wie Sie die standardm ige B
117. licken Sie k nnen auch die Markierung aus dem Feld neben dem Breakpoint Objekt in der Tabelle entfernen um den Breakpoint zu l schen Codeauswertung Wenn Sie ein Widget oder Webprogramm ausf hren kann es gelegentlich sinnvoll sein nur eine einzelne Codezeile auszuf hren Hierf r k nnen Sie die Codeauswertung verwenden W hlen Sie Darstellung gt Auswertung oder w hlen Sie Code Auswertung aus dem Men Darstellung in der Symbolleiste um das Fenster Auswertung anzuzeigen In der Codeauswertung k nnen Sie beliebigen Code eingeben und den Zeilenschalter dr cken um den Code sofort auszuf hren Durch Doppelklicken auf einen Wert in der Stackframes amp Variablen Tabelle k nnen Sie dessen Namen direkt in die Codeauswertung bernehmen Befindet sich der Cursor direkt hinter der Eingabeaufforderung k nnen Sie den Aufw rtspfeil dr cken um durch alle bisherigen Eintr ge in der Codeauswertung zu bl ttern Bereitstellen eines Widgets Sobald Sie die Entwicklung eines Widgets abgeschlossen haben k nnen Sie dieses Widget auch anderen zur Verf gung stellen Es gibt zwei Befehle f r die Bereitstellung von Widgets Bei beiden Befehlen wird das Widget als wdgt Paket aus dem Projekt exportiert und kann anschlie end in Dashboard ausgef hrt werden Wenn Sie im Navigationsbereich auf Ausf hren amp Freigeben klicken wird ein Bereich angezeigt in dem Sie w hlen k nnen ob das Widget f r Mac OS X 10 4 3 oder neuer oder
118. lten W hlen Sie Ausf hren oder Im Vollbildmodus ausf hren aus dem angezeigten Men Nachdem Sie das Men objekt ausgew hlt haben wird Ihr Webprogramm durch Klicken auf Ausf hren oder Auswahl von Debug gt Ausf hren bis zu einer nderung in diesem Modus ausgef hrt In Dashcode Version 3 0 und neuer k nnen Sie die Ausf hrung eines Webprogramms auf dem Server der die Datenquellen des Programms bereitstellt simulieren Wenn Sie das Programm zum ersten Mal in Dashcode ausf hren wird von Dashcode ein Dialogfenster angezeigt in dem Sie gefragt werden ob eine Simulation der Programmausf hrung auf einem entfernten Server oder auf Ihrem lokalen Computer erfolgen soll m Klicken Sie auf Simulieren um die Ausf hrung auf einem entfernten Server zu simulieren den Sie im Bereich Programmattribute oder im Feld URL einer Datenquelle angegeben haben Dashcode verwendet diesen entfernten Server f r die Simulation bis Sie einen anderen Server angeben oder bis Sie das Markierungsfeld Simulation im Abschnitt Ausf hren des Bereichs Ausf hren amp Freigeben deaktivieren Wenn Sie sich f r eine dieser Vorgehensweisen entscheiden wird ein Dialogfenster angezeigt in dem Sie das Simulationsverfahren best tigen m ssen das bei der n chsten Ausf hrung Ihres Webprogramms angewendet wird m Klicken Sie auf Fortfahren um die Ausf hrung auf Ihrem lokalen Computer zu simulieren Hinweis Wenn Sie ein Webprogramm im Dashc
119. m ssen und wo Sie die entsprechenden Optionen und Funktionen finden Wenn Sie einen Schritt abschlie en k nnen Sie ihn als erledigt markieren und mit dem n chsten Schritt fortfahren Ausw hlen einer Vorlage 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms Hinweis Wenn die einzelnen Schritte des Arbeitsablaufs nicht angezeigt werden sollen k nnen Sie diese ausblenden indem Sie Darstellung gt Schritte auswahlen oder auf das Symbol mit dem Hakchen unten im Projektfenster klicken dieses Symbol ist in Abbildung 2 1 optisch hervorgehoben Anstelle des Arbeitsablaufs k nnen Sie auch eine Liste der zum Webprogramm geh renden Dateien anzeigen Wahlen Sie hierf r Darstellung gt Dateien oder klicken Sie auf Symbol mit der Liste unten im Projektfenster dieses Symbol sieht wie eine Miniatur einer ungeordneten Liste aus Informationen zur Vorlage Mit der Vorlage Browser erhalten Sie ein mobiles Safari Webprogramm das einige bereits vorhandene Informationen anzeigt und die Navigation von einer Seite zur n chsten unterst tzt Sie mUssen das Programm nicht anpassen um es zu testen sollten jedoch einen Titel festlegen Wahlen Sie im Arbeitsbereich das Wort Browser durch Doppelklicken aus und geben Sie einen neuen Titel ein z B Parks Dieser Titel wird in der Kopfzeile der ersten Seite angezeigt Als n chstes sollten Sie der Webseite
120. m Navigationsbereich auf Widget Attribute klicken und die im Abschnitt Eigenschaften verf gbaren Optionen anpassen Folgende Optionen stehen zur Verf gung Photocast URL Setzen Sie die URL Adresse f r einen Photocast ein Bild wechseln Geben Sie an in welchen Intervallen die Bilder angezeigt werden sollen bergang Richtung Legen Sie den bergang fest der bei einem Bildwechsel verwendet werden soll Geben Sie falls m glich auch die Richtung f r den bergang an Titel einblenden Legen Sie die Bedingungen f r die Anzeige des Photocast Titels fest Vorlage Quartz Composer Mit der Vorlage Quartz Composer wird ein Widget erstellt das eine Quartz Composer Komposition anzeigt Quartz Composer Kompositionen k nnen in Widgets verwendet werden um grafische Daten zu verarbeiten und anzuzeigen Sie k nnen diese Vorlage anpassen indem Sie die Liste Dateien einblenden und die Datei Default qtz im Quartz Composer ffnen Quartz Composer wird als Komponente der Developer Tools f r Mac OS X 10 5 installiert Weitere Informationen ber die Verwendung von Quartz Composer finden Sie im Dokument Quartz Composer Programming Guide Weitere Informationen ber das Quartz Composer WebKit Plug In das Plug In auf dem die Vorlage Quartz Composer basiert finden Sie im Dokument Quartz Composer Webkit Plug in JavaScript Reference Widget Vorlagen 89 2009 06 09 2009 Apple Inc All Rights Reserved 90 ANHANG A Dashcode
121. n Quellcode und Erstellen von Bindungen eine Datei oder eine Datenquelle ausw hlen wird ihr Inhalt im Quellcode Editor angezeigt Wenn Sie ein Projekt zum ersten Mal ffnen enth lt das Einblendmen mit dem Dateiverlauf die Dateien die Sie wahrscheinlich ffnen werden z B main js main css und index html bzw main htm In Abh ngigkeit von der Datei die Sie momentan im Quellcode Editor anzeigen enth lt das Men mit den Funktionen die Namen aller Funktionen in einer JavaScript Datei bzw aller Regeln in einer CSS Datei Beim Anzeigen von HTML Dateien plist Dateien oder Datenquellen ist das Men mit den Funktionen nicht verf gbar Mithilfe eines Event Handlers k nnen Sie auf einfache Weise Quellcode zu einem Element Ihrer Benutzeroberfl che hinzuf gen Hierf r wird das Informationsfenster Behaviors verwendet wie im Abschnitt Hinzuf gen eines Handlers f r ein Ereignis Event Seite 70 beschrieben Wenn Sie Dashcode Version 3 0 oder neuer verwenden wird meist Programmcode hinzugef gt wenn eine Wertetransformation erforderlich ist um anhand der Informationen in Ihrem Projekt einen f r die Anzeige geeigneten Wert bereitzustellen Hierf r wird das Informationsfenster Bindungen verwendet wie unter Hinzuf gen einer Wertetransformation Seite 69 beschrieben Wenn Sie mit externen Ressourcen au erhalb des Widgets oder Webprogramms wie beispielsweise XMLHttpRequest Befehlszeilentools Java Applets u 4 arbeit
122. n Sie sich schnell und einfach mit der Erstellung von mobilen Safari Webprogrammen in Dashcode vertraut machen Bei dieser Einf hrung handelt es sich um die zweite von drei Einf hrungen im vorliegenden Dokument Wenn Sie Informationen zur Entwicklung von Dashboard Widgets ben tigen lesen Sie das Kapitel Einf hrung in die Erstellung eines Dashboard Widgets Seite 13 Wenn Sie Informationen zum Erstellen eines Projekts mit dem sowohl ein mobiles Safari Webprogramm als auch ein Safari Webprogramm f r Computersysteme entwickelt werden kann lesen Sie bitte das Kapitel Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Seite 27 Im verbleibenden Teil des Dokuments beginnend mit dem Kapitel Starten eines Projekts Seite 47 wird n her auf die Entwicklungsumgebung von Dashcode eingegangen und beschrieben wie das Programm die Entwicklung von Widgets und Webprogrammen unterst tzt Bevor Sie beginnen In dieser Einf hrung werden Sie ein mobiles Safari Webprogramm entwickeln mit dem Informationen zu verschiedenen Nationalparks angezeigt werden k nnen Dieses Projekt basiert auf der Vorlage Browser f r ein Webprogramm und unterst tzt die Navigation durch mehrere Inhaltsebenen Bevor Sie fortfahren sollten Sie sicherstellen dass Dashcode 3 0 auf Ihrem Macintosh Computer installiert ist das Installationsverzeichnis lautet Developer Applications Ist Dashcode noch nicht installiert sollten Si
123. n das gew nschte Element mit dem die Bindung erstellt werden soll hervorgehoben ist Daraufhin wird ein Kontextmen angezeigt in dem die bindbaren Eigenschaften f r das ausgew hlte Element aufgelistet sind 3 Wahlen Sie die entsprechende Eigenschaft aus um das Erstellen der Bindung abzuschlie en Soll die betreffende Bindung nicht abgeschlossen werden nachdem Sie das Bindungssteuerelement bewegt haben k nnen Sie einfach auf eine Stelle au erhalb des Kontextmen s klicken Die Bindung wird in diesem Fall nicht erstellt Hinweis Sie k nnen die Bindung auch erstellen indem Sie ein Bindungssteuerelement im Datenmodell zu einem Objekt im Navigationsbereich bewegen Diese Vorgehensweise empfiehlt sich beispielsweise wenn das Element mit dem die Bindung erstellt werden soll im Arbeitsbereich schlecht zu sehen ist Wenn Sie eine Bindung mit einem Objekt im Navigationsbereich erstellen k nnen Sie die Bindung wie in den Schritten 2 und 3 beschrieben abschlie en Wenn das Informationsfenster Bindungen nicht bereits angezeigt wurde wird es eingeblendet sobald Sie eine Bindung abgeschlossen haben Sie k nnen nun eine Wertetransformation festlegen und Platzhaltertext bzw Platzhalterwerte eingeben Sie k nnen auch direkt im Informationsfenster Bindungen neue Bindungen erstellen ohne die Verbindungslinien durch Bewegen im Datenmodell zu generieren Gehen Sie wie folgt vor 1 W hlen Sie das zu bindende Element im Arbeitsb
124. ndardwebseiten die auf Standardtechnologien wie HTML Hypertext Markup Language CSS Cascading Style Sheets und JavaScript basieren m Webprogramme Webseiten die den Benutzern spezielle Funktionen bereitstellen Webprogramme nutzen ebenfalls Webtechnologien wie HTML CSS und JavaScript Mit Dashcode k nnen Sie spezielle Safari Webprogramme f r Mobilger te wie das iPhone oder den iPod touch entwickeln dieim Folgenden als mobile Safari Webprogramme bezeichnet werden Diese Programme sind auch als iPhone Webprogramme bekannt da es sich um Webprogramme handelt die f r die Verwendung von Safari auf dem iPhone optimiert sind Dar ber hinaus k nnen Sie Webprogramme entwickeln die f r Safari auf Computersystemen optimiert sind Diese Webprogramme werden im Folgenden als Safari Webprogramme bezeichnet Die integrierte Umgebung von Dashcode erm glicht das Entwerfen Codieren und Testen von Widgets und Webprogrammen ohne dass hierf r andere Programme ge ffnet werden m ssen Die verf gbaren Layout Werkzeuge Designfunktionen und Editoren vereinfachen die Erstellung der Ressourcen die f r diese Projekte ben tigt werden Dar ber hinaus stehen auch praktische Codierungs und Debugging Werkzeuge zur Verf gung die Sie bei der Verwaltung und beim Testen des geschriebenen Codes unterst tzen Zielgruppen Lesen Sie das Dashcode Benutzerhandbuch um N heres ber die Verwendung von Dashcode zum Erstellen von Webprogrammen und Dashboar
125. nformationen finden Sie im Abschnitt Bereitstellen von Attributen f r ein Webprogramm Seite 49 Wenn Sie ein mobiles Safari Webprogramm entwickeln m ssen Sie sicherstellen dass diese Optionen richtig festgelegt sind da dadurch bestimmt wird wie Benutzer Ihr Programm auf einem iPhone OS basierten Ger t sehen und wie Sie mit dem Programm kommunizieren k nnen Einige Vorlagen verf gen ber vorlagenspezifische Attribute die Sie im Abschnitt Eigenschaften des Bereichs Programmattribute festlegen k nnen Diese Attribute werden in den folgenden Abschnitten beschrieben Hinweis In Dashcode Version 3 0 und neuer verwenden die Vorlagen f r Webprogramme meistens anstelle der angepassten JavaScript Controller Datenquellen und Bindungen Weitere Informationen zu Datenquellen und Bindungen finden Sie im Abschnitt Anzeigen der Datenquellen und Bindungen eines Projekts Seite 64 Sehen Sie sich anschlie end den Programmcode in den Vorlagen an um zu sehen wie die Vorlagen aufgebaut sind und wie sie funktionieren Auf diese Weise k nnen Sie beispielsweise sehen wie Datenquellen und Bindungen dazu verwendet werden eine Detailansicht zu implementieren die ihren Inhalt aus dem ausgew hlten Objekt der Master Liste abruft Die Webprogramm Vorlage Leer Mit der Vorlage Leer f r Webprogramme wird ein leeres Webprogramm angelegt das die grundlegenden Dateien und Bilder enth lt die f r die Webprogramm Erstellung ben tigt werd
126. ng eines Projekts zur Entwicklung von zwei Produkten 27 Abbildung 3 1 Abbildung 3 2 Abbildung 3 3 Abbildung 3 4 Abbildung 3 5 Abbildung 3 6 Abbildung 3 7 Abbildung 3 8 Abbildung 3 9 Die fertigen Produkte Safari Webprogramm oben und mobiles Safari Webprogramm unten 28 Ein neues Projekt zur Entwicklung von zwei Produkten 30 Das standardm ige Safari Webprogramm im Dashcode Simulationsprogramm 32 Das standardm ige mobile Safari Webprogramm im iPhone Simulator 33 Das Objekt image wird im Navigationsbereich zum Objekt detai 1Box bewegt 35 Der Arbeitsbereich des Safari Webprogramms nach dem Hinzuf gen der neuen Elemente 36 Bestehende Bindungen und Bindungssteuerelemente im Datenmodell 37 Blaue Verbindungslinie zwischen der Eigenschaft einer Datenquelle und einem Objekt im Arbeitsbereich 39 Arbeitsbereich des mobilen Safari Webprogramms nach dem Hinzuf gen des Elements Bild zur Detailseite 43 2009 06 09 2009 Apple Inc All Rights Reserved ABBILDUNGEN 2009 06 09 2009 Apple Inc All Rights Reserved VORWORT Einf hrung zum Dashcode Benutzerhandbuch Dieses Dokument bietet einen berblick ber die Entwicklungsumgebung von Dashcode Sie finden hier Informationen wie Sie mit Dashcode zwei Arten von Projekten erstellen m Dashboard Widgets einfache unkomplizierte Programme die eine bestimmte Aufgabe in der Mac OS X Dashboard Umgebung ausf hren Bei Widgets handelt es sich eigentlich um Sta
127. ngsprotokoll bzw auf die Stackframes amp Variablen Tabelle beschr nkt je nachdem was angezeigt wird Ausf hrliche Informationen hierzu finden Sie in den Abschnitten Ausf hrungsprotokoll und Tracing Seite 79 und Pr fen von Speicherwerten Seite 80 Geben Sie einen Teil des Namens des gesuchten Objekts in das Suchfeld ein Nach Abschluss der Suche werden anstelle des Navigationsbereichs die Suchergebnisse angezeigt Wenn Sie ein Objekt in den Suchergebnissen ausw hlen wird entweder das betreffende Objekt bzw Element im Arbeitsbereich hervorgehoben oder die Quellcodedatei mit der Implementierung des Elements wird angezeigt Lineale und Hilfslinien Standardm ig werden am linken und oberen Rand des Arbeitsbereichs Lineale angezeigt In Verbindung mit den Hilfslinien k nnen die Lineale zur pr zisen Ausrichtung der Elemente verwendet werden Platzieren Sie den Mauszeiger zum Hinzuf gen einer Hilfslinie auf einer beliebige Stelle in einem der Lineale und bewegen Sie den Zeiger bei gedr ckter Maustaste in den Arbeitsbereich Sobald Sie den Mauszeiger vom Lineal wegbewegen wird eine Hilfslinie angezeigt die an der Stelle positioniert wird wo Sie die Maustaste loslassen Zum L schen einer Hilfslinie bewegen Sie diese einfach zur ck ins Lineal Sollen die Lineale ausgeblendet werden w hlen Sie Darstellung gt Lineale ausblenden Suchen nach Objekten bzw Elementen 57 2009 06 09 2009 Apple Inc All Rights Reser
128. nzeige Das Element Aktivit tsanzeige ist f r die Verwendung in einem Webprogramm konzipiert Eine Aktivit tsanzeige informiert den Benutzer dass eine Aufgabe oder ein Prozess ausgef hrt wird bietet jedoch keine Informationen ber den Fortschritt Das Element Aktivit tsanzeige umfasst JavaScript Code mit dem die Drehbewegung gestartet und gestoppt wird Sie k nnen die Methoden startAnimation und stopAnimation verwenden um die Drehbewegung einer Aktivit tsanzeige mit dem Status einer Aufgabe oder eines Prozesses zu koordinieren Zur ck Taste Das Element Zur ck Taste ist f r die Verwendung in einem mobilen Safari Webprogramm konzipiert In einem mobilen Safari Webprogramm das mehrere Informationsebenen anzeigt k nnen Benutzer ber die Zur ck Taste ihre Schritte im Programm bequem zur ckverfolgen Damit kann ein Programm seine Navigationsstruktur in einer einzigen URL Adresse darstellen Aktivit tsanzeige 93 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente Das Element Zur ck Taste wird bei einem auf der Vorlage Browser basierenden mobilen Safari Projekt automatisch zum Code hinzugef gt Es wird standardm ig auf allen Ebenen angezeigt mit Ausnahme der obersten Ebene Box Bei dem Element Box handelt es sich um einen bei Bedarf mit Rollbalken versehenen Bereich der zum Anzeigen von Inhalten verwendet werden kann die gr er sind als der Anzeigebereich eines Widgets ode
129. nzuf gen von Code zum Ausl sen einer Aktion bei Aktivierung der Taste a Behaviors button 9 T Events Handler onclick detailButtonHandi ongesturech function detailButtonHandler event 9 ongestureend var dsource dashcode getDataSource list ongesturestart var name dsource selection valueForKey name docunent location http www google com search client googlet g name Testen Sie das Webprogramm erneut indem Sie auf Ausf hren klicken oder indem Sie Debug gt Ausf hren w hlen Klicken Sie auf der Detailseite eines Parks auf die hinzugef gte Taste und vergewissern Sie sich dass die Ergebnisse einer Google Suche zum ausgew hlten Park angezeigt werden Denken Sie daran zuvor eine Verbindung zum Internet herzustellen Schreiben von Code zum Ausf hren einer Suche 25 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms Bereitstellen Ihres mobilen Safari Webprogramms Herzlichen Gl ckwunsch Sie haben gerade Ihr erstes mobiles Safari Webprogramm mit Dashcode erstellt Damit Sie Ihr Programm auf einem iPhone oder iPod touch verwenden k nnen m ssen Sie das Programm auf einem Webserver bereitstellen Informationen hierzu finden Sie im Abschnitt Bereitstellen eines Webprogramms Seite 82 26 Bereitstellen Ihres mobilen Safari Webprogramms 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3
130. ode Simulationsprogramm ausf hren haben Sie Zugriff auf das Informationsfenster Webinformationen das auch in Safari zur Verf gung steht Klicken Sie im Dashcode Simulationsprogramm auf Darstellung gt Webinformationen einblenden um das Informationsfenster Webinformationen zu ffnen Weitere Informationen zu diesem Werkzeug finden Sie unter Using the Web Inspector Wenn Ihr Widget oder Webprogramm geladen wird testen Sie ob es wie erwartet funktioniert Tritt ein Fehler auf wird eine Ausnahme exception ausgel st und die Ausf hrung wird standardm ig angehalten In diesem Fall gibt es eine Reihe von Tools die Sie bei der Fehlersuche und bei der Pr fung der Variablenwerte unterst tzen m Im Ausf hrungsprotokoll werden Fehler und andere hilfreiche Informationen aufgef hrt Wenn Sie die Ablaufverfolgung Tracing aktivieren sind im Ausf hrungsprotokoll auch die Funktionsaufrufe enthalten Weitere Informationen hierzu finden Sie im Abschnitt Ausf hrungsprotokoll und Tracing Seite 79 m Inder Stackframes amp Variablen Tabelle wird der Wert aller Variablen angezeigt die ein Widget oder Webprogramm verwendet Weitere Informationen hierzu finden Sie im Abschnitt Pr fen von Speicherwerten Seite 80 m Durch die schrittweise Ausf hrung k nnen Sie die Ausf hrung Zeile f r Zeile vornehmen und so die Auswirkungen des Codes beobachten Weitere Informationen hierzu finden Sie im Abschnitt Pause und schri
131. oll Dadurch kann die Latenzzeit des Netzwerks verk rzt werden wenn mehrere Dateianforderungen aktiv sind Beachten Sie jedoch dass durch das Aktivieren dieses Markierungsfeldes der Code von main js bzw anderer von Ihnen bereitgestellter JavaScript Code nicht komprimiert wird m Aktivieren Sie das Markierungsfeld Benachrichtigung wenn Dashcode jedes Mal wenn Sie Ihr Webprogramm bereitstellen eine E Mail mit einem Link zu Ihrem Programm versenden soll Geben Sie im Feld unter dem Markierungsfeld Benachrichtigung die E Mail Adresse des Empf ngers ein bzw mehrere durch Kommas getrennte E Mail Adressen Nachdem Sie alle Optionen festgelegt haben k nnen Sie unten im Bereich Ausf hren amp Freigeben auf Bereitstellen klicken oder Ablage gt Bereitstellen ausw hlen um Ihr Webprogramm bereitzustellen Sie k nnen Ihr Webprogramm anzeigen indem Sie zur Datei index htm auf dem festgelegten Server navigieren z B http myserver com myapp index htm Ihr Webprogramm erkennt den Browser automatisch und ffnet ein mobiles Safari Webprogramm in Safari auf dem iPhone und ein Safari Webprogramm in Safari Hinweis Wie bereits erw hnt l dt Dashcode die Dateien f r Ihr Webprogramm mithilfe von WebDAV FTP oder MobileMe auf den von Ihnen angegebenen Server Dashcode unterst tzt SSH oder SFTP nicht Achtung Webbrowser etwa Safari auf dem iPhone implementieren ein quellenbasiertes Sicherheitsmodell Dieses Modell sorgt daf r
132. on Bindungen finden Sie im Abschnitt Erstellen von Bindungen Seite 67 Verwenden von HTML CSS und JavaScript Programmierschnittstellen 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Alle Projektvorlagen umfassen bereits mindestens eine Datenquelle auch wenn diese Datenquelle nicht die tatsachlichen Daten darstellt So enth lt beispielsweise die Vorlage Browser eine Datenquelle die statische Daten einer JavaScript Datei darstellt die zum Standardprojekt geh rt Die Vorlage RSS umfasst eine Datenquelle die Daten eines RSS Feeds darstellt Sie sehen die tats chlichen Daten wenn Sie eine spezifische URL Adresse f r den Feed angeben Blenden Sie die Liste Datenquellen im Navigationsbereich ein wie im Abschnitt Anzeigen der Datenquellen und Bindungen eines Projekts Seite 64 beschreiben um eine neue Datenquelle hinzuzuf gen W hlen Sie im Aktionsmen Zahnradsymbol unter der Liste die Option Neue Datenquelle aus Sie k nnen auch Ablage gt Neu gt Datenquelle ausw hlen Daraufhin wird in der Liste eine neue Datenquelle angezeigt Wenn Sie an einem Projekt zur Erstellung von zwei Produkten arbeiten ist die neue Datenquelle automatisch f r beide Produkte verf gbar Hinweis Wenn Sie das Element Liste oder Gitter zum Arbeitsbereich hinzuf gen und dieses Element an ein Array in einer bestehenden Datenquelle binden wird die L
133. ot yet rated Maurice Sendak s classic book Where Tyson the Wild Things Are comes to the big screen in an adventure tale for every The Ugly Truth generation Transformers Revenge of Up Where the Wild Things Are X MEN Origins Wolverine Year One 28 Bevor Sie beginnen 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Wichtig Obwohl Sie die beim Testen der neuen Produkte in Dashcode die Informationen zu den aktuellen Filmtrailern sehen k nnen Sie diese Art von Webprogrammen nicht implementieren bevor Sie zus tzliche Anpassungen vorgenommen haben die allerdings den Rahmen dieses Dokuments sprengen w rden Ihre Webprogramme k nnen nur Informationen von der Domain abrufen in der sie ausgef hrt werden Sie m ssten also Ihre Serverkonfiguration und Ihren Programmcode ndern Bevor Sie fortfahren sollten Sie sicherstellen dass Dashcode 3 0 auf Ihrem Macintosh Computer installiert ist das Installationsverzeichnis lautet Developer Applications Ist Dashcode noch nicht installiert sollten Sie den Abschnitt Installieren und Ausf hren von Dashcode Seite 10 lesen und die Anleitungen zum Laden und Installieren von Dashcode befolgen Ausw hlen einer Vorlage Starten Sie Dashcode durch Doppelklicken auf das Dashcode Symbol Ein neues Projektfenster wird ge ffnet und zeigt ein Dialogfenster mit zwei Arten von Proje
134. ource die URL Adresse angeben im Abschnitt Anzeigen der Datenquellen und Bindungen eines Projekts Seite 64 ist beschrieben wie Sie diese Ansicht einblenden Sie k nnen jedoch auch im Navigationsbereich auf Programmattribute klicken und die URL Adresse im Abschnitt Eigenschaften angeben Folgende Option steht zur Verf gung Podcast URL Setzen Sie hier die URL Adresse Ihres ver ffentlichten Podcasts ein Die Webprogramm Vorlage RSS Mit der Vorlage RSS wird ein Webprogramm erstellt das berschriften und Artikel aus einer RSS Quelle anzeigt Ein mit dieser Vorlage entwickeltes Webprogramm kann RSS Feeds verarbeiten die h ufig aktualisiert werden da die Anzeige vieler berschriften gleichzeitig m glich ist Sie k nnen diese Vorlage anpassen indem Sie die URL Adresse eines von Ihnen ver ffentlichten RSS Feeds angeben Au erdem k nnen Sie anpassen wie viele Artikel f r wie lange angezeigt werden Klicken Sie im Navigationsbereich auf Programmattribute und bearbeiten Sie die Optionen unter Eigenschaften um diese Attribute anzupassen Folgende Optionen stehen zur Verf gung Feed URL Setzen Sie hier die URL Adresse Ihres ver ffentlichten Feeds ein Artikel anzeigen Passen Sie die Anzahl der Artikel an die in Ihrem Webprogramm angezeigt werden sollen aus welchem Zeitraum die Artikel stammen und wie viele Top Artikel zu sehen sein sollen Sie k nnen die URL Adresse des Feeds im Feld URL der Datenmo
135. perty_n wobei es sich bei property_1 um den Vorg nger auf der obersten Ebene root handelt Die Vorlage Podcast enth lt beispielsweise eine Datenquelle die Podcast Daten darstellt Der Schl sselpfad zu der Eigenschaft title in der Datenhierarchie lautet content channel title Dashcode zeigt alle bestehenden Bindungen ganz rechts neben der Eigenschaft einer Datenquelle an Sind noch keine Bindungen vorhanden zeigt Dashcode ein Bindungssteuerelement an einen kleinen Kreis wenn Sie den Mauszeiger ber die Zeile bewegen in der diese Eigenschaft steht Wenn Sie den Mauszeiger ber dem Bindungssteuerelement platzieren wird ein Plus Symbol angezeigt Bestehende Bindungen werden in einem Tastensymbol rechts neben der Eigenschaft angezeigt Das Tastensymbol ist so lange sichtbar bis die Bindung entfernt wird In der Regel befindet sich links im Tastensymbol der Bindung ein L schfeld ein X daneben steht die Eigenschaft des Elements der Benutzeroberfl che zu dem eine Bindung besteht und ganz rechts befindet sich ein Bindungssteuerelement Wenn jedoch eine Datenquelle ber mehrere Bindungen verf gt befindet sich links im Tastensymbol der Bindung ein Dreiecksymbol und anstelle der Eigenschaft der Benutzeroberfl che wird das Wort Multiple angezeigt Klicken Sie auf das Dreiecksymbol um die Bindungen f r die betreffende Eigenschaft der Datenquelle einzublenden Anzeigen der Datenquellen und Bindungen eines Projekts 65 2009 06 09
136. pezifische Inhalte aus der HTML Datei entfernt Dashcode implementiert diese Dateien standardm ig in einem Unterordner Ihres Ordners Sites Sie k nnen dies ndern indem Sie die entsprechenden Optionen im Bereich Ausf hren amp Freigeben ausw hlen klicken Sie im Navigationsbereich auf Ausf hren amp Freigeben um diesen Bereich zu ffnen Dashcode bietet drei Bereitstellungsoptionen m Auf lokalem Computer bereitstellen Dashcode legt die Dateien f r Ihr Webprogramm in dem Ordner ab den Sie als standardm igen Zielort angeben bzw den Sie als Zielort definieren m Auf Server bereitstellen Dashcode l dt die Dateien f r Ihr Webprogramm mithilfe von WebDAV FTP oder MobileMe auf den von Ihnen angegebenen Server Auf Festplatte sichern Dashcode sichert die Dateien f r Ihr Webprogramm in einem Ordner dessen Namen und Speicherort Sie festlegen Klicken Sie unten im Bereich Ausf hren amp Freigeben auf Auf Festplatte sichern und geben Sie einen Ordnernamen und einen Speicherort ein wenn Sie eine Kopie Ihres Webprogramms in einem Ordner auf der Festplatte sichern m chten Wenn Sie das Programm auf einem lokalen oder entfernten Server bereitstellen m chten k nnen Sie den Bereitstellungsmodus im Abschnitt Bereitstellen des Bereichs Ausf hren amp Freigeben ndern m Verwenden Sie das Einblendmen Zielort wenn Sie einen vom Standardziel abweichenden Speicherort ausw hlen m chten Wenn Sie den Standa
137. r e anzeigen soll und die andere unterschiedlich lange Beschreibungen zu den Bildern k nnen Sie f r die erste Spalte die absolute Positionierung und f r die zweite Spalte die relative Positionierung auch Dokumentfluss festlegen Das Element Spalten Layout bernimmt einen Gro teil dieser Schritte f r Sie Edge to Edge Liste Das Element Edge to Edge Liste stellt ein Listenformat bereit dessen Zeilen alle ber die gesamte Breite des Objektcontainers verlaufen Eine Edge to Edge Liste enth lt eine anpassbare Zeilenvorlage mit der neue Zeilen in der Liste erstellt werden Sie k nnen statische Daten f r die Anzeige in den Zeilen angeben oder Ihr Webprogramm so konfigurieren dass die Daten dynamisch bereitgestellt werden wenn das Programm ausgef hrt wird Wenn Sie mit Dashcode Version 3 0 und neuer arbeiten k nnen Sie die Daten mithilfe von Datenquellen und Bindungen dynamisch bereitstellen Informationen hierzu finden Sie in den Abschnitten Hinzuf gen einer Datenquelle Seite 66 und Erstellen von Bindungen Seite 67 Sie k nnen jedoch auch den Controller Code f r die Liste anpassen damit die Daten dynamisch bereitgestellt werden wenn das Programm ausgef hrt wird Diese Einstellungen nehmen Sie im Informationsfenster Attribute vor Im Folgenden wird die Anpassung des Controller Codes der Liste beschrieben Eine Edge to Edge Liste die Daten dynamisch erh lt ben tigt ein Controller Objekt f r eine sta
138. r Webprogramms Sie k nnen das Aussehen des Elements Box mithilfe des Informationsfensters Attribute anpassen Hierf r stehen unter anderem Optionen zum automatischen Ausblenden der Rollbalken zur Verf gung wenn der Inhalt in den vorgegebenen Bereich passt Verwenden Sie die Eigenschaft content des Elements um den Inhalt der Box zu ndern var content document getElementById box object content content innerText somelext Sobald die Eigenschaft content des Elements Box deklariert ist haben Sie Zugriff auf das Element lt div gt das sich innerhalb der Box befindet Nun k nnen Sie die Eigenschaften innerText bzw innerHTML verwenden um den Inhalt der Box zu ndern Browser Das Element Browser ist f r die Verwendung in einem Webprogramm konzipiert Ein Browser stellt einen Bereich f r die Gruppierung von Elementen und das Vor und Zur ckbl ttern zur Verf gung Wenn Sie die Webprogramm Vorlage Browser ausw hlen wird automatisch das Element Browser hinzugef gt Das Element Browser umfasst JavaScript Code f r die Ausf hrung einiger Standardaktionen Ein Browser bietet insbesondere eine Methode zum Anzeigen der n chsten Ebene in einer Informationshierarchie Meist f gen Sie im Controller Code f r ein Listenelement einen Aufruf f r die Methode goForward hinzu und legen fest dass dieses Element das Ereignis onclick verarbeiten soll dem die betreffende Listenzeile zugewiesen ist Die analoge Funktionalit t Zur c
139. r Web Applications Lesen Sie den Artikel Dashboard Programming Topics der Informationen ber die Technologien enth lt die beim Erstellen eines Dashboard Widgets zur Verf gung stehen Alle Dashboard spezifischen Informationen die Gegenstand dieses Dokuments sind finden Sie in ausf hrlicherer Form im Dokument Dashboard Reference Weitere Dokumente zu Dashboard sowie Beispielcode wird auf der Website ADC Topic Page for Dashcode bereitgestellt Im Safari Dev Center finden Sie n tzliche Informationen zu Webkit der Technologie die den Dashboard Widgets zugrunde liegt sowie zu anderen Safari bezogenen Themen Weitere Informationen ber die HTML CSS und JavaScript Funktionalit ten von Webkit finden Sie an folgenden Stellen m Safari HTML Reference m Safari CSS Reference m Safari DOM Extensions Reference Mithilfe des Objekts XMLHttpRequest k nnen Sie XML in JavaScript analysieren parsen und die Ergebnisse verwenden Im ADC Artikel Dynamic HTML and XML The XMLHttpRequest Object finden Sie weitere Informationen Zus tzliche Informationen 11 2009 06 09 2009 Apple Inc All Rights Reserved VORWORT Einf hrung zum Dashcode Benutzerhandbuch 12 Zus tzliche Informationen 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 1 Einf hrung in die Erstellung eines Dashboard Widgets In dieser Einf hrung wird beschrieben wie Sie mit Dashcode ein Dashboard Widget erstellen Wenn Sie die nachfolgend beschriebenen
140. rbeitsbereich Das Objekt detai 1SubtTitle enth lt das Wort Location das im Arbeitsbereich angezeigt wird c W hlen Sie die Option text aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen 3 Stellen Sie eine Bindung zwischen der Beschreibung des ausgew hlten Films und der Beschreibung im wei en Feld her a Suchen Sie im Datenmodell unter der Eigenschaft info nach der Eigenschaft description b Bewegen Sie das Bindungssteuerelement der Eigenschaft description zum Objekt detailDescription im Arbeitsbereich Das Objekt detailDescription enth lt das Wort Description das im Arbeitsbereich angezeigt wird c W hlen Sie die Option text aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen 4 Stellen Sie eine Bindung zwischen dem Posterbild des ausgew hlten Films und dem Element Bild her a Suchen Sie im Datenmodell unter der Eigenschaft poster nach der Eigenschaft xl arge b Bewegen Sie das Bindungssteuerelement der Eigenschaft x1arge zum Objekt image im Arbeitsbereich es handelt sich hierbei um das Element Bild das Sie im Abschnitt Anpassen der Benutzeroberflache des mobilen Safari Webprogramms Seite 42 hinzugef gt haben c W hlen Sie die Option scr aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen Mit der Erstellung dieser Bindungen sind alle Schritte abgeschlossen die f r ein mobiles Safari Webprogramm erforderlich sind
141. rden in der Hierarchie dieser Eigenschaft befinden 1 Stellen Sie eine Bindung zwischen dem Titel des ausgew hlten Films und dem Titel in der Detailansicht her a Suchen Sie im Datenmodell unter der Eigenschaft info nach der Eigenschaft title b Bewegen Sie das Bindungssteuerelement der Eigenschaft title zum Objekt detailTitle im Arbeitsbereich Das Objekt detai1Title befindet sich ber dem Wort Location und enth lt den Text Title in gro er Schrift c W hlen Sie die Option text aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen 2 Stellen Sie eine Bindung zwischen der Beschreibung des ausgew hlten Films und der Beschreibung her die ber dem Video angezeigt wird a Suchen Sie im Datenmodell unter der Eigenschaft info nach der Eigenschaft description b Bewegen Sie das Bindungssteuerelement der Eigenschaft description zum Objekt detailDescription im Arbeitsbereich Das Objekt detailDescription ist das Objekt das Sie im Abschnitt Anpassen der Benutzeroberfl che des Safari Webprogramms Seite 33 nach rechts verschoben haben um Platz f r das Element Bild zu machen c W hlen Sie die Option text aus dem Einblendmen das angezeigt wird wenn Sie die Maustaste loslassen 3 Stellen Sie eine Bindung zwischen dem Posterbild des ausgew hlten Films und dem Element Bild her Erstellen von Bindungen f r das Safari Webprogramm 2009 06 09 2009 Apple Inc All Rights Reserved
142. rdzielort nicht bereits ge ndert haben handelt es sich hierbei um den lokalen Server W hlen Sie Zielort hinzuf gen im Einblendmen um einen neuen Zielort hinzuzuf gen Daraufhin wird der Bereich Zielorte der Dashcode Einstellungen ge ffnet Im Bereich Zielorte der Dashcode Einstellungen k nnen Sie einen weiteren lokalen Zielort angeben bzw WebDAV FTP oder MobileMe ausw hlen Dar ber hinaus k nnen Sie festlegen ob Dashcode den neuen Zielort als Standardzielort f r neue Projekte verwenden soll m Verwenden Sie das Feld Programmpfad um einen Namen f r den Programmordner festzulegen wenn Sie keinen Namen angeben erstellt Dashcode einen Ordner mit dem Namen Unbenannt Dashcode erstellt diesen Ordner in dem Pfad der durch den aktuell ausgew hlten Zielort definiert wird Im Abschnitt Optionen des Bereichs Ausf hren amp Freigeben k nnen Sie Optionen f r das Speichern Ihres Webprogramms und f r die Benachrichtigung nach dem Bereitstellen festlegen m Aktivieren Sie das Markierungsfeld Verhalten beim Sichern damit Ihr Projekt vor dem Bereitstellen gesichert wird dieses Markierungsfeld ist verf gbar nachdem Sie das Projekt zum ersten Mal gesichert haben 82 Bereitstellen eines Webprogramms 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 7 Testen und Bereitstellen m Aktivieren Sie das Markierungsfeld Komprimierung wenn Dashcode den JavaScript Code in den Elementdateien komprimieren s
143. rehen jeweils die neue Ansicht einblendet m Transition SWAP_TYPE Ein dreidimensionaler bergang bei dem sich beide Ansichten horizontal voneinander weg bewegen und dann vertikal ihre Position tauschen sodass die neue Ansicht im Vordergrund zu sehen ist m Transition REVOLVE_TYPE Ein dreidimensionaler bergang bei dem sich die alte und die neue Ansicht an einer Kante ber hren und auf derselben Achse liegen um die sich die alten Ansicht aus dem Anzeigebereich hinausdreht w hrend sich die neue Ansicht gleichzeitig hineindreht Mit dem Parameter duration wird angegeben wie viele Sekunden der bergang dauern soll von Anfang bis Ende F r den Parameter timing k nnen Sie schlie lich eine Funktion f r die Zeitsteuerung festlegen mit der die Geschwindigkeit und die Beschleunigung des bergangs gesteuert werden die Funktionen f r die Zeitsteuerung werden in der Spezifikation f r die WebKit CSS Animation definiert Folgende Funktionen f r die Zeitsteuerung von berg ngen sind verf gbar m Transition EASE_TIMING Stapel Layout 101 2009 06 09 2009 Apple Inc All Rights Reserved 102 ANHANG B Dashcode Elemente m Transition LINEAR_TIMING m Transition EASE_IN_TIMING m Transition EASE_OUT_TIMING m Transition EASE_IN_OUT_TIMING Die Funktionen f r die Zeitsteuerung bestimmen die Beschleunigungskurve des Ubergangs LINEAR bedeutet in diesem Zusammenhang dass eine konstante Geschwindigkeit keine Beschleuni
144. reiecksymbol neben stackLayout klicken sehen Sie zwei Objekte 1istLevel und detailLevel In diesem Programm enth lt die Listenebene die Liste der Parks und die Detailebene den Text mit den Informationen zum ausgew hlten Park Sie k nnen die Art und Weise ndern in der die Detailseite angezeigt wird wenn Sie eine Zeile in der bergeordneten Liste ausw hlen Gehen Sie wie folgt vor 1 Vergewissern Sie sich dass das Informationsfenster ge ffnet ist Ist es nicht ge ffnet klicken Sie in der Symbolleiste von Dashcode auf die blaue Informationstaste 2 W hlen Sie im Navigationsbereich stackLayout aus 3 Klicken Sie im Informationsfenster in der Symbolleiste auf Attribute das Symbol ganz links Daraufhin sollte sich der Titel des Informationsfensters in Attribute stackLayout ndern Unten im Informationsfenster befindet sich ein Abschnitt mit dem Titel bergang Subview Mit den Werten in diesem Abschnitt werden die berg nge zwischen Seiten gesteuert Sie k nnen festlegen dass Seiten von rechts nach links eingeblendet werden Standardeinstellung oder beispielsweise von oben nach unten Beachten Sie dass Sie die nderung des bergangstyps im Simulationsprogramm m glicherweise nicht sehen Wenn Sie das Programm auf dem tats chlichen Ger t anzeigen wird der Effekt jedoch zu sehen sein Hinweis Die in diesem Schritt beschriebenen berg nge basieren auf CSS berg ngen und Animationen Im Informationsfenster Att
145. ribute stackLayout bietet Dashcode eine M glichkeit Attribute der berg nge festzulegen die Sie verwenden m chten Eine Benutzeroberfl che zu deren direkter Bearbeitung ist jedoch nicht vorhanden Nachdem Sie diese Einf hrung durchgearbeitet haben m chten Sie m glicherweise auf den Code f r diese berg nge zugreifen um feinere Anpassungen vorzunehmen Bevor Sie dies tun sollten Sie das Dokument Safari Visual Effects Guide lesen Hinzuf gen von Funktionen mithilfe von Elementen Wie Sie gesehen haben funktioniert das mit der Vorlage Browser erstellte mobile Safari Webprogramm obwohl es nur statische Daten enth lt Sie k nnen Funktionen hinzuf gen die aktuelle Informationen aus dem Internet abrufen und den Nutzen des Webprogramms damit erh hen In diesem Schritt verwenden Sie die Design Werkzeuge von Dashcode um eine Taste zur Detailseite detailLevel hinzuzuf gen mit der eine Google Suche f r den ausgew hlten Park ausgef hrt wird den hierf r erforderlichen Code f gen Sie im n chsten Schritt hinzu Zum Hinzuf gen einer Taste zum Webprogramm verwenden Sie ein Element Elemente sind Steuerelemente und Darstellungsmodi die Sie in die Benutzeroberfl che Ihres Webprogramms integrieren k nnen Dashcode listet die verf gbaren Elemente in der Bibliothek auf W hlen Sie Fenster gt Bibliothek einblenden und klicken Sie auf Elemente um nach dem passenden Tastenelement zu suchen Bl ttern Sie durch die
146. s Datenmodell und zeigt die verf gbaren Eigenschaften und Attribute der Daten sowie einen Teil der tats chlichen Daten an sofern m glich Erstellen von Bindungen Alle Dashcode Vorlagen unterst tzen Bindungen die es einem Element der Benutzeroberfl che erlauben bestimmte Datenobjekte aus einer Datenquelle abzurufen und die Anzeige automatisch zu aktualisieren wenn sich die Daten ndern In Dashcode k nnen auf einfache Weise Bindungen in der Datenmodellansicht erstellt werden Weitere Informationen zum Einblenden des Datenmodells sowie eine Beschreibung des Datenmodells finden Sie im Abschnitt Anzeigen der Datenquellen und Bindungen eines Projekts Seite 64 Gehen Sie wie folgt vor um eine Bindung zwischen der Eigenschaft einer Datenquelle und einem Element im Arbeitsbereich zu erstellen 1 Bewegen Sie das runde Bindungssteuerelement neben der Eigenschaft der Datenquelle bei gedr ckter Maustaste zu dem Element im Arbeitsbereich mit dem die Bindung erstellt werden soll Erstellen von Bindungen 67 2009 06 09 2009 Apple Inc All Rights Reserved 68 KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Beim Bewegen wird eine Verbindungslinie eingeblendet die vom Bindungssteuerelement ausgeht Jedes Element im Arbeitsbereich ber das Sie den Zeiger bewegen wird optisch hervorgehoben In Abbildung 3 8 Seite 39 sehen Sie ein Beispiel f r eine Verbindungslinie 2 Lassen Sie die Maustaste los wen
147. s Ordnersymbol In der Liste Dateien k nnen Sie Dateien und Ordner umbenennen duplizieren bewegen und l schen Zum Umbenennen w hlen Sie zuerst das Objekt in der Liste Dateien und anschlie end Umbenennen aus dem Aktionsmen aus das Zahnradsymbol unter der Liste Dateien Zum Duplizieren w hlen Sie Duplizieren zum L schen w hlen Sie L schen aus dem Aktionsmen Zum Bewegen eines Objekts bewegen Sie dessen Symbol auf das Symbol eines anderen Ordners Codebausteine 73 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Hinweis Dashcode verwaltet keine Verweise auf Dateien und Ordner in einem Widget oder Webprogramm Wenn Sie eine Datei oder einen Ordner l schen umbenennen oder bewegen m ssen Sie auch die entsprechenden Referenzen in der bergeordneten HTML Datei des Projekts l schen umbenennen oder aktualisieren Werden die Referenzen auf gel schte umbenannte oder bewegte Dateien bzw Ordner nicht aktualisiert kann es zu einem unerwarteten Verhalten des Widgets bzw Webprogramms kommen Wenn Sie eine neue JavaScript oder CSS Datei hinzuf gen m ssen Sie eine Referenz auf diese Datei einf gen damit sie von Ihrem Widget oder Webprogramm verwendet werden kann F gen Sie die Referenz auf die neue Datei am Anfang der bergeordneten HTML Datei des Projekts ein Die bergeordnete HTML Datei in einem Widget ist die Datei auf die der Schl ssel Ke
148. s Projekt starten verwenden Sie als Grundlage eine Dashcode Vorlage Bei Dashboard Widgets k nnen Sie alternativ auch ein bereits vorhandenes Widget verwenden Ein Projekt umfasst alle Dateien und Ressourcen die Dashcode zum Erstellen eines Widgets oder eines Webprogramms ben tigt In diesem Kapitel werden die Optionen beschrieben die Ihnen zu Beginn eines Projekts zur Verf gung stehen Dar ber hinaus erfahren Sie wie ein Dashboard Widget in Dashcode ge ffnet wird wenn beim Codieren Testen und Debuggen eines vorhandenen Widgets die Designwerkzeuge von Dashcode umgangen werden sollen Erstellen eines Projekts mithilfe einer Vorlage Dashcode bietet Ihnen zahlreiche Vorlagen an die als Ausgangspunkt f r die Erstellung neuer Projekte verwendet werden k nnen Vorlagen sind vorkonfigurierte Widgets oder Webprogramme die Code und Grafiken f r g ngige Funktionen enthalten Wenn Sie Dashcode ffnen oder Ablage gt Neues Projekt w hlen wenn Dashcode bereits ge ffnet ist wird ein Dialogfenster mit verschiedenen Projekttypen angezeigt Wenn Sie einen Projekttyp ausw hlen wird im Dialogfenster eine Auswahl mit zum Projekttyp passenden Vorlagen angeboten Klicken Sie auf das Symbol einer Vorlage um eine kurze Funktionsbeschreibung der Vorlage anzuzeigen Wenn die Vorlage eine Funktionalit t bietet die Ihren Vorstellungen entspricht k nnen Sie auf das zugeh rige Symbol und anschlie end auf Ausw hlen klicken Weitere Informationen
149. s k nnen Sie auch eine Liste der zum Widget geh renden Dateien anzeigen W hlen Sie hierf r Darstellung gt Dateien oder klicken Sie auf Symbol mit der Liste unten im Projektfenster dieses Symbol sieht wie eine Miniatur einer ungeordneten Liste aus Festlegen des gewunschten Datums Die Vorlage Countdown ist ein Dashboard Widget mit allen Elementen und Codierungen die f r einen Countdown bis zu einem bestimmten Ereignis erforderlich sind Sie m ssen lediglich noch das gew nschte Datum eingeben W hlen Sie im Navigationsbereich Widget Attribute aus um das Datum festzulegen Der Arbeitsbereich wird nun durch den Bereich mit den Widget Attributen ersetzt in dem Sie wichtige Werte festlegen k nnen die das Widget ben tigt W hlen Sie im Abschnitt Eigenschaften des Bereichs mit den Widget Attributen Datum und Uhrzeit aus dem Einblendmen Zieltyp aus und geben Sie das Datum Ihres n chsten Geburtstags ein vgl Abbildung 1 3 Abbildung 1 3 Abschnitt Eigenschaften der Vorlage Countdown Eigenschaften Zieltyp Datum und Uhrzeit 01 04 2010 10 00 00 Wenn erreicht Bei Null stoppen J Hochz hlen _ Aktion ausf hren alert Event reached Anzeige _ Blinkende Trennzeichen CA F hrende Nullen Testen des Countdowns Das neue Dashboard Widget ist nun bereits voll funktionsf hig Sie k nnen dies berpr fen indem Sie Debug gt Ausf hren ausw hlen Da Dashcode ein Widget ausf hren kann ohne es im Dashbo
150. se 2009 06 09 Updated for Dashcode 3 0 2009 03 04 Made minor corrections 2009 01 06 Corrected the description of web application deployment 2008 09 09 Updated for Dashcode 2 0 1 2008 07 11 Added a new tutorial for web applications and descriptions for new templates and parts introduced in Dashcode 2 0 2007 08 07 New document that describes how to create Dashboard widgets with Dashcode 2009 06 09 2009 Apple Inc All Rights Reserved 105 BERARBEITUNGEN Dokument berarbeitungen 106 2009 06 09 2009 Apple Inc All Rights Reserved
151. sem Abschnitt nicht erneut ausf hren wenn Sie zum mobilen Safari Webprogramm umschalten Sie m ssen jedoch f r jedes Produkte separate Bindungen definieren Das liegt daran dass die Bindungen die Eigenschaften in der Datenquelle mit den Objekten der Benutzeroberfl che verkn pfen und jede Benutzeroberfl che aus unterschiedlichen Objekten bestehen kann Erstellen von Bindungen f r das Safari Webprogramm 38 Hinweis Obwohl die in diesem Abschnitt erstellten Bindungen nicht f r das mobile Safari Webprogramm gelten sind die zum Erstellen der Bindungen erforderlichen Schritte identisch Im Abschnitt Festlegen einer Datenquelle und Anzeigen des Datenmodells Seite 36 wurde bereits erw hnt dass es in der Datenmodellansicht der Datenquelle dataSource bereits eine Bindung gibt In dieser Einf hrung wird die bestehende Bindung zwischen der Eigenschaft content und dem Objekt itemsList nicht ge ndert aber es werden einige zus tzliche Bindungen hinzugef gt Erstellen der ersten Bindung Mit der ersten Bindung die Sie erstellen wird festgelegt welche Eigenschaft der Datenquelle die Filmtitel liefert die in der Master Liste des Webprogramms angezeigt werden sollen Vergewissern Sie sich zun chst dass das Datenmodell f r dataSource noch eingeblendet ist und dass das Dreiecksymbol neben der Eigenschaft content nach unten weist die Anzeige m sste hnlich aussehen wie das Datenmodell in Abbildung 3 7 Seite 37 F hren Sie ans
152. stlegen Favicon entwerfen Testen amp Freigeben ts 2 32 0 amp Mi 43 Da Sie keine weiteren Elemente zu Ihrem Webprogramm hinzuf gen m ssen k nnen Sie das Fenster Bibliothek nun wieder schlie en Allerdings m ssen Sie es sp ter wieder ffnen um die Benutzeroberflache des mobilen Safari Webprogramms anzupassen Festlegen einer Datenquelle und Anzeigen des Datenmodells 36 Sie haben die Benutzeroberfl che des Safari Webprogramms fertiggestellt und k nnen nun die Datenquelle angeben die anstelle der Platzhalterdaten der Vorlage die echten Daten liefern soll Wie im Abschnitt Bevor Sie beginnen Seite 27 beschrieben sollen Ihre fertigen Produkte die Filmtrailerinformationen der Apple Website anzeigen Damit dies funktioniert m ssen Sie in Dashcode die richtige URL Adresse festlegen Gehen Sie wie folgt vor 1 Blenden Sie im Navigationsbereich die Liste mit den Datenquellen ein Klicken Sie hierf r auf das Symbol f r die Datenquellen unten links im Projektfenster ein kleiner Kreis mit einem Quadrat in der Mitte Anschlie end m ssten in der Liste Datenquellen zwei Datenquellen angezeigt werden dataSource und itemsList 2 W hlen Sie die Datenquelle dataSource aus Daraufhin wird unterhalb des Arbeitsbereichs ein Abschnitt eingeblendet der die Struktur der Daten in dieser Datenquelle zeigt Diese Struktur wird Datenmodell genannt Festlegen einer Datenquelle und Anzeigen des Datenmodells 2009 06
153. t m Hinzuf gen von Quellcode und Erstellen von Bindungen Seite 63 Eine Beschreibung der zu Dashcode geh renden Bearbeitungswerkzeuge f r den Quellcode m Testen und Bereitstellen Seite 77 Informationen ber das Testen die Fehlerbehebung Debugging und das Bereitstellen von Widgets oder Webprogrammen m Erweiterte Themen zu Widgets Seite 85 Informationen ber das Lokalisieren eines Widgets mithilfe von Dashcode und das Einbinden eines Widget Plug Ins Das Dashcode Benutzerhandbuch enth lt dar ber hinaus die folgenden Anh nge m Dashcode Vorlagen Seite 87 Eine Beschreibung der zu Dashcode geh renden Projektvorlagen m Dashcode Elemente Seite 93 Informationen ber Dashcode spezifische Komponenten so genannte Elemente und deren Anpassung Installieren und Ausf hren von Dashcode Apple bietet eine umfassende Suite von Entwicklungswerkzeugen einschlie lich Dashcode f r die Erstellung von Mac OS X Software Zu den Xcode Tools geh ren Programme die Sie bei der Konzipierung Erstellung und Optimierung von Software sowie bei der Fehlerbehebung Debugging unterst tzen Diese Tools Suite umfasst Header Dateien Beispielcode und Dokumentationen f r Apple Technologien Sie k nnen die Xcode Tools kostenlos von der ADC Website Apple Developer Connection laden http developer apple com Hierf r ist lediglich eine Registrierung erforderlich Nach dem Laden der Xcode Tools k nnen Sie Das
154. t content der Datenquelle erh lt Abbildung 3 7 Bestehende Bindungen und Bindungssteuerelemente im Datenmodell 000 MeinKinoTrailerProjekt oO ww E W oson Ausf hren Pause Darstellung Informationen Bibliothek Suchen Mobile Safari ot Tg a pt gt TR TT GET Tabet er MeinKinoTrailerProjekt gt pa Ti i Title Tit Location splitLayout masterView E itemstist Tit Description E itemsrow enge Of itemTitle 8 m splitter detailView detailBox 23 detailHeader T detailTitle T detailsubtitie s line z T detailDescription F image 5 4 lt H 200 IT 300 Datenquellen 8 itemsList 4 QodataSource URL http www apple com trailers home xml current xml ej 2 hemslistdaAmy E date mon Dia 3143 info cast genre o preview a EB m z Festlegen einer Datenquelle und Anzeigen des Datenmodells 37 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Verf gt eine Eigenschaft im Datenmodell noch nicht ber eine Bindung wird rechts neben der Eigenschaft ein rundes Bindungssteuerelement angezeigt wenn Sie den Mauszeiger ber die Eigenschaft bewegen In Abbildung 3 7 sehen Sie rechts neben der Eigenschaft poster ein Bindungssteuerelement Da die angegebene Datenquelle f r beide mit diesem Projekt zu erstellenden Produkte verf gbar ist m ssen Sie die Schritte in die
155. tailseite soll jedoch das Posterbild f r den ausgew hlten Film angezeigt werden vgl Abbildung 3 1 Seite 28 Vergewissern Sie sich zuerst ob die Taste Mobile Safari in der Produktleiste ausgew hlt ist bevor Sie mit den Anpassungen beginnen Klicken Sie im Navigationsbereich auf detailLevel um die Detailseite im Arbeitsbereich anzuzeigen Wird das Objekt detailLevel im Navigationsbereich nicht angezeigt k nnen Sie auf das Dreiecksymbol neben browser und stackLayout klicken um das Objekt einzublenden Wie beim Safari Webprogramm m ssen Sie das Element Bild zur Seite hinzuf gen Klicken Sie gegebenenfalls in der Dashcode Symbolleiste auf die Taste Bibliothek oder w hlen Fenster gt Bibliothek einblenden um die Bibliothek zu ffnen Klicken Sie im Fenster Bibliothek auf Elemente um die verf gbaren Elemente zu sehen Bl ttern Sie durch die Liste der Elemente um nach dem Element Bild zu suchen Sie k nnen auch im Suchfeld das sich unten im Fenster Bibliothek befindet den Begriff Bi 1d eingeben Platzieren Sie das Element Bild innerhalb des wei en Feldes auf der Detailseite unter den Objekten Title Location und Description Bewegen Sie das Element Bild bei gedr ckter Maustaste in den Arbeitsbereich und zum unteren Rand des wei en Feldes bis sich die Objekte Title Location und Description ber dem Element Bild befinden Sollten Sie die Maustaste versehentlich loslassen bevor sich das Element
156. te anpassen die auf das Bild angewendet werden Anzeige Bei dem Element Anzeige handelt es sich um eine Statusleuchte die bei bestimmten Werten die Farbe wechselt Mithilfe des Informationsfensters Attribute k nnen Sie das Design der Anzeige sowie den Wertebereich anpassen Wenn Sie das Element Anzeige verwenden m ssen Sie seinen Wert wie unten gezeigt mithilfe von JavaScript aktualisieren document getElementById indicator object setValue 10 Achten Sie darauf dass der an setVa lue bergebene Wert innerhalb des Bereichs liegt der im Informationsfenster Attribute f r das Element Anzeige definiert ist Pegelanzeigen Bei den Elementen Horizontale Pegelanzeige und Vertikale Pegelanzeige handelt es sich um lineare Pegelanzeigen die einen Wert innerhalb eines festgelegten Wertebereichs anzeigen Mithilfe des Informationsfensters Attribute k nnen Sie das Design von Pegelanzeigen sowie den Wertebereich anpassen Wenn Sie eine Pegelanzeige als Pr felement einsetzen m chten aktivieren Sie die Option Bei Mouse Down im Informationsfenster Attribute und geben Sie im Informationsfenster Behaviors eine eigene Handler Funktion f r das Ereignis onchange an Der Handler wird aufgerufen sobald sich der Wert der Pegelanzeige ndert Wenn Sie eine Pegelanzeige zur grafischen Darstellung von Daten verwenden m ssen Sie ihren Wert mithilfe von JavaScript aktualisieren Verwenden Sie die Methode set Value um den Wert wi
157. te umzuschalten Wenn Sie nur eine Art von Webprogramm entwickeln oder wenn Sie ein mobiles Safari Webprogramm mit einer fr heren Version von Dashcode entwickeln m ssen Sie nicht zwischen den Attributen f r verschiedene Produkte umschalten Die Produktleiste wird in diesem Fall nicht angezeigt Programmattribute f r Safari Webprogramme Wenn Sie in Dashcode 3 0 oder neuer die Programmattribute f r ein Safari Webprogramm festlegen das Teil eines Projekts ist mit dem zwei Produkte entwickelt werden m ssen Sie zun chst sicherstellen dass die Taste Safari in der Produktleiste ausgew hlt ist Wenn Sie mit Dashcode Version 3 0 oder neuer ausschlie lich ein Safari Webprogramm entwickeln ist dieser Schritt nicht erforderlich Wenn Sie mit einer fr heren Version von Dashcode ein mobiles Safari Webprogramm entwickeln finden Sie im Abschnitt Programmattribute f r mobile Safari Webprogramme Seite 50 weitere Informationen zu den verf gbaren Attributen Legen Sie im folgenden Abschnitt des Bereichs Programmattribute die entsprechenden Werte fest Allgemein Der Wert f r Seitentitel wird zur Kennzeichnung des Safari Webprogramms verwendet Geben Sie im Feld Seitentitel einen aussagekr ftigen visuell lesbaren Namen f r Ihr Webprogramm ein Der angegebene Titel bildet das Element lt tit1e gt Ihrer Webseite und wird in der Titelleiste des Browserfensters angezeigt Mit der Option Offline Darstellung k nnen Sie steuern ob
158. teilung mehrerer zusammengeh riger Elemente Sollen mehrere Elemente an ihren linken Kanten ausgerichtet werden w hlen Sie alle Elemente im Arbeitsbereich aus und w hlen anschlie end Anordnen gt Ausrichten gt Links Sie k nnen die Elemente auch zentriert rechts oben unten oder in der Mitte ausrichten Soll zwischen mehreren Elementen ein gleicher vertikaler Abstand bestehen w hlen Sie Anordnen gt Verteilen gt Vertikal In hnlicher Weise k nnen die Elemente auch horizontal verteilt werden Soll ein Element gesch tzt werden damit es nicht mehr bewegt werden kann w hlen Sie zun chst das Element und anschlie end Anordnen gt Sch tzen aus Wenn Sie das Element sp ter wieder bewegen m chten w hlen Sie Anordnen gt Schutz aufheben Bitte beachten Sie dass das Sch tzen eines Elements nur bedeutet dass die Position des betreffenden Elements im Arbeitsbereich fixiert wird Sie k nnen die Attribute nach wie vor ber das Informationsfenster anpassen Vergleich zwischen absoluter und relativer Positionierung 56 Dashcode bietet die M glichkeit Elemente in Ihrem Widget oder Webprogramm absolut oder relativ d h abh ngig vom Dokumentfluss zu positionieren Sie k nnen die Position eines ausgew hlten Elements ndern indem Sie im Abschnitt Layout des Informationsfensters Ma e zwischen der absoluten und relativen Dokumentfluss Positionierung wechseln Bei der absoluten Positionierung bleibt di
159. tersysteme entwickeln m chten sollten Sie die zweite Einf hrung Einf hrung in die Erstellung eines mobilen Safari Webprogramms Seite 19 lesen Bevor Sie beginnen In dieser Einf hrung werden Sie ein Dashcode Projekt erstellen das zwei Produkte umfasst ein Safari Webprogramm und ein mobiles Safari Webprogramm Ein Produkt ist eine Gruppe von Dateien und Ressourcen die ein Webprogramm definieren das entweder f r Safari oder f r Safari auf dem iPhone optimiert ist Das Projekt das Sie im Rahmen dieser Einf hrung erstellen werden basiert auf der Vorlage Browser und zeigt die aktuell auf der Website von Apple verf gbaren Filmtrailer an Nach Abschluss Ihres Projekts werden die fertigen Produkte hnlich wie in Abbildung 3 1 dargestellt aussehen Bevor Sie beginnen 27 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Abbildung 3 1 Die fertigen Produkte Safari Webprogramm oben und mobiles Safari Webprogramm unten ane MyMovieTrailersProject Dashcode co ac Le http localhost 60033 index htmi Le The Soloist Where the Wild Things Are The Song of Sparrows Maurice Sendak s classic book Where the Wild Things Are comes to the big screen in an adventure tale for every generation PREVIEW n ALL AUDIENCES aul Carrier gt 7 23 AM The Taking of Pelham 123 gt Terminator Salvation Where the Wild Things Are N
160. tion so ndern dass diese Zeichenfolge verwendet wird wird der Wert TRUE bergeben wenn der eingelesene Wert rot ist Hinzuf gen einer Wertetransformation 69 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen F r diese Funktion kann auch eine Umkehrtransformation festgelegt werden Hierf r m ssen Sie zus tzlich einen Falschwert festlegen den die Funktion zur Analyse des eingelesenen Werts verwendet Die Transformation w rde in diesem Fall entweder den von Ihnen definierten Wahrwert oder Falschwert bergeben je nachdem welchem Wert der eingelesene Wert entspricht m DC transformer FirstObject ist eine Transformation die das erste Objekt eines Arrays bergibt m DC transformer Matches ist eine Transformation die den booleschen Wert TRUE bergibt wenn der eingelesene Wert mit einem von Ihnen definierten regul ren Ausdruck bereinstimmt m DC transformer Not ist eine Transformation die den Umkehrwert des booleschen Werts des eingelesenen Werts bergibt das hei t es wird TRUE bergeben wenn der eingelesene Wert den booleschen Wert FALSE hat m DC transformer StringToObjects ist eine Transformation die ein JavaScript Objekt aus dem eingelesenen Array bzw umgekehrt eine Zeichenfolge aus dem eingelesenen Objekt erstellt m DC transformer Truncated ist eine Transformation mit der die eingelesene Zeichenfolge auf eine von Ihnen festgelegte Anzahl
161. tische Edge to Edge Liste ist kein Controller Objekt erforderlich Das Listen Controller Objekt muss zwei erforderliche Datenquellen Methoden implementieren numberOfRows und prepareRow Mit der R ckfragemethode numberOfRows wird die Gesamtzahl der Zeilen in der Liste zur ckgegeben Die Methode prepareRow wird einmal pro Zeile aufgerufen w hrend diese vorbereitet wird und verwendet die erhaltenen Werte zum F llen der Zeile Die Methode prepareRow ben tigt die folgenden drei Argumente m rowElement Hierbei handelt es sich um das bergeordnete Objekt der gesamten Zeile Mit diesem Objekt k nnen Sie f r jede Listenzeile Handler f r Klickaktionen definieren Kurzwahltaste 95 2009 06 09 2009 Apple Inc All Rights Reserved ANHANG B Dashcode Elemente m rowIndex Hierbei handelt es sich um den nullbasierten Index der Zeile Mithilfe dieses Werts k nnen Sie die passenden Zeilendaten in programmspezifischen Datenstrukturen suchen m templateElements Hierbei handelt es sich um ein Verzeichnis das einen Eintrag zu jedem Objekt in der Vorlagenzeile enth lt das ber eine ID verf gt Alle Schl ssel im Verzeichnis gelten als ID und der zugeordnete Wert ist das Objekt im Argument rowElement das den Originalobjekten der Vorlage entspricht z B rowTit le Mit den Werten die diesen Objekten zugeordnet sind k nnen Sie die jeweiligen Stellen in der Zeile f llen Eine Edge to Edge Liste enth lt auch die ffentliche Eigenschaft ro
162. tribut Infarmatinnen f nen Sie Rilder zur Taste hinzu ar Q Filter Schreiben von Code zum Ausf hren einer Suche 24 Damit mit der Taste eine Suche zum gew hlten Park ausgef hrt wird m ssen Sie zur Taste ein so genanntes Verhalten Behavior hinzuf gen Klicken Sie im Informationsfenster auf das Symbol f r Behaviors die Taste ganz rechts Im daraufhin angezeigten Fenster Behaviors k nnen Sie Ereignissen Events bestimmte Event Handler zuweisen W hlen Sie im Arbeitsbereich die Taste aus die Sie zur Detailseite hinzugef gt haben W hlen Sie im Informationsfenster Behaviors die Spalte Handler neben dem Ereignisnamen onclick durch Doppelklicken aus Geben Sie einen Namen f r die neue Funktion ein beispielsweise det ai ButtonHand1er und dr cken Sie den Zeilenschalter Klicken Sie auf den Pfeil neben dem gerade festgelegten Funktionsnamen um den Quellcode Editor unterhalb des Arbeitsbereichs anzuzeigen sofern dieser noch nicht sichtbar ist Durch Klicken auf den Pfeil wird der Programmcode f r die Funktion detailButtonHandler angezeigt die Dashcode in den Quellcode Ihres Webprogramms eingef gt hat Geben Sie zwischen den geschweiften Klammern die folgenden drei Codezeilen ein var dsource dashcode getDataSource list Schreiben von Code zum Ausf hren einer Suche 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 2 Einf hrung in die Erstellung eines mobilen Safari Webprogramms
163. ttweise Ausf hrung Seite 79 m Die Codeauswertung ist eine Konsole in der Sie einzelne Codezeilen eingeben die sofort ausgef hrt werden sollen Weitere Informationen hierzu finden Sie im Abschnitt Codeauswertung Seite 81 Wenn Sie die Ausf hrung eines angehaltenen Widgets oder Webprogramms fortsetzen m chten w hlen Sie Debug gt Fortsetzen oder klicken Sie in der Symbolleiste auf Fortsetzen Soll die Ausf hrung beim Auftreten einer Ausnahmebedingung nicht angehalten werden muss die Markierung neben Debug gt Unterbrechung bei Ausnahmen entfernt werden Testen eines Widgets oder Webprogramms 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 7 Testen und Bereitstellen Sie k nnen die Ausf hrung eines Widgets oder Webprogramms jederzeit anhalten indem Sie Debug gt Anhalten ausw hlen oder in der Symbolleiste auf Pause klicken Solange ein Widget oder Webprogramm angehalten ist k nnen Sie den Code zeilenweise ausf hren wie im Abschnitt Pause und schrittweise Ausf hrung Seite 79 beschrieben Sie k nnen ein Widget oder Webprogramm auch mithilfe eines Breakpoints Unterbrechungspunkts anhalten wenn bei der Ausf hrung eine bestimmte Codezeile erreicht wird wie im Abschnitt Breakpoints Unterbrechungspunkte Seite 80 beschrieben W hlen Sie Debug gt Stopp oder klicken Sie in der Symbolleiste auf Stopp um die Ausf hrung eines Widgets oder Webprogramm in der Tes
164. tumgebung zu beenden Ausf hrungsprotokoll und Tracing Wenn Sie ein Widget oder Webprogramm in Dashcode ausf hren wird der Arbeitsbereich durch das Ausf hrungsprotokoll ersetzt Alle Fehler die w hrend der Ausf hrung des Widgets oder Webprogramms in Dashcode auftreten werden hier protokolliert Wird beispielsweise eine Funktion aufgerufen die nicht existiert enth lt das Ausf hrungsprotokoll einen Eintrag der darauf hinweist dass das betreffende Objekt keine Funktionsaufrufe zul sst Wird das Protokoll durch eine andere Ansicht ersetzt k nnen Sie Darstellung gt Ausf hrungsprotokoll ausw hlen um das Protokoll wieder anzuzeigen Wird eine Zeile im Protokoll ausgew hlt wird sofern m glich die zugeh rige Codezeile im Quellcode Editor angezeigt Das Ausf hrungsprotokoll kann auch f r die Ablaufverfolgung Tracing eines Widgets oder Webprogramms verwendet werden Ablaufverfolgung bedeutet dass dem Protokoll jedes Mal ein Eintrag hinzugef gt wird wenn eine Funktion gestartet oder beendet wird Dies ist n tzlich wenn Sie den Ausf hrungsfluss eines Widgets oder Webprogramms beobachten m chten Wenn das Ausf hrungsprotokoll sichtbar ist k nnen Sie den Inhalt des Protokolls filtern indem Sie einen Begriff in das Suchfeld in der Symbolleiste eingeben Pause und schrittweise Ausf hrung Sie k nnen die Ausf hrung eines Widgets oder Webprogramms jederzeit anhalten Das Anhalten der Ausf hrung ist n tzlich wenn
165. uellcode eines Projekts angezeigt wird k nnen Sie die HTML CSS und JavaScript Dateien ndern wie im Abschnitt Anzeigen des Quellcodes eines Projekts Seite 63 beschrieben In einem Widget oder Webprogramm kann HTML CSS und JavaScript Code verwendet werden der von Safari und seiner WebkKit Engine unterst tzt wird Die folgenden Dokumente enthalten weitere Informationen ber HTML CSS und JavaScript m Safari FAQ m WebKit DOM Programming Topics m Safari HTML Reference m Safari Web Content Guide for iPhone OS m WebKit DOM Reference Weitere Informationen ber das Erstellen einer Webseite oder eines Webprogramms die das f r Safari auf dem iPhone optimiert ist finden Sie im Dokument Safari Web Content Guide for iPhone OS Neben den HTML CSS und JavaScript Programmierschnittstellen des WebKit stellt Apple auch Dashboard spezifische Programmierschnittstellen f r Widgets bereit Weitere Informationen ber diese Programmierschnittstellen finden Sie in den Dokumenten Dashboard Programming Topics und Dashboard Reference Hinzuf gen einer Datenquelle 66 Alle Dashcode Vorlagen unterst tzen Datenquellen die stellvertretend f r die Daten stehen die f r ein Widget oder ein Webprogramm bereitgestellt werden Datenquellen liefern in Verbindung mit den Bindungen Daten an die Elemente der Benutzeroberflache und sorgen daf r dass diese synchronisiert werden wenn sich die Daten ndern Weitere Informationen zum Erstellen v
166. uerelemente f r Tiefe Schatten und Hervorhebung m Im Informationsfenster Ma e k nnen Sie die Gr e und Position des ausgew hlten Objekts ndern sowie sein Verhalten bei einer Gr en nderung des Widgets bzw der Webseite Mithilfe des Einblendmen s Layout k nnen Sie festlegen ob ein Element absolut oder auf der Basis des Dokumentflusses positioniert werden soll die Art der Positionierung ist im Abschnitt Vergleich zwischen absoluter und relativer Positionierung Seite 56 ausf hrlich beschrieben Die Einstellungen im Abschnitt Auto Gr e haben Auswirkungen auf das Verhalten des Elements wenn die Gr e des Widgets oder der Website im Arbeitsbereich ge ndert wird Die Werte im Abschnitt Gr e geben die tats chliche Gr e des ausgew hlten Elements an einschlie lich der R nder m Handelt es sich bei dem ausgew hlten Objekt um Text k nnen Sie die Schriftart den Schriftstil die Farbe den Schattenwurf die Ausrichtung sowie den Zeilen und Zeichenabstand im Informationsfenster Text ndern Sie k nnen auch festlegen ob der Text umbrochen werden soll und was bei einem Text berlauf geschehen soll Wird f r den Text berlauf die Einstellung Abschneiden gew hlt wird der Text des ausgew hlten Objekts an den Objektbegrenzungen abgeschnitten Bei Auswahl der Einstellung Ellipse werden Auslassungspunkte an den Text des ausgew hlten Objekts angeh ngt sobald die Elementbegrenzungen erreicht sind H
167. urce Folgende Optionen sind verf gbar Netzwerk Festplattenzugriff Aktivieren Sie die entsprechende Option wenn Ihr Widget den Zugriff auf Netzwerkressourcen oder Festplattendateien erfordert Diese Ressourcen sind standardm ig deaktiviert es sei denn die verwendete Vorlage ben tigt Zugriff auf Netzwerkressourcen wie beispielsweise XMLHttpRequest und Dateien die sich auf einer Festplatte und damit au erhalb des Widget Pakets befinden Erweiterungen Wenn Ihr Widget Inhalte verwendet die ber ein Internet Plug In ein Java Applet oder ein Befehlszeilenprogramm ber widget system bereitgestellt werden aktivieren Sie die entsprechende Ressourcenzugriff f r Widgets 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 6 Hinzuf gen von Quellcode und Erstellen von Bindungen Option Diese Ressourcen sind standardm ig deaktiviert es sei denn die verwendete Vorlage ben tigt Zugriff auf Plug Ins wie QuickTime Java und Befehlszeilenprogramme Einstellungen f r die Codebearbeitung Der Quellcode Editor verf gt ber eine Reihe von Einstellungen die Sie bei Bedarf ndern k nnen W hlen Sie Dashcode gt Einstellungen um diese Einstellungen anzuzeigen Im Fenster Einstellungen stehen folgende Bereiche zur Verf gung m Der Bereich Allgemein umfasst eine Option zum ffnen der Quellcodedateien in Dashcode bzw in einem Hilfsprogramm m Dar ber hinaus gibt es f r den Quellcode Editor verschiedene D
168. uter das iPhone SDK Software Development Kit installiert ist ffnet Dashcode das mobile Safari Webprogramm im iPhone Simulator der von SDK bereitgestellt wird Ist das iPhone SDK auf Ihrem Computer nicht installiert ffnet Dashcode das mobile Safari Webprogramm in seinem eigenen Simulationsprogramm Dashcode ffnet ein Safari Webprogramm immer in seinem eigenen Simulationsprogramm Wenn Sie das mobile Safari Webprogramm verwenden werden Sie feststellen dass die Master Liste mit den Parks die gesamte erste Seite belegt Wenn Sie auf den Namen eines Parks klicken wird eine neue Seite eingeblendet auf der Details zu diesem Park angezeigt werden Sichern und Testen der Standardwebprogramme 2009 06 09 2009 Apple Inc All Rights Reserved KAPITEL 3 Einf hrung in die Erstellung eines Projekts zur Entwicklung von zwei Produkten Oben links auf der Detailseite befindet sich eine Zur ck Taste deren Bezeichnung mit dem Titel der ersten Seite identisch ist Durch Klicken auf diese Taste gelangen Sie zur vorherigen Seite zur ck Die beiden Seiten des standardm igen mobilen Safari Webprogramms sollten hnlich wie in Abbildung 3 4 aussehen Abbildung 3 4 Das standardm ige mobile Safari Webprogramm im iPhone Simulator ii Carrier gt 6 35 AM ii Carrier gt 6 36 AM Browser Browser Haleakala Acadia Haleakala Bryce Canyon The scenery in Haleakala is amazing this time of year Carlsbad Caverns Cuyahoga Val
169. ved KAPITEL 5 Entwerfen der Benutzeroberfl che eines Widgets oder eines Webprogramms Platzieren des Schlie feldes f r ein Widget Durch Klicken auf das Schlie feld eines Widgets k nnen Benutzer das Widget schlie en Webprogramme besitzen kein Schlie feld Standardm ig wird dieses Schlie feld links oben im Hauptteil des Widgets angezeigt Bewegen Sie das Schlie feld falls erforderlich sodass es die obere linke Ecke des Widget Fensters berlappt Soll das Schlie feld nicht im Arbeitsbereich angezeigt werden w hlen Sie Darstellung gt Unsichtbare Objekte ausblenden Deaktivieren des Arbeitsbereichs Da ber den Arbeitsbereich automatisch der HTML und CSS Code f r das Widget generiert wird sollten Sie den Codegenerator deaktivieren wenn Sie Elemente manuell anpassen m chten W hlen Sie Darstellung gt Codegenerator stoppen um den automatischen Codegenerator zu deaktivieren Wenn Sie die manuelle Anpassung der Elemente abgeschlossen haben k nnen Sie den Codegenerator durch Auswahl von Darstellung gt Codegenerator starten wieder aktivieren Anzeigen des Standardbilds eines Widgets in der Vorschau 58 Die Vorschau des Standardbilds zeigt das standardm ige Bild f r das Widget das angezeigt wird solange das Widget in Dashboard geladen wird Wahlen Sie im Navigationsbereich Standardbild um das Standardbild des Widgets anzuzeigen Standardm ig werden alle Elemente die sich auf der Vorderseite
170. von Bindungen Seite 67 Zum Definieren einer Wertetransformation und zum Festlegen von Platzhalterwerten m ssen Sie jedoch das Informationsfenster Bindungen verwenden m Im Informationsfenster Behaviors k nnen Sie dem ausgew hlten Element JavaScript Handler f r die unterschiedlichsten Ereignisse Events zuweisen F r jedes Ereignis k nnen Sie eine bestehende JavaScript Funktion als Event Handler zuweisen oder eine leere Funktion erstellen die automatisch zum JavaScript Code des Projekts hinzugef gt wird Nachdem Sie einem Ereignis einen Handler zugewiesen haben k nnen Sie auf den Pfeilneben dem Namen des Handlers klicken um die Funktion im Quellcode Editor einzublenden Das Arbeiten mit dem Quellcode ist im Abschnitt Hinzuf gen von Quellcode und Erstellen von Bindungen Seite 63 beschrieben Anordnen und Sch tzen von Elementen Dashcode bietet n tzliche Optionen zum Anordnen von Elementen im Arbeitsbereich Wird ein Element durch andere Elemente verdeckt w hlen Sie zuerst das Element und anschlie end Anordnen gt Schrittweise vorw rts bzw Anordnen gt Ganz nach vorne aus um das Element vor die Elemente zu bewegen die es verdeckt haben In hnlicher Weise k nnen Sie Elemente in den Hintergrund bewegen indem Sie diese ausw hlen und anschlie end Anordnen gt Schrittweise r ckw rts bzw Anordnen gt Ganz nach hinten ausw hlen Dashcode bietet mehrere Optionen f r die Ausrichtung und Ver
171. vordefinierter Gr en annehmen wird f r Dashcode Widget Projekte standardm ig die absolute Positionierung verwendet Umgekehrt wird in Dashcode Webprogramm Projekten f r die meisten Elemente standardm ig die relative Positionierung verwendet da bei Webprogrammen mehr Flexibilit t in der Gr enanpassung erforderlich ist Doch auch wenn ein standardm iger Positionierungsstil f r ein Projekt festgelegt ist sind dennoch Abweichungen m glich Im Webprogramm Projekt mit der Vorlage Browser sind die Elemente in der Listenzeile der Zeilentitel und der Zeilenpfeil absolut zueinander positioniert um eine konsistente Anordnung zu gew hrleisten Wenn Sie ein Projekt anpassen sollten Sie den Positionierungsstil des Elements kennen das Sie ndern m chten Bewegen Sie n mlich ein Element in ein vorhandenes bergeordnetes Element im Arbeitsbereich so bernimmt dieses Element die geltende Positionierung der neuen zugeh rigen Elemente Soll das neue Element die Positionierung der vorhandenen Elemente bernehmen halten Sie die Umschalttaste gedr ckt w hrend Sie das Element in den Arbeitsbereich bewegen Suchen nach Objekten bzw Elementen Verwenden Sie das Suchfeld in der Symbolleiste um Objekte bzw Elemente in der Projektoberfl che bzw im Quellcode zu finden Diese Suche funktioniert w hrend der Design und Codierungsphase eines Widgets oder Webprogramms Wenn Dashcode ein Widget ausf hrt wird die Suche auf das Ausf hru
172. wenn der Arbeitsbereich sichtbar ist Bewegen Sie die Elemente per Drag amp Drop an die gew nschte Position Bewegen Sie einen der Aktivpunkte um die Gr e eines Elements zu ndern Halten Sie beim Bewegen der Aktivpunkte die Umschalttaste gedr ckt damit die Proportionen des Elements bei einer Gr en nderung beibehalten werden Es gibt auch einige Dashcode Befehle mit deren Hilfe Elemente auf der Oberfl che eines Widgets oder Webprogramms angeordnet und ausgerichtet werden k nnen Ausf hrliche Informationen hierzu finden Sie im Abschnitt Anordnen und Sch tzen von Elementen Seite 56 Sie k nnen beliebige Objekte aus dem Finder in den Arbeitsbereich bewegen und zu einem Widget oder Webprogramm hinzuf gen Das bedeutet dass Sie die Oberfl che in einem Programm wie Adobe Illustrator oder Photoshop entwerfen und die gesicherten Bilder anschlie end aus dem Finder in das Dashcode Projekt bewegen k nnen Dashcode verf gt jedoch auch ber eigene Designelemente Weitere Informationen hierzu finden Sie im Abschnitt Hinzuf gen von Elementen zu einer Widget Benutzeroberfl che Seite 54 Anzeigen der Widget Seiten Standardm ig haben alle neuen Widgets die mithilfe einer Dashcode Vorlage erstellt werden zwei Seiten eine Vorder und eine R ckseite Im Arbeitsbereich ist immer nur jeweils eine dieser Seiten sichtbar Klicken Sie im Navigationsbereich auf die Objekte front Vorderseite und back R ckseite um zwischen
173. ws die Zugriff auf alle Zeilenelemente in der Liste gew hrt Werden die Daten f r die Liste dynamisch bereitgestellt k nnen Sie mit der Eigenschaft rows derzeit gef llte Zeilen in der R ckfragemethode prepareRow anzeigen w hrend die Liste weiter gef llt wird Die Anzeige aller Zeilen ist jedoch erst m glich wenn die Liste vollst ndig gef llt ist Sowohl f r statische als auch f r dynamische Listen ist die Eigenschaft rows u erst n tzlich um nach dem F llen der Liste Zugriff auf bestimmte Zeilen zu erhalten Erh lt Ihre Edge to Edge Liste Daten dynamisch sollten Sie unbedingt die Funktion reloadData aufrufen damit die Liste neu geladen wird und den aktualisierten Inhalt anzeigt Beachten Sie dass die Funktion reloadData automatisch aufgerufen wird wenn das Listenelement initialisiert wird F gen Sie dazu die folgende Codezeile zu Ihrem Listen Controller hinzu document getElementById myList object reloadData Vorw rts Taste Das Element Vorw rts Taste ist f r die Verwendung in Webprogrammen konzipiert Mit der Vorw rts Taste k nnen Benutzer auf einfache Weise vorw rts durch mehrere Ebenen eines Webprogramms bl ttern Messger t 96 Bei dem Element Messger t handelt es sich um eine Skalenscheibe mit einem Zeiger auf der Werte innerhalb eines bestimmten Bereichs abgelesen werden k nnen Mithilfe des Informationsfensters Attribute k nnen Sie das Design eines Messger ts sowie den Wertebereich anpass
174. y MainHTML in der Datei Info plist des Widgets verweist In einem Webprogramm ist die Datei index htm auf der obersten Ebene der Liste Dateien die bergeordnete HTML Datei Geben Sie in der bergeordneten HTML Datei des Projekts eine Referenz auf die neue CSS Datei ein indem Sie die Anweisung import in Verbindung mit den lt sty 1 e gt Tags verwenden F gen Sie mithilfe des lt script gt Tags eine Referenz auf die neue JavaScript Datei hinzu Ressourcenzugriff f r Widgets 74 Wenn Sie beabsichtigen beliebige der folgenden Ressourcen in Ihrem Widget zu verwenden m ssen Sie zuerst den Zugriff auf diese Ressourcen aktivieren m Netzwerkressourcen einschlie lich XMLHttpRequest m Externe Dateien m Internet Plug Ins wie QuickTime und Quartz Composer m Java Applets m Befehlszeilenprogramme Wichtig Safari auf dem iPhone unterst tzt im Allgemeinen keine Drittanbieter Plug Ins oder Funktionen die Zugriff auf das Dateisystem erfordern Die meisten dieser Ressourcen sind daher f r mobile Safari Webprogramme nicht geeignet XMLHttpRequest wird von Safari auf dem iPhone dagegen unterst tzt Weitere Informationen ber nicht unterst tzte Technologien f r mobile Safari Webprogramme finden Sie im Dokument Safari Web Content Guide for iPhone OS Aktivieren Sie den Zugriff auf diese Ressourcen indem Sie im Navigationsbereich auf Widget Attribute klicken Aktivieren Sie anschlie end die Option f r die gew nschte Resso
175. zw das Webprogramm ausgef hrt k nnen die globalen Variablen gepr ft werden Wird das Widget bzw das Webprogramm angehalten wie im Abschnitt Pause und schrittweise Ausf hrung Seite 79 beschrieben erh lt die aktuelle Funktion eine eigene berschrift in der Tabelle unter der die zugeh rigen Variablen aufgelistet sind Wurde die Funktion von einer anderen Funktion aufgerufen werden die Variablen der zweiten Funktion unterhalb der Variablen der ersten Funktion aufgelistet und so weiter Durch Doppelklicken auf eine Variable in der Tabelle k nnen Sie den Variablennamen zur Codeauswertung hinzuf gen wie im Abschnitt Codeauswertung Seite 81 beschrieben Breakpoints Unterbrechungspunkte 80 Sie k nnen die Ausf hrung eines Widgets oder Webprogramms nicht nur mithilfe der Option Pause anhalten sondern zus tzlich noch Stellen im Code definieren an denen die Ausf hrung unterbrochen werden soll Diese Stellen werden Breakpoints oder Unterbrechungspunkte genannt Sie k nnen einen Breakpoint auf zwei verschiedene Arten hinzuf gen Eine M glichkeit besteht darin dass Sie auf den Rand im Quellcode Editor klicken Wird der Rand nicht angezeigt k nnen Sie im Bereich Bearbeitung der Dashcode Einstellungen die Option Zwischenr ume einblenden aktivieren Ein blauer Pfeil im Randbereich bedeutet dass die Ausf hrung angehalten wird bevor die betreffende Codezeile ausgef hrt wird Klicken Sie auf den blauen Pfeil

Dashcode Benutzerhandbuch

Contents

Download Pdf Manuals

Related Search

Related Contents