Microsoft Visual Studio 2005

Transkriptio

1 Microsoft Visual Studio 2005 on integroitu kehitysympäristö (Integrated Development Environment) eli (IDE). Kehitysympäristöön kuuluvat seuraavat keskeiset sovelluskehitysvälineet: Ohjelmointikielet C#.NET Visual Basic.NET C++.NET J#.NET Tiedonhallintajärjestelmät Microsoft SQL Server 2005 Microsoft SQL Server 2005 Express Visual WebDeveloper sisältää mm. XHTML ja HTML-edotorin XML-editorin ASP.NET -editorin

2 Toolbox kontrolleja varten Viimeisimmät projektit Viimeisimmät artikkelit Webistä Sovellusselain Opastus

3 Seuraavaksi tutustumme Microsoft Visual Studio 2005:n käyttöön webbisivuston ja/tai webbisovelluksen käyttöliittymän luonnissa. Avausikkunasta avataan uusi webhakemiston seuraavalla tavalla: valitse päävalikosta toiminto File valitse avautuvasta valikosta toiminto toiminto New valitse avautuvasta valikosta toiminto Web Site

4 Valitse alla esitetystä avautuvasta keskusteluikkunasta template Empty Web Site (tyhjä webbisivusto), Location-pudotusvalikosta File System, aseta sivuston polkuosoitteeksi oma kansiosi (tarvittaessa etsimällä kansio hakemistojärjestelmästä Browse-toiminnolla) ja paina OKkomentopainiketta. Antamaasi osoitteeseen luodaan tyhjä web-sivusto.

5 Uuden Web-sivuston tultua luoduksi Sovellusselain kertoo sivuston sisällön. Lisää sivustoon uusi kotisivu seuraavalla tavalla: osoita hiirellä Sovellusselaimen tummennettua elementtiä (katso kuva alla) ja paina hiiren oikeaa näppäintä valitse avautuvasta alasvetovalikosta toiminto Add New Item esiin ilmestyy uusi keskusteluikkuna (katso seuraava kalvo)

6 Valitse template HTML Page. Kirjoita Name-tekstilaatikkoon luotavan sivun nimi (esim. index.htm). Valitse komento Add.

7 Luomasi uusi sivu ilmestyy Sovellusselaimeen sekä työikkunaan käyttöliittymän keskelle. Aktiivinen HTML-suositus Esteettömyyden tarkistaja Työikkuna Sovellusselain Muotoilija Kontrollit Lähdekoodinäkymä Suunnittelunäkymä Aktiivisen kohteen ominaisuusselain Virheilmoitukset tai tulostus

8 Samaan tapaan kuin HTML-sivu voidaan luoda myös CSS-tyylisivu. Nyt valitaan templateksi StyleSheet ja nimetään luotava tyylisivu halutulla tavalla. Add-komennon suorittamisen jälkeen tyylisivu ilmestyy näkyviin sovellusselaimeen.

9 Tyylisivun liittäminen HTML-lomakkeeseen: aktivoi haluttu HTML-lomake tai ASP-sivu valitse lähdekoodinäkymä rahaa haluttu CSS-sivu sovellusselaimesta ja pudota se lähdekoodinäkymässä HTML-dokumentin head-elementin sisään sovellus generoi automaattisesti tarvittavan link-elementin

10 Halutun merkkivalikoiman valitseminen HTML-lomakkeelle: aktivoi haluttu HTML-lomake valitse suunnittelunäkymä valitse ominaisuusselaimesta ominaisuus Charset valitse ominaisuuden alasvetovalikosta arvoksi Western European (ISO) sovellus generoi automaattisesti tarvittavan meta-elementin Huomioi: Älä valitse merkkivalikoimaksi Microsoftin omia merkkivalikoimia. Se saattaa rajoittaa sovelluksen käyttöä eri laitealustoissa ja selainympäristöissä. Huomioi: ASP-sivun merkkivalikoiman valitseminen ei onnistu samalla tavalla vaan joudut luomaan meta-elementin itse.

11 Mitä ensimmäisellä opetuskerralla opittiinkaan: Microsoft Visual Studion IDE:n rakenne Microsoft Visual Studion IDE:n keskeinen toimintaperiaate IntelliSense-opastuksen toimintaperiaate Web-sovelluksen (solution) luonti HTML-sivun luonti CSS-tyylisivun luonti CSS-tyylisivun liittäminen HTML-sivuun ASP-sivun luonti ja kontrollien käyttö sivulla Luodun sivun tarkastaminen selaimessa

12 Toinen opetuskerta: Luo web-sovellus, jossa on: index.htm niminen aloitussivu asiakas.asp-niminen asp-sivu FFStyle.css-niminen tyylisivu Aseta index.htm sivuun ja ASP-sivuun merkkivalikoimaksi Western European (ISO). Liitä tyylisivu sekä index.htm sivuun että ASP-sivuun.

13 Toinen opetuskerta: Microsoft Visual Studio 2005 Luo index.htm -sivulle seuraava ulkoasu:

14 Toinen opetuskerta: Microsoft Visual Studio 2005 Luo asiakas.asp -sivulle seuraava ulkoasu:

15 Toinen opetuskerta: Microsoft Visual Studio 2005 Anna asiakas.asp sivun kontrolleille seuraavat nimet: valintalista LisAsiakkaat asiakasnumero TexAsiakasNumero asiakkaan nimi TexAsiakaNimi lähiosoite TexLahiosoite postiosoite TexPostitoimipaikka postinumero TexPostinumero alennusprosentti TextAlennusprosentti asiakkaan haku ButHaeAsiakas uusi asiakas ButUusi asiakkaan avaus ButAvaa tallenna asiakas ButTallenna poista asiakas ButPoista poistu sovelluksesta ButLopeta