Squeak a Smalltalk - historie vývoje grafického uživatelského rozhraní

Pavel Tišnovský 9. 9. 2010

V osmé části seriálu o programovacích jazycích vhodných pro výuku programování se budeme zabývat vývojem grafického uživatelského rozhraní (GUI), a to nejenom ve Smalltalku, ale zmíníme se například i o projektu Sketchpad. Taktéž si řekneme, jaký vliv měl tento vývoj na Squeak a jeho uživatelské prostředí, které se v několika ohledech podstatně odlišuje od dnes standardních IDE.

Obsah

1. Vývoj grafického uživatelského rozhraní a programovací jazyk Smalltalk

2. Na počátku byl Sketchpad

3. Sketchpad a počítač Lincoln TX-2

4. Čím Sketchpad předběhl svoji dobu?

5. Geometrická omezení objektů ve výkrese

6. Vznik skutečného GUI – počítač Xerox Alto

7. Programové vybavení počítače Xerox Alto

8. Obsah následující části seriálu

9. Odkazy na Internetu

1. Vývoj grafického uživatelského rozhraní a programovací jazyk Smalltalk

Již v předchozích částech tohoto seriálu jsme se na několika místech zmínili o tom, že programovací jazyk Smalltalk (přesněji řečeno některé dialekty tohoto programovacího jazyka), měl poměrně značný vliv na vývoj grafických uživatelských rozhraní neboli GUI – Graphical User Interface. Jak si řekneme v dalších kapitolách, mnoho dnes běžných vlastností GUI bylo poprvé vytvořeno právě ve Smalltalku, který byl pro operace s prvky grafického uživatelského rozhraní velmi dobře uzpůsoben, především díky jeho schopnosti snadné práce s objekty a taktéž díky dynamickému typování.

Obrázek 1: Grafické uživatelské rozhraní počítače Apple Lisa (poměr stran screenshotu neodpovídá obrazu na reálné obrazovce, protože byly použity obdélníkové pixely, nikoli pixely čtvercové).

Prvním komerčně dostupným počítačovým systémem s plnohodnotným grafickým uživatelským rozhraním byl mikropočítač Xerox 8010 Star Information System z roku 1981, který předběhl jak osmibitový mikropočítač Apple Lisa z roku 1983 (tento počítač je ve článcích i historii GUI zmiňován velmi často), tak i mnohem slavnější Macintosh, jenž byl veřejnosti představen až o rok později. Grafické uživatelské rozhraní těchto systémů (a později například i MS Windows, systému TOS aj.) bylo z velké části založeno právě na výsledcích projektů navržených a posléze naprogramovaných ve Smalltalku na počítačových systémech firmy Xerox.

Obrázek 2: Grafické uživatelské rozhraní prvních počítačů Macintosh.

Ovšem prvopočátky skutečného grafického uživatelského rozhraní jsou ve skutečnosti ještě mnohem starší než samotný Smalltalk, jehož první prototyp vznikl „až“ v roce 1969 :-). Jednou z nejdůležitějších aplikací vzniklých před Smalltalkem, které měly (a v několika ohledech vlastně mají dodnes) velký vliv na vývoj grafických uživatelských rozhraní a počítačové grafiky vůbec, je systém nazvaný Sketchpad, jenž byl vyvinutý Ivanem E. Sutherlandem již v roce 1963 (práce na tomto projektu ovšem začaly již v roce 1961). Některé význačné vlastnosti tohoto systému budou popsány v následujících třech kapitolách.

Obrázek 3: Grafické uživatelské rozhraní MS Windows verze 1.1. Na rozdíl od rozhraní počítačů Apple Lisa či Macintosh (viz předchozí dva screenshoty) se v prvních verzích MS Windows nemohla okna jednotlivých aplikací překrývat.

2. Na počátku byl Sketchpad

