Issuu on Google+

M-STUUDIUM MOBIILIRAKENDUSTE PROGRAMMEERIMINE JA DISAINIMINE


Sisukord

1 M-Stuudiumi koolitusprogramm .............................................................................. 3 2 Nutitelefonid ..................................................................................................................... 3 3 Operatsioonis端steemid ................................................................................................. 4

2


1 M-Stuudiumi koolitusprogramm Kaasaegsed mobiiltelefonid – nutitelefonid – on võimsad kommunikatsioonivahendid, millega saab teha sarnaseid toiminguid kui arvutitega. Mobiilitehnoloogiat saab rakendada igapäevatoimingute hõlbustamiseks, ka koolielu korraldamisel ja õppe läbiviimisel. Nutitelefonide müük on viimastel aastatel plahvatuslikult kasvanud. Juba sellel aastal on oodata, et nutitelefone müüakse rohkem kui tavaarvuteid. Veebistuudiumi koolitusprogrammi M-Stuudium eesmärk on õpetada, kuidas tänapäevaste arendus- ja disainivahenditega luua nutitelefonidele rakendusi. MStuudiumi programm annab õpetajatele ja õppejõududele ka võimaluse muuta oma kursus, ainetund või huviring põnevamaks. Käesolev praktilisi näiteid ja ülesandeid sisaldav M-Stuudiumi õppematerjal aitab omandada mobiilirakenduste loomise oskuseid. Nutitelefoni operatsioonisüsteemina on M-Stuudiumi õppes kasutusel Windows Phone. M-Stuudiumi koolitusprogramm ja õppematerjal on valminud Microsofti ja BCS Koolituse koostööna.

2 Nutitelefonid Nutitelefoniks nimetatakse seadet, millel on tavalise mobiiltelefoniga võrreldes suurem arvutusvõimsus ja ühenduvusvõimalused. Lisaks helistamisele on nad head muusika kuulamiseks ning tänu suurele ekraanile ka video vaatamiseks. Nutitelefonid oskavad teha pilti ja käia internetis, kombineerides sellega ühte seadmesse palju võimalusi (Joonis 1).

Joonis 1 – Nutitelefonid

3


Nutitelefonide levik on aasta-aastalt laienenud. Uuringufirma Gartner andmetel moodustasid nutitelefonid 2011. aastal 31% kõikidest müüdud telefonidest. Võrreldes 2010. aastaga on müük kasvanud 58% ning sarnast kasvu arvatakse jätkuvat. Uuringufirma IDC ennustuste järgi müüakse aastal 2015 pea 1 miljard nutitelefoni.

3 Operatsioonisüsteemid Täna müüdavad nutitelefonid jooksevad peamiselt viiel operatsioonisüsteemil. Nendeks on Android, BlackBerry, Symbian, iOS ja Windows Phone. BlackBerry on populaarne pigem USAs. Kadumas Symbian, mida eelnevalt kasutas oma nutitelefonides Nokia. Eestis ja Euroopas on tulevikuperspektiivikateks operatsioonisüsteemideks Android, iOS ja Windows Phone. Windows Phone turuosa aastal 2011 oli IDC andmetel 3,8%. Koostöös Nokiaga eeldatakse turuosa aastal 2015 umbes 20% (Joonis 2).

50,00% 45,00% 40,00% 35,00% 30,00% 25,00% 20,00% 15,00% 10,00% 5,00% 0,00%

Turuosa 2011 Turuosa 2015

Joonis 2 – Operatsioonisüsteemide turuosa

4


AGU SUUR

WINDOWS PHONE PRAKTILINE KASUTAMINE


Sisukord

1 Sissejuhatus ..................................................................................................................... 3 2 Riistvara ............................................................................................................................. 3 2.1 Puuteekraan ............................................................................................................ 4 2.2 P천hinupud................................................................................................................ 4 2.3 Lisanupud ................................................................................................................. 4 2.4 Lisariistvara .............................................................................................................. 5 3 Ootere탑iim ja lukustusekraan.................................................................................... 5 4 Start-vaade ...................................................................................................................... 6 5 Rakendused ..................................................................................................................... 7 5.1 Horisontaalne scrollimine ................................................................................... 7 5.2 Application Bar ....................................................................................................... 8 5.3 Status Bar ................................................................................................................. 9 6 Kokkuv천tteks.................................................................................................................10

2


1 Sissejuhatus Windows Phone on suhteliselt uus nutitelefonide operatsioonisüsteem, millel on telefoni kasutamisele üsna unikaalne lähenemine. Teistelt telefonidelt tulles või hoopiski esimest korda nutitelefoni kasutades võib kogemus olla võõras. Vaatame üle põhilisema riistvara, operatsioonisüsteem ja rakenduste ülesehituse, et Windows Phone kasutama hakkamine läheks sujuvamalt.

2 Riistvara Telefonitootjatel on võimalus oma Windows Phone mudelit kohandada, senikaua kuni järgitakse põhilisi nõudmisi. Need nõudmised tagavad, et kõik Windows Phone telefonid näeksid tuttavad välja ja oleksid sarnased kasutada. Arutame riistvara Nokia Lumia 800 baasil (Joonis1), kuid kõik Windows Phone telefonid järgivad samu põhimõtteid.

Joonis 1 - Nokia Lumia 800

3


2.1 Puuteekraan Kõige olulisemaks osaks telefoni juures on selle ekraan, mis võtab enda alla suurima ala telefoni esiküljel. See reageerib puudutustele ja võimaldab kasutajal valikuid teha ja telefonile käsklusi anda. Puutekraan tagab vahetu konktakti kasutaja ja kasutajaliidese vahel, mistõttu on puutetundlike ekraanidega nutitelefonid ülimalt populaarseks saanud.

2.2 Põhinupud Lisaks puutekraanile leiame telefoni esiküljelt allosast kolm nuppu. Need kolm nuppu on Back (tagasi), Start ja Search (otsing) (Joonis 2).

Joonis 2 - Back, Start & Search

Back nupuga liigume tagasi, nii rakenduse sees kui rakenduste vahel. Kui avatud rakendus on koduvaatel ja rakenduse sees tagasi liikuda ei ole võimalik, paneb Back nupp rakenduse kinni. Back-nuppu all hoides satume avatud rakenduste nimekirja ja saame nii avatud rakenduste vahel kiirelt hüpata. Start nupuga pääseme alati tagasi Start-vaatesse, et avada mõni uus rakendus. Start nuppu all hoides saame anda telefonile häälkäsklusi (inglise keeles). Search nupuga saame alustada uut otsingut.

2.3 Lisanupud Lisaks võib telefoni servadest leida toitenupu. Toitenuppu vajutades tuleb telefon ooterežiimist välja ja me saame seda kasutama asuda. Toitenuppu uuesti vajutades kustub telefoni ekraan ja telefon läheb ooterežiimi. Toitenuppu all hoides saame me telefoni täielikult välja lülitada. Nuppe on veel helitugevuse reguleerimiseks ja kaameraga pildi tegemiseks, kuigi nende ja toitenupu täpne asukoht telefoni kerel varieerub telefonitootjate vahel.

4


2.4 Lisariistvara Telefonilt võib veel leida kõlari, mikrofoni, kaamera(d) ning USB-pordi telefoni laadimiseks ja arvutiga ühendamiseks. Ka nende asukoha otsustab telefonitootja.

3 Ooterežiim ja lukustusekraan Suurema osa ajast veedab telefon ooterežiimis. Ekraan on välja lülitatud, kuid taustal toimub andmeside ja telefon on valmis vastu võtma kõnesid. Et telefoni kasutada, tuleb see ooterežiimist välja tuua, vajutades selleks toitenuppu. Seda tehes näidatakse kasutajale esmalt lukustusekraani (Joonis 3). Lukustusekraan kuvab põhilisemat infot, nagu kellaaeg ja kuupäev, aga samas ka vastamata kõnede, sõnumite ja e-kirjade arvu, kalendrisissekandeid, infot levi, aku kestvuse jpm kohta. Lukustusekraani eesmärk on anda kiire ülevaade toimuva kohta. Kui muusika jääb mängima, näitab telefon lukustusekraanil nuppe muusika kontrollimiseks, pealkirja ja esitajat ning valikuliselt ka muusikaga seotud pilti. Muusikaga seotud pildi näitamise ja lukustusekraani vaikimisi taustapildi saab kasutaja ise valida. Et telefoni kasutama hakata, tuleb lukustusekraan sõrmega üles libistada. Siis ilmub nähtavale Start-vaade. Kui kasutaja on seadnud telefonile parooli, ilmub lukustusekraani üles libistades klaviatuur parooli sisestamiseks.

5


Joonis 3 – Lukustusekraan

4 Start-vaade Start-vaates (Joonis 4) näeme valikut plaate. Neid plaate saab kasutaja lisada, liigutada ja eemaldada, koostades sellega endale meelepärane vaade. Plaatide liigutamiseks ja eemaldamiseks tuleb plaadi peal näppu hoida. Start-vaadet vasakule libistades ilmub paremalt nimekiri kõikide rakendustega. Selles nimekirjas saab rakendusi avada, neid Start-vaatesse lisada ja neid telefonist eemaldada. Start-vaatesse lisamiseks või eemaldamiseks tuleb rakenduse nimel näppu peal hoida. Rakenduste nimekirjas saab rakendusi nime järgi otsida. Samuti, kui rakendusi on telefoni paigaldatud rohkem, ilmuvad nimekirja tähed, mille abil on lihtne mõne teise tähe juurde hüpata ja nii kiirelt vajalik rakendus leida. Tihedaminikasutatavad rakendused saab kiiremaks ligipääsuks lisada Start-vaatesse. Start-vaate plaadid ei ole lihtsalt ikoonid. Need saavad näidata ajakohast informatsiooni, näiteks lugemata kirjade arvu või kalendrisissekandeid.

6


Joonis 4 - Start-vaade

5 Rakendused Windows Phone rakenduse väljanägemine ja ülesehitus on arendaja otsustada. Küll aga omavad paljud rakendused sarnaseid viise, kuidas asju saavutada. Selline ühtsus on üks Metro disainikeele plusse. Metro disainikeelt näeme Windows Phone telefoni kasutades kõikjal.

5.1 Horisontaalne scrollimine Paljud rakendused kasutavad horisontaalset scrollimist, kas Pivoti või Panorama abil. See tähendab, et rakenduses on rohkem sisu, kui on korraga ekraanil näha ja sisu sõrmega vasakule ja paremale libistades ilmub vaateid, mida algselt ekraanil täies mahus näha ei olnud, kuigi hea oleks kasutajale vihjata, et vasakul/paremal rohkem sisu on.

7


Joonis 5 - People Hub

People rakenduses (Joonis 5) näeme, kuidas esmalt näidatakse kontaktide nimekirja, paremal pool on aga osaliselt näha uus vaade. Vaated hakkavad sõrmega vasakule või paremale libistades ennast kordama, st „recent“ vaatesse jõudmiseks saab ka kaks korda sisu vasakule libistada ja kolmandat korda libistades jõuame kontaktide nimekirja tagasi. Tihtipeale kombineeritakse horisontaalne ja vertikaalne scrollimine. Näiteks People rakenduses on esimeses vaates nimekiri, mida saab vertikaalselt scrollida. Vertikaalselt scrollimist omavad tihtipeale nimekirjad, horisontaalse scrollimisega tuuakse sisse uusi vaateid.

5.2 Application Bar Application Bar on riba rakenduse alumises osas, kuhu koondatakse nupud (Joonis 6). Application Baril võib olla mitmeid avatud ja suletud olekuid. Sinna saab lisada nii ikoonidega nuppe kui tekste. Application Bari ülesehitus ja olemasolek rakenduses on arendaja otsustada, kuigi seda on soovitatav kasutada. Nii oskab kasutaja sealt vajalikke käsklusi automaatselt otsida.

8


Joonis 6 - Application Bar

5.3 Status Bar Status Bar ehk olekuriba on riba ekraani ülemises osas, kuhu koondatakse kõik telefoniga seotud informatsioon ikoonide näol (Joonis 7).

Seal on informatsioon levi kohta (1), kasutatava andmeside tüüp (2), kõneedastus (3), roaming (4), Wi-Fi ühendus (5), Bluetooth (6), telefoni profiil (7), kasutatav keel (8), aku kestvus (9) ja kellaaeg (10).

9


Olekuriba saab iga arendaja enda rakenduses sisse/välja lülitada. Start-vaates saab olekuriba esile tuua, libistades selleks näpuga ekraani ülaservast alla. Olekuriba näeb ka lukustusekraanil. Ikoone näidatakse vastavalt vajadusele, seega korraga on näha vaid valikut ikoone.

6 Kokkuvõtteks Windows Phone omab telefoni kasutamisele üsna uudset lähenemist. Boonusena on see üks lihtsamaid süsteeme, mida esimese nutitelefonina kasutada. Lisaks tagab Metro disainikeele järgimine, et uute Windows Phone rakenduste kasutama õppimine läheb sujuvamalt. Need näevad tuttavad välja ja on sarnased kasutada. Metro disainikeelt uurime järgnevates osades.

10


AGU SUUR

DISAINIKEEL METRO


Sisukord 1 Sissejuhatus ..................................................................................................................... 3 2 Mis on disainikeel? ........................................................................................................ 3 3 Milleks disainikeel? ....................................................................................................... 5 4 Kus me Metro disainikeelt leiame? ......................................................................... 5 5 Metro inspiratsioon ...................................................................................................... 9 5.1 Bauhaus..................................................................................................................... 9 5.2 Ĺ veitsi disain ..........................................................................................................10 5.3 Kineetiline disain ..................................................................................................10 6 Metro printsiibid ..........................................................................................................11 6.1 Joondus, tasakaal ja struktuur ........................................................................11 6.2 Kiirus ja liikuvus ....................................................................................................12 6.3 Digitaalsus ..............................................................................................................12 6.4 Fookus .....................................................................................................................14 6.5 Ăœhtsus ja tuttavlikkus .........................................................................................14 7 KokkuvĂľtteks.................................................................................................................15

2


1 Sissejuhatus Metro on Microsofti disainikeel, millel põhinevad kõik Windows Phone 7 rakendused. Selle disainikeele edukust illustreerib fakt, et teiste mobiilsete operatsioonisüsteemide (nagu Android) kasutajaliidesed on Metro stiilist viimasel ajal laenama hakanud. Enne, kui saame asuda oma Windows Phone 7 rakenduse loomise juurde, peame endale selgeks tegema, mis Metro on.

2 Mis on disainikeel? Disainikeel on kogumik reegleid, juhiseid ja kirjeldusi, mida järgides jõuame äratuntava tulemuseni. See võib defineerida värve, materjale, kujundeid, mustreid ja palju muud. Oma disainikeelt kasutavad pea kõik suuremad brändid, millega igapäevaselt kokku puutume. Järgnevalt mõned näited. Disainikeelt leiame autotööstusest. BMW autodel on kõigil väga tuttav esivõre. Ka kere ise järgib kindlaid reegleid, mis panevad auto välja nägema kui BMW. Kuna kõik BMW autod järgivad sama disainikeelt, ei ole ühe tänavapildis ära tundmine probleemiks. (Joonis 1)

Joonis 1 – BMW

3


Disainikeel on ka Apple arvutitel ja teistel toodetel. Hõbedane metall, läikiv must klaas, täpselt õige kumerusega nurgad – need on vaid mõned omadused, mis Apple tooteid iseloomustavad (Joonis 2). Kui disainikeel puuduks, ei naudiks Apple kaugeltki nii suurt edu, sest ühiste joonte puudumine erinevates toodetes tekitaks tarbijates segadust.

Joonis 2 – Apple MacBook Pro

Metro on Microsofti uus disainikeel. See ei ole mitte esimene. Windows 7 näiteks omab Aero stiili. Aero iseloomustavaks läbivaks jooneks on mati klaasi imiteerimine, mis taustal udusena läbi paista laseb. (Joonis 3)

Joonis 3 – Windows 7

4


3 Milleks disainikeel? Disainikeel muudab disainerite töö lihtsamaks. Jalgratta uuesti leiutamise asemel on olemas juhised, mida järgides jõuame üsna lihtsa vaevaga äratuntava ja meeldiva tulemuseni. Metro disainikeele eesmärgid on: a) Teha rakenduste kujundamine lihtsaks ja kiireks b) Muuta rakendused välimuselt sarnaseks ja äratuntavaks Esimene punkt tähendab seda, et Metro stiilis rakenduste loomiseks ei pea olema disainer, kuigi disainikeele reeglite järgimiseks tuleb kindlasti kasuks neid tunda. Juba kogenenud disaineritele samas säästab see aega, sest on olemas tugev alus, millele toetuda. Disaineril jääb üle küsida „Mida võiks teha?“, sest „Kuidas seda teha?“ on juba defineeritud. Teine punkt välimuselt sarnasuse kohta võib tunduda negatiivsena, aga see pole seda. Kasutajale ei meeldi iga rakendusega selle kasutamist uuesti õppida. Kui kõik rakendused järgivad samu kasutajaliidese reegleid ja juhiseid, muutub uue rakenduse õppimisprotsess oluliselt lühemaks. Autodega analoogi tuues; kui iga autotootja kasutaks auto juhtimiseks enda süsteemi, siis tekitaks see kasutajas väga palju segadust ja lõppkokkuvõttes kaotaksid kõik. Hetkel populaarseimad mobiilsed operatsioonisüsteemid (Android, iOS, Windows Phone) on kasutajaliidese poolest küll kahjuks väga erinevad, aga Metro üritab vähemalt Windows Phone siseselt probleemi parandada ja luua kõigi rakenduste vahel samasugust kasutajakogemust.

4 Kus me Metro disainikeelt leiame? Kuigi M-Stuudiumi kontekstis räägime me Windows Phone 7st, pole see kaugeltki ainuke koht, kus Microsoft Metro disainikeelt kasutab. Heidame pilgu erinevatele toodetele, mis seda kasutanud on või kasutama hakkavad. Metro sai alguse juba Windows Media Centeris (Joonis 4). Tol hetkel seda küll selle nimega ei kutsutud ja Metro, nagu me seda täna teame, näeb välja teistsugune, kuid selle juured ulatuvad tagasi Media Centeri aegadesse.

5


Joonis 4 – Windows Media Center

Järgmine suurem hüpe Metro suunas toimus Microsofti kaasaskantava Zune meediamängijaga (Joonis 5). Selle unikaalne kasutajaliides võeti soojalt vastu, kuigi seade ise populaarseks ei saanud. Zune sai aluseks Windows Phone 7 (Joonis 6) kasutajaliidese loomisel, mille puhul võeti väljend „Metro“ ametlikult kasutusse. Hiljem sai endale Metro välimuse Xbox 360 (Joonis 7), sügisel saabub Windows 8 (Joonis 8) ning üldises mõttes on Metro disainikeel midagi, mida Microsoft oma toodetes järjest enam kasutusele võtab. Metro disainikeele põhimõtted kehtivad samamoodi platvormist sõltumata. Kuigi hetkel on fookuses Windows Phone 7, järgivad näiteks Windows 8 Metro rakendused samasuguseid reegleid.

6


Joonis 5 – Zune

Joonis 6 – Windows Phone 7

7


Joonis 7 – Xbox 360

Joonis 8 – Windows 8

8


5 Metro inspiratsioon Metro disainikeele loomisel disainisuunast. Nendeks olid:

võeti

inspiratsiooni

kolmest

suuremast

a) Bauhausi kunstikool & minimalistlik disain b) Šveitsi disain c) Kineetiline disain

5.1 Bauhaus Bauhaus on kunstikool Saksamaal, mis tegutses aastatel 1919 – 1933. Bauhausis õpetati erinevaid visuaalseid kunste, kuigi ühendavaks jõuks oli arhitektuur. Nad järgisid põhimõtet, et esemete vorm peab tulema nende ülesannetest e. funktsioonist. Seda tuntakse ka kui funktsionalismina, mille keskuseks Bauhaus oli. Funktsionalism väldib kaunistusi, eemaldab üleliigse ja toob sellega välja eseme tuuma. Iga disainivalik peaks kaasa aitama ülesannete täitmisele, tänasel päeval tunneme seda ka kui minimalismina (Joonis 9). Metro disainikeeles tähendab see seda, et üleliigset ei ole ja sisu, mida me näidata tahame, ongi kasutajaliideseks.

Joonis 9 - Minimalistlik disain

9


5.2 Šveitsi disain Šveitsi disain ehk rahvusvaheline tüpograafiline stiil kasvas Bauhausi funktsionalismist välja. Seda leiame igapäevaselt lennu- ja bussijaamadest – kõikjalt, kus on vaja edasi anda olulist informatsiooni, seda võimalikult efektiivselt. Šveitsi disain kasutab kontrastset teksti ja ikoone, pöörab rõhku korralikule joondusele ja seab eesmärgiks loetavuse (Joonis 10). Metro pöörab tüpograafiale ja heale kontrastile väga suurt rõhku ja suuremjaolt koosnevadki Metro rakendused tekstist.

Joonis 10 – Šveitsi disain

5.3 Kineetiline disain Kineetiline disain leiab kasutust filmides ja televisioonis (näiteks algus- ja lõputiitrid). Selle eesmärk on tekitada illusioon liikumisest. Metro disainikeeles leiab kineetiline disain kasutust, et tuua kasutajaliides ellu. Seda võib näha läbi Windows Phone 7 seadme kasutajaliidese navigeerudes. Kõik liikuv on kineetiline disain ja animatsioonide läbi mõtlemine on osa Metro rakenduse disainimisest.

10


6 Metro printsiibid Metro disainikeel põhineb viiel printsiibil või põhimõttel. Need printsiibid defineerivad Metro olemuse ning need ei piira, vaid pigem juhendavad meid.

6.1 Joondus, tasakaal ja struktuur

Joonis 11

Korralik joondus ja struktuur on Windows Phone 7 rakenduste juures väga oluline. See jätab mulje korrapärasusest. Joonisel 11 näeme, kuidas kõik read on vasakust äärest täpselt sama kaugel (pildil märgitud helesinise joonega). Joondada võib ka paremale poole ja keskele, kuigi eelistatud on vasakpoolne joondus.

11


Joonisel näeme lisaks, et kogu sisu on struktureeritud, kasutades selleks fondisuurust ja -värvi. Lehe pealkirjad (system/application) on kõige suuremad, hetkel aktiivne pealkiri on heledam ja esiletoodud. Alampealkirjad (theme/date+time/keyboard/region+language) on natuke väiksemad, kirjeldused nende all veel väiksemad ja mitte nii heledad. Kokkukuuluvad tekstid, nagu alampealkiri ja kirjeldus, on grupeeritud (üksteisele lähedal) ja nende gruppide ümber on piisavalt vaba ruumi (grupid on üksteisest kaugemal). Sellest ja eelnevast piisab, et luua rakenduses loogiline struktuur/ hierarhia.

6.2 Kiirus ja liikuvus Metro rakendused on alati liikumises ja jätavad mulje sujuvusest. Erinevate lehtede vahel navigeerides liiguvad need sisse ja välja; pikemaajalist toimingut teostades ilmub animeeritud progressiriba ja igale puutele reageerib kasutajaliides koheselt, viivitamata. Kuigi liikuvus võib rakenduse disaini joonistades meelest ära minna, tuleks sellele siiski mõelda. Liikumine ja kiire reageerimine toovad rakenduse ellu.

