Visual Studio 2010 Beta 2 i WPF dizajner -Kratak pregled


Uvod

Kako je i najavljeno VS 2010 Beta 2, dostupna je od 21.10. 2009. Na oficijelnoj stranici Visual Studia nalazi se link za instalaciju. Međutim, radi se o Bootstrapperu online instalaciji, koja kešira nekoliko mb, na vaš disk, a zatim po pokretanju simultano downloada i instalira komponente aplikacije. I ovom postu napravićemo jedan mali tutorijal oko instalacije VS 2010 Beta 2, kao i prezentirati neke novine kod razvoja WPF aplikacija. Iako instalacija je dosta trivijalna potrebno je podsjetiti koji su preduslovi instalacije ovog proizvoda.

  • Da bi instalirali VS 2010 potrebno je deinstalirati prethodnu verziju Beta 1 u koliko je instalirana.
  • Microsoftova je preporuka da se beta verzije ne instaliraju na produkcijske mašine.

U koliko želite da pogledate video prezentaciju instalacije VS 2010 i TFS 2010 možete je naći na Channel9 stranici.

Važno je napomenuti da VS 2010 u beta 2 dolazi u sljedećim SKU verzijama:

  • Visual Studio Express
  • Visual Studio 2010 Professional
  • Visual Studio 2010 Premium
  • Visual Studio 2010 Ultimate
    Šta koja od verzija predstavlja i sadržava možete pogledati na MSDN stranici. Sjetimo se da su prethodne verzije 2005 i 2008 dolazile u: Standard, Professional i Team Suite verzijama. VS 2010 može biti instaliran na istoj mašini na kojoj se nalazi VS 2008, i to je novina u ovoj verziji, tako da neće uticati jedan na drugog.

Ako ste deinstalirali Beta 1 verziju, otvorite oficijelnu stranicu VS 2010.

Instalacija VS 2010 Ultimate

Pokrenite IE i pristupite stranici http://www.microsoft.com/visualstudio/en-us/try/default.mspx. Na donjoj slici prikazana je početna stranica na kojoj se nalazi link za instalaciju VS 2010 beta2. Kliknite na Dugme „Download the beta now“ (Kao na slici dolje.)

image

Nakon nekoliko trenutaka pojaviće se dijalog za download. Potrvdite download i kliknite na Dugme „Run“.

image

Po završetku preuzimanja Bootstrapper datoteke pokreće se instalacija, čiji prvi prozor daje do znanja novog preuređenog i za ovakvu instalaciju podešenog instalacijskog programa.

image

Po učitavanju potrebih komponenti za pokretanje instalacije, pojavljuje se dijalog za prihvaćanje licencnih uslova, te načina instalacije.

image

Nakon klika na dugme Next pojavljuje se dijalog sa komponentima za instalaciju.

image

Za ovaj slučaj instaliraćemo samo C# i F# obzirom da su mi ti jezici interesantni za ovu beta. Naravno možete odabrati sve ostale komponente.

Nakon klika Next, počinje dugotrajni proces skidanja i instalacije Visual Studio 2010.

image

Nakon nekoliko sati pojavljuje se dijalog za instaliranim proizvodom.

image

Pokretanje VS 2010 i prvi projekat

Kada pokrenemo VS2010 dobijamo startni izgled programa. Možemo primjetiti da je startni screen preuređen u odnosu na Beta1 verziju.

image

Pokrenimo Start->New Project i formirajmo novu WPF aplikaciju.

image

U dijalogu za formiranje novog projekta primjetićemo multitargeting od 2.0,3.0, 3.5, 4.0 te novi link za podešavanje za ostale verzije .NET Frameworka npr. 3.5 SP1 i buduće verzije.

image

Kada govorimo o C# projektima, oni su ostali ne promjenjeni iz verzije 2008 .

Odaberimo WPF Application i kliknimo na dugme OK. Na samom startu primjetićemo brži rad u odnosu na Beta 1 verziju.

IntelliSense

IntelliSense prozor je dodatno uređen sa manjim borderom i ne može se resajzirati kao ni u prošloj verziji.

image

Markup IntelliSense pojavio u prethodnoj beta 1 verziji ali ga je važno spomenuti da je jedan od najčešće spominjanih zahtjeva korisnika.

image

Kod IntelliSense i Markup proširenja prilikom ukucavanje prve velike zagrade nije potrebno tipkati drugu jer Intelisense to radi automatski. U prvih nekoliko pokušaja potrebno se navići.

PropertyWindow

