ontwikkelomgeving.tex

\chapter{Ontwikkelomgeving}
\label{chap:ontwikkelomgeving}

\begin{derivation}{Opmerking}
Voordat we van start gaan met \ai een kleine waarschuwing. De ontwikkelomgeving is niet altijd even snel en het gaat niet sneller door veelvuldig op links of knoppen te klikken. Sterker nog: dit kan er voor zorgen dat de omgeving nog langzamer wordt en dat er fouten op gaan treden. Om dit te voorkomen vragen we je om geduld te hebben en te wachten als de omgeving je daarom vraagt!
\end{derivation}
\marginfig{screenshots/MollenMeppen_import_aia}{Import} 

Als het goed is heb je het scherm voor je zoals afgebeeld in figuur \ref{screenshots/projects}. Het eerste dat we gaan doen is een project \emph{uploaden}. Dat wil zeggen dat we een project dat iemand anders voor ons gemaakt heeft gaan binnenhalen in de  ontwikkelomgeving. Onder menu-item \menuitem{Projects} kiezen we \menuitem{`Import project (.aia) from my computer ...'}, zie figuur \ref{screenshots/MollenMeppen_import_aia}.

Figuur \marginfig{screenshots/MollenMeppen_upload_scherm}{Import Project}
We gaan het `MollenMeppen' project binnenhalen. App Inventor projecten worden opgeslagen als `.aia' bestanden en het is de bedoeling dat je dit bestand \emph{uploadt}. Als we op \emph{Import} hebben geklikt krijgen we de pop-up zoals afgebeeld in \ref{screenshots/MollenMeppen_upload_scherm}. 
Via deze pop-up kunnen we bladeren naar de locatie van het project (`.aia' bestand) dat we willen binnenhalen. Bij dit boek hoort ook een `resources.zip' (\emph{resources} staat voor \emph{benodigdheden}) waarin de `.aia' zit. Als je de \emph{resources} nog niet hebt gedownload kun je ze vinden en \emph{download}en op de download-pagina \url{https://github.com/Edubits/AppInventor/releases}.
\emph{Browse} naar het ge\emph{download}ete bestand, selecteer het dan en klik op \menuitem{OK}.
 
Nadat  we op \menuitem{OK} hebben geklikt wordt het project `MollenMeppen' in ons scherm toegevoegd, zie figuur \ref{screenshots/mollenmeppen_project}.

\inlinefig{screenshots/mollenmeppen_project}{ \emph{My Projects} scherm met MollenMeppen project}

Korte tijd nadat het project is toegevoegd zal de ontwikkelomgeving automatisch naar het \emph{Design}-scherm springen waarin we het ontwerp van de applicatie zien, zie figuur \ref{screenshots/mollenmeppen_design}. 
\inlinefig{screenshots/mollenmeppen_design}{`Design' scherm van MollenMeppen}

\section{\emph{Design}-scherm}
\label{sec:design-scherm}
Het  \emph{design}-scherm bestaat uit verschillende onderdelen, om straks de gebruikersinterface van je eigen applicatie te kunnen ontwerpen is het belangrijk de verschillende onderdelen hiervan te kennen. Deze onderdelen zie je in figuur \ref{screenshots/Ontwikkelomgeving_DesignEditor}.

\inlinefig{screenshots/Ontwikkelomgeving_DesignEditor}{De verschillende onderdelen van het design-scherm}

\begin{description}
  \item[1. De knoppenbalk] In deze balk vind je knoppen om het project op te slaan, nieuwe schermen toe te voegen en om je project op een telefoon of in de emulator uit te voeren.
  \item[2. Palette] Het palette is de plek waar je alle ingebouwde componenten terugvindt om te gebruiken in jouw app. Om een component te gebruiken sleep je deze naar het scherm in de Viewer.
  \item[3. Viewer] In de viewer kun je de gebruikersinterface ontwerpen. 
  \item[4. Components] Dit is een overzicht van alle componenten die op dit moment in gebruik zijn. Door op een component te klikken kun je zijn eigenschappen bekijken bij Properties.
  \item[5. Media] In een applicatie kun je gebruik maken van bijvoorbeeld afbeeldingen, deze kun je hier toevoegen en beheren.
  \item[6. Properties] In dit deel van het scherm pas je eigenschappen van een component aan, bijvoorbeeld de kleur.
\end{description}

Om weer naar het `My Projects' scherm te gaan kun je deze aanklikken in de ontwikkelomgeving.