6.3 Digitaalsus Metro disainikeel ei ürita olla midagi muud, kui digitaalne. Paljud kasutajaliidesed üritavad imiteerida reaalsust, kasutades selleks varje ja peegeldusi, imitatsioone nahast, klaasist, metallist jne, luues mulje kolmemõõtmelisest keskkonnast, mis oleks „nagu päris“. Üheks selliseks liideseks on näiteks iPhone (Joonis 12). Metro keskendub digitaalsele, mitte ei imiteeri päriselu. Just sellepärast näeb Metro väga teistsugune välja, kui teised platvormid, mis seda teevad. Lisaks välimusele ütleb digitaalsuse printsiip, et keskenduda tuleks eelistele, mis on digitaalsel kasutajaliidesel staatilise ees. Staatiliseks kasutajaliideseks võib pidada näiteks ajalehte. Eelisteks staatilise ees võib olla ühendumine internetiga, hoides sisu dünaamilisena. Näidata on võimalik väga ajakohast ja muutuvat informatsiooni ja seetõttu on näiteks ilmarakendus telefonis oluliselt parem, kui staatiline prognoos ajaleheveerul.

12


Joonis 12 – Apple iPhone

13


6.4 Fookus Metro rakendused on fokuseeritud ühele kindlale ülesandele. Keskendu millelegi spetsiifilisele ja ürita seda teha hästi, selle asemel, et katta võimalikult palju aga teha seda keskmiselt. Mobiilsed seadmed väiksema ekraani ja – arvutusvõimsusega ei suuda teha sama, mis nende laua- ja sülearvutist kaaslased. Rakendust luues keskendu sellele, mida võib kasutajal vaja minna siis, kui ta on liikumises ja arvutist eemal.

6.5 Ühtsus ja tuttavlikkus Metro disainikeel soovitab kasutada samu kasutajaliidese elemente, mis teised rakendused. Sarnase välimusega nupud ja pealkirjad sarnastes kohtades muudab uute rakenduste tundmaõppimise oluliselt lihtsamaks. Üheks selliseks näiteks on Application Bar. Application Bar on sisseehitatud kontroll, mis asub rakenduse allosas ja kuhu paigutatakse nupud. (Joonis 13)

Joonis 13 - Application Bar

Kuna see on kõikides rakendustes kasutusel, oskab kasutaja sinna automaatselt vaadata. Kuna see on sisseehitatud kontroll, on selle oma rakenduses kasutusele võtmine väga lihtne. Selliseid omadusi - olla lihtne arendajal kasutusele võtta ja lihtne kasutajale mõista - omavad paljud teised kontrollid, ja nende oma rakenduses kasutuselevõtt on sügavalt soovituslik. Arendajale ja disainerile on see kui legoklotsidest kasutajaliidese kokkuladumine ja kasutajale ei ole uued rakendused enam hirmutavad, sest need näevad välja ja käituvad samamoodi, nagu teised Metro disainikeelt järgivad rakendused.

14


7 Kokkuvõtteks Metro disainikeelel on kindlad kohad inspiratsiooniks ja valik printsiipe. Neid tasub teada ja meeles pidada, sest disainikeelt mittejärgivad rakendused paistavad negatiivselt välja. Alati on võimalik minna sügavamale ja õppida lähemalt tundma funktsionalismi ja Šveitsi stiili – nendest on kirjutatud pikalt ja palju ning nende tundmine peegeldub positiivselt rakenduse disainis. Olulisemgi aga on disaini vastu huvi tunda ja mitte jätta seda järelmõtteks – ajaks, kui ülejäänud rakendus valmis on. Rakenduse loomine algab disainist ja loodetavasti on sellest ülevaatest disaini tähtsusest arusaamiseks kasu.

15


AGU SUUR

PARIMAD METRO STIILIS RAKENDUSED


Sisukord

1

Sissejuhatus .................................................................................................................. 3

2

Rakenduste telefoni paigaldamine ....................................................................... 3

3

Rakendused .................................................................................................................. 4

4

3.1

TuneIn Radio ...................................................................................................... 4

3.2

Cocktail Flow ...................................................................................................... 5

3.3

SkyDrive ............................................................................................................... 6

3.4

Epicurious ............................................................................................................ 7

3.5

foursquare ........................................................................................................... 8

3.6

Weather Flow ..................................................................................................... 9

3.7

Evernote .............................................................................................................10

3.8

Flickr ....................................................................................................................11

3.9

6 Week Training ..............................................................................................12

3.10

Foodspotting....................................................................................................13

Kokkuv천tteks ..............................................................................................................14

2


1 Sissejuhatus Metro rakendused näevad sarnased välja - nad omavad ühist disainikeelt. See aga ei tähenda, et rakendustel poleks võimalust välja paista. Järgnevalt uurime valikut parimatest Windows Phone 7 rakendustest, mis näevad tõsiselt head välja ning mida on lõbus kasutada.

2 Rakenduste telefoni paigaldamine Igal rakendusel on kaasas Marketplace’i link, mille kaudu saab selle endale telefoni laadida. Avada saab ka Marketplace telefonis ja otsida nime järgi. Kõik välja toodud rakendused ei ole veel Eesti Marketplace’s saadaval, nende jaoks on välja toodud UK Marketplace link.

3


3 Rakendused 3.1 TuneIn Radio http://www.windowsphone.com/et-EE/apps/7f7e3f68-ba3a-e011-854c00237de2db9e

4


3.2 Cocktail Flow http://www.windowsphone.com/et-EE/apps/ddd1ad08-d9d5-df11-a84400237de2db9e

5


3.3 SkyDrive http://www.windowsphone.com/et-EE/apps/ad543082-80ec-45bb-aa02ffe7f4182ba8

6


3.4 Epicurious http://www.windowsphone.com/en-GB/apps/43431206-d6a0-e011-986b78e7d1fa76f8 (UK)

7


3.5 foursquare http://www.windowsphone.com/et-EE/apps/26cf3302-469f-e011-986b78e7d1fa76f8

8


3.6 Weather Flow http://www.windowsphone.com/et-EE/apps/ae13c46a-eed5-4c1a-8873160c1635bbfa

9


3.7 Evernote http://www.windowsphone.com/et-EE/apps/db21927d-f292-e011-986b78e7d1fa76f8

10


3.8 Flickr http://www.windowsphone.com/en-gb/apps/2e49fb07-592b-e011-854c00237de2db9e (UK)

11


3.9 6 Week Training http://www.windowsphone.com/et-EE/apps/361aeae0-4a82-e011-986b78e7d1fa76f8

12


3.10 Foodspotting http://www.windowsphone.com/et-EE/apps/55b55f3e-649b-e011-986b78e7d1fa76f8

13


4 Kokkuvõtteks Metro disainikeel soovitab kasutada ühtset stiili, see teeb rakendused äratuntavaks. Nägime aga, et ühtne stiil ei tähenda tingimata igavat kasutajaliidest. Disaineril on Metro reeglites piisavalt liikumisruumi, et luua midagi, mis teiste Windows Phone 7 rakenduste seast välja paistab.

14


KERSTI LAIDVEE

DISAINI LOOMINE EXPRESSION DESIGN BAASIL


Sisukord 1

Sissejuhatus ...................................................................................................................... 4

2

Graafika põhimõisted ................................................................................................... 5

3

2.1

Vektor- ja rastergraafika .................................................................................. 5

2.2

Resolutsioon – (Resolution) ............................................................................ 5

2.3

Värvisüsteemid – (RGB, CMYK) ..................................................................... 6

2.4

Pildiformaadid - JPEG, GIF, PNG ................................................................. 7

Expression Design’i programmi tutvustus ........................................................... 8 3.1

Expression Design töökeskkond .................................................................. 8 3.1.1 Tegevuste tagasivõtmine ..................................................................... 11 3.1.2 Tööpinna jaotus abivõrgustiku ja abijoontega (Grid, Guides)11

3.2

Töö failidega....................................................................................................... 11 3.2.1 Uue töö loomine ...................................................................................... 11 3.2.2 Töö avamine ja teistes programmides loodu sissetoomine .. 12 3.2.3 Töö salvestamine ..................................................................................... 12 3.2.4 Töö eksportimine ..................................................................................... 13

3.3

Tähtsamad toimingud objektidega........................................................... 15 3.3.1 Objektide selekteerimine...................................................................... 15 3.3.2 Objekti kuju muutmine ......................................................................... 15 3.3.3 Objekti suuruse muutmine numbriliselt ......................................... 15 3.3.4 Objektide värvimine ............................................................................... 16 3.3.5 Objektide joondamine ........................................................................... 17 3.3.6 Objektide järjestamine .......................................................................... 17 3.3.7 Grupi moodustamine ............................................................................. 17

2


3.3.8 Objektide ühendamine, lõikamine ja tükeldamine: ................... 18 3.4

Sule (Pen) tööriista kasutamine .................................................................. 19

3.5

Efektide lisamine Live Effects ....................................................................... 20

3.6

Töö piltidega ...................................................................................................... 22 3.6.1 Pildi suurendamine/vähendamine .................................................... 22 3.6.2 Pildi lõikamine ........................................................................................... 22 3.6.3 Pilditöötlus ................................................................................................. 22 3.6.4 Pildi vektoriseerimine ............................................................................. 22

4

3

3.7

Kujunduse tükeldamine osadeks (Slice) .................................................. 23

3.8

Kihtide kasutamine (Layers) ......................................................................... 24

Mobiilirakenduses vajaminevate kujundusobjektide ja ikoonide loomine25 4.1

Ikoonide mõõdud ............................................................................................ 26

4.2

Ikoonide loomine ............................................................................................. 27

4.3

Loading ekraani kujundamine..................................................................... 31

4.4

Rakenduse avalehe ja sisulehtede kujundamine ................................. 32


1 Sissejuhatus Käesolev materjal tutvustab disainimaailmas võrdlemisi vähe tuntud vektorgraafika programmi Expression Design’i, mis kuulub Microsoft Expression Studio paketti. Antud programm on lihtne ja kasutajasõbralik ning võimaldab ilma suuri oskusi omamata luua vajaminevaid kujundusosi mobiilirakenduste jaoks. Materjal on jagatud parema jälgitavuse mõttes kolme ossa: Esimeses osas on üldharival eesmärgil ära toodud graafikaalased põhimõisted nagu, vektor-ja rastergraafika, resolutsioon, pildiformaadid ning värvisüsteemid (CMYK, RGB). Teises osas on antud ülevaade programmi võimalustest ja tutvustatud põhioskusi, mis on vajalikud tööks objektidega. Näiteks: kuidas objekte värvida, joondada, grupeerida, ühendada, jne. Samuti on ära toodud ka kõige olulisema vektorgraafika tööriista Pen Tool’i kasutamisõpetus, mida toetab ka väike videoõpe. Tutvustatud on ka väheseid pilditöötlusvõimalusi ja töö organiseerimist kihtidena. Kolmandas osa on tutvustatud samm-samm haaval mobiilirakenduse ikoonid loomist ning põgusalt käsitletud loading page ja sisulehtede kujundamist.

4


2 Graafika põhimõisted 2.1

Vektor- ja rastergraafika Vektorgraafika (Vector graphic) – graafikavorming, mis kasutab ekraanil kujutise esitamiseks matemaatilisi arvutusi. Pilt moodustub erisuguste joonte hulgast, kurvidest, millest saab luua objekte ja neid on võimalik igaüht eraldi suurema vaevata ümber kujundada, deformeerida, eemaldada – kaotamata kvaliteeti. N: Vektorformaadid: ai, eps, cdr Rastergraafika – (Raster). Pikslite reast või värvipunktidest moodustunud kujutis arvutiekraanil või trükitud pinnal. Vastand vektorgraafikale. Pildi suuruse muutmisel kahaneb pildi kvaliteet oluliselt, kuna toimub interpoleerimise nimeline protsess, mille käigus arvutatakse kujutise suurendamisel tekkivate lisapikslite väärtus naaberpikslite alusel.

N: Pildiformaadid: JPEG, GIF, PNG, PSD, TIFF, PDF

2.2 Resolutsioon – (Resolution) See on pildi detailide eristatavuse aste, mida võib mõõta näiteks ekraanil olevate pikslite arvuga tolli kohta (ppi) või rastripunktide arvuga tolli kohta (dpi) prinditud pildil. Mida suurem on resolutsioon, seda kvaliteetsem on pilt, samas suureneb resolutsiooni tõustes ka pildifaili suurus. 5


2.3 Värvisüsteemid – (RGB, CMYK) Monitorid ja trükitehnoloogia kasutavad värvide genereerimiseks täiesti erinevaid värvimudeleid. Eksisteerib kaks värvisüsteemi: RGB, mida kasutatakse ekraanil kujutiste kuvamiseks, ja CMYK, mida kasutatakse kujunduse trükkimiseks trükimasinates. RGB – aditiivne värvisüsteem

Lühend RGB moodustub sõnadest: Red – punane, Green – roheline ja Blue – sinine. RGB värvisüsteemis segatakse värvilist valgust – seega, mida enam energiat sisaldab valgusvoog, seda heledamaks muutub kujutis. Seetõttu nimetatakse seda süsteemi aditiivseks värvisüsteemiks. N: Punase, rohelise ja sinise liitmisel maksimumkoguses (255, 255, 255) saadakse valge. Iga värvi esitamiseks on antud (kuni) 8 bitti (24 ja 32bitise värvisügavuse korral) ja vastavalt värvile kas 5 bitti (punane ja sinine) või 6 bitti (roheline) 16 bitise värvisügavuse korral). Maksimum värvide arv 256.

CMYK– subtraktiivne värvisüsteem

Lühend CMYK sõnadest:

moodustub

Cyan – rohesinine, Magenta – fuksiinpunane, Yellow – kollane ja Key – võtmevärv must. See värvisüsteem on subtraktiivne – mida enam värvainet kasutatakse, seda tumedamaks muutub kujutis. N: Värvide eemaldamisel saavutatakse valge värv (eeldusel, et paber millele trükitakse on valge).

6


2.4 Pildiformaadid - JPEG, GIF, PNG JPEG - (Joint Photographers Experts Group) Optimeeritud formaat, mis sobib hästi Internetis esitavate täisvärvide-ja halltoonidega piltide puhul. JPEG formaat on populaarne tänu kujutise suhteliselt heale kvaliteedile, kuid samas väikesele failisuurusele. Tuleb teada, et JPEG kasutab kadudega tihendamismeetodit ning seepärast peab arvestama algse info jäädava kadumisega. Salvestamisel on kasutajal võimalik ise valida pildi suurust ja kvaliteeti. Kui JPEG-vormingus pilt vajab töötlust, tuleks see esmalt ringi salvestada, kas TIFF-või PSD vormingusse. Hiljem viia tagasi JPEG kujule. Puudused: teravate piirjoontega graafika (näiteks rasteriseeritud teksti ja ühevärviliste logode) servad muutuvad hägusateks. GIF - (Graphics Interchange Format)

*.Jpeg

*.Gif

Optimeeritud formaat, mis sobib hästi ühtlase värviga graafika (logod, mustvalged pildid) ja lihtsate animeeringute jaoks. Keerukamate animatsioonide jaoks tuleks kasutada Adobe Flash’i. GIF-formaat kasutab kadudeta LZW kompresseerimismeetodit, kuid on piiratud 256 värvist koosneva paletiga. GIF-piltide mahtu saab vähendada ka väiksema kasutatavate värvide hulga abil. Lisaks värvidele võib salvestataval pildil olla 100 % läbipaistvaid piirkordi. Vaata allolevat joonist. PNG – (Portable Network Graphics) Sobib hästi multifunktsionaalse (udustatud servadega fotodele, pehmete piirjoontega graafikale) ja läbipaistvusega graafika kuvamiseks uuemate brauseritega. PNG salvestamisel kasutatakse kadudeta pakkimismeetodit, toetab 24-ja 48-bitilist värvisügavust ja väga kõrget pildikvaliteeti. Faili suurus on seetõttu küllalt suur (umbes 60% originaalist). Samas JPEG võimaldab sarnase nähtava pildikvaliteedi juures tunduvalt väiksemat failimahtu (umbes 10-25% originaalist).

7


3 Expression Design’i programmi tutvustus 3.1 Expression Design töökeskkond Programmi avamiseks valida Start/Programs/Microsoft Expression/Microsoft Expression Design 4. Expression Design töölaud (vt Joonis 1) Terve programmi seadistamise valikud asuvad Edit/Options. Käepäraselt sätitud töökeskkonda saab salvestada menüüst korraldusega Window/Save as New Worskpace… ning taastada Window/ Worskpaces/Default.

Joonis 1 - Expression Design töölaud

1. Menüüriba File menüüst leiab valikuid uue töö loomiseks, tehtud töö avamiseks, salvestamiseks. Loodud töö välja viimiseks Export ja teistest kujundusprogrammides loodu sissetoomiseks Import. Edit menüü valikuga Options, saab programmi seadistada. Window menüü kaudu kuvatakse või peidetakse ekraanil olevaid tööriistu, palette ja tegevuste riba (Action Bar).

8


2. Tööriistad Tööriistariba (Toolbox) on kõige olulisem riba, kust saab valida omale vajalikke tööriistu objektide loomiseks, selekteerimiseks, muutmiseks, pööramiseks, töös ringiliikumiseks ja paljuks muuks. Osadel tööriistade on all peidus lisavalikud, mis avanevad kui hoida all hiire vasakut klahvi. Ülevaade tähtsamatest tööriistadest: Selection tool group

Selection - Selekteerija. Kasutada ühe või mitme objekti märgistamiseks.

Direct Selection tool group

Direct Selection – Kasutada objekti ankurpunktidega.

Paintbrush tool

Paintbrush – pintsel. Kasutada vabakäe

tööks

joonistusteks Pen tool group

Pen tool group – Sule töövahendite grupp. Kasutada täpsemate joonistuste loomisel ja loodud kujundite muutmisel.

Rectangle tool group

Rectangle tool group - kasutada baasobjektide nagu: ringi, ruudu, hulknurga ja joonte joonistamiseks.  Koos Shift klahviga lohistades on x- ja y-suunas suurus sama, st ellipsist saab ring ja ristkülikust ruut.

Text tool

Text – tekst. Kasutada teksti kirjutamisel ja teksti märgistamisel

Slice tool group

Slice – tükeldaja. Kasutada kujundusest tükkide eksportimiseks teistesse programmidesse

9


Fill tool group

Gradient Transform – kasutada ülemiku suuna muutmiseks.

Scissor tool group

Scissor – käärid. Kasutada joone või objekti tükeldamiseks

Color Dropper tool group

Color Dropper – omaduste ülekandja.

Pan tool

Pan – käsi. Kasutada ekraanil oleva töö liigutamiseks.

Zoom tool

Zoom – suurendusluup. Kasutada töö teatud kohtade ette toomiseks ehk suurendamiseks ja taha viimiseks ehk vähendamiseks. (Suurendusluupi saab kasutada ka vajalikul alal hiirega üle lohistades). Vähendamiseks tuleb hoida all klahvi Alt.

s p a c Töö paigutamine parajaks (Fit in e Window) – Ctrl+0100% suurendus (Actual Size) – Ctrl+1 b a r Ctrl+Alt Ctrl+ +spaceb spac ar klahvikombi Tööd ebar kiirendavad natsioonid, mida saab kasutada ka teistes kujundusprogrammides nagu Adobe Illustrator, PhotoShop, InDesign.

10


3. ja 4. Omaduste riba (Property Bar) ja paletid on hästi vajalikud. Nimelt palettidel olevad valikud muutuvad sõltuvalt sellest, mis tööriista parajasti kasutatakse. Näiteks, kui joonistada ring, leiab Appearance paletilt värvi- ja efektide peale kandmise valikuid. Kui kirjutada tekst, lisandub automaatselt Text palett, millelt saab valida kirja kujundamiseks vajalikke parameetreid. 4. Tööleht (Drawing Page). Joonistada saab tervele tööalale, aga prinditakse välja ainult see, mis on töölehel. 3.1.1 Tegevuste tagasivõtmine Expression Design nagu iga teinegi arvutiprogramm võimaldab tegevusi tagasi võtta e tühistada. Selleks tuleb valida Edit/Undo või Ctrl+Z. Vaikimisi on tagasivõtmise sammude arv 40. Muutmiseks valida Edit/Options/Memory and Undo. 3.1.2 Tööpinna jaotus abivõrgustiku ja abijoontega (Grid, Guides) Kujunduse loomisel on suureks abiks abivõrgustik ja abijooned, mis aitavad organiseerida kujundusala ning hõlbustavad ka loodavate objektide joondamist. Abivõrgustiku ja abijoonte nähtavale toomiseks valida View/Show/Grid or Guides. Abivõrgustiku tiheduse sättimiseks valida Edit/Options/Units and Grids. Abijooni saab ekraanile tõmmata joonlaualt hiirega tirides. Loodud abijooned on vaikimisi lukustatud ja nende liigutamiseks võtta appi klaviatuurilt klahv Alt. Eemaldamiseks on vaja abijoon eelnevalt märgistada koos Alt klahvi all hoides ning seejärel kasutada klaviatuurilt klahvi Delete.

3.2 Töö failidega 3.2.1 Uue töö loomine Uue töö loomiseks valida menüüst File/New või CTRL+N. (vt Joonis 2).

Joonis 2 - Uue töö loomine

11


Avanevas New Document dialoogiaknas määrata loodava töö suurus ja resolutsioon. Hilisemate probleemide ära hoidmiseks kasutada alati resolutsiooniks 96 pix/inch kohta. ! Töö suuruse muutmiseks valida File/Document Size. 3.2.2 Töö avamine ja teistes programmides loodu sissetoomine Programm suudab peale enda (Expression Design Files) failitüüpi avada ja sisse tuua e importida ka järgnevaid formaate nagu:  PhotoShop (*psd) – PhotoShop 7 ja varasemad versioonid  Illustrator Document (*.ai)  GIF Decoder (*.gif)  PNG Decoder (*.png)  BMP Decoder (*.bmp, *.dib, *.rle)  JPEG Decoder (*.jpeg, *.jpe, *.jfif, *.exif)  WMPhoto Decoder (*.wdp, *.hdp)  TIFF Decoder (*.tiff, *.tif)  ICo Decoder (*.ico, *.icon)  Windows metafile (*.emf, *wmf) Samuti on võimalik Office’i programmides looduid skeeme, graafikuid ning muid jooniseid Design programmi üle tuua ka korraldusega Copy/Paste, mis üllatuslikult on ka töödeldavad. objektid/skeemid ka Design programmis muudetavad! Loodud tööde avamiseks valida menüüst File/Open või CTRL+O. Avatud töösse kujunduse sissetoomiseks valida File/Import Image…, File/Import Adobe PhotoShop File…, File/Import Illustrator File…File/Import Windows Metafile… 3.2.3 Töö salvestamine Töö salvestamiseks valida menüüst File/Save. Salvestatud tööst koopia loomiseks valida File/Save as Copy.

12


3.2.4 Töö eksportimine Töö väljaviimiseks on kolm võimalust, kas pildina (bitmap) (PNG, JPEG, GIF, TIFF, BMP, PSD), töödeldaval kujul XAML-ina või PDF kujul. Töö eksportimiseks valida File/Export või CTRL+E (vt Joonis 3). Esmalt mõelda, kas on vaja eksportida kogu dokument (Whole document), ainult selekteeritud objektid (Selected objects) või tükeldatud osad (Slices). Kogu dokumendi puhul võib valida kohe File/Export. Selekteeritud objektid nõuavad eelnevalt objekti/de märgistamist. Tükeldatud osade valik nõuab tükelduste Slice-ide olemasolu (vt Kujunduse tükeldamine osadeks (Slice) lk 23). Seejärel valida sobiv vorming, faili nimi (File Name) ja salvestamise asukoht (Location).

Joonis 3 - Töö eksportimine

Interlaced - veebilehitseja näitab algselt pilti kehva kvaliteediga ja seejärel muutub pilt järjest selgemaks. (Märkimata jättes pilt kuvatakse ekraanile ülevalt alla järkhaaval).

13


Joonis 4 - Töö eksportimine XAML kujule

! Tükeldustega valik võimaldab eksportida ka HTML kujul.

14


3.3 Tähtsamad toimingud objektidega 3.3.1 Objektide selekteerimine Selekteerimiseks valida selekteerimise tööriist ja täidetud objekti puhul klõpsata kujundi sees. Täitmata objekti puhul äärejoonel. Samuti võib selekteerida ka kujundist või mitmest kujundist hiirega üle lohistades. ! Selekteeringu eemaldamiseks selekteeritud kujundit.

