1. Startskærm
I denne indledende øvelse skal du fremstille startskærmen til en kantineapp på RHS. De følgende øvelser bygger videre på app'en ved at tilføje flere skærme og forskellig funktionalitet du kan lade dig inspirere af til dine egne projekter.
1. Åbn et nyt projekt i App Lab og 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
2. Højreklik på billedet herunder og vælg Gem billede som ... for at gemme det et passende sted på din computer.
3. Træk en pladsholder til et billede fra Værktøjskassen over på screen1.
4. Nu kan du indsætte logoet i pladsholderen ved at klikke på Vælg ... til højre for egenskaben billede.
5. Klik på Upload File og fremsøg billedfilen på din computer.
6. Klik på knappen Vælg for at anvende billedet i pladsholderen.
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 for text color. 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 dit billede af dagens ret nederst på screen1. Du kan tage et billede i kantinen eller finde et du har lyst til (og især 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 øvelse 2.