Sketchpad byl navržen jako ucelený a poměrně inteligentní systém umožňující vytváření výkresů s využitím počítače. Jednalo se vlastně o první systém typu CAD, jehož některé vlastnosti stále nejsou (kupodivu – po téměř padesáti letech!) součástí některých CADů ani v současnosti. Aby Ivan Sutherland umožnil konstruktérům vytvářet a editovat výkresy, musel nejdříve navrhnout a posléze i implementovat vhodné grafické uživatelské rozhraní, jehož nejdůležitější vlastností bylo (a dodnes je) okamžitá vizuální odezva na příkazy zadávané uživatelem. Dnes se samozřejmě jedná o známý a všeobecně využívaný systém, ovšem na počátku šedesátých let minulého století se jednalo o revoluční myšlenku, protože naprostá většina tehdejších počítačů byla optimalizována pro provádění dávkových úloh (batch jobs), u nichž byl styl práce zcela odlišný – data pro tyto úlohy se musela dopředu připravit a uložit například na děrné pásky nebo štítky, posléze se ve vyhrazeném čase úloha provedla a výsledek se uživatelům vrátil buď opět na děrných páscích/štítcích, nebo ve formě vytištěné tiskové sestavy.

Obrázek 4: Ukázka grafického uživatelského rozhraní počítačového systému Xerox 8010 Star Information System.

Tímto způsobem sice bylo možné efektivně využít drahý strojový čas počítače, ovšem bez možnosti přímé interakce se strojem nebylo snadné či dokonce vůbec možné některé činnosti provádět – jedním z typických příkladů jsou právě CAD systémy, u nichž hraje interakce s uživatelem jednu z velmi důležitých rolí (tím ovšem nechci říci, že by neexistovaly nástroje pro dávkové zpracování výkresů, jedním z těchto programů je například utilita PIC či Metafont tvořící spolu s TeXem ucelený typografický systém).

3. Sketchpad a počítač Lincoln TX-2

Vraťme se však k systému Sketchpad. Ten byl implementován na počítači Lincoln TX-2 z roku 1958, jenž byl založen na technologii diskrétních tranzistorů (nikoli integrovaných obvodů) a operační paměti sestavené z feritových jader. Každé slovo uložené v operační paměti mělo šířku 36 bitů a celkově bylo v operační paměti uloženo 65536 slov. Tento počítač byl pro účely implementace Sketchpadu doplněn vektorovou obrazovkou o velikosti 7×7 palců a na svou dobu nevídaným rozlišením 1024×1024 pixelů. Samozřejmě, že u vektorové obrazovky nelze hovořit o skutečném rozlišení, ovšem lineární interpolátory řídicí elektronový paprsek měly desetibitovou přesnost. Dále byl počítač TX-2 vybaven světelným perem, ovládací konzolí (předchůdcem klávesnice) a dokonce i několika otočnými knoflíky (pravděpodobně s inkrementálním čidlem), pomocí nichž bylo možné měnit velikost či natočení editovaných objektů, posun obrazu, jeho zvětšení atd. (říkal tady někdo, že kolečko myši je nový vynález?) Vzhledem k tomu, že ovládací konzole obsahovala pro každou prováděnou operaci samostatné tlačítko, bylo plochu celé obrazovky možné využít pro zobrazení kresby (ve skutečnosti Sketchpad neobsahoval podporu pro zobrazení menu ani scrollbarů, protože to vlastně ani nebylo zapotřebí).

Obrázek 5: Timothy Johnson pracuje se systémem Sketchpad verze III (u tohoto obrázku bývá mnohdy mylně napsáno, že se jedná o samotného Ivana Sutherlanda, ten však jen suše poznamenává „Clearly not me“).

4. Čím Sketchpad předběhl svoji dobu?

Systém Sketchpad přišel hned s několika novými principy, které se posléze začaly používat i v dalších graficky orientovaných aplikacích. Jedním z nových nápadů byla koncepce takzvané virtuální kreslicí plochy, protože na obrazovce mohla být zobrazena pouze vybraná část výkresu. Posun výkresu po obrazovce (přesněji řečeno posun viditelného okna představujícího výřez výkresu) nebyl řešen pomocí scrollbarů, ale s využitím čtyř otočných knoflíků, které byly umístěny přímo pod obrazovkou (viz též pátý obrázek v předchozí kapitole). S využitím těchto ovládacích prvků se mohlo viditelné okno po výkrese přesouvat (scrolling) nebo se mohla měnit jeho velikost (zooming). Další nový a v oblasti CAD převratný nápad bylo kreslení a editace objektů složených z úseček, kružnic a kruhových oblouků takovým způsobem, že se právě kreslený nebo editovaný segment stále interaktivně zobrazoval jako takzvaná „pružná úsečka“ (ta se stala součástí výkresu až po stlačení příslušného tlačítka na ovládací konzoli). Právě díky tomuto – dnes zcela běžnému – prvku se stalo kreslení výkresů mnohem jednodušší a názornější.

