Kantineapp forside
I denne indledende øvelse skal du fremstille forsiden til kantineapp'en på RHS. De følgende øvelser bygger videre på app'en med flere skærme og forskellig funktionalitet du kan lade dig inspirere af til dine egne projekter.
Når du åbner et projekt i App Lab starter det i Kodevisning, som vist herunder. Skift til Designvisning ved at klikke på Design.
Nu kan du tilføje elementer til din app ved at trække dem fra Værktøjskassen over på screen1.
Indsæt et billede
1. Træk en pladsholder til et billede fra Værktøjskassen over på screen1.
2. Før du kan uploade et billede i App Lab og indsætte det i en pladsholder til billeder, skal du gemme billedet på din egen computer og sørge for at det enten har filnavnet .png eller .jpg. Gem nedenstående billede, som du skal bruge, ved at højreklikke på det og vælge Gem billede som ...
3. Nu kan du indsætte logoet i pladsholderen ved at klikke på Vælg ... til højre for egenskaben billede.
4. Klik på Upload File og fremsøg billedfilen på din computer.
5. Klik på knappen Vælg for at anvende billedet i pladsholderen.
6. Pladsholderen har en række egenskaber du kan tilpasse efter behov. For eksempel kan du angive pladsholderens dimensioner og position mere præcist end ved at trække med musen.
Indsæt en label
7. Træk en label over på screen1 og anbring den under logoet.
8. Skriv ”Kantine” i inputboksen tekst. Centrer din label, enten med musen ved at pege på elementet indtil musemarkøren bliver en hånd, eller ved at angive x position – eventuelt ved at bruge tællerknappen.
9. Klik på farveikonet for at åbne farvevælgeren. Træk skyderen (1) helt til højre (2) for at skifte farvekategori og vælg en passende rød farve (3) ved at klikke i farvekortet.
10. Angiv tekststørrelsen til 24 pixel under font-size. Centrer igen label’en under logoet på screen1.
Indsæt en button
11. Træk en knap fra Værktøjskassen over på screen1.
12. Giv knappen id’et buttonGotoMenu (1), som er et mere beskrivende navn end button1, der gør det lettere at genkende i koden senere sammen med mange andre knapper. Skriv knapteksten ”Gå til menu” (2). Sæt knappens bredde op til 150 px (3), så der bliver plads til at afrunde hjørnerne. Gør baggrundsfarven sort (4). Angiv border radius til 25 px (5). Centrer knappen igen, hvis der er behov for det.
13. Træk en label ind under knappen og skriv Dagens ret som tekst. Centrer label'en under knappen.
14. Indsæt et billede af dagens ret nederst på screen1. Du kan downloade dette billede eller selv finde et du har lyst til (og lov til) at bruge. Du får sikkert behov for at eksperimentere med width og height før billedet passer til resten af screen1 og for at få pladsholderen til at passe præcis til billedet.
15. Tjek at din screen1 ser harmonisk ud. Du kan flytte rundt på elementerne indtil de alle er centrerede og har en passende indbyrdes afstand. Det er vigtigt at øve sig på dette inden eksamensprojektet.
Du fortsætter arbejdet med kantineapp'en i næste lektion.