klõpsata

väljaspool

Mitme kujundi märgistamiseks hoida abiks klahvi Shift. 3.3.2 Objekti kuju muutmine Valida Direct Selection tool ja klõpsata kujundi ankurpunktil või joonel. Ankurpunkte on võimalik sulepea (Pen Tool) tööriistadega juurde lisada, eemaldada, muuta kumeraks või vastupidi.

3.3.3 Objekti suuruse muutmine numbriliselt Selekteerida objekt ja kasutada programmi all servas olevat Action riba (vt Joonis 5). Esmalt valida objekti muutmise punkt, mis jääb muutumatuks ja seejärel anda objekti laius W ja kõrgus H.

Joonis 5 - Tegevuste riba Action

15


3.3.4 Objektide värvimine Värvi võib lisada objektile, joonele, tekstile. Värvimiseks selekteerida kujund ja Appearance paletil esmalt märgistada kas objekti täite nupp Fill Button või joone nupp Stroke button ning seejärel valida sobiv värv (vt Joonis 6). 1. 2. 3. 4.

Täite nupp – Fill button Joone nupp – Stroke button Värvitu – None Värvide lisavalik – More Swatces button 5. Värvivalik – Color Picker 6. RGB värviliugurid – Color Sliders 7. Värvinapsaja – Color Dropper, mis suudab värvi napsata igalt poolt isegi väljastpoolt programmi. 8. Joonevalik – Stroke Gallery 9. Joone laius – Stroke Widht 10. Täidise läbipaistvus – Fill Opacity 11. Joone läbipaistvus – Stroke Opacity Joonis 6 - Objektide värvimine

Objektide värvimine üleminekuga Gradient Selleks märgistada soovitud kujund, või tekst ning Appearance paletil valida Täite nupp ning kõrvalolevast valikust klõpsata Gradient Color värviruudul.

Joonis 7 - Objektide värvimine üleminekuga

16


Üleminekuvärvide muutmiseks märgistada värvipotsik ja valida soovitud toon. Värvide lisamiseks klõpsata ülemineku real. Värvi eemaldamiseks lohistada hiirega värvipotsik Apperance platsist välja. Üleminekuvärvi suuna muutmiseks tuleb eraldi valida Transform Gradient tööriist. Lohistada objekti sees või väljaspool olles uus üleminekusuund. 3.3.5 Objektide joondamine Selekteerida objektid ja valida menüüst Arrange/Align. Lihtsam võimalus on kasutada tegevuste real (Action Bar) valikut Align (vt Joonis 8).

Joonis 8 - Objektide joondamine tegevuste realt Action Bar

3.3.6 Objektide järjestamine Uus objekt mida luuakse on teiste suhtes alati pealmine. Kui on soov pealolevat teiste kujundit taha järjestada, siis selleks tuleb kujund selekteerida ja valida menüüst Arrange/Order/Send to Back. Ette toomiseks Arrange/Order/Send To Front. Järjestamise korraldused leiab ka paremklahvi kiirmenüüst. 3.3.7 Grupi moodustamine Esmalt selekteerida objektid ja valida menüüst Arrange/Group või Ctrl+G. ! Grupi eemaldamiseks, märgistada grupp ja valida Arrange/Ungroup või Ctrl+Shift+G.

17


3.3.8 Objektide ühendamine, lõikamine ja tükeldamine: Objektide ühendamine - Unite

Selekteerida objektid ja Object/Path Operations/Unite.

valida

Toodud korraldused on dubleeritud ka Action real valikus Stack. Tagumise objekti kasutamine lõikajana – Front Minus Back

Selekteerida objektid ja valida Object/Path Operations/Front Minus Back.

Eesoleva objekti kasutamine lõikajana – Back Minus Front.

Selekteerida objektid ja valida Object/Path Operations/Back Minus Front.

Objektide ühisosast uue kujundi moodustamine - Intersect

Selekteerida objektid ja valida Object/Path Operations/Intersect.

Objektide tükeldamine - Divide

Selekteerida objektid ja valida Object/Path Operations/Divide.

18


3.4 Sule (Pen) tööriista kasutamine Sule töövahendite abil on mugav joonistada täpseid sirgeid ja keerukaid kurvilisi jooni, mida nimetatakse Path-ideks. Sule tööriista kasutamisoskus on üks vajalikumaid oskusi tööks vektorgraafikaga. Õnneks on selle tööriista vahendid ja kasutamine sarnane ka teistes programmides nagu Adobe Illustrator, PhotoShop, Flash, InDesign. Sule õpet toetab ka videoõpe, mille leiate aadressilt: http://toru.ee/view/722b93d438c6

Sirge joone loomiseks 1. valida Pen tööriist 2. klõpsata hiirega joone alguspunktis 3. vabastada hiireklahv 4. klõpsata hiirega joone lõpp-punktis 5. tegevuse lõpetamiseks valida must selekteeriv nool ja klõpsata valgel pinnal. ! Sirgjoone loomiseks hoida abiks klahvi Shift. Kurvilise joone loomiseks 1. valida Pen tööriist 2. hiirt allhoides tõmmata joone alguspunktist välja suuna handlid ja vabastada klahv 3. tulla uude kohta ja samuti (mitte klikkida) vaid hoida hiireklahvi all ja lohistada välja suunahandlid. 4. tegevuse lõpetamiseks valida must selekteeriv nool ja klõpsata valgel pinnal. Punktide lisamiseks 1. valida Add Anchor Point Pen tööriist ja tõksata joonel

19


Punktide eemaldamiseks 1. valida Delete Anchor Point tööriist ja klõpsata olemasoleval punktil

Joone töötlemine 1. esmalt märgistada kujund; 2. seejärel valida Direct Selection tööriist , millega saab joonel olevaid ankurpunkte liigutada. Samuti saab haarata ka kujundi joonest. Objektil olevate nurkade muutmine 1. esmalt märgistada kujund; 2. seejärel valida Pen tööriista valikust Convert Anchor Point

tööriist

Klikkides kurvilisel ankurpunktil, muudab õhuke nool selle teravnurgaks. Kui on soov vastupidi teravnurka muuta kumeraks, siis lohistada ankurpunktis hiirt all hoides välja kurvihändlid. ! Sama tööriistaga on mugav ka kurvisuunda reguleerida. Selleks märgistada kujundi ankurpunkt ja tekkivate kurvihändlite otsast lohistada soovitud kuju. NB! Convert Anchor Point tööriist tekib ka siis kui on valitud Pen tööriist ja klaviatuurilt hoida all klahvi Ctrl.

3.5 Efektide lisamine Live Effects Programm pakub rohkesti efekte nagu: udusust Gaussian Blur, varju lisamist Drop Shadow, ruumilisust Bevel, teravustamist Unsharp Mask, serva efekti Outer Glow. Samuti on valida efekte rastergraafika värvide korrigeerimiseks Color Balance, hele-tumeduse sättimiseks Brightness and Contrast jpm.

20


Efekti lisamiseks esmalt märgistada kujund, pilt või tekst ja Effects paletis klõpsata nuppu Add Effect.

Efekti on võimalik ka hiljem hõlpsalt muuta. Selleks märgistada Effects paletil soovitud efekt ja teha muudatused (Joonis 9).

Joonis 9 - Efektide parameetrid

Efekti eemaldamiseks märgistada efekt ja klõpsata prügikasti nupul Delete Effects.

21


3.6 Töö piltidega 3.6.1 Pildi suurendamine/vähendamine Kui võimalik tuleks rastergraafika suurendamist/vähendamist vältida! Vahetevahel on aga pildi suuruse muutmine siiski vajalik ja seda saab teha selekteerimise tööriistaga Selection Tool. Tööd piltidega toetab ka videoõpe, mille leiate aadressilt http://toru.ee/view/76458558e067/ 3.6.2 Pildi lõikamine Kahjuks pildi lõikamise tööriista Expression Design’is ei ole. Ühe võimalusena võib luua pildi peale eraldi soovitava suurusega väljalõikava kujundi. Seejärel kui nii pilt kui kujund oin märgistatud saab pildi paigutada ette joonistatudkasti sisse korraldusega Object/Clipping Path/Make with Top Path. 3.6.3 Pilditöötlus Pildi töötlemisel on määrava tähtsusega pildi algne kvaliteet. Oluline info pildi kohta on näha programmi allservas tegevuste real Action Bar, eeldusel, et pilt on märgistatud. Pilditöötluse korraldused leiab Effects paletist Add Effects nupu valikust. (vajalikumad korraldused Adjust Colors real). Esimese sammuna pannakse tavaliselt paika pildi hele-tumedus. Paljudele tuttav korraldus PhotoShopis on Levels. Expression Design programmis leiab selle aga Effects paletilt Adjust Colors/Brightness and Contrast alt. Teise sammuna kõrvaldatakse värvinihked Color Balance. Teinekord võib olla soov ka pilte udustada, selleks valida Add Effects/Gaussian Blur. Vastupidiselt teravustamiseks valida Add Effects/Unsharp Mask. 3.6.4 Pildi vektoriseerimine Tore võimalus on pildi vektoriseerimine, mida materjali kirjutaja kasutab küllaltki tihti. Pakutava võimaluse leiab kui märgistada pilt ja valida Object/Image/Auto Trace Image (vt Joonis 10).

22


Joonis 10 - Pildi vektoriseerimine

3.7 Kujunduse tükeldamine osadeks (Slice) Expression Design pakub väga lihtsat ja toredat tükeldamistöövahendit Slice.

Tükeldamist kasutakse loodud kujunduse vastavatesse osadesse jagamiseks. Kõiki osi e slice’e on võimalik salvestada erinevatesse failivormingutesse: XAML, PNG, GIF, TIFF, BMP, PSD, PDF. Tükeldamise õpet toetab ka videoõpe, mille leiate aadressilt: http://toru.ee/view/912ffa8a3905/ Tükelduse loomiseks üheks võimaluseks on valida Slice tööriist ja lohistada üle soovitud kujundusosa. Teine võimalus on selekteerida soovitud kujund või kujundid ning kasutada hiire parema klahvi kiirmenüüst korraldust Greate Slice from Selection. Valitud osa ilmub Edit Slice paletti (vt Joonis 11), kust saab valida failivormingut Format, värviruumi Color mode ja tüki sisu Slice content.

Joonis 11 - Edit Slice palett

23


Tükeldust saab eemaldada nagu tavakujundit e eelnevalt tuleb tüledatud osa märgistada Selection Tool – selekteerija töövahendiga ning seejärel kustuda klaviatuurilt klahviga Delete. Tükeldatud osade jaoks luuakse automaatselt ka uus kiht Slice Layer. Tükeldatud osi võib eksportida ükshaaval või korraga. (vt Töö eksportimine lk 13)

3.8 Kihtide kasutamine (Layers) Kihtide kasutamine lihtsustab tööde loomist ning võimaldab kujundustöid paremini organiseerida. Nende kasutamine võimaldab ka hõlpsalt kujundustöödes katsetada erinevaid disaini variante ning üksikuid detaile on võimalik redigeerida nii, et teised kogemata paigast ei liigu. Kihtide kasutamise õpet toetab ka videoõpe, mille leiate aadressilt: http://toru.ee/view/90983f6b6f36/ Kihtide paleti saab ekraanile menüüst Window/Layers. Igas töös on vaikimisi üks kiht nimetusega Layer 1. Uue kihi loomiseks kasutada kihi paleti all paremal olevat nuppu New Layer. Kihi eemaldamiseks esmalt märgistada kustutatav kiht (kustutatav kiht peab olema ka nähtav) ja seejärel klõpsata kihi paleti all paremal olevat prügikasti nuppu Delete Layer. Kihi ümber nimetamiseks teha topeltklõps nimel.

24


4 Mobiilirakenduses vajaminevate kujundusobjektide ja ikoonide loomine Eeltööd Kujunduste loomiseks on hea kasutada juba olemasolevaid Windows Phone rakenduste näidismalle, mis on koondatud AlPhotoshop_Templates_Assets folder.zip kausta ning saab endale alla laadida aadressilt: http://www.microsoft.com/design/toolbox/tutorials/windows-phone7/photoshop/. Alla laetud Photoshop_Templates_Assets/font kaust sisaldab ka Windows Phone rakendustes kasutatavat SegoeWP fondi perekonda. Sobivate värvide leidmisel on abiks veebikeskkond - www.kuler.adobe.com.

25


4.1 Ikoonide mõõdud Rakenduse ikoonidel on omad kindlad mõõdud ja need on ära toodud allolevas tabelis. Ikoonide näidisfaili (wp7_start_screen.psd) saab aadressilt: http://www.pixle.pl/.

App ikoonid

Mõõt

Faili

(pikslitest)

tüüp

Application Icon

62 x 62

PNG

Application Tile Image

173 x 173

PNG

Mõõt

Faili

(pikslitest)

tüüp

Device application icon for Windows Phone Marketplace catalog (small)

99 x 99

PNG

Device application icon for Windows Phone Marketplace catalog (large)

173 x 173

Desktop application icon for Windows Phone Marketplace catalog

200 x 200

Windows Phone Marketplace ikoonid Ikoon

PNG

26


4.2 Ikoonide loomine Töö lühikirjeldus: Loome ühe ikooni, mille tükeldame erinevatesse suurustesse (62*62, 173*173, 200*200, 99*99) ning lõpuks ekspordime kõik korraga PNG vormingusse.

Samm-sammuline õpetus Eeltööna: 1. avada Expression Design programm 2. seadistada Edit/Option/General kaardil Change Rectangle antialiasing valiku peale Smooth

3. võtta alla puhas töö File/New suurusega 1024*1024 pixlit, mis on küll suurem kui vaja, aga annab rohkem mänguruumi.

4. joonistada Layer 1 kihile tavaline ruut ja täita värviga.

27


5. märgistada ruut ja määrata Action bar realt järgnevad mõõdud.

6. nimetada Layer 1 ümber N: Base Layer, selleks teha topeltklõps Layer 1 nimel ja lukustada kiht.

6. luua uus kiht ja anda nimi Square Base.

7. joonistada uus ruut, mõõtudega 600 *600pxl.

28


8. joondada joonistatud ruut töö keskele ja muuta läbipaistvaks, Opacity 0%.

9. luua uus kiht ja nimetada ümber N: Windows Phone ikoon.

Ikooni kujundus: 10. nüüd luua ikooni kujundus ja kirjutada sobiv tekst.

11. kui kujundus on valmis luua erineva suurusega PNG failid. Selleks on hea kasutada tükeldamismeetodit Slice. 12. selleks esmalt selekteerida ikooni kujundus ja valida menüüst Object/Create Slice from Selection või kasutada klahvikombinatsiooni Ctrl+Shift+K

29


13. Layer paletti luuakse uus kiht Slice Layer, mille all on loodud tükk nimega Slice 1.png

14. teha

topeltklõps

Slice

1.png

nimel

ja

nimetada

ümber:

Marketplace_Desktop_200x200.png ja seadistada Slice Properties aknas sobivasse mõõtu (200*200pxl).

15. Uue suurusega tüki loomiseks tuleb eelnev peita ja seejärel toimida sarnaselt nagu esimese puhulgi. Peitmiseks võtta Slice Layer’i kihi nähtavus välja, klikata silma ikoonil.

16. lõpuks peaks olema vähemalt 4 erineva suurusega Slice Layerit.

30


17. seejärel eksportida kõik slice’id korraga PNG vormingusse. Selleks valida File/Export või (Ctrl-E).

4.3 Loading ekraani kujundamine Loading ekraani kujundamiseks võtta alla näidisfail ProgressBars.psd. Selleks valida menüüst File/Import Adobe PhotoShop File… ning leida Photoshop_Templates_Assets kaustast ProgressBars.psd.

Luua omale sobiv disain ja salvestada *.png vormingusse.

31


4.4 Rakenduse avalehe ja sisulehtede kujundamine Avalehe ja sisulehtede kujundamist h천lbustavad j채rgnevad n채idisfailid: PhoneDesignStart.psd, PhotoShopi GridView_4_columns.psd, ListViewSmall.psd, mille leiab samuti Photoshop_Templates_Assets/ListView kaustast.

32


AGU SUUR

NÄITERAKENDUSE KOOSTAMISE JUHEND


Sisukord

1 Sissejuhatus ..................................................................................................................... 3 2 Ettevalmistus ................................................................................................................... 3 3 TÜÜprotsess ..................................................................................................................... 3 4 Uue projekti loomine ................................................................................................... 4 5 Panorama ......................................................................................................................... 5 6 Uudised ............................................................................................................................. 7 6.1 Kasutajaliides .......................................................................................................... 7 6.2 Andmed ..................................................................................................................10 6.3 Detailvaade ............................................................................................................13 6.4 Veebilink .................................................................................................................15 7 Info....................................................................................................................................16 7.1 Nupud ja konteiner.............................................................................................16 7.2 Postiaadress...........................................................................................................18 7.3 Telefonid, kontaktid............................................................................................18 7.4 Internet ....................................................................................................................20 8 Taustapilt ........................................................................................................................21

2


1 Sissejuhatus Näidisrakendus on koostamisejuhendi abil samm-sammult kokku pandav rakendus, mille abil teistes õppematerjalides õpitut praktikasse panna. Toetudes teistele õppematerjalidele ei peatu me pikalt sellel, miks me asju üht või teist viisi teeme. Juhend ja rakendus on koostatud, pidades silmas lihtsat lähenemist ja head järgitavust.

2 Ettevalmistus Näiterakenduse koostamiseks peab arvutisse paigaldatud olema Visual Studio 2010 ja Expression Blend 4. Need, koos Windows Phone 7 rakenduste loomiseks vajalike lisadega, saab paigaldada, laadides alla Windows Phone SDK aadressilt http://www.microsoft.com/en-us/download/details.aspx?id=27570. Tegemist on programmiga, mis paigaldab kõik puuduoleva, et Windows Phone arendusega algust teha. Lisaks tuleks kasuks Windows Phone Toolkit, mille saab alla laadida, minnes aadressile http://silverlight.codeplex.com/ ja vajutades punasele „Silverlight for Windows Phone“ nupule. Kui Windows Phone SDK ja Toolkit on paigaldatud, saab asuda näidisrakenduse loomise juurde.

3 Tööprotsess Töö toimub kahe programmiga – Visual Studio 2010 ja Expression Blend 4. Kasutajaliidese jaoks pöördume me Blendi, kõik muu teeme aga Visual Studios. Kuigi Blendi ja Visual Studio funktsionaalsus mõnes osas kattub, näiteks uusi faile lisada ja rakendust kompileerida saab Blendis ka, on seda kindlam teha Visual Studios. Projekti uusi faile lisades tasub alati meelde jätta klahvikombinatsioon Ctrl+S. See salvestab kõik muudetud failid, kaasa-arvatud projekti oma, mis ei pruugi eraldi lahti ollagi. Kahe programmi vahel vahetades peab meeles pidama, et teise programmi ei jõua muudatused enne, kui failid salvestada.

3


4 Uue projekti loomine Avame Visual Studio 2010. Valime File -> New -> Project... Selle peale avaneb dialoogiaken, kus saame valida projekti tüübi (Joonis 1). Meid huvitab mallidest Visual C# -> Silverlight for Windows Phone -> Windows Phone Application. Windows Phone rakenduse tüüpe pakutakse teisigi, aga nendega peame hakkama asju välja viskama ja sellepärast on hea alustada puhta lehega. Valime rakendusele kohase nime ja vajutame OK. Meile genereeritakse rakenduse põhi.

Joonis 1 - Uus projekt

MainPage.xaml, pealehe kasutajaliides, peaks avatud olema. Kui mitte, siis avame selle paremal küljel asuvast Solution Explorerist. Muudame rakenduse pealkirja (ApplicationTitle) ja käivitame esimeseks testiks selle emulaatoris, vajutades rohelisele noolele tööriistaribal või klaviatuuril F5. (Joonis 2). Emulaatori esmane käivitus võtab aega.

4


Joonis 2 - Esimene käivitus

Kui kõik toimib, on rakendus arendamiseks valmis. Kui proovida praegu MainPage.xaml’i muuta, ei tule sellest midagi välja, sest roheline nooleke (F5) käivitas rakenduse debugides. Debugimine aitab koodist vigu leida aga see tuleb muudatustega jätkamiseks lõpetada, valides kas Debug -> Stop Debugging, vastava Stop nupuga tööriistaribal või klahvikombinatsiooniga Shift+F5. Tihtipeale on kokkuvõttes lihtsam rakendus käivitada ilma debugimata, kasutades selleks klahvikombinatsiooni Ctrl+F5. Nii läheb rakendus tööle, kuid ei takista Visual Studios rakenduse arendamisega jätkamast.

5 Panorama Meie rakenduse pealeht on kahe vaatega ja kasutab Panorama kontrolli. See sisaldub Microsoft.Phone.Controls teegis, millele me kõigepealt viitama peame. Teeme seda Solution Exploreris, References peal parem klikk -> Add Reference.. (Joonis 3).

Joonis 3 - Add Reference

Avanenud aknas .NET tabis leiame üles Microsoft.Phone.Controls ja vajutame OK. Projekti lisatakse viide (Joonis 4).

5


Joonis 4 - Reference Aken

Et seda MainPage.xaml failis kasutada, peame lisaks defineerima nimeruumi. Selle jaoks lisame lehe ülaosas xmlns atribuudi. Valime nimeruumiks controls ja leiame üles Microsoft.Phone.Controls (Microsoft.Phone.Controls) (Joonis 5).

Joonis 5 - xmlns:controls

Controls, sealhulgas Panorama, on nüüd kasutamiseks valmis. Leiame üles ContentPaneli ja teeme sinna sisse Panorama, kahe PanoramaItemiga, headeritega Uudised ja Info (Joonis 6).

Joonis 6 - Panorama XAML

Käivitame rakenduse emulaatoris, et Panorama lisamise edukust kontrollida (Joonis 7).

6


Joonis 7 – Panorama emulaatoris

Valesti on kaks asja – Panorama pealkirjade tõttu on lehe pealkiri (page name) ebavajalik ja Panorama pealkirjad ei joondu ülejäänud rakendusega. Nende parandamiseks eemaldame lehe pealkirja TextBlocki ja sama teeme ContentPaneli Marginitega. XAML peaks seejärel välja nägema, nagu Joonisel 8. Käivitame rakenduse emulaatoris ja veendume, et kõik on nii, nagu me tahame.

Joonis 8 - Eemaldused

6 Uudised 6.1 Kasutajaliides Uudised tulevad RSS-vooga, näidisrakenduse puhul aadressilt http://tptlive.ee/rssfeed.php , kuid sobilikud on kõik RSS-vood. Esimese sammuna lisame projekti uue klassi uudise defineerimiseks. Selleks teeme projekti nimel parema kliki ja valime Add -> New Item.. (Joonis 9).

7


Joonis 9 - Add New Item

Avanevas aknas valime faili tüübiks Class, nimeks NewsItem.cs ja vajutame Add. Solution Explorerisse tekib uus klassifail. Selles failis defineerime muutujad pealkirja, kirjelduse, kuupäeva ja veebiaadressi tarbeks (Joonis 10).

Joonis 10 - NewsItem.cs

Järgmise sammuna teeme kasutajaliidesesse listi uudiste näitamiseks. Kuna tahame listi testandmeteks uudiseid lisada, peame NewsItemi kasutusele võtuks esmalt enda rakenduse nimeruumi defineerima (Joonis 11).

Joonis 11 - Nimeruum "my"

Järgnevalt teeme Panorama esimese vaate alla uue listi (ListBox) ja lisame listi paar uudist (NewsItem). Defineerime ainult pealkirja ja kirjelduse, sest listis meil rohkem infot vaja ei lähe (Joonis 12).

8


