Doelstellingen
In deze stap wordt de Tersus Studio geïntroduceerd.
U leert hoe u een nieuw Tersus project moet aanmaken.
Behandelde Tersus Concepten
Na beëindiging van deze stap bent u bekend met de volgenden concepten binnen Tersus:
| Modellering begrippen: | Model, Display, Template. Model vs. Element Name. |
| Modellering technieken: | Het maken en beheren van een Display scherm, hernoemen van een model |
| Bruikbare display sjablonen: | View, Button, Popup, Label, Text area |
Gemodelleerde Applicatie Functionaliteit
In deze stap maakt u een formulier voor het invoeren van inkoopopdrachten.
De uiteindelijke webapplicatie bevat een button, welke een popup formulier opent, waarin een nieuwe inkoopopdracht wordt ingevoerd, volgens onderstaande afbeelding:
De Tersus Studio
De volgende schermafdruk toont het standaard uiterlijk van de Tersus Studio. Het omvat de Model-Editor (met geïntegreerde Palette) aan de rechterkant, en een tabblad met de Repository Explorer en Outline aan de linkerkant.
Als u meer wilt weten over de Tersus Studio voordat u begint aan uw eerste project wordt verwezen naar bijlage A, die onder meer de volgende onderwerpen behandeld:
- Tersus Studio en het Eclipse Platform
- Het Pallette
- Toevoegen van nieuwe Elementen aan het Model
- Selecteren, verplaatsen en veranderen van grootte van Elementen
- Het naar verschillende levels gaan
- In- en uitzoomen
- Ongedaan en herstellen
- De Outline
- De Repository Explorer
- De Application Server
Het maken van een simpele Web Applicatie
We starten met het maken van een nieuwe applicatie project:
Selecteer File -> New -> 
Tersus Project.
Nb. het Tersus Project is de eerste optie in het New sub-menu, gevolgd door Project..., welke de algemene Eclipse optie is (zie Bijlage A voor meer informatie).
Voer een Project naam voor uw nieuwe project: Tutorial.
Selecteer de Template: Legacy Navigation
Druk op de Finish button.
Start modelleren - Maak een Formulier voor invoer van een inkoopopdracht
Om te beginnen met het modelleren moeten we het root (begin) model van de applicatie openen in de model-editor.
Als u net een nieuw project, Tutorial, heeft aangemaakt, moet deze reeds geopend zijn in de model-editor. Zo niet, doe dan het volgende:
Zoek het Tutorial project root (folder) in de Repository Explorer tabblad, en dubbel-klik op deze.
Hierdoor moet een nieuw editor scherm zich openen, die er ongeveer uitziet als onderstaande schermafdruk, met de afbeelding van een gele rechthoek, welke de applicatie voorstelt. Daar we tot nu toe nog niets hebben gemodelleerd is er nog niets in zichtbaar, behalve de naam:
Maak een View (Open Requisitions)
Een webapplicatie is een programma welke je in een browser kan zien, als eerste moeten we daarom een View definiëren. Een View model definieerd wat zichtbaar is in de browser, en bevat andere display elementen (labels, buttons, tabellen, etc.). Om een View genaamd Open Requisitions (laat al uw open inkoopopdrachten zien) te maken, moet het volgende worden gedaan:
In het Palette (rechts van de model editor), gaat u naar de Display categorie (als deze niet open is, kunt u erop klikken om deze te openen).
Klik op de View template (sjabloon 
) om deze te selecteren.
Merk op dat als je nu de muis over de editor beweegt, deze veranderd om aan te geven dat het legaal is om View te plaatsen (door het afbeelden van een kleine grijze rechthoek).
Positioneer de muisaanwijzer binnen het root model en klik om de view toe te voegen.
Een view model is aangemaakt en de editor vraagt om een naam voor de view:
Typ Open Requisitions in en druk op [Enter] als u klaar bent met invoeren.
Het simpele model welke u net heeft aangemaakt moet er ongeveer als volgt uitzien:
De Open Requisitions view (de paars-blauwe rechthoek) is nu een sub-model van het root model Tutorial (de gele rechthoek).
Ieder model in de hiërarchie mag een onbeperkt aantal sub-modellen bevatten.
Nb. De model schermafdrukken in de handleiding kunnen verschillen van de modellen die u maakt, hoofdzakelijk als gevolg van de verschillen in het positioneren en de grootte van de elementen in het model, alsook het feit dat elementen welke andere elementen bevatten gesloten (gemarkeerd met 
) of open (
) kunnen zijn. Deze verschillen hebben geen effect op de functionaliteit van de applicatie, behalve in het geval van display modellen, zoals later in dit hoofdstuk uitgelegd zal worden.
Voeg een button toe (New Requisition)
Laten we verder gaan met het modelleren van de Open Requisitions view. We zullen nu een New Requisition button toevoegen (hiermee wordt de gebruiker in staat gesteld om een nieuwe inkoopopdracht in te voeren in een popup scherm). Selecteer de Button template (
) van de Display categorie in de palette (door te klikken op de template).
Voeg de button toe in de Open Requisitions view (door te klikken binnen de Open Requisitions).
Geef het de naam New Requisition (Typ New Requisition).
Het model moet er nu ongeveer als volgt uitzien:
Zowel de Repository Explorer als de Model Editor tabbladen laten een asterisk zien (bv. *Tutorial). Dit geeft aan dat er wijzigingen zijn die nog niet opgeslagen zijn.
Sla uw werk op door te klikken op 
in de toolbar.
Iedere keer als het model wordt opgeslagen, checkt (valideren) de Tersus Studio de modellen. Als er fouten worden gevonden zal een boodschap verschijnen en de fouten kunnen worden bekeken in de Validation view. Zie Stap 12 voor meer details betreffende validatie.
Hoewel tot nu toe we weinig hebben gemodelleerd, kunnen we reeds de eerste resultaten bekijken in de browser:
Klik op de Launch the application button in de studio's hoofd toolbar om de applicatie te starten in de embedded Tersus Server en om deze te openen in een webbrowser.
Als de Launch the application button is gedeactiveerd, klikken op de model editor zou deze moeten activeren.
De browser moet een pagina weergeven, zoals onderstaande:
Merk op dat de Open Requisitions view als een enkel tabblad verschijnt. Later, wanneer meerdere views zijn toegevoegd, zullen deze als extra tabbladen verschijnen. In de view, zien we de New Requisition button.
Ga terug naar de Tersus Studio. U kunt de browser in de achtergrond open laten staan.
Maak een Popup (Enter New Requisition)
Mensen vragen zich vaak af wat er in de computer gebeurd als zij klikken op een button. Het zou dan ook aardig zijn als we door de button in de logica van de applicatie konden kijken, en dat is nou precies datgene wat je met Tersus kan doen met de "zoom in" techniek – modelleren "binnen" de button die akties die plaatsvinden als op de button wordt gedrukt.
Laten we inzoomen in de New Requisition button en de popupformulier modelleren welke verschijnt als op de button is geklikt:
Dubbel-klik de New Requisition button om erin te zoomen.
Selecteer de Display/Popup template (
) van het palette.
Voeg deze in het New Requisition element.
Noem het Enter New Requisition.
De New Requisition button model moet ongeveer als volgt eruit zien:
De Popup template is een van een template welke default ingebouwde functionaliteit "out of the box" bevat. In dit geval van een Popup de ingebouwde functionaleit bestaat uit:
1. Een Footer, waarvan de inhoud zal verschijnen aan de onderkant van de popup.
2. Een OK button, welke op dit moment niets doet.
3. Een Cancel button, welke een Close Window model bevat, zodat wanneer op Cancel is gedrukt de Popup zal sluiten.
In het algemeen bent u vrij om te wijzigen (of te verwijderen) van deze functionaliteit naar uw behoefte.
Sla uw gegevens op .
Laten we nu bekijken hoe de applicatie er uitziet in de browser:
Ga terug naar de browser.
De browser herkent dat de applicatie is gewijzigd sinds de laatste keer het in de browser is geladen en ververst de applicatie automatisch.
Nadat het verversen (Reloading Application) is beëindigd, druk op de New Requisition button
U moet nu iets als volgt zien:
Klik op de Cancel button om te controleren of de popup sluit zoals verwacht.
Voeg Display Elementen toe aan de Popup
We hebben invoervelden nodig voor de gebruiker om de inkoopdetails in te kunnen typen.
Als eerste voeg een label (“Description:”) toe, die de gebruiker aangeeft de inkoopopdracht te beschrijven:
Dubbel-klik de Enter New Requisition popup om er in te zoomen.
Selecteer de Display/Label template (
) en zet deze in het bovenste gedeelte van de popup. Noem het Description: (de ":" als onderdeel van de naam).
Vervolgens, voeg een text area element toe waarin de gebruiker een omschrijving van de inkoopopdracht kan invoeren:
Selecteer de Display/Text Area template (
) en zet deze naast de label. Noem het Description.
Het model moet er nu ongeveer als volgt uit zien:
Sla uw werk op en ga terug naar de browser.
De popup moet er ongeveer als volgt uit zien:
Nb. De volgorde waarin display elementen verschijnen wordt bepaald aan de hand van de relatieve posities van de corresponderende sub-modellen in het model van de popup. In het algemeen is de volgorde van boven naar beneden, links naar rechts (zoals bij het lezen in het Nederlands).
Bovendien is de manier waarop de elementen zijn gerangschikt in de model hiërarchie bepalend hoe ze zullen verschijnen op het scherm. We hebben op dit moment al 2 verschillende voorbeelden gehad:
1. Het plaatsen van een popup binnen een button zorgt ervoor dat een popupscherm verschijnt als op de button wordt gedrukt.
2. Het positioneren van display elements aast elkaar (binnen een parent model) definieerd de volgorde waarop ze in een scherm worden gedisplayed.
Hernoem een model
De Enter New Requisition popup bevat de default ingebouwde button, OK, welke we in de volgende stappen zullen gebruiken om de nieuwe inkoopopdracht op te slaan. Laten we de button een andere naam geven:
Zoom naar de OK button in uw model.
Vervolgens doe of
Rechterklik op de button en selecteer Rename van het menu.
of
Klik op het model om deze te selectern en druk op [F2].
In beide gevallen zal deze de Rename dialog openen:
Verander OK in Submit, en klik op Finish.
De Rename dialog wordt gebruikt om twee verschillende namen van het model element te specificeren, als je deze gaat hernoemen, een Element Name en een Model Name.
Model Name is de algemene (shared) naam van een herbruikbaar model (zie Stage 4 voor verdere details betreffende hergebruik). Een model name moet uniek zijn in de desbetreffende package.
Element Name is de lokale naam van een model. Een element name moet uniek zijn in de desbetreffende parent. In het geval van display modellen (zoals de View die we net hebben aangemaakt), de element naam is de naam welke gedisplayed wordt aan de gebruiker.
Gewoonlijk zijn de namen gelijk en in deze gevallen de Keep the model name and element name equal check-box is default aangevinkt, zodat beide namen tegelijk veranderen.
Er zijn echter situaties waarin een bepaald element of model naam niet gebruikt kan worden, en in deze gevallen kun u beslsissen om check-box niet aan te vinken, en verschillende namen te gebruiken. Voor verdere details, zie de discussie betreffende automatisch gegenereerde namen in Stap 14.
De Keep package name equal to model name check box verschijnt wanneer het model welke u wilt hernoemen de zelfde naam heeft als de naam van de package waarin het is. Default staat deze aangevinkt, maar u kunt dit wijzigen indien gewenst.
Het model moet nu ongeveer als volgt er uitzien:
De button die we hebben hernoemd, geeft de originele naam tussen haakjes (<<OK>>). Dit is om u eraan te herinneren dat de button oorspronkelijk van de Popup template afkomstig is. Dit heeft geen effect, en zal niet worden gedisplayed als de applicatie gedraaid wordt, daarom kunt u het negeren.
Sla uw werk op en ga terug naar de browser.
De popup moet er ongeveer als volgt uitzien:
Voltooien Stap 2
We zijn nu klaar met het modelleren van het invoerformulier, hoewel het drukken op de Submit button nog geen gegevens opslaat of iets dergelijks. Dit zullen we in de volgende Stap behandelen.
Importeren van een Voorbeeld Project
We zullen nu een kant en klaar voorbeeldproject importeren, Tutorial 2-3. Dit voorbeeldproject bevat al de functionaliteit die we tot nu toe hebben gemodelleerd en zal worden gebruikt voor de volgende stap in deze handleiding: Selecteer File|
Import… om de Import wizard te openen.
Selecteer 
Existing Project into Workspace als de import bron.
Klik op Next>.
Wees er zeker van dat de Select archive file: radio button is geselecteerd, en klik op de Browse… button om de Select archive containing the projects to import dialog te openen.
Bij default zal de dialog worden geopend in de workspace folder waarin de voorbeeldprojecten zijn gearchiveerd.
Selecteer (of dubbel-klik) de samples.zip archief.
Nb. het volgende:
De samples.zip archief bevat alle voorbeeldprojecten van de handleiding. U kunt zoveel voorbeelden importeren als u wilt, het is echter aan te bevelen alleen dat project te importeren waar u mee bezig bent (Tutorial 2-3 voor deze Stap).
Het volledige pad van het geselecteerde archief kan afwijken, afhankelijk van de lokatie waar u Tersus heeft geïnstalleerd.
Klik de Deselect All button.
Controleer de check box links van het Tutorial 2-3 project.
Klik Finish om het project te importeren.
De wizard zal het project importeren en toevoegen aan de Repository Explorer.
Dubbel-klik op het Tutorial 2-3 project om deze te openen in de model editor.
Als alternatief, expandeer het geïmporteerde project, Tutorial 2-3 en de Tutorial 2-3 package welke daarin wordt gevonden en dubbelklik op het root model in deze.
Op deze manier zal het model in een nieuwe model editor scherm worden geopend.
Nb. Het project waar u eerst in werkte, Tutorial, is nog steeds open om in te wijzigen in een aparte model editor (welke in de meest linkse tabblad zichtbaar is, in de hierboven afgebeelde schermafdruk), en in de applicatie server.
Ga naar de Tutorial model editor, door op de Tutorial tabblad te klikken.
Klik op de Stop the application button in de studio's hoofd toolbar om de applicatie te deactiveren in de embedded Tersus Server.
Sluit het browser waarin de applicatie draaide.
Sluit de Tutorial model editor door te drukken op de Close (Sluiten) button op het editor's tabblad:
De model moet nu ongeveer als volgt er uitzien:
Het wordt ook aanbevolen dat u het (oude) Tutorial project welke u aan het begin van deze Stap heeft aangemaakt sluit:
In de repository explorer, rechter-klik op het Tutorial project.
Selecteer Close Project van het menu.
De repository explorer moet nu ongeveer als volgt er uitzien:
U kunt nu verder met Stap 3, waarin we zullen leren hoe de ingevoerde gegevens worden opgeslagen in een database.