Obrázek 6: Konstrukce objektu pomocí světelného pera a pružné úsečky. V levé části fotografie jsou vidět tlačítka na ovládací konzoli, kde každé tlačítko odpovídá jedné operaci.

Zajímavé bylo také to, že celý systém Sketchpad byl objektově orientovaný. V praxi to znamenalo především to, že jednou nakreslený objekt (samostatný výkres) bylo možné do jiného výkresu vložit v několika kopiích, samozřejmě s možností změny měřítka a/nebo natočení každé kopie. Navíc tyto grafické objekty byly v operační paměti nebo na magnetické pásce uloženy pouze jedenkrát (pokud uživatel neprovedl jejich klonování), což v praxi znamenalo, že editace, například změna tvaru, jednoho objektu se projevila i na všech ostatních kopiích tohoto objektu. Z hlediska operačního systému byl každý objekt na magnetickou pásku ukládán jako samostatný soubor (výkres) a vkládání objektů do jiného výkresu znamenalo, že se ve skutečnosti do tohoto výkresu vložil pouze odkaz na daný soubor. Tato koncepce se v podstatě velmi přesně podobá klasickému objektově orientovanému přístupu v programování (s tím, že vlastnosti instance odpovídají umístění objektu ve výkresu, jeho měřítku a natočení).

Obrázek 7: Jedna z variant světelného pera, která Sutherland používal ve Sketchpadu.

5. Geometrická omezení objektů ve výkrese

Systém Sketchpad přišel ještě s jednou novinkou, kterou v mnoha současných kreslicích aplikacích (téměř 50 let vzdálených od Sketchpadu) doposud nenajdeme. Jedná se o možnost vytvářet různá geometrická omezení pro kreslené či editované objekty ve výkrese. Jedno z nejjednodušších omezení, které lze těmto objektům přiřadit, spočívá v tom, že se úsečce předepíše, že může být pouze horizontální nebo vertikální. Pokud je toto omezení zadáno před začátkem kreslení úsečky (pomocí tlačítka na ovládací konzoli), je již v průběhu kreslení zajištěno, že úsečka bude buď vertikální či horizontální (tj. po zadání jejích okrajových bodů se jeden z bodů přesune na správné místo). Ovšem omezení lze přiřadit i k již existujícímu objektu. V tomto případě Sketchpad poměrně složitým způsobem zajistí, aby nově zadané omezení bylo splněno (samozřejmě posunem jednoho či obou okrajových bodů úsečky).

Mezi složitější omezení patří například omezení označované písmenem P. Jedná se o omezení, které specifikuje, že dvě úsečky musí být na sebe kolmé (Perpendicular) nebo rovnoběžné (Parallel). Opět platí, že toto geometrické omezení lze specifikovat již při kreslení úseček nebo až při editaci dříve nakreslených objektů. Celý systém omezení, který se vztahuje na jednotlivé objekty nebo skupiny objektů ve výkresu, se ukázal být velmi mocnou editační technikou, která v několika ohledech překonává dnes používané uchopovací režimy známé z mnoha systémů CAD. Některé výše popsané myšlenky implementované v systému Sketchpad, především použití světelného pera, „pružných úseček“, vícenásobné použití jednou nakreslených objektů, aplikace geometrických omezení atd., jsou ukázány Alanem Kayem v následující krátké video ukázce: http://www.you­tube.com/watch?v=mOZ­qRJzE8×g.

Obrázek 8: Snímek z videa, na kterém jsou Alanem Kayem předvedeny některé možnosti Sketchpadu.

6. Vznik skutečného GUI – počítač Xerox Alto