Joonis 12 - Uus list

Rakendust kompileerides ja emulaatorist vaadates näeme, et listi ilmusid küll 2 rida, aga need on vaid objektid TPTehnikum.NewsItem. Lisaks on listi joondus mööda. Sisu nägemiseks peame defineerima malli listi itemite tarbeks, sisu joondamiseks peame muutma listi Margin atribuuti. Lisaks anname listile nimeks NewsList; nii saame hiljem andmete laadimisel sellele viidata.

Joonis 13 - List ItemTemplate

Joonisel anname malliks StackPaneli, mille ülesanne on elemente üksteise alla paigutada. StackPaneli sisse teeme kaks TextBlocki – üks pealkirja, teine kirjelduse jaoks. TextBlockidele anname valiku atribuute: Text="{Binding Title}"

seob TextBlocki teksti NewsItemi pealkirja külge

TextTrimming="WordEllipsis"

lisab rea lõppu kolm punkti (...), kui tekst on liiga pikk

FontSize="{StaticResource

PhoneFontSizeMediumLarge}"

määrab teksti suuruse,

kasutades selleks Windows Phone eeldefineeritud stiile Foreground="{StaticResource

PhoneSubtleBrush}"

värvib teksti, kasutades selleks

jällegi stiile (ressursse) ütleb, et tekst peaks uuele reale wrappima, mitte ruumi lõppedes ära lõigatama TextWrapping="Wrap"

9


MaxHeight="60"

piirab sellisel juhul TextBlocki maksimaalset kõrgust

Kontrollime rakendust emulaatoris (Joonis 14).

Joonis 14 - List emulaatoris

List paistab töötavat. Aeg on uudised päriselt laadida.

6.2 Andmed Uudised laeme me rakenduse käivitamisel. Selle jaoks avame Solution Exploreris MainPage.xaml.cs faili, mida näeme MainPage.xaml kõrval asuvat noolt avades (joonis 15).

Joonis 15 - MainPage.xaml.cs

Esmalt teeme WebClienti, mis RSS voo internetist alla laeks. Paneme selle eraldi funktsiooni LoadItems() sisse ja kutsume seda pealehe koostamisel välja (Joonis 16).

10


Joonis 16 – WebClient

Kui allalaadimine on lõpule jõudnud, siis kutsume välja funktsiooni, mis seda töötlema hakkaks. Enne aga peame lisama ühe vajaliku teegi. Käitume nagu enne, tehes Solution Exploreris parem klikk References -> Add Reference.. -> System.Xml.Linq Pärast System.Xml.Linq viite lisamist võtame selle kasutusse (Joonis 17).

Joonis 17 - System.Xml.Linq

Nüüd saame allalaetud RSS-voogu töötlema hakata. Lisame MainPage.xaml.cs sisse ja LoadItems() järele sama nimega funktsiooni, mida me DownloadStringCompleted sündmuse külge lisasime (Joonis 18).

11


Joonis 18 – Töötlemine

Siin me teeme try/catch, et võimalike probleemide korral sellest kasutajat teavitada. Esmalt pöörame allalaetud andmed XElemendiks, mida seejärel LINQ’ga läbi käima ja uudisteks (NewsItem) tegema hakkame. Kui see on valmis, siis puhastame kasutajaliideses oleva NewsListi itemitest ja anname uued. Testime rakendust emulaatoris, listi peaksid ilmuma reaalsed uudised. Kuna list tühjendatakse alles allalaadimise lõpul, võib testandmeid hetkeks näha olla. Selle lahendamiseks saab testandmed kas eemaldada või välja kommenteerida (Joonis 19).

12


Joonis 19 - Välja kommenteerimine

6.3 Detailvaade Listis lõigatakse uudise pealkiri ja kirjeldus lühemaks. Et saaksime uudist lugeda täies ulatuses ja isegi uudise veebilinki külastada, on meil vaja uut lehte. Lisame selle, tehes projekti nimel parem klikk -> Add New Item.. Valime tüübiks Windows Phone Portrait Page, nimeks DetailPage.xaml ja vajutame Add. Loodud leht peaks automaatselt avanema. Vahetame ka sellel lehel ümber rakenduse pealkirja ja eemaldame lehe pealkirja (Joonis 20).

Joonis 20 - Detailvaate pealkirjad

Järgnevalt defineerime detailvaate sisu. ContentPaneli muudame Grid -> StackPanel, sest tahame TextBlockid üksteise alla paigutada. Muudame ka margineid, et joondust paika saada. TextBlockide tekstid seome otse uudise atribuutide külge, sest hiljem määrame rakenduse kontekstiks valitud uudise. Avaldamise kuupäeva formaadime silmale kenamaks (Joonis 21).

13


Joonis 21 - Detailvaate sisu

Kui oleme sellega valmis, liigume tagasi MainPage.xaml juurde. Seal hakkame uudiste listile lisama SelectionChanged atribuuti. Kui Visual Studio pakub meile <New Event Handler>, vajutame Tab-klahvi ja funktsioon genereeritakse meile automaatselt (Joonis 22).

Joonis 22 – SelectionChanged

Avame MainPage.xaml.cs faili ja otsime genereeritud NewsList_SelectionChanged funktsiooni üles. See funktsioon kutsutakse välja iga kord, kui kasutaja uudiste listis valiku teeb (Joonis 23).

Joonis 23 - SelectionChanged funktsioon

Selles funktsioonis seame me terve rakenduse kontekstiks valitud uudise. Peale konteksti seadmist tühistame listi valiku, seades selle nulli. See tagab, et detailvaatest tagasi uudiste listi naastes oleks võimalik sama uudist uuesti valida. Me kontrollime kõigepealt, et valitud uudis poleks null, sest listi valikut tühistades läheb SelectionChanged sündmus uuesti käima ja funktsioon kutsutakse uuesti välja. See aga tekitab probleeme ja nulli valiku korral tuleb konteksti seadmist vältida. Kõige lõpus navigeerime uuele lehele. Rakendust emulaatoris testides peaks olema võimalik listis uudiseid valida ja neid detailvaates avada. 14


6.4 Veebilink Et uudist saaks näha täies ulatuses veebibrauseris, peame selle detailvaatesse implementeerima. Me teeme seda Application Bari abil, mis on DetailPage.xaml lehel juba olemas, see on vaja lihtsalt välja kommenteerida. Lisaks välja kommenteerimisele eemaldame me kõik üleliigse, jättes alles ainult ühe nupu, tekstiga „ava“ (Joonis 24).

Joonis 24 - Application Bar

Hetkel on nupul puudu ikoon. Selle lisamiseks teeme kõigepealt piltide jaoks uue kausta. Projekti nimel parem klikk -> Add -> New Folder. Valime nimeks „Images“. Images kausta lisame uue pildi, tehes kaustal parem klikk -> Add -> Existing Item ja brausides Window.png pildini. Projekti struktuur võiks nüüd välja näha selline, nagu Joonisel 25.

Joonis 25 - Images/Window.png

Et sellele pildile saaks mugavamalt viidata, teeme pildil parem klikk -> Properties. Avanenud aknas muudame Build Actioni -> Content (Joonis 26). Vajutame Ctrl+S, et kõik muudatused salvestada.

Joonis 26 - Build Action

Lõpuks viitame Application Bari nupus õigele pildile. Hakkame kirjutama Click atribuuti ja aktsepteerime Visual Studio pakkumist selle jaoks funktsioon genereerida (Joonis 27).

15


Joonis 27 - Icon & Click

Aeg on AppBari nupule funktsionaalsus teha. Avame DetailPage.xaml.cs faili ja otsime üles genereeritud funktsiooni. Esiteks on vaja kasutusele võtta Taskid, selle jaoks lisame lehe ülaossa: using Microsoft.Phone.Tasks; Seejärel teeme funktsiooni sisse uue WebBrowserTaski, suuname selle valitud uudise aadressile ja näitame taski (Joonis 28). Kontrollime emulaatoris, et töötab.

Joonis 28 – WebBrowserTask

Uudiste funktsionaalsus on sellega valmis.

7 Info Panorama Info vaates tahame näidata kontaktandmeid. Nendeks on aadress, telefoninumbrid, e-mailid ja veebiaadress. Tahame lisaks, et need andmed oleksid kasulikumad, kui lihtsalt staatiline tekst. Aadress avab asukoha kaardil, telefoninumber helistab jne. Alustame üldise stiili ja sisu defineerimisega.

7.1 Nupud ja konteiner Postiaadress, telefonid jm peavad olema puudutatavad (klikitavad), seega peame kasutusele võtma nupu. Tahame aga, et nupp näeks välja nagu tavaline tekst, mitte nupp. Selle jaoks on vaja uut stiili, mille defineerime ressurssides. Ressursside jaoks loome <phone:PhoneApplicationPage.Resources> elemendi, mille paigutame MainPage.xaml lehe ülaossa. (Joonis 29).

16


Joonis 29 - Ressursid

Seejärel loome nupu jaoks uue stiili BlankButton (Joonis 30).

Joonis 30 – BlankButton

Nupu malliks (Template) saab lihtsalt üks Grid, millel on Transparent taust (vajalik, et klikke terve nupu ulatuses kinni püüda). ContentPresenter selle sees näitab mida iganes me nupule hiljem sisuks anname. Foreground ja FontSize on lihtsalt mugavuse jaoks, et neid atribuute igal korral sisu jaoks defineerima ei peaks. Lisaks loome konteineri Panorama kontrolli Info vaatesse, kuhu sisse me kontaktandmed paneme (Joonis 31).

Joonis 31 - Panorama teine vaade

Oleme kontaktandmete lisamiseks valmis.

17


7.2 Postiaadress Postiaadress vajab pealkirja ja aadressi selle all, nupu sees. Lisame need StackPanelisse (Joonis 32).

Joonis 32 - Postiaadress

Nupule Click atribuuti kirjutades laseme jällegi Visual Studiol meie jaoks funktsioon genereerida. Läheme MainPage.xaml.cs faili ja kirjutame aadressi jaoks funktsionaalsuse. Enne Address_Click funktsiooni täitmist lisame lehe ülaossa using Microsoft.Phone.Tasks; Kaardile navigeerimise saame lisada BingMapsTaski abil (Joonis 33).

Joonis 33 - Address_Click

Testime rakendust emulaatoris (Joonis 34).

Joonis 34 – Emulaator

Roheline tekst peaks avama kaardi ja näitama õiget asukohta.

7.3 Telefonid, kontaktid Telefonid vajavad pealkirja ja 3 nime/numbrit. Nime/numbri kombinatsioonid lahendame horistontaalsete StackPanelitega, mis sisu üksteise kõrvale paigutavad. Number on nupu sees, mille abil saame realiseerida klikkides numbri valimise. Lisame XAMLi pealkirja ja ühe telefoninumbri (Joonis 35).

18


Joonis 35 â&#x20AC;&#x201C; Number

Funktsionaalsus on sarnane kaardi omale, me realiseerime selle vastava Taskiga (Joonis 36).

Joonis 36 â&#x20AC;&#x201C; PhoneCallTask

Kui tahame rohkem telefoninumbreid, lisame nende jaoks uued Nime/Numbri kombinatsioonid (Joonis 37) ja realiseerime nende jaoks PhoneCallTaskid (Joonis 38).

Joonis 37 - Rohkem numbreid

19


Joonis 38 - Rohkem PhoneCallTaske

Emulaatoris testides peaksid k천ik numbrid helistamist pakkuma.

7.4 Internet Viimasena on vaja lisada meili- ja veebiaadressid. K천igepealt XAML (Joonis 39).

Joonis 39 - Internet XAML

Seej채rel Taskid (Joonis 40).

20


Joonis 40 - Internet Tasks

Oleme valmis! Emulaatoris E-maili saatmist ei saa testida, aga konto puudumise veateadet peaks sellegipoolest näha olema. Veebiaadress avab lingi brauseris. Sellega on Info vaade Panorama kontrollis valmis (Joonis 41).

Joonis 41 - Info vaade

8 Taustapilt Et rakenduse väljanägemist natuke põnevamaks muuta, võime lisada taustapildi. Peame aga arvestama, et telefon võib rakendust näidata nii tumeda kui heledana, olenevalt seadetest. Seetõttu peab kas taustapilt mõlemaga hea välja nägema, või peame defineerima 2 taustapilti – üks heleda, teine tumeda jaoks. Läheme viimase variandi teed. Teema seadeid saab muuta telefonis Settings -> system -> theme (Joonis 42). 21


Joonis 42 - Settings

Esmalt lisame taustapildid BackgroundDark.jpg ja BackgroundLight.jpg projekti, Images kausta. Properties aknas muudame Build Actioni -> Content (Joonis 43).

Joonis 43 - Build Action

Avame MainPage.xaml ja lisame lehe ülaossa kaks Image elementi – üks tumeda, teine heleda tausta jaoks. Kasutame PhoneDarkThemeVisibility ressurssi, et näita/peita tumedat taustapilti vastavalt valitud seadele. Sama teeme heleda teema jaoks, PhoneLightThemeVisibility ressursi abil (Joonis 44).

22


Joonis 44 - Image XAML

Kompileerides võib märgata, et ülal on must/valge riba, mis ei ole pildiga täidetud. See on Status Bar, ja seda saab vajadusel välja lülitada. Selleks muudame lehe ülaosas shell:SystemTray.IsVisible="False" . Kui tahame taustapilti ka detailvaatesse, siis lisame Image elemendid ka DetailPage.xaml faili ja soovi korral peidame Status Bari.

23


AGU SUUR

PROTOTÜÜBI LOOMINE EXPRESSION BLENDIGA


Sisukord

1

Sissejuhatus .................................................................................................................. 3

2

Rakenduse anatoomia .............................................................................................. 3

3

Expression Blendi kasutajaliides ............................................................................ 5

4

3.1

Vasakpoolne kolmandik ................................................................................. 5

3.2

Parempoolne kolmandik................................................................................ 6

3.3

Keskmine kolmandik ....................................................................................... 6

Rakenduse kasutajaliidese elemendid ................................................................ 7 4.1

Rectangle, Ellipse, Line ................................................................................... 7

4.2

Konteinerid ......................................................................................................... 7 4.2.1 Grid ................................................................................................................ 8 4.2.2 Canvas .........................................................................................................10 4.2.3 StackPanel .................................................................................................11 4.2.4 ScrollViewer ..............................................................................................11 4.2.5 Border .........................................................................................................12

5

4.3

TextBlock & TextBox .....................................................................................12

4.4

Button, CheckBox, RadioButton ................................................................13

4.5

Veel elemente ..................................................................................................13

Kokkuv천tteks ..............................................................................................................14

2


1 Sissejuhatus Expression Blend on disaineritele mõeldud programm, millega kujundus kasutajaliidesesse panna, see andmetega siduda ja animeerida. Tehniliselt on võimalik kasutajaliidest ehitada ka arendajatele mõeldud Visual Studioga, aga Blend muudab selle nii mõnegi koha pealt oluliselt mugavamaks. Tutvume nii rakenduste ülesehituse, Expression Blendi kui XAML’iga, millest Windows Phone 7 rakenduste kasutajaliidesed koosnevad.

2 Rakenduse anatoomia Windows Phone 7 rakendused põhinevad Silverlightil ja koosnevad peamiselt kahte tüüpi failidest – XAML ja C# . XAMLis defineeritakse rakenduse kasutajaliides ja C# failides rakenduse funktsionaalne pool. Võrreldes vanemate viisidega rakendusi teha, kus terve rakendus koos kasutajaliidesega defineeriti programmikoodis, on toimunud tubli edasiminek. Kasutajaliidese ja funktsionaalsuse eraldamine võimaldab disaineril ja arendajal töötada paralleelselt ja ka kood on puhtam ja fokusseeritum. Lisaks XAML’ile ja C#’le sisaldub võib rakenduses sisalduda pilte, andmeid jpm. See kõik on pakendatud ühte XAP faili, mida saab Marketplace’st telefoni laadida. (Joonis 1)

Joonis 1 - Rakendus Silverlightis

XAML on XML’il põhinev keel ja nendele, kes on tegelenud veebiarendusega, meenutab see oma ülesehituselt HTML’i. See võrdlus on väga kohane, sest näiteks Windows 8 Metro rakendusi saab luua sama hästi nii XAML/C# kui HTML/Javascript abil. XAML/C# kombinatsioon on nendest kahest aga oluliselt võimekam. (Joonis 2) 3


Joonis 2 - XAML

Esmasel vaatlusel võib XAML tunduda keeruline ja hirmutav. Lähemalt tutvudes on tegemist aga väga loogilise ja üsna lihtsa keelega, mis on kasutajaliideste ehitamiseks loodud ja peale mille selgeks saamist ei taha probleemse HTML’i juurde enam tagasi minnagi. Expression Blend on programm, mis genereerib jääb Blendi genereeritud XAML’ist vajaka, piisab hobikorras arendamiseks sellest täielikult. kasutajaliidest ehitada ilma XAML’i nägemata, sellega siiski juba varakult tutvust teha.

XAML’i. Kuigi tõsisemaks tööks esimesteks sammudeks ja isegi Iseenesest on nii võimalik kuigi soovitaks mitte karta ja

4


3 Expression Blendi kasutajaliides Expression Blendi kasutajaliidese võib jagada horisontaalselt suures osas kolmeks (Joonis 3). Kuna Blendi kasutajaliidest annab enda soovide järgi kohandada, ei pruugi joonis üks ühele sama olla.

Joonis 3 - Expression Blend

3.1 Vasakpoolne kolmandik Vasakpoolsest kolmandikust leiame tööriistariba. Tööriistaribas asuvad vahendid kasutajaliidese elementide valimiseks, nendega ümber käimiseks ja uute elementide lisamiseks. Vasakpoolses kolmandikus asuvad lisaks veel aknad projektipuu, objektipuu, olekute ja animatsioonide jaoks. Hetkel huvitavad meid projekti- ja objektipuu (joonisel nähtavad). Projektipuu (Projects) näitab kõiki projektis asuvaid kaustu ja faile. Seal saab nii olemasolevaid faile avada kui uusi juurde teha. Objektipuu (Objects and Timeline) kuvab tervet kasutajaliidese struktuuri. Me saame erinevaid kasutajaliidese elemente üksteise sisse lisada ja objektipuu annab hea ülevaate, mis mille sees asub. Olekud (States) ja animatsioonid (Timeline, Storyboard) ei ole meie jaoks hetkel olulised.

5


3.2 Parempoolne kolmandik Parempoolses kolmandikus asub aken atribuutide jaoks. Objektipuust ja disainivaatest elemente valides on parempoolses kolmandikus võimalik nende elementide atribuute muuta. Atribuutideks võivad olla näiteks taustavärv, laius ja kõrgus, joondus jne.

3.3 Keskmine kolmandik Keskmises kolmandikus asub töölaud. Töölaual on tegelikult kolm erinevat vaadet ja neid vaateid saab vahetada keskmise kolmandiku paremal üleval nurgas asuvate nuppudega. Nendest kõige ülemine nupp on disainivaate jaoks. See on Joonisel 3 hetkel aktiivne. Disainivaates näeb rakendus välja selline, nagu telefonis. Seal saab elemente lisada, neid valida ja ringi tõsta. Täpsemaks objektide valimiseks on objektipuu küll parem. Keskmine nupp avab koodivaate. Seal saab näha XAML’i, millest leht koosneb. Ainult XAML’i vaatamiseks pole aga Expression Blendi vaja ja puhta koodivaate jaoks on Visual Studio ehk paremgi. Alumine nupp on poolitatud vaade disaini ja koodi vahel (Joonis 4). Poolitatud vaates on võimalik käsitsi XAML’is muudatusi teha ja nende muudatuste tulemusi disainivaates jälgida. See muudab Expression Blendi ka kogenud arendaja jaoks mugavaks, sest pidev visuaalne tagasiside muudab arendusprotsessi kiiremaks ja Visual Studio disainivaade nii täpne ei ole.

Joonis 4 - Poolitatud vaade

6


4 Rakenduse kasutajaliidese elemendid Ainult Blendi kasutajaliidese tundmisest ei piisa – vaja on teada, millest koosnevad Windows Phone 7 rakendused ise. Elementide järele proovimiseks teeme uue projekti. Selle jaoks valime Expression Blendis File -> New Project -> Windows Phone Application -> OK. See genereerib meile uue tühja projekti, kuhu elemente lisada.

4.1 Rectangle, Ellipse, Line Need on algelised kujundid, mida dekoratiivsetel eesmärkidel kasutajaliideses kasutada. Neid saab tööriistaribalt valida ja nendega otse disainivaates joonistada (Joonis 5). Hiljem Selection tööriistaga (tööriistariba kõige ülemine nupp) valides saab muuta atribuute nagu taustavärv, serva paksus ja värv, mõõdud jpm.

Joonis 5 - Rectangle, Ellipse, Line

Peale joonistamist näeme, et nii objektipuusse kui koodivaatesse ilmusid vastavasisulised muudatused (Joonis 6).

Joonis 6 - Objektipuu ja koodivaade

4.2 Konteinerid Konteinerite eesmärk on erinevatel viisidel sisu positsioneerida. Ühe rakenduse kasutajaliides koosneb tavaliselt paljudest eri tüüpi konteineritest, kaasa arvatud ühest juurkonteinerist, mille sees asub kõik muu (Joonis 7). Uut lehte tehes määratakse juurkonteineri nimeks automaatselt LayoutRoot, kuigi nii nime kui juurkonteineri tüüpi on võimalik muuta. Konteineri valik sõltub soovitavatest konteineri omadustest ja Silverlightile saada olevate konteineritega on võimalik realiseerida pea kõik võimalikud kasutajaliidesed. 7


Joonis 7 – Konteinerid

4.2.1 Grid Grid on kõige võimekam konteiner, omades sarnasusi HTML tabeliga. Gridi annab jagada mitmeks tulbaks ja reaks. Joonistame Gridi disainivaatesse ja jagame selle kaheks tulbaks ja reaks, viies hiire selleks Gridi kohal ja kõrval asuvale tumesinisele joonele (Joonis 8).

Joonis 8 - Grid disainivaates

Heites pilgu koodivaatele (Joonis 9) näeme, et poolitamistega loodi Row- ja ColumnDefinitionid. Need aga pole päris võrdsed jäänud, sest disainivaade pole täpne. Me saame seda XAML’is korrigeerida, käsitsi Height ja Width (kõrgus ja laius) väärtusi muutes.

Joonis 9 - Grid koodivaates

Kõrguseks ja laiuseks saame määrata kolme tüüpi väärtusi. Nendeks on automaatne, fikseeritud ja jagatud. Eemaldame lihtsuse mõttes read ja loome tulpadega keerulisema näite, kasutades ära kõiki kolme tüüpi väärtusi (Joonis 10).

8


Joonis 10 – Väärtused

Esimese tulba laiuse tüübiks on Auto, ehk automaatne. Auto tahab olla täpselt nii väikene, kui võimalik, võttes mõõtmed sisu järgi. Kuna hetkel esimeses tulbas sisu ei ole, on selle tulba tegelikuks laiuseks 0 ja pildil seda näha peaaegu ei ole, väljendudes vaid vasakpoolseima joone natuke suuremas paksuses. Teine tulp on fikseeritud laiusega 25 pikslit. Ilma ühikuta arvud on Silverlightis enamjaolt pikslid ja seetõttu ei pea seda ühikut eraldi välja kirjutama. Pildil on seda näha vasakpoolseima tulbana, kuna esimesel tulbal laius puudub. Kolmas ja neljas tulp on defineeritud tärniga. Tärnid võtavad Autost ja fikseeritust üle jäänud saadaoleva laiuse ja jagavad selle enda vahel ära. Näiteks ülaloleva näite korral on tärnide summa 3, mistõttu kolmas tulp saab endale 2/3 üle jäänud laiusest ja neljas tulp 1/3. Tärnide summa võib olla milline iganes, kuigi Blendile meeldib seda jagamist teha kogusummaga 1 (Joonis 9). Neid kolme tüüpi väärtusi võib omavahel kombineerida vastavalt vajadusele, ka täielikult ära jätta. Elementide positsiooni Gridis määravad Grid.Row ja Grid.Column atribuudid. Indeks algab nullist, mis tähendab, et teise tulba korral on Grid.Column väärtuseks 1 jne. Esimest tulpa ja rida (Grid.Column ja Grid.Row 0) ei ole vaja välja kirjutada. Lisame Gridi paar elementi ja positsioneerime need (Joonis 11).

