Composé
Benutzerhandbuch
iOSAppsundPrototypenerstellen
Inhalt
4
6
7
8
10
14
Grundlagen
DasFenster
Strukturansicht
Elementliste
VisuellerEditor
Inspektor
Inhalteeinfügen
Bilderimportieren
AudioundVideo
ListenundSammlungen
Elemente-Übersicht
Szenenerstellenundlöschen
19
20
22
Layout
LayoutimÜberblick
RelativeGrößeundPositionmitDynamik
Layout-Relationen
23
24
25
Daten
DatenimÜberblick
DatenmitObjektenverknüpfen
Datenfiltern
26
27
Aktionen
AktionenimÜberblick
Daten-Sensoren
28
Formulare
Formulareerstellenundversenden
30
Exportieren
31
Kurzbefehle
32
UnterstützteFormate
3
DasFenster
DasFensterbestehtausvierTeilen.Linksbefindetsichdie
Strukturansicht①unddieElementliste②.Mittigbefindetsich
dervisuelleEditor③.RechtsbefindetsichderInspektor④.
Strukturansicht①
DieStrukturansichtstelltdenAufbaudergeradegeöffneten
Szenehierarchischdar.Objektekönnendortausgewählt,
verschobenundgelöschtwerden.
Elementliste②
DieElementlistebeinhaltetalleElemente,diezurKomposition
4
zurVefügungstehen.
VisuellerEditor③
DervisuelleEditorzeigteineVorschaudergeradegeöffneten
Szenean.ObjektekönnendortausgewähltundGrößeund
Positionverändertwerden.
Inspektor④
DerInspektoristderBereich,indemsichvielfältige
EinstellungenfürdiegeradeausgewähltenObjekte
vornehmenlassen.
5
Inhalteeinfügen
SofügenSieeinElementindieaktuelleSzeneein:
1. ZiehenSiedasElementausderElementlisteandie
gewünschtePositionimvisuellenEditoroderindie
Strukturansicht.derSzene(Tastaturkombination⌘Tfür
Text).
2. BeiElementen,dieTextenthalten:DrückenSiedie↩Taste,umindenTextbearbeitungsmoduszuwechseln.
GebenSiedengewünschtenTexteinundbestätigenSie
mitder↩-Taste.
6
Bilderimportieren
EsgibtverschiedeneMöglichkeiten,BilderindieaktuelleSzene
einzufügen.BilderkönnenausderZwischenablageeingesetzt
oderalsDateieingefügtwerden.UmSpeicherplatzzusparen,
könnenSieeineeinzelneBilddateiinmehrerenSzenen
verwendenmöchten.
SofügenSieeineBilddateiindieaktuelleSzeneein:
ZiehenSiedieBilddateiausdemFinderindenvisuellenEditor
oderindieStrukturansichtandiegewünschteStelle.
Alternativ:WählenSieausderMenüleisteEinfügen>
Auswählen…
EineAuflistungderunterstütztenBildformatefindenSieim
AbschnittUnterstützteFormate.
7
AudioundVideo
UmeineodermehrereAudiodateieninderaktuellen
Szeneabzuspielen,
ziehenSiedieAudiodatei(en)indenvisuellenEditor,oder
wählenSieausderMenüleisteEinfügen>Auswählen….Dies
hatfolgendenEffekt:
1. DieAudiodateienwerdendemProjekthinzugefügt.
2. EinAudio-Wiedergabe-Elementwirdindergeöffneten
SzeneerzeugtundmitderAudiodateiverknüpft.
3. EineSchaltflächewirderstelltundmitderAktion
abspielen/pausierenderAudio-Wiedergabeverknüpft.
UmdieFunktionalitätderneuenSchaltflächezutesten,
haltenSiecmd-altgedrücktundklickenSiemitder
MausaufdieSchaltfläche.(DieAudiodateisolltebeim
erstenKlickabgespieltundbeimzweitenpausiert
werden.)
UmeineVideodateiinderaktuellenSzene
abzuspielen,
ziehenSiedieVideodateiindenvisuellenEditoroderwählen
SieausderMenüleisteEinfügen>Auswählen….Dieshat
folgendenEffekt:
1. DieVideodateiwirddemProjekthinzugefügt.
2. EinFilm-Wiedergabe-Elementwirdindergeöffneten
8
SzeneerzeugtundmitderVideodateiverknüpft.
EineAuflistungderunterstütztenAudio-undVideoformate
findenSieimAbschnittUnterstützteFormate.
9
ListenundSammlungen
ListenundSammlungensindLayoutstrukturen,dieausZellen
bestehen.ImGegensatzzuListen,beidenenimmernurein
ElementproReihedargestelltwird(jedeZellenimmtdievolle
Breiteein),sindSammlungendazuinderLage,mehrere
ElementeineinerReihedarzustellen.
ListenundSammlungenkönneninKombinationmiteiner
Datenquelleverwendetwerden.SiekönnendadurchDatenaus
einerDateioderausdemWebdarstellen.MehrdazuimKapitel
ArbeitenmitDaten.
10
ElementeinderÜbersicht
Liste
StelltElementeuntereinandergereihtdar.
DerInhaltkannentwedergenaufestgelegt
oderdynamischübereineDatenquelle
bezogenwerden.
Sammlung
StelltElementenebeneinandergereihtdar.
WiebeiderListekannderInhaltentweder
genaufestgelegtoderdynamischübereine
Datenquellebezogenwerden.
Bild-Behältnis
StellteinBildauseinerDateioderURLdar.
DerDateiname,dieURLzumBildoderdie
BilddatenkönnenvoneinerDatenquelle
bezogenwerden.
StelltInhalteausdemHTML-Formatdar.
DerHTML-InhaltkannvoneinerDatenquelle
bezogenwerden.
HTML-Behältnis
Web-Behältnis
DokumentAnsicht
StelltdenInhalteinerURLausdemWeb
dar.
DieURLkannvoneinerDatenquellebezogen
werden.
ZeigtBilder,PDFs,iWorkoderOfficeDokumentean.
DieURLszudenDokumentenkönnenvon
einerDatenquellebezogenwerden.
11
SpielteineFilmdateiodereinenStreamab.
DieURLzumFilmoderStreamkannvon
einerDatenquellebezogenwerden.
Film-Wiedergabe
Karte
ZeigteineinteraktiveKartean.
VerwendetdensysteminternenKartendienst.
DiePositionkannperSuchbegriffoder
Koordinatebestimmtwerden.Suchbegriff
undKoordinatenkönnenvoneiner
Datenquellebezogenwerden.
Fotos-Ansicht
AnsichtfürFotosmitWisch-und
Zoomunterstützung.
DieURLszudenFotoskannvoneiner
Datenquellebezogenwerden.
Textfeld
FürdieEingabevonText.
DerTextkannaneineDatenquellegekoppelt
werden.DerPlatzhaltertextkannvoneiner
Datenquellebezogenwerden.
Kannan-undausgeschaltetwerden.
DerZustandkannaneineDatenquelle
gekoppeltwerden.
Schalter
Geteilte
ZeigtmehrereOptionennebeneinanderzur
Auswahlan.
DieBeschriftungenkönnenvoneiner
Datenquellebezogenwerden.Das
ausgewählteElementkannaneine
12
Schalt äche
Schieberegler
Auswahlliste
Suchleiste
Stepper
Textliste
ausgewählteElementkannaneine
Datenquellegekoppeltwerden.
FürdasEinstelleneinesnumerischenWerts.
DerWertkannaneineDatenquelle
gekoppeltwerden,MinimumundMaximum
vondortbezogenwerden.
ZeigtmehrereOptionenuntereinanderzur
Auswahlan.
DieBeschriftungenkönnenvoneiner
Datenquellebezogenwerden.Das
ausgewählteElementkannaneine
Datenquellegekoppeltwerden.
FürdieEingabevonTextfüreineSuche.
DerTextkannaneineDatenquellegekoppelt
werden.DerPlatzhaltertextkannvoneiner
Datenquellebezogenwerden.
FürdieschrittweiseEingabeeinerZahl.
DeraktuelleWertkannaneineDatenquelle
gekoppeltwerden,Minimalwert,
MaximalwertundSchrittgrößekönnen
bezogenwerden.
StelltTextzeilenalsDatenquellezur
Verfügung.
DieabzurufendeURLkannvoneiner
Datenquellebezogenwerden.
StelltAtom-Feed-DatenzurVerfügung.
DieabzurufendeURLkannvoneiner
13
DieabzurufendeURLkannvoneiner
Datenquellebezogenwerden.
Atom-Feed
StelltDatenimJSON-FormatzurVerfügung.
DieabzurufendeURLkannvoneiner
Datenquellebezogenwerden.
JSON
StelltRSS2.0-Feed-DatenzurVerfügung.
DieabzurufendeURLkannvoneiner
Datenquellebezogenwerden.
RSS2.0-Feed
WertetJavaScriptausundstelltdas
ErgebniszurVerfügung.
Datenauswertung
FilterteineDatenquelle.
AlsFilterkriteriumkanneinBegriffoder
Datenpfadangegebenwerden
Daten lter
BeinhaltetveränderbareDaten.
DiesesObjektkannalsDatenquellefür
Formularelementeverwendetwerden.
Editierbarer
Datensatz
SpeichertmehrereDatensätzeaufdem
14
Gerät.
DatensatzSpeicher
MehrereAktionen,diehintereinander
ausgelöstwerden.
Aktionsreihe
EineeinfacheAnimation.
ÄndertPosition,Deckkraft,Größeund
PositioneinesObjekts
Animation
BedingteAktion
FührteineAktionaus,fallsbestimmte
Bedingungenzutreffen.
DerzuprüfendeDatenwertkannvoneiner
Datenquellebezogenwerden.
Hinweisdialog
ZeigtTextineinemDialogfensteran.
DerdarzustellendeTextunddieÜberschrift
könnenvoneinerDatenquellebezogen
werden.
SendetFormulardatenaneineURL.
DiezusendendenDatenwerden
automatischinnerhalbeinerSzene
Formular-Versand gesammelt.
ErmöglichtesdemNutzer,einBild
auszuwählen.
DasBildkanndirektvonderKamera
aufgenommenoderausderFotobibliothek
15
Bildwähler
aufgenommenoderausderFotobibliothek
desNutzersausgewähltwerden.
ZeigteinMenümitWeitergabe-Optionen
an.
DerTextoderdieURL,dieweitergegeben
Weitergabe-Menü werdensollen,könnenvoneinerDatenquelle
bezogenwerden.
ZurNavigationinkontextabhängigen
Daten.
DieNavigationspfeilewerdenautomatisch
Navigationspfeile mitkontextabhängigenDatenverbunden.
SpielteineAudiodateiab.
AudioWiedergabe
FührteineAktionverzögertoderineinem
Intervallaus.
Timer
ÜberwachteinenDatenwertauf
Änderungen.
Sensor
Beschriftung
StelltTextdar.
DerTextkannvoneinerDatenquelle
bezogenwerden.
16
Schalt äche
LöstbeimdaraufTippeneineAktionaus.
DieBeschriftungkannvoneinerDatenquelle
bezogenwerden.
17
Szenen
KlickenSieaufdieSchaltfläche„Übersicht“,umzurSzenenÜbersichtzugelangen.HierhabenSieeineÜbersichtüberalle
SzenendesProjektsundsehendurchLinienvisualisiert,welche
SzenendurchNavigationspfademiteinanderverbundensind.
EineSzeneerstellen
InderSzenen-Übersichtbefindetsichaufderlinken
FensterseiteeinweißesRechteckmiteinem+.KlickenSieauf
diesesRechteckoderziehenSieesaneinefreieStelle,umeine
neueSzenezuerstellen.
EineSzenelöschen
KlickenSieinderSzenen-ÜbersichtaufeineSzene,umsie
anzuwählen.DrückenSiedieTaste←,umdieSzenezu
löschen.
18
Layout
InComposéstehenIhnenverschiedeneMöglichkeitenzur
Verfügung,umObjekteabhängigvonInhaltundDisplaygröße
positionierenzulassen.
AbsoluteKoordinaten
JedesObjektinnerhalbeinerSzeneverfügtüberabsolute
Koordinaten.WennSieeinObjektauswählenundesinnerhalb
derSzenebewegen,ändernSieseineabsolutenKoordinaten.
WählenSieeinfreibeweglichesObjektaus,erscheinenanden
EckenAnfasspunkte,mittelsdenenSiedieGrößeändern
können.
(DieX-AchsedesKoordinatensystemsverläuftvonlinksnach
rechts,dieY-Achsevonobennachunten.)
RelativePositionundGrößeinnerhalbderSzene
Siehe:RelativeGrößeundPositionmitDynamikundLayoutRelationen
GrößeabhängigvomaktuellenInhalt
DieElemente„Beschriftung“und„HTML-Behältnis“sindinder
Lage,ihreGrößedemaktuellenInhaltanzupassen.
19
Dynamik
DurchdieDrehungdesGerätsum90°werdendie
AbmessungendesBildschirmsvertauscht,wennvom
BetriebssystemeinOrientierungswechselausgelöstwird.Um
EinflussaufdieveränderteDarstellungeinerSzenezunehmen,
kannfürdieeinzelnenObjektederSzeneeineReihevon
Eigenschaftenfestgelegtwerden,diebestimmen,wiesichdie
GrößeundPositiondesObjektindiesemFallverhaltensollen.
Einstellungsfeld„Dynamik“
DasEinstellungsfeld„Dynamik“befindetsichimzweiten
Segment„Geometrie“imInspektor.
DieMagnetebestimmen,inwelchendervierRichtungendas
Objektfixiertseinsoll.DieFederngebenan,obsichdasObjekt
dehnensoll.
20
Beispiele
DasObjektbleibtlinksobenfixiert.
DasObjektbleibtrechtsuntenfixiert.
DasObjektwirdmitderSzenevergrößertoder
verkleinert.
DasObjektändertseineGrößenichtund
orientiertsichanderMitte.
21
Layout-Relationen
Layout-RelationensindeinfacheRegelnfürdieautomatische
AusrichtungvonObjekten(relativzuanderenObjekten).Unter
UmständenkönnensichObjekteinSzenenüberlappen,in
denensichderInhaltdynamischändert.Umdieszu
vermeiden,könnenbestimmteRegelnfestgelegtwerden.
Unterhalbvon
DasbetreffendeObjektsollautomatischunterhalbeines
anderenObjektsplatziertwerden.DieHöhedesanderen
Objektswirdberücksichtigt.
Rechtsvon
DasbetreffendeObjektsollautomatischrechtsneben
einemanderenObjektsplatziertwerden.DieBreitedes
anderenObjektswirdberücksichtigt.
Linksbündigmit
DasbetreffendeObjektsollautomatischdieXKoordinateeinesanderenObjektsübernehmen.
Obenbündigmit
DasbetreffendeObjektsollautomatischdieY-Koordinate
einesanderenObjektsübernehmen.
DasEinstellungsfeld„Layout-Relationen“befindetsichim
zweitenSegment„Geometrie“imInspektor.
22
ArbeitenmitDaten
ComposéunterstütztverschiedeneFormatezurEinbindung
vonexternenDaten.FürjedesderFormateexistiertein
entsprechendesDatenquellen-Element.EineDatenquelle
„versteht“dasjeweiligeFormatundmachtdieeinzelnen
BestandteiledarausfürandereObjekteverfügbar.
23
DatenmitObjektenverknüpfen
UmzwischendenDateneinerDatenquelleunddenObjekten
einerSzenezukommunizieren,kommenKopplungenzum
Einsatz.BeieinerKopplungwirdeineBeziehungzwischender
DatenquelleunddemMerkmaleinesObjektshergestellt.
KopplungensindimInspektorimletztenAbschnitt
konfigurierbar.FüreineÜbersichtderEigenschaften,diefür
eineVerknüpfungzurVerfügungstehen,sieheElementeÜbersicht.
24
Daten ltern
MitdemElementDaten lterkönnenDatenübereinen
SuchbegriffodereinenDatenpfadge ltertwerden.
DatenübereinenSuchbegriff ltern
1. ErstellenSieeinneuesDatenfilter-Objekt
2. WählenSieimInspektordiezufilterndeDatenquelleaus
3. GebenSieeinenSuchbegriffindasTextfeldunterdem
aktiviertenKontrollkästchenDurchSuchbegrifffilternein
DatenübereinenDatenpfad ltern(JSON)
1. ErstellenSieeinneuesDatenfilter-Objekt
2. WählenSieimInspektorunterzufilterndeDatenquelle
eineJSON-Datenquelleaus
3. DeaktivierenSiedasKontrollkästchenDurchSuchbegriff
filtern
4. AktivierenSieKontrollkästchenSchlüsselpfadfilternund
gebenSiedenDatenpfadindasTextfelddarunterein.
DerDatenpfadsetztsichzusammenaus
EigenschaftsnamenundArray-Indices,getrenntmit
einemPunkt.
Beispiel:contents.0.nameangewendetaufdieJSONDaten{"contents":[{"name":"Berlin"}]}liefertBerlin.
25
Aktionen
SchaltflächenundDatensensorenkönnenverschiedene
Aktionenauslösen:
RufeSzeneauf
MitdieserAktionwirdeinebestimmteSzenegeöffnet.
DieOptionModalpräsentierengibtan,obdieSzeneeinen
neuenNavigationskontextgeöffnetwerdensoll.
Zurücknavigieren
MitdieserAktionwirdinnerhalbdesaktuellen
NavigationskontextszurzuletztgeöffnetenSzene
zurückgewechselt.DieseAktionistequivalentzurZurückSchaltflächeobenlinksoderzurWisch-Gesteamlinken
BildschirmrandabiOS7.
Objektaktionen
BestimmteObjekteverfügenüberAktionen,dieausgelöst
werdenkönnen.ZumBeispiellässtsichdie Film-Wiedergabe
überdieAktionenabspielen,pausieren,Vollbild,vorwärts-und
zurückspulensteuern.
26
Daten-Sensoren
MitdemElement„Sensor“könnenAktionenausgelöst
werden.
ÜberDaten-Sensoren
Daten-SensorenkönneneineAktionauslösen,sobaldsich
etwasändert,beispielsweiseeinSchalterumgelegtoderein
TextineinSuchfeldeingegebenwird.Sieüberwachen
sozusagendasbetreffendeObjekt.
Beispiel
InfolgendemBeispielwirdbeiUmlegeneinesSchaltersein
Hinweisdialogangezeigt:
1. PlatzierenSieeinenSchalterinderSzene
2. ErstellenSieeinenHinweis-Dialog.
3. ErstellenSieeinenSensor.
4. WählenSieimInspektorunterAktion>Objektaktionden
Hinweisdialogaus.
5. WechselnSieimInspektorindasSegmentKopplungen.
6. KoppelnSiedenDatenwertdesDaten-Sensorsmitder
EigenschaftandesSchalters.
27
Formulare
FormularebestehenfürgewöhnlichausmehrerenElementen
wieTextfeldern,AuswahllistenundSchaltern.InComposé
werdenalleBedienelementeineinerSzenealsFormular
betrachtet.
Formulareversenden
UmeinFormularaneinebestimmteURLzuversenden,gehen
Siefolgendermaßenvor:
1. ÖffnenSiedieSzene,diedasFormularenthält.
2. PrüfenSie,obSieeindeutigeundnachvollziehbare
NamenfüralleTextfelder,Schalter,Listenund
Schiebereglervergebenhaben.
3. ErstellenSieeinFormularversand-Objekt.
4. GebenSieindasFeldSendenanURLdieURLein,andie
dieDatengesendetwerdensollen.
DenFormularversandtesten
ImInspektor-AbschnittTestkönnenSieeineVorschauder
Formulardatensehen,dieversendetwerden.WennSieaufdie
Schaltflächeausführenklicken,werdendieseDatenandie
angegebeneURLgesendetunddieAntwortvomServer
angezeigt.
28
AufdieAntwortdesServersreagieren
ImInspektor-AbschnittEreignissekönnenSieeineAktion
festlegen,dieausgelöstwird,wennderFormularversand
erfolgreichwar.ImAbschnittErweitertkönnenSieeine
Datenquellefestlegen,diedieAntwortdesServersaufnehmen
soll.DieDatenquellesolltezumFormatpassen–fallsderServer
eineAntwortimJSON-Formatliefert,solltenSiehiereineJSONDatenquelleauswählen.
29
Exportieren
ÜberdieFunktionExportierenkannauseinemComposéProjekteinXcode-Projekterstelltwerden.Xcodeistdie
EnwicklungsumgebungvonApple,mitdersichder
MaschinencodefürAppserzeugtwerdenkann.
BeimExportierenwerdenalleComposé-Objektein
Programmcodetransformiert.Bilder,FilmeundandereDateien
werdenkopiert,fürIconswerdenDateienindenpassenden
Größenerzeugt.
Apptesten
MitdemSimulator
XcodebeinhalteteinenSimulator,derdieAppohne
zusätzlichesGerätdirektaufdemMacausführt.DerSimulator
iststandardmäßgaktiv,wennSieeinProjektinXcodezum
erstenmalöffnen.KlickenSieaufdas▶-Symbolobenlinks,um
dieAppimSimulatorzustarten.
iPhone,iPadoderiPodtouch
SiekönnendieAppvonXcodedirektaufIhremiPhone,iPad
oderiPodtouchausführenlassen.SchließenSieIhrGerätüber
USBanIhrenMacan,wählenSieesausderListeobenlinksim
FensterausundwartenSie,bisdie▶-Schaltflächeaktivwird.
30
Tastatur-Kurzbefehle
Szenen-Übersichteinblenden:Leertaste
Vorwärtsauswählen:⌥Tab
Rückwärtsauswählen:⌥⇧Tab
TextgrößederAuswahlerhöhen:⌘⌥+
TextgrößederAuswahlverringern:⌘⌥–
Elemente-Suchfeldanwählen:⌘⌥F
Aktions-Modus:⌘⌥gedrückthalten
31
UnterstützteDateiformate
Bildformate:PNG,JPEG,GIF,TIFF
Audioformate:MP3,MPEG4-Audio
Videoformate:H.264MPEG-4
CSV:
Struktur:SpaltentitelindererstenZeile,
InhaltabderzweitenZeile
Kodierung:UTF-8
Trennzeichen:Komma,SemikolonoderTabulator
Zeilenumbruch:LF,CRoderCRLF
JSON:WieIETFRFC4627
Atom-Feed:Version1.0nachIETFRFC4287
RSS-Feed:Version2.0nachHarvard-Spezifikation
32
© Copyright 2024 ExpyDoc