Vznik systému Sketchpad sice nepochybně měl velký vliv na další vývoj počítačové grafiky, ovšem v oblasti grafického uživatelského rozhraní byly z historického hlediska důležité i další projekty. Jednou z nejdůležitějších událostí z pohledu vývoje GUI byl vznik počítače Alto firmy Xerox, konkrétně se jednalo o pobočku Xerox Palo Alto Research Center neboli PARC. Tento počítač vznikl již v roce 1973 a přinesl několik zásadních inovací, které měly velký vliv na další vývoj IT, především osobních počítačů. Jednalo se o počítač, který pro zobrazování všech informací používal výhradně rastrovou (černobílou) grafiku a pro jeho ovládání se kromě klávesnice používala i třítlačítková myš. Mimochodem, tato tři tlačítka myši byla umístěna nad sebou a pojmenovaná byla nikoli podle svého umístění, ale podle svých barev, což přetrvalo až do dnešních časů právě v systémech, jakým je například Squeak (viz úvodní části tohoto seriálu). Počítač Alto byl dále vybaven operační pamětí s kapacitou 128 kB až 512 kB a volitelnými periferními zařízeními či síťovým rozhraním.

Obrázek 9: Část operačního systému počítače Alto byla naprogramována v jazyku BCPL, jehož podobnost s céčkem samozřejmě není čistě náhodná.

7. Programové vybavení počítače Xerox Alto

Z technologického hlediska nebyl počítač Xerox Alto vlastně ani nijak zvlášť výjimečný (existovaly i mnohem propracovanější architektury), ovšem mnohem důležitější byl jeho systém a programové vybavení. Systém jako novinku přinesl ideu desktopu, tj. pracovní plochy, na níž jsou umístěny různé nástroje ovladatelné kombinací klávesnice a myši. Pro tento počítač vzniklo několik aplikací, které grafické uživatelské rozhraní ve větší či menší míře využívaly. Jednalo se v prvé řadě o sázecí systém Bravo s modálním textovým editorem (jako jeden z prvních systémů umožňoval kombinaci textu sestaveného z různých fontů a grafiky). Mimochodem: na vývoji tohoto sázecího systému se podílel i známý programátor Charles Simonyi, o němž jsme se již zmiňovali v jiném seriálu při popisu sovětských počítačů Ural. Dále byl počítač Alto vybaven i programem pro práci s elektronickou poštou, kreslicím programem Markus (ne nepodobným například dnešnímu Paintbrushi) a zejména pak vývojovým prostředím založeným na Smalltalku.

Obrázek 10: Grafické uživatelské rozhraní Smalltalku na počítači Alto.

Toto vývojové prostředí bylo významné především díky tomu, že z něho bylo možné ovládat prakticky celý systém, včetně těch služeb operačního systému, které byly napsány v jazyce BCPL popř. v assembleru. Dokonce bylo, především díky dynamičnosti Smalltalku, možné celý systém přímo za běhu počítače měnit, o čemž se mohl přesvědčit například i Steve Jobs, který do PARCu přijel v roce 1979 na prohlídku, aby následně o několik let později (1983) vydal počítač Apple Lisa, jehož uživatelské rozhraní (nejenom vzhled, ale především chování, včetně WYSIWYG) jako by z oka vypadlo systému vyvíjeném v Xeroxu :-). Některé třídy, které se objevily ve Smalltalku pro počítače Xerox Alto, jsou používány ve Squeaku dodnes, což jen svědčí o tom, že firma Xerox v té době zaměstnávala jedny z nejlepších vývojářů.

widgety

8. Obsah následující části seriálu

V následující části seriálu o programovacích jazycích vhodných pro výuku programování si nejdříve řekneme, co znamená poněkud tajemná zkratka BitBLT a jaký je význam této zkratky v různých programovacích jazycích a grafických knihovnách. Posléze se (konečně) začneme věnovat popisu grafického subsystému Sqeaku. Na jednoduchých demonstračních příkladech si ukážeme, jak se ve Squeaku vytváří jednotlivé vizuální prvky grafického uživatelského rozhraní, jak lze tyto prvky modifikovat i jak lze napsat programové rutiny zavolané při vzniku nějaké události, například stlačení tlačítka myši nad nějakým vizuálním prvkem.