9


Joonis 11 – Sisu

Valge ristküliku puhul ei ole vaja tulpa eraldi välja kirjutada, sest see asub esimeses tulbas. Me peame valgele ristkülikule laiuse andma, sest fikseeritud laiuseta ristkülik võtab endale konteineri mõõtmed, milleks seekord on juhtunud Auto laiusega esimene tulp. Määrates ristkülikule fikseeritud laiuse saab selle endale ka Auto laiusega esimene tulp, mille sees valge ristkülik asub. Kõrguse täidab ristkülik kenasti ära, sest kõrgus on Gridil selles näites olemas. Roheline ristkülik asub kolmandas tulbas ja omab seega Grid.Column väärtust 2. Kuna tulbal on laius olemas, ei pea me ristkülikule laiust andma ning oma tulbas täidab see ära kõik saadaoleva ruumi. Samasugust käitumist omavad paljud teised elemendid. Tekst asub samuti kolmandas tulbas ning rohelise ristküliku kohal. See on selletõttu, et Grid positsioneerib elemendid üksteise kohale (kui nad just erinevates tulpades/ridades ei asu). Me joondame teksti vertikaalselt alla – ka sisu joondus on midagi Gridile omast. Kõik see teeb Gridist kõige võimekama konteineri ja Grid leiab seetõttu kasutajaliidestes kõige rohkem kasutust. 4.2.2 Canvas Canvas on konteiner, millega saab elemente fikseeritud väärtustega positsioneerida, kasutades selleks Canvas.Left ja Canvas.Top väärtusi (Joonis 12). Canvas ei ole oma fikseeritud loomu pärast väga hea konteiner, ning leiab pigem kasutust olukordades, kus prioriteetne on kiirus, sest Canvast on arvutuslikult odav kasutada. Tavaolukorras ei oma aga see aga märgatavat erinevust ja Canvase kasutus on ebasoovituslik.

10


Joonis 12 – Canvas

4.2.3 StackPanel StackPanel on veel üks konteiner, mida tihti kasutajaliidestest leida võib. StackPanel positsioneerib selles sisalduvad elemendid üksteise kõrvale/alla, olenevalt Orientation atribuudist. See leiab kasutust kõikvõimalikes listides, kuid ka elemente üksteise kõrvale/alla paigutada on StackPaneliga tihtipeale mugavam, kui Gridiga (Joonis 13).

Joonis 13 – StackPanel

Ülalolevas näites on kasutatud kahte StackPanelit – ühte paigutamaks ristkülikut ja tekste üksteise kõrvale (Orientation = Horizontal), teist paigutamaks tekste üksteise alla (Orientation on vaikimisi Vertical). Ristkülik peab olema fikseeritud mõõtmetega, sest StackPaneli käitumine sisuga on sarnane Gridi väärtusele Auto. Tekstil aga on mõõtmed neid fikseerimatagi. 4.2.4 ScrollViewer ScrollViewer on lihtne viis sisu kerimiseks ja scrollbari lisamiseks. Windows Phone 7’s on scrollbar nähtaval ainult kerimise ajaks. ScrollViewer leiab kasutust olukordades, kus sisu on mõõtmetelt suurem, kui kasutada olev ala (Joonis 14).

11


Joonis 14 – ScrollViewer

ScrollVieweri sisse ja ristkülikute ümber oleme lisanud StackPaneli, sest ScrollVieweri eripära tõttu saab selle sisuks määrata vaid ühe elemendi (StackPanelisse aga saab neid lisada nii palju, kui tahame. Lisaks soovime, et ristkülikud ilmuksid üksteise alla). 4.2.5 Border Border annab unikaalseid võimalusi serva muutmiseks, mida teiste konteineritega teha ei saa, sealhulgas nii iga serva laiuse kui iga nurga kumeruse eraldi määramine. Ka Border tahab enda sisse vaid üht elementi, mistõttu Border + Grid on populaarne kombinatsioon. (Joonis 15).

Joonis 15 – Border

4.3 TextBlock & TextBox TextBlock ja TextBox on kaks erinevat viisi, kuidas teksti näidata. TextBlock on lihtsalt teksti kuvamiseks, TextBox aga laseb sisu muuta ja selle puudutamine toob üles Windows Phone 7 klaviatuuri (Joonis 16). RichTextBox võimaldab teksti formaatida ja PasswordBox asendab tähed tärnidega.

12


Joonis 16 - TextBlock & TextBox

4.4 Button, CheckBox, RadioButton Kes HTML’ga tuttav, tunneb need kolm ära (Joonis 17). Buttonit ehk tavalist nuppu kasutame rohkem, raadio- ja checkboxi natuke vähem. Nupu kliki peale saame C# failis hiljem midagi ette võtta, aga praegu selle pärast veel ei muretse.

Joonis 17 - Button, CheckBox, RadioButton

4.5 Veel elemente Vaatasime üle põhilised elemendid, millest kasutajaliidest kokku panna. Need pole aga kaugeltki kõik. Tööriistariba kõige alumise nupuga avanevas aknas saame ligipääsu kõigile elementidele, mida enda disainivaatesse vedada (Joonis 18).

13


Joonis 18 - Kõik elemendid

5 Kokkuvõtteks XAML on keel, mille abil defineerime rakenduse kasutajaliidese. Expression Blend teeb meie esimesed sammud selles väga lihtsaks, isegi koodi vaikimisi taustale ära peites. Edasi arenedes on aga nii XAML’i kui Blendi puhul tegu väga võimsate vahenditega, millega ükski kasutajaliides tegemata ei jää.

14


AGU SUUR

ANIMATSIOONIDE LOOMINE


Sisukord

1 Sissejuhatus ..................................................................................................................... 3 2 Animatsioonid ................................................................................................................ 3 2.1 Lihtne animatsioon ............................................................................................... 3 2.2 Animatsiooni k채ivitamine ................................................................................... 6 2.3 Animatsiooni t채iendamine ................................................................................. 7 2.3.1 Tagasi animeerimine................................................................................ 7 2.3.2 Easing ............................................................................................................ 8 2.3.3 Nupu animeerimine ................................................................................. 9 3 Kokkuv천tteks................................................................................................................... 9

2


1 Sissejuhatus Metro üheks printsiibiks on liikumises olemine. Õpimegi siis, kuidas rakendusi liikuma panna. Jätkame prototüübiga ja keskendume animatsioonide loomisele ja nende käivitamisele. Animatsioonid defineerivad algus- ja lõpp-punkti ja valiku „vahepeatusi“, mille animatsioon alguspunktist lõpp-punkti liikudes läbi käib. Animeerida saab tervet valikut atribuute, nagu positsioon, suurus, isegi värv. Animatsioonid tuleb käima tõmmata manuaalselt.

2 Animatsioonid 2.1 Lihtne animatsioon Animatsiooni loomiseks peab meil olema element, mida animeerida. Võtame prototüübi loomisest tuttava rakenduse ja lisame sinna valge ringi suurusega 100x100 px (Joonis 1).

Joonis 1 - Ellipse

Animatsioonis tahame muuta nii ringi positsiooni, suurust kui värvi. Uue animatsiooni (Storyboard) loomiseks leiame ja klikime objektipuu kohalt paremalt servast pluss-nuppu. Anname avanenud aknas enda animatsioonile kohase nime (Joonis 2).

3


Joonis 2 - Uus animatsioon

Juhtub kaks asja. Esiteks laieneb objektipuu paremale poole, avades ajajoone (timeline). Teiseks tekib disainivaate ümber punane serv (Joonis 3). See punane serv tähendab, et kõik muutused, mida me rakenduse kasutajaliideses teeme, lähevad animatsiooni alla. Selle eemaldamiseks saame me kas animatsiooni Xnupust objektipuu kohal sulgeda, või disainivaate vasakul üleval asuvast punasest nupust ajajoone salvestuse välja lülitada. Hetkel me seda aga ei tee, sest eesmärk on valge ring animeerima saada.

Joonis 3 – Ajajoon

Paneme kõigepealt paika alguspunkti. Selle jaoks kontrollime, et valge ring oleks objektipuus valitud; et kollane ajajoon oleks alguses (nullis) ja vajutame nulli kohal olevat ellipsi ja plussiga nuppu. See lisab animatsiooni võtmekaadri. Võtmekaadrid defineerivad animatsiooni algus- ja lõpp-punkti, kõik kahe võtmekaadri vahele jäävad kaadrid arvutatakse automaatselt. Praegu kontrollime, et meil oleks alguspunkt (võtmekaader), kuskohast animatsiooni alustada. Me võime teha muutusi, kui tahame, et valge ring alustaks

4


animatsiooni teiste atribuutidega, aga hetkel on see täpselt selline, nagu me tahame. Alguspunkti muutusi ei tule. Lõpp-punkti määramiseks võtame kollasest joonest hiirega kinni ja tirime ajajoonel edasi. Numbrid ajajoone kohal näitavad sekundeid. Vajutame uuesti võtmekaadri nuppu ja saame lõpp-punkti (Joonis 4).

Joonis 4 - Lõpp-punkt

Me võime animatsiooni ajajoone kohal olevate nuppudega mängida, aga midagi ei juhtu, sest valge ringi atribuudid algus- ja lõpp-punktis on täpselt samad. Selle muutmiseks kontrollime, et valge ring oleks objektipuus valitud; et kollane joon oleks lõpp-punkti võtmekaadri peal ja, et animatsiooni muutmine oleks aktiveeritud (punane serv disainivaate ümber). Kui kõik on korras, siis tirime ringi Selection tööriistaga uude asukohta, vähendame suurust ja muudame taustavärvi roosakaks (Joonis 5).

Joonis 5 - Uus asukoht

5


Kui see õnnestus, siis peaks olema võimalik ajajoone peal kollast joont edasitagasi liigutada ja näha vahepealseid kaadreid. Kui see ei toimi ja animatsiooni mängimine ei õnnestu, siis tuleb üle kontrollida, et alguspunkt oleks olemas; et lõpp-punkt oleks olemas ja, et ringi atribuudid oleks algus- ja lõpp-punktis erinevad. Kui animatsioon mängib, siis võime selle sulgeda, kasutades selleks objektipuu kohal ja animatsiooni nime kõrval asuvat X-nuppu.

2.2 Animatsiooni käivitamine Kui rakendus Windows Phone 7 emulaatoris käivitada, valides selleks Expression Blendis Project -> Run Project või vajutades F5, on näha valget ringi aga mitte animatsiooni. See on sellepärast, et animatsioonid tuleb manuaalselt programmikoodis käima tõmmata. Programmikoodi kontrollida on kõige mugavam nupu abil. Tirime disainivaatesse uue nupu. Kontrollime, et see oleks valitud, ja otsime atribuudisektsiooni paremalt ülevalt nurgast üles Events ehk sündmuste vaate. Sündmuste vaates otsime üles Click sündmuse, ja anname sellele mõistliku nime (Joonis 6).

Joonis 6 – Sündmused

Peale nime sisestamist ja Enter vajutamist suunatakse meid programmikoodi, kus StartAnimation tarbeks on funktsioon juba genereeritud. Meenutame, et meie animatsiooni nimi oli Animatsioon. Selle käima tõmbamiseks kirjutame StartAnimation funktsiooni Animatsioon.Begin(); (Joonis 7) See on kõik. Võime programmikoodi sulgeda, seda ei lähe meil enam vaja. Programmikoodi juurde naasmiseks võime projektipuus MainPage.xaml kõrval asuvat noolekest klikkida. See teeb .cs faili nähtavaks. Vajutame F5 ja kontrollime, et Windows Phone 7 emulaatoris nupule klikkides animatsioon tööle läheks. 6


Joonis 7 – Begin

2.3 Animatsiooni täiendamine Nüüd, kui animatsiooni on võimalik käivitada, ei tee halba seda natuke täiendada. Animatsiooni muutmiseks peame selle uuesti avama. Vajutame objektipuu kohal olevale allapoole noolega nupule ja valime oma animatsiooni (Joonis 8). Meile avaneb tuttav vaade.

Joonis 8 - Animatsiooni avamine

2.3.1 Tagasi animeerimine Esimese asjana liigutame kollast joont ajas edasi, valime objektipuus valge ringi ja loome uue võtmekaadri. Liigutame valge ringi oma esialgsele kohale tagasi, taastame valge värvi ja suuruse. Meil peaks olema nüüd kolm võtmekaadrit (Joonis 9). Esimesel kaadril asub ring vasakul pool, on valge ja 100x100 px. Teisel kaadril asub ring paremal pool, on roosakas ja väiksem. Kolmas võtmekaader on 7


esimesega identne. Animatsiooni käivitades liigub animatsioon paremale ja tagasi algusesse.

Joonis 9 - 3 võtmekaadrit

2.3.2 Easing Hetkel jookseb animatsioon lineaarselt ja see ei tundu loomulikuna. Selle parandamiseks klikime ajajoonel keskmise võtmekaadri peal. Atribuutide aknasse ilmuvad valikud Easingu jaoks. Valime EasingFunctioniks CircleInOut (Joonis 10).

Joonis 10 – Easing

Teeme sama kolmanda võtmekaadri jaoks ja kontrollime oma animatsiooni. See peaks tunduma loomulikum ja inertsiga.

8


2.3.3 Nupu animeerimine Üks animatsioon võib muuta mitme elemendi atribuute korraga. Selle illustreerimiseks valime objektipuus nupu, millega animatsiooni alustame. Teeme selle nupu jaoks kõik 3 võtmekaadrit korraga nii, et algus on valgest ringist natuke hiljem ja lõpp on valgest ringist natuke varem. Keskkohad võiksid joonduda. Tirime kollase joone keskmise võtmekaadri juurde (Joonis 11).

Joonis 11 - Nupu võtmekaadrid

Kui nupp objektipuus valitud ja kollane joon on õige võtmekaadri juures, siis muudame atribuutites nupu Opacity nulli. Mängime kontrolliks animatsiooni. Kuna me tegime kõik 3 võtmekaadrit korraga, siis kolmas võtmekaader on juba esimesega sama ja eraldi tagasianimeerimise vaev puudub.

3 Kokkuvõtteks Animatsioonide koostamine Expression Blendis on üsna lihtne. Animeerida saab väga erinevaid atribuute ning mõõdukas kogus liikuvust muudab rakenduse kasutamise lõbusamaks.

9


JAAGUP KIPPAR

C#


Sisukord 1 Sissejuhatus ..................................................................................................................... 4 2 Suhtlus arvutiga ............................................................................................................. 4 3 Arvutamine ...................................................................................................................... 5 3.1.1 Ülesandeid................................................................................................... 5 4 Valikud ............................................................................................................................... 6 4.1 Kommentaarid ........................................................................................................ 7 4.1.1 Ülesandeid................................................................................................... 8 5 Kordused .......................................................................................................................... 8 6 Korrutustabel ................................................................................................................10 7 Alamprogramm ............................................................................................................11 7.1.1 Ülesandeid.................................................................................................12 8 Massiivid .........................................................................................................................12 8.1 Tsükkel andmete kasutamiseks ......................................................................12 8.2 Massiiv ja alamprogramm ................................................................................13 8.3 Algväärtustamine, järjestamine ......................................................................14 8.4 Osutid ja koopiad ................................................................................................14 8.5 Massiiv alamprogrammi parameetrina ........................................................16 8.6 Foreach - tsükkel .................................................................................................16 8.7 Mitmemõõtmeline massiiv...............................................................................17 8.7.1 Ülesandeid.................................................................................................18 9 Käsud mitmes failis .....................................................................................................18 9.1.1 Ülesandeid.................................................................................................19

2


10 Tekst .................................................................................................................................19 10.1

Muutmine ..........................................................................................................20

10.2

Tükeldamine .....................................................................................................21

10.2.1 Ülesandeid .........................................................................................21 11 Juhuarv ............................................................................................................................22 11.1.1 Ülesandeid.................................................................................................22

3


1

Sissejuhatus Järgnevalt leiab mõned näited ja seletused C# keele põhivõimaluste kohta. Näited on toodud käsureaprogrammidena, kuid samad moodused kehtivad kõikjal, kus keelt kasutada võimalik on.

2

Suhtlus arvutiga Enamik programme vajavad andmeid kasutajalt - muul juhul ei teaks ju arvuti, mida meil vaja on. Kui just programmi ainsaks ülesandeks polegi kellaaja teatamine, sest sellisel juhul tõesti piisab vaid programmi enese käivitamisest. Sisendite võimalused sõltuvad programmi kasutuskohast. Veebis näiteks saame pruukida veebilehel töötavaid graafikakomponente - nuppe, tekstivälju, rippmenüüsid jne. Windows Formide ehk arvutis iseseisvalt (mitte veebi kaudu) töötavate graafiliste rakenduste puhul on tavalised graafikakomponendid suhteliselt sarnased veebis nähtavatega. Vaid mõnevõrra vabamalt pääseb oma komponente juurde tegema ning mitmekülgsemaid võimalusi kasutama. Tekstiakna rakenduste juures piirdub suhtlus arvutiga loetava ja trükitava tekstiga. Lihtsaim dialoogi pidav programm näeb välja järgmine: using System; class Sisend{ public static void Main(string[] arg){ Console.WriteLine("Palun eesnimi:"); string eesnimi=Console.ReadLine(); Console.WriteLine("Tere, "+eesnimi); } }

Ning töö paistab välja nii: C:\Projects\oma\naited>Sisend Palun eesnimi: Juku Tere, Juku

Esmane "Palun eesnimi" trükitakse välja sarnaselt nagu lihtsaimaski tervitavas programmis. Edasine Console.ReadLine() jääb kasutajalt sisestust ootama. Kõik, mis kasutaja kuni reavahetuseni kirjutab, püütakse kokku üheks tekstiks ning selle saab arvutisse meelde jätta. Märksõnaks ehk muutuja nimeks sai "eesnimi" ning andmetüübiks "string", mis inimkeeli tähendab teksti. Järgmisel real trükitakse tulemus välja. Nõnda sõltub programmi vastus küsimise peale sisestatavast nimest. 4


3

Arvutamine Arvutamine teadupärast arvuti põhitöö - vähemalt arvutustehnika algaastatel. Et siin lahkesti kasutaja antud arve liita/lahutada saaks, tuleb kõigepealt hoolitseda, et need ka arvuti jaoks arvud ja mitte sümbolite jadad oleksid. Kõigepealt annab ReadLine kätte numbriliste sümbolitega teksti. Ning käsklus int.Parse muudab selle arvutuste jaoks kõlbulikuks. Tüüp int (sõnast integer) tähistab täisarvu. Kui on vaja komakohtadega ümber käia, siis sobib selleks tüüp double. Teise arvu puhul on andmete lugemine ning arvuks muundamine ühte käsklusesse kokku pandud. Nii võib ka. Väljatrüki juures näete kolme looksulgudesse paigutatud arvu. Nõnda on võimalik andmeid trükkides algul määrata ära trükkimise kohad ning alles pärast loetellu kirjutada tegelikud väärtused. Juhul, kui väärtuste arvutamine on pikk (näiteks arv1*arv2), aitab see programmikoodi pilti selgemana hoida. Muul juhul tuleks hulk pluss- ja jutumärke väljatrüki juurde. Jutumärgid tekstide eristamiseks ning plussmärgid üksikute osade kokku liitmiseks. Samuti on sellisest asukohanumbritega paigutamisest kasu juhul, kui rakendust tõlgitakse. Keele lauseehituste tõttu võib sõnade järjestus lauses muutuda. Selliselt looksulgude vahel olevate arvudega mängides aga saab lihtsamalt tõlkida ilma, et peaks selleks programmikoodis märgatavaid muutusi tegema. using System; class Arvutus{ public static void Main(string[] arg){ Console.WriteLine("Esimene arv:"); string tekst1=Console.ReadLine(); int arv1=int.Parse(tekst1); Console.WriteLine("Teine arv:"); int arv2=int.Parse(Console.ReadLine()); Console.WriteLine("Arvude {0} ja {1} korrutis on {2}", arv1, arv2, arv1*arv2); } } C:\Projects\oma\naited>Arvutus Esimene arv: 3 Teine arv: 5 Arvude 3 ja 5 korrutis on 15

3.1 Ülesandeid   

5

Küsi kahe inimese nimed ning teata, et täna on nad pinginaabrid. Küsi ristkülikukujulise toa seinte pikkused ning arvuta põranda pindala. Leia 30% hinnasoodustusega hinna põhjal alghind.


4

Valikud Ehk võimalus otsustamiseks, kui on vaja, et programm käituks kord üht, kord teistmoodi. Allpoololev näide koos väljundiga võiks näidata, kuidas tingimuslause abil tehtud valik toimib. using System; public class Valik1{ public static void Main(string[] arg){ Console.WriteLine("Palun nimi:"); string eesnimi=Console.ReadLine(); if(eesnimi=="Mari"){ Console.WriteLine("Tule homme minu juurde!"); } else { Console.WriteLine("Mind pole homme kodus."); } } }

Väljund: D:\kodu\0606\opikc#>Valik1 Palun nimi: Juku Mind pole homme kodus.

Nagu näha - Jukut külla ei kutsutud. C# juures, nii nagu selle aluseks oleva Ckeele puhul kasutatakse võrdlemise juures kahte võrdusmärki. Üks võrdusmärk on omistamine ehk kopeerimine. Arvude puhul saab kasutada ka võrdlusi < ja > ehk suurem kui ja väiksem kui. Näiteks if(vanus>14){ Console.WriteLine("Tuleb osta täispilet"); }

Samuti kehtivad võrdlused >= ja <= ehk suurem või võrdne ning väiksem või võrdne. Kui uurida, kas arv jääb soovitud vahemikku, tuleb järjest panna kaks võrdlust. Näiteks: if(vanus>6 && vanus <=14){ Console.WriteLine("Sinu jaoks on lapsepilet"); }

Kaks &-märki tähendab, et kogu tingimus on tõene ainult siis, kui mõlemad võrdlused on tõesed. Teistpidi saab ka.

6


if(vanus<7 || vanus>14){ Console.WriteLine("Sulle lapsepilet ei sobi"); }

&&märke saab lugeda sõnaga "ja", || märke sõnaga "või". Ehk siis: kui vanus on alla seitsme või suurem neljateistkümnest, sel juhul lapsepilet ei sobi.

4.1 Kommentaarid Vahel on kasulik enesele ja teistele selgituseks programmi sisse kommentaare lisada. Teksti sisse kirjutades pannakse kommentaari ette kaks kaldkriipsu. Selliselt kirjutatud teksti pole kompilaatori jaoks olemas. Enesel on aga vahel päris hea meenutada, mida mõne lausega kirja panna taheti. double summa=kogus*pirnihind; //korrutatakse ühe pirni hinnaga

