1. Definiera klassvariabel. 2. Instansvariabel för klass. Selektera klass i Browsern och tryck på statics. Definiera protokollnamn, Protocol->Add...

Transkript

1 Kort beskrivning av klassvariabler, något om instansvariabler för klasser samt en introduktion till gränssnittsbyggande med hjälp av gränssnittsbyggare i VisualWorks 5i 1. Definiera klassvariabel Selektera klass i Browsern och tryck på statics. Definiera protokollnamn, Protocol->Add... Editera mallen som visas i textfönstret, dvs skriv något i stil med: Omgivning.Klassnamn definestatic: #KlassvariabelNamn private: false constant: false category: 'kategori' initializer: 'INITIALTVÄRDE' Exempel Tex skulle vi kunna konstruera en klassvariabel PintsPerGallon i "vår gamla" SIConverter OOMPA.Lab2.A.SIConverter definestatic: #PintsPerGallon private: false constant: false category: 'constants' initializer: '8' Då detta värde knappast kommer förändras kan vi alternativt deklarera den som konstant. OOMPA.Lab2.A.SIConverter definestatic: #PintsPerGallon private: false constant: true category: 'constants' initializer: '8' Initiera klassvariabeln via pop-up-menyalternativet Initialize static. Sen skriver vi om metoden OOMPA.Lab2.A.SIConverter>>pint, dvs vi definierar om den enligt följande: pint ^self gallon / PintsPerGallon 2. Instansvariabel för klass En annan möjlighet är att definiera klassinstansvariabel. Då skulle man ju kunna deklarera en variabel gallon som klassinstansvariabel i SIConverter, se till att initiera den på lämpligt 1 (11)

2 sätt i respektive subklass samt flytta upp metoden gallon till SIConverter, låta den returnera klassinstansvariabeln och (förstås) stryka metoden från subklasserna. Fast detta är överkurs, så jag går inte närmare in på detta här. 3. Skapa GUI En minimal beskrivning med ett minimalt exempel på hur ett grafiskt gränssnitt kan skapas med hjälp av VisualWorks gränssnittsbyggare. För utförligare beskrivning av alla steg, olika komponenter osv så hänvisar jag till VisualWorks medföljande dokumenatation. Öppna parcelbrowser Tryck på alternativet för parcelbrowser i Launchern. Då kommer en browser som ser ut så här öppnas: 2 (11)

3 Tryck på knappalternativet Parcels så kommer listan längst till vänster ändras från att visa namnrymder till att visa paket. Ladda in paketet för gränssnittsbyggaren När vi tryckt på Parcels-knappen kommer också menyalternativet Namespace bytas mot Parcels i menylisten. För att ladda in ett nytt paket används menyalternativet Load... Då visas en dialog från vilken vi kan välja att ladda in paket: Välj paketet för UIPainter, som innehåller gränssnittsbyggaren. Under inladdningen kommer en varnande dialogbox visas. Tryck på knappen yes to all så kommer paketet laddas in. 3 (11)

4 När det hela är inladdat så kommer alternativet UIPainter visas i listan över inladdade paket: Använd gränssnittsbyggaren Nu kan vi öppna gränssnittsbyggaren genom att trycka på ikonen för staffliet som lagts till Launchern i samband med att vi läste in paketet. Alternativt kan vi öppna det hela via Toolsmenyn. 4 (11)

5 Vi väljer en komponent ur paletten och placerar den på duken (canvasen), i det följande fallet har vi valt ett inmatningsfält: 5 (11)

6 Efter att vi också valt och placerat en label, ett textfält och en knapp så har vi ritat upp följande gränssnitt: Nästa steg är att definiera en klass med metod som innehåller gränssnittbeskrivningen. Detta görs genom att först trycka på knappen Install... i Canvas Tool. Detta ger följande dialog, i vilken vi första gången trycker på knappen längst upp till höger för att antingen välja eller (som i vårt fall) skapa ny klass: 6 (11)

7 I dialogen som följer väljer vi lämplig namnrymd och trycker på fliken Create. För enkelhets skull har jag valt Smalltalk som namnrymd (då jag i aktuell image inte har skapat några egna namnrymder). 7 (11)

8 Ge klassnamn och kategori för var du vill placera klassen. Tryck sedan på OK-knappen. Vi kan, om vi vill, också välja superklass men ApplicationModel är den normala för gränssnitt konstruerade med gränssnittsbyggaren. Därefter kommer vi tillbaks till föregående dialog. Tryck på OK-knappen där också. Nu skall en klass med angivet namn ha skapats (här EnkeltGUI). Om man vill se på koden kan man använda vanlig browser eller trycka på knappen Browse... i Canvas Tool. Nästa steg är att namnge komponenter respektive binda dem till metoder i den genererade klassen. Detta görs enklast via menyalternativet Properties i Canvas Tool. 8 (11)

9 Överst i bilden nedan illustreras hur inmatningsfältet ges namnet field och underst hur knappen får namnet Flytta och binds till metoden moveit (dvs den metod som ska anropas om vi trycker på den). 9 (11)

10 Efter det att jag på samma sätt ändrat labeln till Ge text: och givit texfältet namnet output så kan jag automatiskt generera kod för dessa komponenter genom att använda menyalternativet Define... i Canvas Tool. Tryck OK i Define-dialogen och sedan Cancel i den efterföljande dialogen (som mer har med att göra hur systemet skall göra då man levererar en slutgiltig applikation). Nu skall det ha genererats två instansvariabler output och field samt följande instansmetoder output, field och moveit. Tryck sedan på Install... igen för att definiera var gränssnittsbeskrivningen skall hamna. Använd defaultvärdet genom att direkt trycka på OK. Pröva gränssnittet genom att antingen trycka på knappen Open eller skicka meddelandet open till klassen som vi skapade. Pröva tex att skriva om metoden moveit på följande sätt: moveit self output value: self output value, self field value, (String with: Character cr) 10 (11)

11 Om du i ett senare läge vill editera gränssnittet kan man göra på flera olika sätt. Dom två vanligaste är troligen: Skriv UIPainter new openonclass: EnkeltGUI andselector: #windowspec som också finns som kommentar i metoden EnkeltGUI class>>windowspec (så att man enkelt kan göra Do it) Öppna via Browser och menyalternativet Edit resource då man markerat metoden som innehåller gränssnittsbeskrivningen man vill editera, dvs i det här fallet klassmetoden windowspec. Resten och mer finesser får ni lära er genom pröva, gissa, läsa manualer, testa exempel, titta i systemet osv. 11 (11)