Obrázek 11: Ve Squeaku lze vytvářet i grafické tvary, které se chovají jako plnohodnotné objekty.

9. Odkazy na Internetu

  1. Ivan Sutherland's Sket­chpad
    http://www.you­tube.com/watch?v=mOZ­qRJzE8×g
  2. Sketchpad (in Vision and Reality of Hypertext and Graphical User Interfaces)
    http://www.mpro­ve.de/diplom/tex­t/3.1.2_sketchpad­.html
  3. Sketchpad
    http://en.wiki­pedia.org/wiki/Sket­chpad
  4. The Early History of Smalltalk
    http://gagne.ho­medns.org/~tgag­ne/contrib/Ear­lyHistoryST.html
  5. History of special effects
    http://www.pbs­.org/wgbh/nova/spe­cialfx2/1960.html
  6. Scratch Lowers Resistance to Programming
    http://www.wi­red.com/gadge­tlab/2009/03/scrat­ch-lowers/
  7. Squeak FAQ
    http://wiki.squ­eak.org/squeak/471
  8. Learning Squeak
    http://c2.com/cgi/wi­ki?LearningSqu­eak
  9. Scratch home page
    http://scratch­.mit.edu/
  10. Scratch (programming language)
    http://en.wiki­pedia.org/wiki/Scrat­ch_(programmin­g_language)
  11. Squeak home page
    http://www.squ­eak.org/
  12. XO: The Children's Machine
    http://wiki.lap­top.org/go/The_Chil­dren's_Machine
  13. WIMP (computing)
    http://en.wiki­pedia.org/wiki/WIM­P_(computing)
  14. Xerox Star
    http://en.wiki­pedia.org/wiki/Xe­rox_Star
  15. The Xerox Star 8010 „Dandelion“
    http://www.di­gibarn.com/co­llections/sys­tems/xerox-8010/index.html
Našli jste v článku chybu?
DigiZone.cz: Digi Slovakia zařazuje stanice SPI

Digi Slovakia zařazuje stanice SPI

Vitalia.cz: 5 důvodů, proč jet na výlov rybníka

5 důvodů, proč jet na výlov rybníka

Vitalia.cz: Inspekce našla nelegální sklad v SAPĚ. Zase

Inspekce našla nelegální sklad v SAPĚ. Zase

DigiZone.cz: Světový pohár v přímém přenosu na ČT

Světový pohár v přímém přenosu na ČT

120na80.cz: Zlepšete si kondici s kořenem z Dálného východu

Zlepšete si kondici s kořenem z Dálného východu

120na80.cz: Hrbatá prsa aneb mýty o implantátech

Hrbatá prsa aneb mýty o implantátech

Podnikatel.cz: Byla finanční manažerka, teď cvičí jógu

Byla finanční manažerka, teď cvičí jógu

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

Vitalia.cz: 5 chyb, které děláme při skladování potravin

5 chyb, které děláme při skladování potravin

DigiZone.cz: Jaká je Swisscom TV Air Free

Jaká je Swisscom TV Air Free

Lupa.cz: Jak se prodává firma za miliardu?

Jak se prodává firma za miliardu?

DigiZone.cz: Samsung EVO-S: novinka pro Skylink

Samsung EVO-S: novinka pro Skylink

DigiZone.cz: Technisat připravuje trojici DAB

Technisat připravuje trojici DAB

DigiZone.cz: Rapl: seriál, který vás smíří s ČT

Rapl: seriál, který vás smíří s ČT

Vitalia.cz: Jsou vegani a vyrábějí nemléko

Jsou vegani a vyrábějí nemléko

Podnikatel.cz: Znáte už 5 novinek k #EET

Znáte už 5 novinek k #EET

DigiZone.cz: Koncesionářské poplatky pro RTVS

Koncesionářské poplatky pro RTVS

Lupa.cz: Další Češi si nechali vložit do těla čip

Další Češi si nechali vložit do těla čip

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?

Vitalia.cz: Tahák, jak vyzrát nad zápachem z úst

Tahák, jak vyzrát nad zápachem z úst