Kommentaar võib olla ka üle mitme rea. Sellisel juhul pannakse kommentaari algusesse /* ning lõppu */ Siin on näiteks programmi väljund sarnaselt kaldkriips-tärni ning tärn-kaldkriipsu vahele paigutatud - et ka ilma käivitamata võib juba näha, mis konkreetsel juhul tehti. Lisaks märkmete jätmisele on kommenteerimine ka heaks võimaluseks programmi testimisel ja vigade otsimisel. Kui kuidagi viga üles ei leia, siis saab algul kahtlase lause või lausete ploki vahel tervikuna välja kommenteerida. Seejärel veenduda, et programm ilma selle osata ilusti töötab. Ning edasi võib asuda juba kindlama tundega sellest väljakommenteeritud plokist viga otsima teades, et ta kindlasti seal peab olema. Omakorda saab lauseid ükshaaval võtta kommenteeritud osast välja ja lõpuks nõnda kõik ilusti tööle saada. Aga nüüd näide ise. using System; public class Valik1{ public static void Main(string[] arg){ double pirnihind=1.70; Console.WriteLine("Mitu pirni ostad?"); double kogus=double.Parse(Console.ReadLine()); double summa=kogus*pirnihind; //korrutatakse ühe pirni hinnaga Console.WriteLine("Kas kilekotti ka soovid? (jah/ei)"); string vastus=Console.ReadLine(); if(vastus=="jah"){ summa=summa+0.70; } Console.WriteLine("Kogusumma: "+summa); } } /* D:\kodu\0606\opikc#>Valik2 Mitu pirni ostad?

7


3 Kas kilekotti ka soovid? (jah/ei) jah Kogusumma: 5,8 */

Kui soovida üksikutest osadest summat kokku arvutada nagu ülal näites, siis on küllalt tavaline, et iga küsimuse peal otsustatakse, kas ja mida selle juures teha. Siin nagu näha - juhul kui kilekott ostetakse lisaks, siis pannakse hinnale 70 senti juurde. summa=summa+0.70

tähendab just seda. 4.1.1 Ülesandeid    

5

Küsi temperatuur ning teata, kas see on üle kaheksateistkümne kraadi (soovitav toasoojus talvel). Küsi inimese pikkus ning teata, kas ta on lühike, keskmine või pikk (piirid pane ise paika). Küsi inimeselt pikkus ja sugu ning teata, kas ta on lühike, keskmine või pikk (mitu tingimusplokki võib olla üksteise sees). Küsi inimeselt poes eraldi kas ta soovib osta piima, saia, leiba. Löö hinnad kokku ning teata, mis kõik ostetud kraam maksma läheb.

Kordused Arvutist on enamjaolt kasu siis, kui ta meie eest mõned sellised tööd ära teeb, kus enesel tarvis ükshaaval ja üksluiselt sama toimetust ette võtta. Ühest hinnast paarikümne protsendi maha arvutamisega saab ka käsitsi mõne ajaga hakkama. Kui aga hindu on mitukümmend, siis on päris hea meel, kui arvuti selle töö meie eest ära teeb. Järgnevalt näide, kuidas arvuti vastu tulevale viiele matkajale tere ütleb. Täisarvuline muutuja nimega nr näitab, mitmenda matkaja juures parajasti ollakse. Käskluse while juurde kuuluvat plokki saab korrata. Plokk läbitakse üha uuesti juhul, kui ümarsulgudes olev tingimus on tõene. Et kordusi soovitud arv saaks, on juba programmeerija hoolitseda. Selleks on siin igal korral pärast tervitust käsklus nr=nr+1, ehk siis suurendatakse matkaja järjekorranumbrit. Kui see suurendamine kogemata tegemata jääks, siis jääkski arvuti igavesti esimest matkajat teretama (proovi järele). Nüüd aga töötav korduste näide: using System; public class Kordus1{

8


public static void Main(string[] arg){ int nr=1; while(nr<=5){ Console.WriteLine("Tere, {0}. matkaja!", nr); nr=nr+1; } } }

Ning tema väljund: D:\kodu\0606\opikc#>Kordus1 Tere, 1. matkaja! Tere, 2. matkaja! Tere, 3. matkaja! Tere, 4. matkaja! Tere, 5. matkaja!

Heal lapsel mitu nime. Ehk ka korduste kirja panekuks on mitu moodust välja mõeldud. Algul näidatud while-tsükkel on kõige universaalsem, selle abil on võimalik iga liiki kordusi kokku panna. Sama tulemuse aga saab mõnevõrra lühemalt kirja panna for-i abil. Levinud kordusskeemi jaoks on välja mõeldud omaette käsklus, kus algul luuakse muutuja ja antakse talle algväärtus; seejärel kontrollitakse, kas järgnevat plokki on vaja täita; lõpuks võetakse ette toiming andmete ettevalmistamiseks uue ploki jaoks. nr++ on sama, mis nr=nr+1 - ehk siis suurendatakse muutuja väärtust ühe võrra. Näha programminäide: using System; public class Kordus2{ public static void Main(string[] arg){ for(int nr=1; nr<=5; nr++){ Console.WriteLine("Tere, {0}. matkaja!", nr); } } }

ning tema väljund: D:\kodu\0606\opikc#>Kordus2 Tere, 1. matkaja! Tere, 2. matkaja! Tere, 3. matkaja! Tere, 4. matkaja! Tere, 5. matkaja!

9


6

Korrutustabel ... ehk näide, kuidas eelnevalt vaadatud tarkused ühe programmi sisse kokku panna ning mis selle peale ka midagi tarvilikku teeb. Algul on näha, kuidas otse programmi käivitamise juures ka mõned andmed sinna kätte anda. Et kui kirjutan Korrutustabel 4 5

siis saadakse sellest aru, et soovin korrutustabelit nelja rea ja viie veeruga. Nende käsurea parameetrite püüdmiseks on alamprogramm Main-i ümarsulgudes koht string[] argumendid. Kõik käsureale kirjutatud sõnad (ka üksik number on arvuti jaoks sõna) pannakse sinna argumentide massiivi ehk jadasse, kust neid järjekorranumbri järgi kätte saab. Andmetüüp string[] tähendabki, et tegemist on stringide ehk sõnede ehk tekstide massiiviga. Kirjutades massiivi järgi .Length, saab teada, mitu elementi selles massiivis on mis praegusel juhul on võrdne lisatud sõnade arvuga käsureal. Kõik sõnad saab ka ükshaaval järjekorranumbri järgi kätte. Arvestama peab ainult, et sõnu hakatakse lugema numbrist 0. Nii et kui eeldatakse, et tegemist on kahe parameetriga, siis nende kättesaamiseks peame ette andma numbrid null ja üks. Nagu tingimusest on näha: juhul kui argumente pole täpselt kaks, siis kasutatakse vaikimisi ridade ja veergude arvu ning joonistatakse korrutustabel suurusega 10 korda 10. Tabeli trükkimiseks on kaks for-tsüklit paigutatud üksteise sisse. Selles pole midagi imelikku - iga rea juures trükitakse kõik veerud esimesest kuni viimaseni. Ning selleks, et erinevate numbrite arvuga arvud meie tabelit sassi ei lööks, on väljatrüki juurde vorminguks kirjutatud {0, 5}. Ainsat Console.Write argumenti (järjekorranumbriga 0) trükitakse nõnda, et ta võtaks alati viis kohta. using System; class Korrutustabel{ public static void Main(string[] argumendid){ int ridadearv=10, veergudearv=10; if(argumendid.Length==2){ ridadearv=int.Parse(argumendid[0]); veergudearv=int.Parse(argumendid[1]); } for(int rida=1; rida<=ridadearv; rida++){ for(int veerg=1; veerg<=veergudearv; veerg++){ Console.Write("{0, 5}", rida*veerg); //5 kohta } Console.WriteLine(); } } }

10


/* C:\Projects\oma\naited>Korrutustabel 1 2 3 4 5 6 7 8 2 4 6 8 10 12 14 16 3 6 9 12 15 18 21 24 4 8 12 16 20 24 28 32 5 10 15 20 25 30 35 40 6 12 18 24 30 36 42 48 7 14 21 28 35 42 49 56 8 16 24 32 40 48 56 64 9 18 27 36 45 54 63 72 10 20 30 40 50 60 70 80 C:\Projects\oma\naited>Korrutustabel 4 5 1 2 3 4 5 2 4 6 8 10 3 6 9 12 15 4 8 12 16 20 */

7

9 18 27 36 45 54 63 72 81 90

10 20 30 40 50 60 70 80 90 100

Alamprogramm Nii nagu algul kirjas, nii ka siin tasub meeles pidada, et programmid armastavad paisuda ja paisuda. Seepärast tuleb leida mooduseid, kuidas üha suuremaks kasvavas koodihulgas orienteeruda. Alamprogramm on esmane ja hea vahend koodi sisse uppumise vältimiseks. Lisaks võimaldab ta terviklikke tegevusi eraldi ning mitu korda välja kutsuda. Samuti on ühe alamprogrammi tööd küllalt hea testida. Järgnevalt võimalikult lihtne näide, kuidas omaette tegevuse saab alamprogrammiks välja tuua. Siin on selliseks tegevuseks korrutamine. Luuakse käsklus nimega Korruta, talle antakse ette kaks täisarvu nimedega arv1 ja arv2 ning välja oodatakse sealt ka tulema täisarv. using System; class Alamprogramm{ static int Korruta(int arv1, int arv2){ return arv1*arv2; } public static void Main(string[] arg){ int a=4; int b=6; Console.WriteLine("{0} korda {1} on {2}", a, b, Korruta(a, b)); Console.WriteLine(Korruta(3, 5)); } } /* C:\Projects\oma\naited>Alamprogramm 4 korda 6 on 24 15 */

11


7.1 Ülesandeid   

8

Koosta alamprogramm kahe arvu keskmise leidmiseks. Koosta alamprogramm etteantud arvu tärnide väljatrükiks. Katseta. Küsi inimeselt kolm arvu. Iga arvu puhul joonista vastav kogus tärne ekraanile.

Massiivid Kuna arvuti on mõeldud suure hulga andmetega ümber käimiseks, siis on programmeerimiskeelte juurde mõeldud ka vahendid nende andmehulkadega toimetamiseks. Kõige lihtsam ja levinum neist on massiiv. Iga elemendi poole saab tema järjekorranumbri abil pöörduda. Algul tuleb määrata, millisest tüübist andmeid massiivi pannakse ning mitu kohta elementide jaoks massiivis on. Järgnevas näites tehakse massiiv kolme täisarvu hoidmiseks. Kusjuures nagu Cprogrammeerimiskeele sugulastele kombeks on, hakatakse elemente lugema nullist. Nii et kolme massiivielemendi puhul on nende järjekorranumbrid 0, 1 ja 2. Tahtes väärtusi sisse kirjutada või massiivist lugeda, tuleb selleks kirja panna massiivi nimi (praeguse juhul m) ning selle taha kandiliste sulgude sisse järjekorranumber, millise elemendiga suhelda tahetakse. using System; class Massiiv1{ public static void Main(string[] arg){ int[] m=new int[3]; m[0]=40; m[1]=48; m[2]=33; Console.WriteLine(m[1]); } } /* C:\Projects\oma\naited>Massiiv1 48 */

8.1 Tsükkel andmete kasutamiseks Massiivi kõikide elementidega kiiresti suhtlemisel aitab tsükkel. Siin näide, kuidas arvutatakse massiivi elementidest summa. Algul võetakse üks abimuutuja nulliks ning siis liidetakse kõikide massiivi elementide väärtused sellele muutujale juurde. Avaldis summa+=m[i] on pikalt lahti kirjutatuna summa=summa+m[i] ning tähendab just olemasolevale väärtusele otsa liitmist. for-tsükli juures kõigepealt võetakse loendur (sageli kasutatakse tähte i) algul nulliks, sest nullist hakatakse massiivi elemente lugema. Jätkamistingimuses kontrollitakse, et on veel läbi käimata elemente ehk loendur on väiksem kui

12


massiivi elementide arv (massiivinimi.Length). Pärast iga sammu suurendatakse loendurit (i++). Nõnda ongi summa käes. using System; class Massiiv2{ public static void Main(string[] arg){ int[] m=new int[3]; m[0]=40; m[1]=48; m[2]=33; int summa=0; for(int i=0; i<m.Length; i++){ summa+=m[i]; } Console.WriteLine(summa); } } /* C:\Projects\oma\naited>Massiiv2 121 */

8.2 Massiiv ja alamprogramm Nagu ennist kirjutatud, saab eraldiseisva toimingu kergesti omaette alamprogrammi tuua. Siin on nõnda eraldatud summa leidmine. Massiive saab alamprogrammile samuti ette anda nagu tavalisi muutujaid. Lihtsalt andmetüübi taga on kirjas massiivi tunnusena kandilised sulud. using System; class Massiiv3{ static int LeiaSumma(int[] mas){ int summa=0; for(int i=0; i<mas.Length; i++){ summa+=mas[i]; } return summa; } public static void Main(string[] arg){ int[] m=new int[3]{40, 48, 33}; int vastus=LeiaSumma(m); Console.WriteLine(vastus); } } /* C:\Projects\oma\naited>Massiiv3 121 */

13


8.3 Algväärtustamine, järjestamine Kui massiivi elementide väärtused on kohe massiivi loomise ajal teada, siis saab nad loogelistes sulgudes komadega eraldatult kohe sisse kirjutada. Nii saab andmed lihtsalt lühemalt kirja panna. Kui elemendid on lihtsa võrdlemise teel järjestatavad nagu näiteks täisarvud, siis piisab nende rittaseadmiseks klassi Array ainsast käsust Sort. using System; class Massiiv4{ public static void Main(string[] arg){ int[] m=new int[3]{40, 48, 33}; Array.Sort(m); for(int i=0; i<m.Length; i++){ Console.WriteLine(m[i]); } } } /* C:\Projects\oma\naited>Massiiv4 33 40 48 */

8.4 Osutid ja koopiad Kui ühe hariliku täisarvulise muutuja väärtus omistada teisele, siis mõlemas muutujas on koopia samast väärtusest ning toimingud ühe muutujaga teise väärtust ei mõjuta. Massiividega ning tulevikus ka muude objektidega tuleb tähelepanelikum olla. Kui üks massiiv omistada teisele, siis tegelikult kopeeritakse vaid massiivi osuti, mõlema muutuja kaudu pääsetakse ligi tegelikult samadele andmetele. Nagu järgnevas näites: massiivid m2 ja m näitavad samadele andmetele. Kui ühe muutuja kaudu andmeid muuta, siis muutuvad ka teise muutuja kaudu nähtavad andmed nagu väljatrüki juures paistab. Algselt on massiivi m ja m2 elemendid 40, 48, 33. Pärast massiivi m elemendi number 1 muutmist 32ks, on ka massiivi m2 elemendid muutunud - väärtusteks 40, 32, 33. Nõnda on suurte andmemassiivide juures teise muutuja tegemine andmete juurde pääsemiseks arvuti jaoks kerge ülesanne. Samas aga peab vaatama, et vajalikke andmeid kogemata ettevaatamatult ei muudaks. int[] m=new int[3]{40, 48, 33}; int[] m2=m; //Viide samale massiivile Tryki(m2); m[1]=32; Tryki(m2);

14


Kui soovida, et kaks algsetest andmetest pärit massiivi on üksteisest sõltumatud, siis tuleb teha algsest massiivist koopia (kloon). int[] m3=(int[])m.Clone(); //Andmete koopia m[1]=20; Tryki(m3);

Pärast kloonimist muutused massiiviga m enam massiivi m3 väärtusi ei mõjuta. Soovides massiivi tühjendada, aitab klassi Array käsklus Clear, mis täisarvude puhul kirjutab etteantud vahemikus (ehk praegusel juhul kogupikkuses, 0 ja Length-i vahel) täisarvude puhul väärtusteks nullid. Array.Clear(m3, 0, m3.Length); //Tühjendus

Massiivist andmete otsimiseks sobib käsklus IndexOf. Soovitud elemendi leidumise korral väljastatakse selle elemendi järjekorranumber. Otsitava puudumisel aga -1. Console.WriteLine(Array.IndexOf(m,33)); Console.WriteLine(Array.IndexOf(m,17)); //puuduv element using System; class Massiiv5{ static void Tryki(int[] mas){ for(int i=0; i<mas.Length; i++){ Console.WriteLine(mas[i]); } Console.WriteLine(); } public static void Main(string[] arg){ int[] m=new int[3]{40, 48, 33}; int[] m2=m; //Viide samale massiivile Tryki(m2); m[1]=32; Tryki(m2); int[] m3=(int[])m.Clone(); //Andmete koopia m[1]=20; Tryki(m3); Array.Clear(m3, 0, m3.Length); //Tühjendus Tryki(m3); Console.WriteLine(Array.IndexOf(m,33)); Console.WriteLine(Array.IndexOf(m,17)); //puuduv element } } /* C:\Projects\oma\naited>Massiiv5 40 48 33 40 32

15


33 40 32 33 0 0 0 2 -1 */

8.5 Massiiv alamprogrammi parameetrina Massiivimuutuja omistamisel tekib võimalus kahe muutuja kaudu samadele andmetele ligi pääseda. See võimaldab luua alamprogramme, mis massiivi elementidega midagi peale hakkavad. Eelnevalt vaadeldud käsklus Sort tõstab massiivis elemendid kasvavasse järjekorda. Siin on näha omatehtud alamprogramm KorrutaKahega, mis massiivi kõikide elementide väärtused kahekordseks suurendab. using System; class Massiiv6{ static void KorrutaKahega(int[] mas){ for(int i=0; i<mas.Length; i++){ mas[i]=mas[i]*2; } } static void Tryki(int[] mas){ for(int i=0; i<mas.Length; i++){ Console.WriteLine(mas[i]); } Console.WriteLine(); } public static void Main(string[] arg){ int[] m=new int[3]{40, 48, 33}; KorrutaKahega(m); Tryki(m); } } /* C:\Projects\oma\naited>Massiiv6 80 96 66 */

8.6 Foreach - tsükkel Kui on vaja kogumi kõik elemendid läbi käia, kuid samas pole tähtis läbikäigu järjekord, siis sellisel puhul aitab all näites foreach-tsükkel. Selle abi saab näiteks summa arvutamise juures pruukida.

16


using System; class Massiiv7{ public static void Main(string[] arg){ int[] m=new int[3]{40, 48, 33}; foreach(int arv in m){ Console.WriteLine(arv); } } } /* C:\Projects\oma\naited>Massiiv7 40 48 33 */

8.7 Mitmemõõtmeline massiiv Massiivis võib mõõtmeid olla märgatavalt rohkem kui üks. Kahemõõtmelist massiivi saab ette kujutada tabelina, milles on read ja veerud. Kolmemõõtmelise massiivi elemendid oleksid nagu tükid kuubis, mille asukoha saab määrata pikkuse, laiuse ja kõrguse kaudu. Harva läheb vaja enam kui kolme mõõdet - siis on sageli juba otstarbekam ja arusaadavam oma andmestruktuur ehitada. Kasutamine toimub aga nii, nagu allpool näites näha. Massiivi elementidega saab ümber käia nagu tavaliste muutujatega. foreach-tsükliga saab soovi korral läbi käia ka mitmemõõtmelise massiivi kõik elemendid. using System; class Massiiv8{ public static void Main(string[] arg){ int[,] m=new int[2,3]{ {40, 48, 33}, {17, 23, 36} }; Console.WriteLine(m[0, 1]); //48 Console.WriteLine("M66dete arv: "+m.Rank); Console.WriteLine("Ridade arv: "+m.GetLength(0)); Console.WriteLine("Veergude arv: "+m.GetLength(1)); //elemente mõõtmes nr. 1 int summa=0; foreach(int arv in m){ summa+=arv; } Console.WriteLine("Summa: "+summa); } } /* C:\Projects\oma\naited>Massiiv8 48 M66dete arv: 2 Ridade arv: 2 Veergude arv: 3 Summa: 197 */

17


8.7.1 Ülesandeid Küsi kasutaja käest viis arvu ning väljasta need tagurpidises järjekorras. Loo alamprogramm massiivi väärtuste aritmeetilise keskmise leidmiseks. Katseta. Loo alamprogramm, mis suurendab kõiki massiivi elemente ühe võrra. Katseta. Sorteeri massiiv ning väljasta selle keskmine element. Koosta kahemõõtmeline massiiv ning täida korrutustabeli väärtustega. Küsi massiivist kontrollimiseks väärtusi.

    

9

Käsud mitmes failis Suuremate programmide puhul on täiesti loomulik, et kood jagatakse mitme faili vahel. Nii on hea jaotuse puhul kergem orienteeruda. Samuti on mugav terviklike tegevuste plokke muudesse programmidesse ümber tõsta, kui see peaks vajalikuks osutuma. Siin näites on kaks lihtsat arvutustehet omaette abivahendite klassis välja toodud. class Abivahendid{ public static int korruta(int a, int b){ return a*b; } public static int liida(int a, int b){ return a+b; } }

Abivahendeid kasutav alamprogramm asub aga hoopis eraldi klassis ja failis. using System; class Abivahendiproov{ public static void Main(string[] arg){ Console.WriteLine(Abivahendid.korruta(3, 6)); } }

Kui tahta, et kompilaator vajalikud osad üles leiaks, tuleb kompileerimisel ette anda kõikide vajaminevate failide nimed. C:\Projects\oma\naited>csc Abivahendid.cs Abivahendiproov.cs Microsoft (R) Visual C# 2005 Compiler version 8.00.50727.42 for Microsoft (R) Windows (R) 2005 Framework version 2.0.50727 Copyright (C) Microsoft Corporation 2001-2005. All rights reserved.

Lõpliku, exe-faili nimi määratakse vaikimisi faili järgi, kus oli kirjas Main-meetod. 18


C:\Projects\oma\naited>Abivahendiproov 18

9.1 Ülesandeid  

Lisa käsklus täisarvude astendamiseks tsükli abil. Katseta. Lisa kolmas fail paari tärnidest kujundeid joonistava funktsiooniga. Katseta peaprogrammis mõlema abifaili funktsioonide väljakutseid.

10 Tekst Teksti koostamise, analüüsimise ja muutmisega puutuvad kokku enamik arvutiprogramme. Järgnevalt mõned näited, mille põhjal saab enamiku vajalikke tekstiga seotud toimetusi korda. Teksti pikkuse saab kätte muutujast Length. Loetakse kokku kõik tekstis leiduvad sümbolid, kaasaarvatud tühikud. Tekstist lõigu eraldamiseks sobib Substring. Esimese parameetrina olev arv näitab, mitmendast tähest hakatakse andmeid võtma, teine näitab, mitu tähte võetakse. String ehk sõne algab tähega number 0. Nii lugedes ongi sõna "tuli" algustäht järjekorranumbriga 5. võimaldab tekstis tähte või sõna leida. Leidmise korral väljastatakse leitud jupi algustähe järjekorranumber. Otsitava puudumise tulemusena väljastatakse -1. IndexOf

using System; class Tekst1{ public static void Main(string[] arg){ string s="Juku tuli kooli"; Console.WriteLine("Pikkus: "+s.Length); Console.WriteLine(s.Substring(5, 4)); Console.WriteLine("'tuli' kohal "+s.IndexOf("tuli")); } } /* C:\Projects\oma\naited>Tekst1 Pikkus: 15 tuli 'tuli' kohal 5 */

19


10.1 Muutmine Teksti muutmiseks sobivad käsud Insert ja Remove. Esimene lisab soovitud kohale juurde etteantud teksti. Lausest "Juku tuli kooli" sai üheksandale kohale sõna " vara" lisamisel lause "Juku tuli vara kooli". Remove võimaldab sobivast kohast tähti välja võtta. Tehniliselt vaadates käsud Insert ja Remove ei muuda algses muutujas olevat teksti, vaid luuakse uus tekstiplokk mälus, mille poole on võimalik muutuja kaudu pöörduda. Muutujas s on endiselt "Juku tuli kooli". Vaid s2 ja s3 on uute väärtustega. Tekstiga ümber käimiseks on ka mitukümmend muud käsklust, millega lähemat http://msdn2.microsoft.com/entutvust teha saab veebiaadressilt us/library/system.string_methods.aspx Levinumatest on siin näha StartsWith alguse kontrolliks, IndexOf teksti otsinguks ja Replace asendamiseks. Aja jooksul läheb aga vaja tõenäoliselt meetodit Compare järjestuse kindlaks tegemisel, EndsWith lõpu kontrollimisel, Trim tühikute eemaldamisel, ToUpper ja ToLower suur- ja väiketähtedeks muutmisel ning ToCharArray juhul, kui soovitakse tervikliku teksti asemel tähemassiivi kasutada (näiteks tähtede massiliseks ümbertõstmiseks). using System; class Tekst2{ public static void Main(string[] arg){ string s="Juku tuli kooli"; Console.WriteLine("Pikkus: "+s.Length); Console.WriteLine(s.Substring(5, 4)); Console.WriteLine("'tuli' kohal "+s.IndexOf("tuli")); string s2=s.Insert(9, " vara"); Console.WriteLine(s2); string s3=s.Remove(5, 5); //Kuuendast alates viis tähte Console.WriteLine(s3); if(s.StartsWith("Juku")){ Console.WriteLine("Algab Jukuga"); } if(s.IndexOf("kala")==-1){ Console.WriteLine("Siin ei ole kala"); } Console.WriteLine(s.Replace("tuli", "jooksis")); } } /* C:\Projects\oma\naited>Tekst2 Pikkus: 15 tuli 'tuli' kohal 5 Juku tuli vara kooli Juku kooli Algab Jukuga Siin ei ole kala Juku jooksis kooli */

20


10.2 Tükeldamine Pika teksti osadeks jaotamiseks on mitmetes keeltes olemas vastavad käsud ja objektid. Nii ka siin. Käsuga Split võib olemasoleva teksti määratud sümbolite koha pealt juppideks lõigata. Kõikidest üksikutest tükkidest moodustatakse massiiv. Siin näiteks on eraldajaks koma, mis tähemassiivi üksiku elemendina ette antakse. Aga nagu aimata võib, saab massiivi lisada ka rohkem eraldajaid. Kui on põhjust massiiv uuesti üheks pikaks tekstiks kokku panna, siis selle tarbeks leiab käskluse Join. using System; class Tekst3{ public static void Main(string[] arg){ string s="Tallinn,Tartu,Narva"; string[] linnad=s.Split(new char[]{','}); foreach(string linn in linnad){ Console.WriteLine(linn); } Console.WriteLine(String.Join("; ", linnad)); } } /* D:\kodu\0606\opikc#>Tekst3 Tallinn Tartu Narva Tallinn; Tartu; Narva */

10.2.1

     

21

Ülesandeid Trüki inimese nime eelviimane täht. Teata, kas sisestatud nimi algab A-ga. Trüki sisestatud nimi välja suurtähtedega. Teata, kas lauses leidub sõna "ja". Asenda olemasolu korral "ja" sõnaga "ning" ja teata asendusest. Trüki välja lause kõige pikem sõna.


11 Juhuarv Kui soovida, et arvuti samade algandmete abil erinevalt käituks, tulevad appi juhuarvud. Nende abil saab kasutajale ette anda juhusliku tervituse, muuta soovi järgi pildi värvi, või näiteks kontrollida loodud funktsiooni toimimist mitmesuguste väärtuste juures. Kõigi nende erinevate väljundite aluseks on arvuti poolt loodud juhuarvud. Neid aitab saada nimeruumi System klassi Random eksemplar. Reaalarvu saamiseks on käsklus NextDouble. Kui soovida mõnda muud vahemikku kui nullist üheni, tuleb saadud arv lihtsalt soovitud suurusega läbi korrutada. Ühtlase jaotuse asemele normaal- või mõne muu jaotuse saamiseks tuleb mõnevõrra enam vaeva näha - juhul kui see peaks tarvilikuks osutuma. Täisarv luuakse käsuga Next, andes ette ülempiiri, soovi korral ka alampiiri. Ning sobiva nime, anekdoodi või terviku saamiseks tuleb olemasolevad valitavad objektid paigutada massiivi, leida juhuarv massiivi elementide arvu piires ning võibki sobiva väärtuse välja võtta. using System; public class Juhuarv1{ public static void Main(string[] arg){ Random r=new Random(); Console.WriteLine(r.NextDouble()); //Nullist üheni Console.WriteLine(r.Next(20)); //Täisarv alla 20 Console.WriteLine(r.Next(50, 100)); //Viiekümnest sajani string[] nimed={"Juku", "Kati", "Mati"}; Console.WriteLine(nimed[r.Next(nimed.Length)]); //Juhuslik nimi } } /* D:\kodu\0606\opikc#>Juhuarv1 0,74339002358885 11 95 Kati */

11.1.1 Ülesandeid   

Trüki juhuslike teguritega korrutamisülesanne. Kontrolli, kas kasutaja pakutud vastus oli õige. Sõltuvalt vastuse õigsusest lase arvutil pakkuda olemasolevate hulgast valitud kiitev või julgustav kommentaar.

22


JAAGUP KIPPAR

SILVERLIGHT


Sisukord 1 Sissejuhatus ..................................................................................................................... 4 2 Käivitamine ...................................................................................................................... 4 2.1 Ülesandeid ............................................................................................................... 5 3 Hiirevajutusel tekkivad ruudud................................................................................. 6 3.1 Ülesandeid ............................................................................................................... 9 3.2 Ülesandeid .............................................................................................................11 3.3 Näidislahendus .....................................................................................................11 4 Liikuv ruut.......................................................................................................................13 4.1 Ülesandeid .............................................................................................................15 5 Liigutatav ruut...............................................................................................................16 5.1 Ülesandeid .............................................................................................................18 6 Soovitud arv ruute.......................................................................................................18 6.1 Ülesandeid .............................................................................................................21 7 Soovitud arv omaloodud komponente ...............................................................21 7.1 Ülesandeid .............................................................................................................24 8 Kujundite joonistamine .............................................................................................24 8.1 Ülesandeid .............................................................................................................27 9 Hiiretundlikud kujundid ............................................................................................27 9.1 Ülesandeid .............................................................................................................30 10 Jututahvli abil liigutamine ........................................................................................30 10.1

Ülesandeid ........................................................................................................31

2


11 Jututahvli abil keeramine ..........................................................................................32 11.1

Ă&#x153;lesandeid ........................................................................................................34

12 Piltide vahetus ..............................................................................................................34 12.1

3

Ă&#x153;lesandeid ........................................................................................................37


1

Sissejuhatus Järgnevalt tutvustatakse, kuidas programmeerimisvahendite abil Silverlightiga sagedamini ette tulevaid toimetusi tehakse.

2

Käivitamine Mobiiliarenduse tarbeks loodud express-arendusvahendis on selle tarbeks mitmeid algmalle välja pakutud. Kõige lihtsamaks ja „puhtamaks“ neist on Windows Phone Application.

Rakenduse loomise juures palutakse valida ka telefoni operatsioonisüsteemi täpsem versioon.

Avanevas aknas ongi juba kasutada käivituva mobiilirakenduse kood. Käivituva rakenduse võimalik ekraanipilt sealsamas kõrval nähtav. Välimine element näitab, et tegemist mobiilis käivituva koodiga. Edasised elemendid on aga juba samasugused sõltumata lahenduse käivituskohast. Vaikimisi paigutushalduriks on Grid, kus võimalik elemente tabelina paigutada.

4


Rakenduse struktuuri poolest esialgu põhilise tähtsusega kood on failis MainPage.xaml. Sinna juurde kuulovad C# koodilõigud paigutuvad MainPage.xaml.cs-faili. Rakenduse suhtes üldised käsklused on App.xaml-i juures. Pildid ja muud staatiliselt kaasas olevad lisandfailid asuvad samuti rakenduse puus.

2.1 Ülesandeid   

5

Loo lihtne rakendus. Käivita rakendus emulaatoril, veendu selle toimimises. Muuda ära etteantud pealkiri.


3

Hiirevajutusel tekkivad ruudud Ekraanil millegi joonistamiseks ning selle asukoha määramiseks pikslite kaupa sobib lõuend ehk Canvas. Selle poole programmikoodis pöördumiseks on kasulik lõuendile panna nimi (x:Name), siin näiteks on nimeks enamasti juur. Ka on lõuendile antud taustavärv – süsteemi omapärana on vaid sel juhul võimalik lõuendi abil mitmesuguseid sündmusi ning hiire/näpuvajutusi kinni püüda. Omadus MouseLeftButtonDown määrab, millise nimega funktsioon xaml-i käivitatakse. Siin puhul siis juurde kuuluvas cs-failis LayoutRoot_MouseLeftButtonDown. Automaatselt genereerides küll püütakse nimed ja seosed enamvähem arusaadavateks jätta. Kuid iseenesest on tegemist vaid nimedega ning neid saab vajadusel muuta, samuti näiteks mõnda funktsiooni mitme eri sündmuse peale välja kutsuda. <phone:PhoneApplicationPage x:Class="PhoneApp1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed--> <Canvas x:Name="juur" MouseLeftButtonDown="LayoutRoot_MouseLeftButtonDown" Width="auto">

Background="LightGray" Height="auto"

</Canvas>

</phone:PhoneApplicationPage>

6


Programmikoodi cs-failis kirjeldatakse siis lähemalt ära mitmesugused lehe juures vajalikud toimetused. Automaatselt tõmmatakse sinna sisse hulgem nimeruume, mis rakenduse loomise juures võiksid kasulikuks osutuda. Hiljem saab seda loetelu vajadusel täiendada või puhastada. Konstruktoris ehk klassiga samanimelises käskluses olev InitializeComponent laseb xaml-failis paikneva paigutuse paika sättida. Kõiksugu muud käsklused on juba lahenduse enese sobivamaks muutmiseks kasutatavad. Siin näites siis lisati funktsioon LayoutRoot_MouseLeftButtonDown, mille esimene parameeter (sender) määrab sündmuse allika/alustaja ning teine võimalikud lisaparameetrid – näiteks, et kas tegemist ühekordse või topeltklõpsuga. Allikas näitab enamasti, et millist lehel olevat elementi tabagi – vajalik näiteks juhul, kui vaja eristada, millist lehel olevat nuppu vajutati. Siin näites luuakse iga vajutuse peale ristkülik – class Rectangle on kättesaadav System.Windows.Shapes nimeruumist. Hetkel tehakse ta seest punane ning laiuse ja kõrgusega 20 ekraanipunkti. Ekraanil paigutamiseks on käsud Canvas.setLeft ning Canvas.setTop – erinevalt mõnest muust programmeerimisvahendist on siin paigutuse andmed mitte elemendi enese, vaid teda ümbritseva lõuendi hallata. Iga elemendi loomisel tuleb hoolitseda, et see ka rakenduse kujundusosa külge liidetakse – siin siis juur.Children.Addkäsklus selle tarbeks. using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls;

namespace PhoneApp1 { public partial class MainPage : PhoneApplicationPage {

7


// Constructor public MainPage() { InitializeComponent(); } private void MouseButtonEventArgs e)

LayoutRoot_MouseLeftButtonDown(object

sender,

{ Rectangle r = new Rectangle(); r.Fill = new SolidColorBrush(Colors.Red); r.Width = 20; r.Height = 20; Canvas.SetLeft(r, e.GetPosition(juur).X); Canvas.SetTop(r, e.GetPosition(juur).Y); juur.Children.Add(r); } } }

Tulemuseks rakendus, kus vajutuste kohale tekivad ruudud.

8


3.1 Ülesandeid   

Muuda iga järgnev ruut eelmisest veidi väiksemaks. Ruutude asemele tekivad ellipsid/ringid (klass Ellipse samade parameetritega kui Rectangle). Vajutuste tulemusena tekib kindla kujuga pilt (nt. klotsidest robot), iga vajutusega lisandub üks klots.

Andmete sisestus Järgnev kood seletab, kuidas sisestatud tollide arvust sentimeetrid leida – ehk siis universaalne näide andmete sisestamiseks, arvutamiseks ning tulemuste väljastamiseks. Lõpptulemus pildina järgmine:

Vastuse näitamiseks kasutatakse TextBlock-i, sisestamiseks TextBox-i, koodi käivitamiseks nupp. Kui tahta elementi pikslite kaupa paigutada, siis aitavad selleks parameetrid Canvas.Top ja Canvas.Left – sarnaselt kui ennist programmikoodi abil asju paika sätiti. Ning nagu aimata võib, siis nupp1_Click viitab koodifailis samanimelisele alamprogrammile. Pikast elemendi koodist siia vaid sisemine lõuendi osa välja toodud. xaml: <Canvas> <TextBlock x:Name="plokk1" Canvas.Top="10" Canvas.Left="20" Width="200" Height="50" > </TextBlock> <Button x:Name="nupp1" Content="Arvuta sentimeetriteks" Canvas.Top="40"

Canvas.Left="20"

></Button> <TextBox x:Name="txttollid" Width="200" Canvas.Top="40" Canvas.Left="150" /> </Canvas>

9

Click="nupp1_Click"


Arvuti jaoks on tekstid ja arvud erinevad. Seetõttu tuleb siin hoolitseda, et sisend kõigepealt tekstist arvuks muudetaks ning pärast kuvamiseks tulemus taas tagasi tekstiks tehtaks. Andmete muundamiseks suhteliselt universaalne klass on Convert. Kui midagi on vaja aga tekstiks ehk stringiks teha, siis selleks aitab üldjuhul iga objekti küljes kasutada olev käsklus ToString(). cs: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class NupudLouendil : UserControl { public NupudLouendil() { InitializeComponent(); }

private void nupp1_Click(object sender, RoutedEventArgs e) { double cm = Convert.ToDouble(txttollid.Text) * 2.54; plokk1.Text = cm.ToString(); }

10


} }

3.2 Ülesandeid  

Väljasta kahe sisestatud arvu korrutis. Võimalda kasutajal arvu abil määrata ekraanil oleva ruudu külje pikkus.

3.3 Näidislahendus Ruudus suuruse muutmise näide.

<Grid x:Name="juur" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition /> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Orientation="Horizontal"> <TextBox x:Name="txtSuurus" KeyDown="txtSuurus_KeyDown"></TextBox>

Text="100"

Width="100"

<TextBlock>Sisestuseks enter</TextBlock> </StackPanel> <Rectangle x:Name="ruut1" Fill="Green" Grid.Row="1"></Rectangle>

11

Width="100"

Height="100"


</Grid> using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class RuuduSuurus : UserControl { public RuuduSuurus() { InitializeComponent(); }

private void txtSuurus_KeyDown(object sender, KeyEventArgs e) { if (e.Key == Key.Enter) { int kyljepikkus = Convert.ToInt32(txtSuurus.Text); ruut1.Width = kyljepikkus; ruut1.Height = kyljepikkus; } } } }

12


Ruudu suurust on võimalik ka otse tekstivälja väärtusega siduda. Siin näites siis ruudu omadus Width loetakse otse tekstikastist nimega txtSuurus. <Grid x:Name="juur" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition /> </Grid.RowDefinitions> <StackPanel Grid.Row="0" HorizontalAlignment="Center"> <TextBox

x:Name="txtSuurus"

Orientation="Horizontal" Text="100"

Width="100"

></TextBox>

</StackPanel> <Rectangle x:Name="ruut1" Width="{Binding ElementName=txtSuurus}" Height="100" Fill="Green" Grid.Row="1" ></Rectangle> </Grid>

4

Liikuv ruut

Pildina näha ruut kord ühes kohas

mõnigase ajaga aga sõidab teine sujuvalt natukese maad edasi.

13

Text,


Ruudu ekraanile kuvamiseks piisab vaid lõuendi sisse vastavast Rectanglekäsust.

<Canvas x:Name="juur"> <Rectangle Height="100" />

x:Name="ruut1"

Fill="Green"

Width="100"

</Canvas>

Kella järgi millegi iseeneslikult liikuma panekuks sobib DispatcherTimer. Tuleb talle teada anda, kui sageli miskit funktsiooni käivitama asuda. Ning edasi selle sisse saab juba koodi kirjutada, milliseid elemente ja kuhu liigutada soovitakse. Taimeri käivitamiseks vajalikud käsud tuleb InitializeComponent-käskluse järele konstruktorisse – nõnda saab kindel olla, et need rakenduse juures vaid ühe korra käivituvad ning tegemist on meil üheaegselt ühe taimeriga. Praegusel juhul iga tiksu puhul suurendatakse ruudu x-koordinaati ning tulemuseks võibki näha vaikselt paremale liikuvat ruutu. using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class RuuduLiikumine : UserControl { int x = 0; public RuuduLiikumine()

14


{ InitializeComponent(); System.Windows.Threading.DispatcherTimer System.Windows.Threading.DispatcherTimer(); kell.Interval

=

new

TimeSpan(0,

0,

0,

kell 0, 100);

= //

new 100

Milliseconds kell.Tick += new EventHandler(tiks); kell.Start(); } public void tiks(object o, EventArgs saatja) { x++; Canvas.SetLeft(ruut1, x); }

} }

4.1 Ülesandeid    

15

Pane ruut liikuma ülevalt alla. Pane ekraanile korraga liikuma kaks ruutu – üks alla, teine üles. Pane ruut liikuma mööda ruudukujulist trajektoori – alla, vasakule, paremale, üles. Loo illusioon ruudu lähenemisest ja kaugenemisest: alla, väiksemaks (kaugemale), üles, suuremaks (lähemale). Kaugusefekti saavutamiseks võib kauguse koordinaatide keskpunktist läbi jagada kujundi kaugusega Z-teljel. Katseta ringjoonelist liikumist (x=raadius*sin(nurk), y=raadius*cos(nurk)).


5

Liigutatav ruut Järgnevas näites saab ekraanil olevaid ruute hiirega liigutada

Xaml-fail püsib lihtsana. Vaid lõuend ning käsklus seal peal hiire liikumise jälgimiseks. <Canvas x:Name="juur" Background="LightGray" Width="auto" MouseMove="juur_MouseMove">

Height="auto"

</Canvas>

Programmikood aga mõnevõrra pikem. Abivahenditeks juhuarvude generaator ning meelespeetav ruut. Juhuarvude generaator võimaldab ruudud juhuslikult mööda ekraani paigutada. rnd.Next(200) annab igale loodud ruudule juhusliku asukoha mõlemal teljel nulli ja 200 vahel. Iga ristküliku külge kinnitatakse ka hiirekuular, et oleks võimalik hiirevajutustele reageerida. Operaator += lisab sündmuse vastava elemendi, praegusel juhul loodud ristküliku külge. Funktsiooni hiir_alla esimese parameetri tüübiks on object. Et me aga teame, et hiirekuularid on vaid ristkülikutel, siis saame käsuga saatja as Rectangle vastava tüübi ära muuta ning tulemuse Rectangle-tüüpi muutujale omistada. Sealtkaudu võimalik siis hiljem tema asukohta ja omadusi muuta. Funktsioon hiir_yles määrab meelespeetava ruudu tühiviidaks (null) ning enam midagi ei liigutata. Kui aga üks ruut on meeles, siis ta liigub vastavalt hiire/näpu liikumisele kaasa. using System;

16


using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class RuuduHiir : UserControl { Random rnd = new Random(); Rectangle meeles = null; public RuuduHiir() { InitializeComponent(); for (int i = 0; i < 10; i++) { Rectangle r = new Rectangle(); r.Fill = new SolidColorBrush(Colors.Red); r.Width = 20; r.Height = 20; Canvas.SetLeft(r, rnd.Next(200)); Canvas.SetTop(r, rnd.Next(200)); juur.Children.Add(r); r.MouseLeftButtonDown MouseButtonEventHandler(hiir_alla); r.MouseLeftButtonUp MouseButtonEventHandler(hiir_yles); }

17

+= +=

new new


} private void hiir_alla(object saatja, MouseButtonEventArgs e) { meeles = saatja as Rectangle; }

private void hiir_yles(object saatja, MouseButtonEventArgs e) { meeles = null; }

private void juur_MouseMove(object sender, MouseEventArgs e) { if (meeles != null) { Canvas.SetLeft(meeles, e.GetPosition(null).X); Canvas.SetTop(meeles, e.GetPosition(null).Y); } }

} }

5.1 Ülesandeid   

6

Iga vajutuse peale läheb liigutatav ruut veidi väiksemaks. Piisavalt väikeseks muudetud ruut kaob ekraanilt. Kui vajutatakse ruudust mööda, siis tekib uus ruut ekraanile sinna kohta juurde.

Soovitud arv ruute Kui mõnda tegevust tuleb korrata ning eriti, kui selle juures pole lõplik arv ette teada – sellisel juhul on heaks abiliseks tsüklid. Loodava näite juures määrab

18


kasutaja, mitu ruutu ta soovib näha ning programm teeb talle vastava koguse ruute.

Andmete sisestamiseks tekstikast ja nupp, tulemuse joonistamiseks Canvas ehk lõuend. <Grid x:Name="juur" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition /> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Orientation="Horizontal"> <TextBox x:Name="txtKogus" Text="5" Width="100"></TextBox> <Button Content="Joonista" Click="Button_Click" /> </StackPanel> <Canvas Grid.Row="1" x:Name="ala1"></Canvas>

Height="auto"

Width="auto"

</Grid>

Ruutude joonistamiseks nupuvajutuse külge vastav käsklus. Children.Clear() ütleb et lõuendilt tuleb kõik olemasolevad komponendid eemaldada – nõnda saame puhtalt lehelt alustada. Muutuja i loendab, et mitmenda loodava ruudu juures me oleme. Seda tasub kasutada ka ruudu asukoha määramisel, et need üksteisele otsa ei satuks. UpdateLayout pärast lisamisi annab teada, et muutunud elemendid tasub ka uuesti ekraanile kuvada.

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls;

19


using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class RuutudeArv : UserControl { public RuutudeArv() { InitializeComponent(); }

private void Button_Click(object sender, RoutedEventArgs e) { ala1.Children.Clear(); int kogus = Convert.ToInt32(txtKogus.Text); for (int i = 0; i < kogus; i++) { Rectangle r = new Rectangle(); r.Width = 10; r.Height = 10; r.Fill = new SolidColorBrush(Colors.Green); Canvas.SetLeft(r, i * 20); Canvas.SetTop(r, 30); ala1.Children.Add(r); } ala1.UpdateLayout(); } } }

20


6.1 Ülesandeid    

7

Joonista tulpdiagramm, kus iga järgmine tulp on eelmisest pikem. Tulpade pikkused on võrdelised tulba järjekorranumbri ruuduga. Joonista kasutaja poolt ette antud ridade ja veergudega ruudustik. Hoolitse, et ruudud oleksid üle ühe erinevat värvi.

Soovitud arv omaloodud komponente Siiani kasutasime vaid valmiskomponente ehk põhiliselt ristkülikuid oma jooniste koostamisel. Silverlighti üheks võluks aga on panna lahenduse tükid „elama“. Ning seda on võimalik just saavutada, tehes kõigepealt piisavalt targad komponendid eraldi valmis ning siis asuda neid omavahel kombineerima. Omaloodud komponendiks kõigepealt element nimega Animatsioon1. Tegemist taas lihtsa ruuduga, kus aga hiirega peale liikumisel pannakse jututahvli abil tööle animatsioon – ruudu laius muutub 20st 30ks ja tagasi. Ristküliku küljes olev ruut1_MouseEnter-funktsioon paneb vastava käsu käima. Animatsioon1.xaml <UserControl x:Class="SilverlightNaited.Animatsioon1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="40" Height="40"> <Grid x:Name="juur" Background="White"> <Grid.Resources> <Storyboard x:Name="suurendus"> <DoubleAnimation Storyboard.TargetName="ruut1" Storyboard.TargetProperty="Width" AutoReverse="True"

From="20" />

To="30"

Duration="0:0:1"

</Storyboard> </Grid.Resources> <Rectangle x:Name="ruut1" Fill="Green" Width="20" Height="20" MouseEnter="ruut1_MouseEnter" ></Rectangle> </Grid> </UserControl>

21


Animatsioon1.xaml.cs

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class Animatsioon1 : UserControl { public Animatsioon1() { InitializeComponent(); }

private void ruut1_MouseEnter(object sender, MouseEventArgs e) { suurendus.Begin(); } } }

22


P천hiprogrammis pole edasi siis enam muud teha, kui et tuleb eelnenud n채ites olevate ruutude asemele lihtsalt omapoolsed komponendid panna ning andekam tulemus ongi olemas.

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class RuutudeArv2 : UserControl { public RuutudeArv2() { InitializeComponent(); }

private void txtKogus_KeyDown(object sender, KeyEventArgs e) { if (e.Key == Key.Enter) { ala1.Children.Clear(); int kogus = Convert.ToInt32(txtKogus.Text); for (int i = 0; i < kogus; i++) { Animatsioon1 a = new Animatsioon1();

23


Canvas.SetLeft(a, i * 40); Canvas.SetTop(a, 30); ala1.Children.Add(a); } ala1.UpdateLayout(); } } } }

7.1 Ülesandeid  

8

Koosta kasvava pikkusega ristkülikutest tulpdiagramm. Hiirega ristküliku peale liikumisel ta laius korraks kasvab. Koosta komponendiks soovitud raadiusega ring, mille keskel on näha ringi raadius arvuna. Hiirega ringi peale vajutamisel on võimalik ringi raadiust eraldi tekstikastis muuta.

Kujundite joonistamine Lisaks ristkülikule siis ka ellipsi ning joone loomise näide.

xaml-failis vaid kujundid koos juurdekuuluva tekstiga. Iseenesest piisaks ka vaid lõuendist. <Grid x:Name="juur" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition /> </Grid.RowDefinitions>

24


<StackPanel Grid.Row="0" HorizontalAlignment="Center">

Orientation="Horizontal"

<TextBlock>Funktsiooniga loodud kujundid</TextBlock> </StackPanel> <Canvas Grid.Row="1" x:Name="ala1"></Canvas>

Height="auto"

Width="auto"

</Grid>

Kujundite loomiseks on eraldi funktsioonid tehtud, et neid hiljem mugav välja kutsuda oleks. Et ristkülikul ja ellipsil enamik käsklusi sarnased, siis saab siinsed koodiasjad ühendada. Joon aga tahab omi andmeid saada otspunktide kaudu – seetõttu joone jaoks ka eraldi alalmprogramm. using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class KujunditeJoonistus : UserControl { public KujunditeJoonistus() { InitializeComponent();

25

joonista(ala1, Colors.Green);

new

Rectangle(),

joonista(ala1, Colors.Yellow);

new

Ellipse(),

20, 70,

50, 50,

40,

30,

40,

30,


joon(ala1, 120, 50, 160, 80, Colors.Blue); }

Shape joon(Canvas ala, double x1, double y1, double x2, double y2, Color varv) { Line j=new Line(); j.X1 = x1; j.Y1 = y1; j.X2 = x2; j.Y2 = y2; j.Stroke = new SolidColorBrush(varv); ala.Children.Add(j); return j; }

Shape joonista(Canvas ala, Shape kujund, double vasak, double yla, double laius, double korgus, Color varv) { Canvas.SetLeft(kujund, vasak); Canvas.SetTop(kujund, yla); kujund.Width = laius; kujund.Height = korgus; kujund.Fill = new SolidColorBrush(varv); ala.Children.Add(kujund); return kujund; }

} }

26


8.1 Ülesandeid  

9

Koosta kriipsujuku. Loo joonistusvahend, kus kasutajal võimalik valida soovitud kujundit ning see lõuendile paigutada.

Hiiretundlikud kujundid Kujunditele hulgem omaduste külge panekuks on nad mugav kõigepealt mõnda kogumisse korjata. Hästi sobib selleks näiteks LinkedList – sealt on neid hiljem võimalik ka suhteliselt vähese vaevaga ükshaaval eemaldada.

<Grid x:Name="juur" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition /> </Grid.RowDefinitions> <StackPanel Grid.Row="0" HorizontalAlignment="Center">

Orientation="Horizontal"

<TextBlock>Hiiretundlikud kujundid</TextBlock> </StackPanel> <Canvas Grid.Row="1" x:Name="ala1"></Canvas> </Grid>

27

Height="auto"

Width="auto"


Tsükliga foreach pannakse iga kujundi külge hiire sisenemise ning väljumise funktsioon. Hiljem saab vastavalt hiire sündmustele kujundi läbipaistvust mõjutada ning selle kaudu lahendus kasutaja suhtes „ärksamaks“ muuta. using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class KujunditeJoonistus2 : UserControl { LinkedList<Shape> kujundid = new LinkedList<Shape>(); public KujunditeJoonistus2() { InitializeComponent(); kujundid.AddLast(joonista(ala1, 40, 30, Colors.Green));

new

Rectangle(),

20,

50,

kujundid.AddLast(joonista(ala1, new Ellipse(), 70, 50, 40, 30, Colors.Yellow)); kujundid.AddLast(joon(ala1, Colors.Blue));

120,

50,

160,

80,

foreach(Shape kujund in kujundid){ kujund.MouseEnter MouseEventHandler(hiirSisenes);

+=

new

kujund.MouseLeave+=new MouseEventHandler(hiirLahkus); } }

28


Shape joon(Canvas ala, double x1, double y1, double x2, double y2, Color varv) { Line j = new Line(); j.X1 = x1; j.Y1 = y1; j.X2 = x2; j.Y2 = y2; j.Stroke = new SolidColorBrush(varv); ala.Children.Add(j); return j; }

void hiirSisenes(object sender, MouseEventArgs e) { Shape kujund = sender as Shape; kujund.Opacity = kujund.Opacity / 2; } void hiirLahkus(object sender, MouseEventArgs e) { Shape kujund = sender as Shape; kujund.Opacity = kujund.Opacity * 2; }

Shape joonista(Canvas ala, Shape kujund, double vasak, double yla, double laius, double korgus, Color varv) { Canvas.SetLeft(kujund, vasak); Canvas.SetTop(kujund, yla); kujund.Width = laius; kujund.Height = korgus; kujund.Fill = new SolidColorBrush(varv); ala.Children.Add(kujund);

29


return kujund; }

} }

9.1 Ülesandeid  

Võimalda luua ekraanile mitmesuguseid kujundeid. Neid saab hiljem hulgi valida ning neil korraga omadusi muuta – näiteks suurendust ja värvi.

10 Jututahvli abil liigutamine Jututahvel ehk Storyboard on mugav vahend mitmesuguste animatsioonide sidumiseks elementidega. Lihtsaima näitena muudetakse sealtkaudu kujundi suurust.

<Grid x:Name="juur" Background="White"> <Grid.Resources> <Storyboard x:Name="suurendus"> <DoubleAnimation Storyboard.TargetName="ruut1" Storyboard.TargetProperty="Width" AutoReverse="True"

From="20" />

To="30"

Duration="0:0:1"

</Storyboard> </Grid.Resources> <Rectangle x:Name="ruut1" Fill="Green" Width="20" Height="20" MouseEnter="ruut1_MouseEnter" ></Rectangle> </Grid>

Koodi pool piisab vaid vastava omaduse käivitamisest – praegusel juhul sel nimeks „suurendus“. 30


using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class Animatsioon1 : UserControl { public Animatsioon1() { InitializeComponent(); }

private void ruut1_MouseEnter(object sender, MouseEventArgs e) { suurendus.Begin(); } } }

10.1 Ülesandeid  

31

Katseta mitmesuguste omaduste (asukoht, läbipaistvus) muutmist. Katseta mitmesuguseid muutmise kiirusi ning suundi.


11 Jututahvli abil keeramine

Keeramise tarbeks peab kujundile eraldi lisama RotateTransformi. Siis on võimalik sealseid väärtusi muutes kujundit omale sobivalt keerama saada. Tuleb sealjuures ära määrata keerlemise keskpunkt ning algnurk.

<Grid x:Name="juur" Background="White"> <Grid.Resources> <Storyboard x:Name="sb1" Completed="sb1_Completed"> <DoubleAnimation Storyboard.TargetName="keeramine" Storyboard.TargetProperty="Angle" From="30" To="390" Duration="0:0:2"

/>

</Storyboard> </Grid.Resources> <Rectangle x:Name="ruut1" Fill="Green" Width="20" Height="20" MouseEnter="ruut1_MouseEnter" > <Rectangle.RenderTransform> <RotateTransform x:Name="keeramine" CenterY="10" Angle="30"></RotateTransform>

CenterX="10"

</Rectangle.RenderTransform> </Rectangle> </Grid>

Järgnevas koodis hoolitsetakse, et iga hiire sisenemise peale ei hakataks uuesti otsast peale keerama, vaid et tehtaks üks ring enne lõpuni ning ollakse alles siis valmis uut teadet vastu võtma. using System; using System.Collections.Generic; using System.Linq; using System.Net;

32


using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class Animatsioon2 : UserControl { bool seisab = true; public Animatsioon2() { InitializeComponent(); } private void ruut1_MouseEnter(object sender, MouseEventArgs e) { if (seisab) { sb1.Begin(); seisab = false; } }

private void sb1_Completed(object sender, EventArgs e) { seisab = true; } } }