Ovaj prozor je i u Beta1 doživio znatna poboljšanja, a sve u svrhu olakšavanja razvoja WPF aplikacija. PropertyWindow podjeljen na Tab kartice za Properties i Events, dok to u prethodnim verzijama je bio u obliku trake.

PropertyWinodw preuređen i umjesto dugmadi za Properties i Events sada stoje tab kartice:

image image

Pored, alfabetnog sortiranja image , te prikaza osobina po kategorijamaimage, uveden je novi prikaz po Izvoru osobine image (Property Source). Donja slika pokazuje ovaj način prikaza:

image

Pored InteliSense-a za Markup proširenja, jedan od najpopularnijih novina je i PropertyMarkers dugme koje se nalazi izmedju Osobine i Vrijednosti u Propertygridu, a označava odakle vrijednost osobine potiče, a iste su označene različitim sličicama.

image

Klikom na PropertyMarkers dobijamo iskačići meni za postavljanje vrijednosti:

1. Reste Value – postavljanje podrazumijevane vrijednosti (Default Value)

2. Apply DataBinding … – Postavljenje vrijednosti preko DataBinding

3. Apply Resource.. – postavljanje vrijednosti iz resursa

Kada odaberemo drugu opciju menia dobijamo popup kontrolu sa nekoliko kategorija za povezivanje kontrole izvorom podataka:

1. Source: Ova stavka prikazije sve dostune izvore podataka u dotičnoj kontroli. Na sljedećoj slici prikazana je stavka Source, koja u prvoj koloni prikazuje dostupne resurse u ovom slučaju samo Windows.Resource, dok druga kolona prikazuje valide izvore (kolekcije) za dati resurs. Treća kolona služi prilikom odabire dodathim stavki za izvor podataka.

image

2. Path Stavka obezbjeđuje odabir putanje za izvor podataka.

image

3. Converters:Preko ove stave moguće je postaviti pretvarače, koji se nalaze kao standardni ili eksterni pretvaraći preko reference.

image

4. Options: Predstavlja razne vrijante prilikom povezivanja: Format, Binding Mode, …

image

Sa prikazanim dizajnerom za Binding praktično je moguće napraviti sve moguće načine povezivanja sa svim varijantama.

Bilo da smo za neku osobinu pridrižili vrijednost lokalnu, iz resursa ili preko Binding dizajnera,  sličica u Propertymarkeru prikazaće se različito. Donja slika prikazuje varijante pridruživanja vrijednosti osobinama.

image

Detaljan pregled Dizajnera za WPF i SL u VS 2010 možete pronaći na ovom linku.

Povezivanje Aplikacije sa bazom podataka preko ADO.NET EF

Ovom verzijom nastoji se produktivnost u razvoju WPF aplikacija dovesti na nivo Windows Forms-a, a to znači poboljšati WPF dizajnere. Pogledajmo na koji način i sa koliko vremena je potrebno naš primjer povezati sa bazom podataka i prikazati Master-Detail relaciju u WPF. Takav scenario u Windows Formsima smo poprilično brzo uspijevali napraviti zahvaljujući moćnim dizajnerima.

Dodajmo novu stavku u našem projektu, te izaberimo ADO .NET Entity Data Model. Pojavljuje nam se čarobnjak za povezivanje sa bazom podataka. Povezaćemo klasičnu NorthWind bazu sa SQL 2005 ili 2008 Servera.

image

Odaberimo dvije tabele Orders i Order_Details, te završimo sa čarobnjakom.

Iz menia Data, odaberimo Show Data Sources da se pokaže prozor DataSources, te identično kao i u Windows Formsima odvucimo Orders, pa zatim Order_Details, u sadržaj Windows1, kao na slici.

image

Pritisnimo F5 za Build projekta i bez i jedne linije koda imamo MasterDetail formu, potpuno isti način kao što to radimo u Windows Formsima.

image

Pomjeranjem retka u Orders tabeli, dobijamo Order detalje u tabeli ispod. Jedina razlika u generiranju koda između WindowsForms i WPF je što nemamo navigacijske trake za manipulaciju sa podacima (edit, delete, save), međutim to i nije nekakav nedostatak.

Prilikom izrade ovog primjera koristili smo DataGrid WPF grid kontrolu, proistekla iz WPFToolKit open source projekta na www.codeplex.com, koja je sada standardna WPF kontrola.

About Bahrudin Hrnjica

PhD in Mechanical Engineering, Microsoft MVP for .NET. Likes .NET, Math, Mechanical Engineering, Evolutionary Algorithms, Blogging.

Posted on 22/10/2009, in .NET, Programiranje, WPF and tagged , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s