Introduktion til App Lab 2
I denne øvelse bygger du videre på den app du har påbegyndt i del 1. Du skal lære indsætte billeder, lave flere skærme og gøre din prototype navigerbar. Du vil også lære hvordan du kan få skærmen på din app til at scrolle, så du kan vise mere indhold end der kan være i det synlige område.
Opret ny skærm
1. Du kan enten trække et screen-element ind i Visningsområdet fra Værktøjskassen eller klikke på skærmmenuen og vælge
New screen ...
2. En screen har kun to egenskaber i App Lab udover sit id. Det er background color og billede. Et baggrundsbillede skal passe til skærmens proportioner, 320 pixels i bredden og 450 pixels i højden, for ikke at blive forvrænget. Derfor er det ofte lettere at indsætte billeder separat ved at trække en pladsholder til et billede ind på den nye skærm. For øvrigt gør knappen Make default det muligt at gøre den nye skærm til startskærm, når du kører prototypen.
3. Du skal nu finde et passende billede til den pladsholder du har indsat på screen2. Google dig først til et passende billede og gem det på din computer, i stedet for at linke til et billede på nettet, som lige pludselig kan forsvinde. Du bør IKKE bruge æ, ø eller å i billedfilnavne. Filefternavnet skal være PNG, JPG eller GIF.
Klik derefter på Vælg ... for at fremsøge en fil på din computer.
4. Klik på Upload File . og find det billede du har gemt.
5. Når du har fundet billedet og valgt det i dit styresystems dialogboks, skal du klikke på Vælg i App Labs dialogboks.
6. Pladsholderens dimensioner er 100 px gange 100 px, hvilket ses af den stiplede linje omkring billedet. Mit billede har dimensionerne 410 px * 223 px og kan kun være i pladsholderen, fordi det bliver skaleret ned, så 410 bliver til 100 og højden tilpasser sig, så billedets proportioner bevares. Du bestemmer selv hvor stort du vil have billedet, men for at pladsholderen ikke kommer til at fylde mere end nødvendigt, bør du regulere højden ned til den passer til billedet.
Navigation
7. Nu skal du gøre prototypen navigerbar. Indsæt en knap i øverste venstre hjørne, slet teksten "Button" og angiv bredden til 40 px.
8. Scroll ned til den egenskab (Property) der hedder billede og klik på Vælg ... for at indsætte et baggrundsbillede i knappen.
9. Her kan du vælge et velegnet ikon til en Tilbage-knap.
10. Skriv "back" i søgefeltet for at indsnævre valgmulighederne og vælg et ikon der giver mening for brugeren.
11. Behold den orange baggrundsfarve på knappen, som tilfældigvis passer til Roskilde Festivalen, men angiv ikonets farve til en passende kontrastfarve (en blå) ved at ændre egenskaben icon color i de tre trin vist herunder.
Indsæt en hændelsesprocedure
12. For at gøre din prototype navigerbar, skal du markere Tilbage-knappen, åbne fanen EVENTS og klikke på Insert and show code ...
13. Den nye hændelsesprocedure til button2 ligger lige efter den til button1 og de må aldrig placeres inde i hinanden. Fjern først console.log i Linje 6 .
14. Træk en setScreen kommando (den ligger tredje nederst i UI controls ) ind i Linje 6 . Når app'en kører, skifter setScreen til den screen du vælger i dropdownlisten, screen1.
15. Skift til screen1, skift til Designvisning og træk endnu en knap ind under button1 (Vis navn).
Skift til fanen PROPERTIES , skriv "Se billeder" under egenskaben tekst.
Skift til fanen EVENTS og opret en hændelsesprocedure til den nye knap, som skal kunne skifte skærm til screen2, når app'en kører.
Test at det virker ved at klikke på Kør .
Gør skærmen scrollbar
16. Screens med mange billeder fylder gerne mere end det synlige område af skærmen. Derfor gør du prototypen mere realistisk, hvis du får skærmen til at scrolle, hvilket er en egenskab der styres med CSS (Cascading Style Sheets, som er formateringskoder).
For at få det til at ske, skal du skrive disse to kommandoer i kodevisning, som du dog ikke kan trække ind nogen steder fra som blokke. Den første kommando styrer, at den HTML-container ("divApplab") der rummer prototypen, med alle dens screens, bliver vertikalt scrollbar (i y-retningen). Den anden kommando angiver højden på screen2 til 2000 px, altså næsten fire gange så meget som den oprindelig højde på 450 px. Skift derfor til tekstvisning ved at klikke på </> Vis tekst .
17. Pas på at du IKKE kommer til at ændre i de koder der står i forvejen i linjerne 1 til 10. Javascript er meget sensitiv overfor manglende parenteser og andre specialtegn, og App Lab vil heller ikke kunne gendanne blokkene. Derfor kan du blive meget glad for at Fortryd-tasten (ctrl-z) findes eller i værre tilfælde versionshistorikken.
Indskriv præcis det der står i linje 11 og 12, og klik derefter på Vis blokke. Test om det virker.
Indsæt billeder udenfor det synlige område
18. Det er ikke så let at indsætte elementer udenfor det synlige område i prototypen, men det er indsatsen værd for at gøre prototypen mere overbevisende. Skift til screen2 , indsæt en pladsholder til et billede mere (tilpas størrelsen på pladsholderne og deres horisontale afstand fra venstre, altså x position) og indsæt også et billede. For at flytte image2 ned på screen2 skal du forøge y position, billedets vertikale afstand fra toppen, til mere end 450 px, som er grænsen for det synlige område i nedadgående retning. Gør ikke y position større end 1800 px, da billedet har en højde på 130 px og screen2 har en højde på 2000 px. Test at det virker.
19. Nu forsvandt image2 fra Visningsområdet, så for at redigere det igen kan du altid vælge det på dropdownlisten (trin 1) over samtlige elementer på den aktuelle screen, for at se dets egenskaber. Hvis du også vil kunne se billedet i Visningsområdet kan du midlertidigt ændre y position (trin 2) til noget under 450 px, som vil gøre billedet synligt for dig.