33


11.1 Ülesandeid  

Loo osuti, määra talle RotateTransform ning võimalda seda pöörata. Katsu mitu osutit üheskoos panna kella kombel liikuma.

12 Piltide vahetus Ehk siis veidi pikem näide veebiandmeid kasutava pildijada loomiseks Avanedes on näha üks pilt.

Pildile vajutades läheneb kaugusest uus pilt samal ajal keereldes.

Mõne aja pärast on ta kohal ning siis võib uut pilti uudistada.

34


Alustuseks on xaml-failis ees üks pilt. Selle küljes olev PlaneProjection võimaldab kujundit ümber telgede pöörata. Jututahvlil kirjeldus suurendab üheaegselt nii Y-telje suunalist pööret kui ka pildi suurust. <Canvas Background="White" > <Canvas.Resources> <Storyboard x:Name="tahvel1"> <DoubleAnimation From="-180" To="0" Storyboard.TargetName="proj1" Storyboard.TargetProperty="RotationY" /> <DoubleAnimation From="0" To="400" Storyboard.TargetName="pilt1" Storyboard.TargetProperty="Width" /> </Storyboard> </Canvas.Resources> <Image Source="http://minitorn.tlu.ee/~jaagup/oma/ansambel/lootspillipoisid.j pg" x:Name="pilt1" Canvas.Left="10" Canvas.Top="30" Width="300" MouseLeftButtonDown="pilt1_MouseLeftButtonDown"> <Image.Projection> <PlaneProjection

x:Name="proj1" />

</Image.Projection> </Image> </Canvas>

Koodifailis võetakse iga nupuvajutuse tulemusena ette uus pilt ning pannakse animatsioon tööle.

35


using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media.Imaging; using System.Windows.Media.Animation; using System.Windows.Shapes;

namespace SilverlightNaited { public partial class PiltideKeeramine : UserControl { int koht = 0; string[] pildiaadressid ={ "http://minitorn.tlu.ee/~jaagup/oma/ansambel/lootspillipoisid.jpg", "http://minitorn.tlu.ee/~jaagup/oma/ansambel/pildid/kolmmerekividel.jp g", "http://minitorn.tlu.ee/~jaagup/oma/ansambel/pildid/enrikuksel.jpg", "http://minitorn.tlu.ee/~jaagup/oma/ansambel/pildid/ainjaagupkannel2.j pg" }; public PiltideKeeramine() { InitializeComponent(); }

private void MouseButtonEventArgs e)

pilt1_MouseLeftButtonDown(object

sender,

36


{ koht++; if (koht >= pildiaadressid.Length) { koht = 0; } pilt1.Source = new Uri(pildiaadressid[koht], UriKind.Absolute));

BitmapImage(new

tahvel1.Begin(); } } }

12.1 Ülesandeid  

37

Muuda koodi nõnda, et pilti keerataks ümber Z-telje. Tee lahendus nõnda ümber, et kasutajale jääks mulje pildilehtede keeramisest albumis.


JAAGUP KIPPAR

XML


Sisukord

1 Sissejuhatus ..................................................................................................................... 3 2 XML..................................................................................................................................... 3 3 XML’i kirjutamise reeglid ............................................................................................ 4 3.1 Reeglid ...................................................................................................................... 4 4 XML’i elemendid ............................................................................................................ 5 5 Atribuudid ........................................................................................................................ 6 6 Nimeruum ........................................................................................................................ 7 7 XML’i valideerimine ...................................................................................................... 8 8 XML skeemid ................................................................................................................... 8 9 Ülesandeid ....................................................................................................................... 9

2


1 Sissejuhatus Extensible Markup Language ehk XML on lihtne ja väga paindlik tekstiformaat, mis baseerub SGML’il (Standard Generalized Markup Language). XML töötati välja XML-töögrupi (algselt tuntud kui SGMLi redaktsiooniliselt läbivaatava nõukogu – SGML Editorial Review Board) poolt, mis loodi World Wide Web Konsortsiumi patronaaži all 1996. aastal. Töögruppi juhtis Jon Bosak, Sun Microsystemsist aktiivses koostöös W3C poolt organiseeritud XMLerihuvigrupiga (varem tuntud SGML-töögrupina).

2 XML XML’i loomise eesmärgid: 

XML peab olema kasutatav üle Interneti.

XML peab olema loetav nii inimesele kui arvutile.

XML rakenduste ampluaa peab olema võimalikult lai: sisestamine, lehitsemine, otsing, infotöötlus, sisutöötlus.

XML ühildub SGMLga

XML dokumentide töötlemise programme peab olema lihtne kirjutada

XML disain peab olema formaalne ja kompaktne

XML dokumentide genereerimine peab olema lihtne. Kuigi XML dokumentide koostamiseks kasutatakse enamasti spetsiaalseid redaktoreid, peab nende tekitamine olema võimalik mistahes redaktoriga.

XML märgistuse napisõnalisuse nõue pole tähtis.

Aastal 1998 tuldi välja XML’i versiooniga 1.0, millele lisati väiksed täiendused aastal 2000 ning see versioon on ka hetkel ainukene.

3


XML failide loomiseks ei ole vaja spetsiaalseid programme, piisab vaid programmist, milles on võimalik tööd salvestada tekstifailina. Kui RTF ja HTML failid on orienteeritud välisilmele ehk sellele, kuidas dokumente inimesele näidata, siis XML on orienteeritud andmete paremale kirjeldamisele e. kuidas andmeid võimalikult hästi programmidele arusaadavaks teha. Sellest tulenevalt on nendel failiformaatidel ka mõned olulised erinevused. RTF ja HTML failis paiknevad andmed ja nende kujundus läbisegi, XML’is moodustatakse eraldi failid nii andmetele, nende kujundusele ja struktuurile. See muudab XML andmete programmilise kasutamise oluliselt lihtsamaks, kui on seda RTF või HTML andmete töötlemine. Ühtlasi võimaldab anda samadele andmetele erinevaid kujundusi lihtsamalt.

3 XML’i kirjutamise reeglid XML’i fail koosneb kahest osast: faili alguses on deklaratsioonid selle faili töötlemiseks ning sellele järgnevad andmed.

3.1 Reeglid 

XML-dokumendi alguses peab olema näidatud, mis versiooni kasutatakse (töö kirjutamise hetkel on ainukeseks versiooniks 1.0) <?xml version=”1.0”?>

XML-dokument peab omama ainult üht juurelementi, mis sisaldab kõiki teisi elemente dokumendis <juur> <laps> <alamlaps>...</alamlaps> </laps> </juur>

Igal elemendil (ka tühjal) peab olema algusmärgis ja lõppmärgis Algusmärgis

Sisu

Lõppmärgis

<nimi>

Ants

</nimi>

XML’is kasutatavad atribuudid peavad alati olema jutumärkide või ülakomade vahel. Ei ole vahet, kumba kasutada, kuid oluline on see, et alustav ja lõpetav

4


märk oleksid samad. Seega võib juhtuda, et ühe elemendi üks atribuut on kirjutatud ülakomade, teine jutumärkide vahele. 

XML’is tehakse vahet suur-ja Näiteks <kuupäev> ja <Kuupäev> on erinevad elemendid

väiketähtedel.

Alamelement peab lõppema enne peaelementi. Kui HTMLi vanemates versioonides on lubatud nt järgmine konstruktsioon <b><i></b></i> , siis XMLis sellist asja olla ei tohi ehk korrektne oleks <b><i></i></b> Kui XML fail vastab eelpool loetletud reeglitele, on tegemist trimmis (Well Formed) XML’iga.

4 XML’i elemendid XML-elementidele nimede panemisel kehtivad järgmised reeglid: 

element esitatakse tagidena. Tage kirjutatakse järgmiselt: <taginimi>sisu</taginimi>. Esimest nimetatakse alustavaks tagiks, teist lõpetavaks.

nimi võib sisaldada tähti, numbreid ja mõningaid sümboleid (sümbolit „:” ei tohi kasutada, kuna see on kasutusel nimeruumidele viitamisel);

nimi ei tohi alata numbri või kirjavahemärgiga;

nimi ei tohi alata kombinatsiooniga xml (samuti ka XML või Xml jne);

nimi ei tohi sisaldada tühikut;

elementide nimedes tehakse vahet suurtel ja väikestel tähtedel

teinekord võib elementidel sisu puududa. Siis kasutatakse nn tühje elemente Näiteks element <dokument failinimi=”arve.doc”></dokument> on sama, mis element <dokument failinimi=”arve.doc”/> Sisu poolest võib elemendid jagada kolmeks:

5

tühjad elemendid

lihtsad elemendid


keerukad elemendid

Tühjad elemendid: tühjadeks nimetatakse elemente, millel sisu puudub ja nende esitamiseks on kaks võimalust: kasutatakse alustatavat ja lõpetavat tagi, nii et nende vahele ei jää midagi

<kontakt></kontakt>

kasutada

spetsiaalset

tagi,

kus

tagi

lõpp

sisaldub

alustavas

tagis

<kontakt />

Lihtsad elemendid: elemendid, kus alustava ja lõpetava tagi vahel on mingi lihtne väärtus, nt sõna, lause, kuupäev, number. <nimi>Mati</nimi> Keerukad elemendid: elemendid, mille sisuks on teised elemendid <firma> <nimi>AS Virumaa Mets</nimi> <aadress>Metsa 7</aadress> <regnumber>0011223344</regnumber> <faks /> </firma> Loetavuse parandamiseks võib kasutada treppimist, sest XML’i parserid ignoreerivad tühiruumi1 Elementidele saab lisada ka atribuute.

5 Atribuudid Atribuute on mõistlik kasutada andmete metadata jaoks (ehk atribuut on andmed andmete kohta). Atribuudid kirjutatakse elemendi alustava tagi sisse. Ühe elemendi sees peavad olema kõik atribuutide nimed erinevad. Atribuudid kirjutatakse kujul: atribuudinimi=väärtus. Väärtused peavad olema kas jutumärkide või ülakomade vahel.

1

tühiruum on tühikud, tabulaatorid, Enterid 6


Näiteks: <isik sugu=”mees”>Ants Aavik</isik> Atribuudinimedele kehtivad samad reeglid, mis elementide nimedele. Võib tekkida küsimus, milliseid andmeid esitada elementidena, milliseid atribuutidena? Sellele küsimusele ühtset vastust ei ole, kõik sõltub vajadustest, kuid heaks tavaks on see, et atribuutides ei ole mitte andmed, vaid lisainfo andmete kohta ehk metadata. Samuti pannakse sinna vahel ka andmed, mis on lühikesed ning mille puhul on aimata, et neid pole põhjust hiljem laiendada (osadeks jaotada).

6 Nimeruum Mõnikord võib tekkida situatsioon, kus mitu osapoolt kasutavad XMLdokumentides ühte ja sama elementi erinevas tähenduses. Seetõttu on vaja eristada, millisesse sõnavarasse üks või teine märgis kuulub. Lahenduse antud probleemile toob XML-nimeruum (XML namespace). W3C standardi järgi on XML-nimeruum nimede kollektsioon, mis on kasutusel XML-dokumendis elementide ja atribuutidena. Üks XML-dokument võib sisaldada elemente ja atribuute rohkem kui ühest nimeruumist. Allolevas näites on kirjeldatud firma andmed nii, et firma nime ja registrinumbri kirjeldus on kirjeldatud nõnda, nagu riigis kokkulepitud. Kõigi ülejäänud elementide kirjeldused on väljamõeldud mingi firma enese poolt: 

iga

element,

millel

pole

eesliidet,

kasutab

nimeruumi

kasutab

nimeruumi

xmlns=”http:/www.mingifirma.ee/firma“

iga

element,

millel

on

eesliide

ee:

xmlns:ee=”http://www.riik.ee/firma”

<firma xmlns=”http://www.mingifirma.ee/firma” xmlns:ee=”http://www.riik.ee/firma”> <ee:nimi>AS Virumaa Mets</ee:nimi> <aadress>Metsa 7</aadress> <ee:regnumber>0011223344</ee:regnumber> <faks /> </firma>

7


7 XML’i valideerimine Et XML andmeid vahetada või töödelda, on vähe kasu teadmisest, et XML on WellForm, kuna XML’i moodustamise reeglid on väga lõdvad ja täpselt samu andmeid on võimalik esitada mitmel erineval moel. Et fikseerida, mis kujul andmed peaksid XML failis olema, on kasutusel XML’i valideerimine. Neid reegleid on võimalik seada kas kasutades DTD (Document Type Definition) või XML skeeme (XML Schema). Kui XML fail vastab DTD’s või XML skeemis kirjeldatud reeglitele, siis nimetatakse seda XML’i trimmis XML (valid XML) DTD kirjeldus võib paikneda XML andmetega samas failis või võib olla täiesti eraldi seisev fail. Nende lausetega pannakse paika, millised elemendid on nõutavad ja milline on elementide järjestuse kord. DTD suurimaks puuduseks on see, et ei ole võimalik määrata, mis tüüpi peavad olema elementides või atribuutides olevad andmed (ainukene andmetüüp on tekst). Seetõttu kasutatakse keerukamate süsteemide puhul XML skeeme.

8 XML skeemid XML skeemid on reeglite kogum, kus on kirjas, mis võib ja mis ei või olla XMLandmefaili erinevates osades. Reeglitega on võimalik määrata, millised elemendid, millises järjekorras peavad olema ning mis tüüpi andmeid võivad sisaldada atribuudid ja elemendid. Andmetüüpidele on võimalik lisada piiranguid, nt vähim või suurim võimalik väärtus numbrite puhul, tekstilistel andmetel teksti pikkus. Lisaks sellele on võimalik määrata konkreetset väärtuste hulka. Skeemides jagunevad elemendid vastavalt sisule. Lihtsaks elemendiks (simple type) nimetatakse elemente, millel puuduvad atribuudid ja alamelemendid. Näiteks: <nimi>AS Virumaa Mets</nimi> XML

skeemis

võiks

<xs:element name=”nimi” maxOccurs=”unbounded”/>

seda

kirjeldada

type=”xs:string”

järgmiselt: minOccurs=”1”

Antud XML failis peab esinema element Nimi vähemalt 1 korra, kuid võib esineda ka rohkem. Nimi on tekstilist tüüpi (string). Elemendid, millel on atribuudid ja/või alamelemendid, on keerulised elemendid (complex type).

8


Näiteks: <firma> <nimi>AS Virumaa Mets</nimi> <aadress>Metsa 7</aadress> <regnumber>0011223344</regnumber> <faks /> </firma> XML skeemis võiks seda kirjeldada järgmiselt: <xs:element name="firma"> <xs:complexType> <xs:sequence> <xs:element name="nimi" type="xs:string"/> <xs:element name="aadress" type="xs:string"/> <xs:element name="regnumber" type="xs:string"/> <xs:element name="faks" type="xs:string"/> </xs:sequence> </xs:complexType> </xs:element>

9 Ülesandeid   

9

Koosta XML-fail autode loeteluga. Koosta skeem ühe auto andmete hoidmise kirjelduseks. Koosta skeem autode loetelu andmete kirjelduseks.


M_Stuudium