Category Archives: Silverlight 4

MVVM u razvoju WPF/SL poslovnih aplikacija na MSNetwork


Upate 20.03.2011: Izvorni kod za demo sa predavanja, kao i prezentacijsku datoteku možete skinuti sa ovog linka.

U sklopu konferencije MSNetwork 18. marta u 9 sati u hotelu Vidivić biće održano predavanje na temu MVVM tehnika u razvoju WPF/SL poslovnih aplikacija u kojoj će biti prezentirana ova tehnika razvoja WPF i Silverlight aplikacija.

Podaci o prezentaciji:

Prezentator: Bahrudin Hrnjica, DataSoft Bihać
Twitter: @bhrnjica
Trajanje: 45-60 min.
Level: 300-400

Kratki opis:

Model View ViewModel (MVVM) predstavlja tehniku pri razvoju i dizajnu  aplikacija na WPF i Silverlight UI platformama, a koncipirana je na odvajanju korisničkog iskustva(UX) i poslovne logike (BL). Ova tehnika predstavlja novi koncept razvoja, dizajna i implementacije poslovnih aplikacija. Prezentacija prikazuje  MVVM tehniku razvoja, kroz pojašnjenje 3 sloja: Model, View i ViewModel. U sklopu prezentacije biće pojašnjen koncept komunikacije između View i ViewModela kroz Commands i Behaviors klase, te pojam tzv. ChildWindows pomoću Messenger klase, preko koje se vrši povratna veza između ViewModel i View slojeva. Tokom prezentacije svi pojmovi i modeli prezentiraju se kroz demo primjer: BugTracker aplikacija urađen u Silverlight i WPF. Primjer demonstrira upotrebu MVVM tehnike, kroz dijeljenje izvornog koda sa WPF i Silverlight, dijeljenje jednog modela (Entity Framework) baze podataka između Silverlight i WPF preko implementacije posebnog servisa kojim se, s jedne strane rasterećuje ViewModel klasa, a s druge strane unificira pristup bazi podataka iz Silverlight i WPF  implementacijom zajedničkih metoda definisanih u baznom intrfejsu. BugTracker aplikacija sadrži i upotrebu lokalizacije, RIA Servisa i drugih primarnih dijelova aplikacije koji svaka poslovna aplikacija sadrži. Aplikacija sadrži preko 95% zajedničkog izvornog koda kojeg dijele WPF i Silverlight. BugTracker je posebno radjen za ovu konferenciju te će se objaviti upravo po završetku prezentacije. Screenshot aplikacije u Silverlight i WPF prikazan je u narednoj slici.

Screenshot Demo aplikacije koje će biti prezentirana na MSNetwork 18. marta.

 

 

 

 

 

 

 

 

Prezentacijska datoteka kao i demo aplikacija biće objavljena poslije konferencije.

Advertisements

Uvod u Windows Phone 7


Predgovor

U narednih nekoliko postova biće prezentirana mobilna platforma Windows Phone 7, koja pobuđuje dosta pažnje zadnjih mjeseci. Kako ga opisuju: ovo je do sada najorginalniji mobilni operativni sistem trenutno na tržištu sa potpuno novim pristupom ne samo u odnosu na svoju prethodnu verziju Windows Mobile 6.5, nego i svih ostalih mobilnih OS-ova. U narednim postovima govorićemo o razvojnim platformama, alatima, tipovima aplikacija koje se mogu razvijati na ovom OS-u, te MVM tehnikama programiranja koje sve više postaju popularne u programiranju aplikacija u Silverlight i WPF.

Ovaj članak objavljen je u  www.itpro.ba avgusta 2010 godine.

Uvod

Slika1Windows Phone 7 je naredna verzija microsoftovog operativnog sistema za mobilne telefone koji bi trebao da bude objavljen u oktobru 2010. godine. Nakon višegodišnjeg stalnog pada popularnosti Windows Mobile serija operativnog sistema, Microsoft se ovog puta ozbiljno prihvatio posla i počeo iz početka razvijati novi operativni sistem. Marketinški popraćen od samog početka razvoja operativnog sistema slično kao pri razvoju Windows 7 OS, Microsoft je napokon našao čarobnu formulu uspjeha svog proizvoda. Prema reakcijama koje stižu Windows Phone 7 do sada dobija vrlo visoke ocjene, a sudeći po proizvođačima telefona koji su već poptpisali ugovore sa Microsoftom čini se da će ovaj mobilni operativni sistem pobuditi veliku pažnju krajnjim korisnicima. Prema službenim izvještajima proizvođači telefona koji su već poptisali ugovore da će njihovi budući modeli koristiti neke od verzija Windows Phone 7 su: ASUS, Dell,HTC, LG i Samsung.

GUI u obliku šahovske table sa multitouch mogućnostima

Slika2

Windows Phone 7 u odnosu na ranije verzije Windows mobile 6 serija iz temelja je promijenio svoj korisnički interfejs, te najviše sliči Zune HD uređajima. GUI koji je predstavljen u obliku šahovske table sa samoosvježavajućim sadržajem polja predstavljaju inovativan dizajn. Iako sa dosta fleksibilnim dizajnom Microsoft je odlučio da proizvođači mobilnih telefona poštuju stroga pravila u dizajnu, tako da svaki mobilni uređaj koji vrti Windows Phone 7 mora posjedovati centralno dugme Start za pristup glavnom prozoru, dugme Back vraćanje na prethodni sadržaj , i Search za pretraživanje interneta, kontakata i drugih sadržaja. Prepun multimedijalnim interakcijama pri radu Windows Phone 7 postaće jedinstven mobilni operativni sistem. Pretraživanje interneta moći će se vršiti i preko glasovnih naredbi koje su ugrađenje u Windows Phone Search browser koji vrši pretragu sa Bing pretraživačem. Kako malo koji OS vrti na mobilnim uređajima multimedijalni sadržaj napisan u flashu, Microsoft je na ovaj način u samom startu napravio podršku za svoj Silverlight i XNA. Windows Phone 7 će sadržavati sve komponente koje današnji mobilni operativni sistemi posjeduju: od efektivnih klijenata za socijalne mreže do multitouch interakcije nad mobilnim ekranima što predstavlja veliki napredak u odnosu na prethodne verzije.

Windows Phone 7 u 5 cjelina

Slika3

Inovativni dizajn novog operativnog sistema, pored vizualnog dojma i posebne tehnologije za iscrtavanje teksta na ekranima telefona,predstavljen je u sadržajima šahovskih polja koji se grupišu u posebne sadržajno slične cjeline (hubs). Predefinisane cjeline dijele se na:

People“ – u kojem se nalaze informacije o kontaktima, svim informacijama o socijalnim mrežama na koje je korisnik povezan i sl.

Pictures“ – cjelina koja prikuplja informacije o svim grafičkim datotekama te profilima prijatelja sa socijalnih mreža. Poput prethodnog Hub-a opcijom What’s New moguće je pregledati nedavno objavljene slike kao i prijatelja sa socijalnih mreža facebook i sl, te dijeljenje vlastitih slika na socijalnim mrežama.

Office“ – cjelina prilagođena manipulaciji sa dokumentima na mobilnim telefonima. Za to je zadužen set softwerskog paketa Office Mobile 2010 sa OneNote, Word, Excell i Outlook email klijentom.

Games“ – kako Windows Phone 7 dolazi sa XNA gejmerskom platformom postaje suvišno za reći da će se u novom microsoftovom mobilnom operativnom sistemu nalaziti set novih tehnologija za igrice kako one koje se vrte samo na WP7, tako i one koje se već vrte na Xbox-u, te multiplayer vrste igara.

Music and video“ – je cjelina namijenjena svim oblicima muzike i video distribucije, od kupovine preko interneta do sihronizacije sa jukeboxom Zune.

XNA i Silverlight platforme za razvoj WP7 aplikacija

Pored mnogih korisničkih inovacija Microsoft je za Windows Phone 7 obezbijedio već u CTP fazi razvojni alat pomoću kojeg developeri već mogu razvijati aplikacije koje će se vrtiti na WP7. IDE alat za razvoj WP7 aplikacija je Visual Studio 2010 koji je objavljen u aprilu ove godine, a u trenutku pisanja ovog članka objavljena je i beta verzija alata za Visual Studio 2010 za razvoj WP7 aplikacija. Dvije su platforme razvoja Windows Phone 7 aplikacija, pa tako i dva seta šablona za formiranje početnih projekata WP 7 aplikacija u Visual Studiu 2010 i to: XNA Game Studio 4.0, te Silverlight for Windows Phone.

Slika4

U ovoj fazi Expresson Blend dizajnerski alat za razvoj bogatih korisničkih iskustava potpuno je integriran sa razvojem WP7 aplikacija. Pored toga, MVVM patern od nekih autora je već razvijen i moguće ga je primjenjivati za razvoj WP7 aplikacija, koji sada sa Expression Blend i Visual Studio 2010 čini obezbjeđenu cjelokupnu platformu za razvoj.

slika5

Microsoft je do sada sa Windows Phone 7 otkrio sve karte u svom razvoju operativnog sistema, dok drugi poput Google svoju 3 verziju Android OS još drže skrivenu od oka javnosti. I dok je iOS 4 nedavno objavljena verzija Appleovog mobilnog OS, ne nudi skoro nikakva nova proširenja u odnosu na raniju verziju, i pri kojem još uvijek nema podrške za web sadržaje napisane u Flashu, Microsoft će i pored određenih spekulacija ipak imati ovu podršku.

Silverlight 4 Business Application Part 4 od n


Implementation of the DBNavigation control in Silvelright 4

naslovThis is 4th part of the series of Silverlight Business Application development, which I am writing. Today we will try to implement DBNavigator control.

With Silverlight 4 and RIA services you can develop full business application with backend SQL database on the similar way as you can do in Windows Forms and Windows Presentation Foundation. In the previous posts we have seen how easy connect database to your Silverlight application, and also how to use some patterns in Silvelright aplication like MVVM.
I this post we will see how to implement Database Navigation control like BindingNavigator from Windows Forms. On the other hand we will also see how to extend functionality of the existing Silverlight control by developing custom control derived from existing one, as well as the procedure how to create Silverlight User control.

Our Tutorial will start from the previous blog post, so you need to download source code sample, and start our today’s tutorial. When you download source code, open it in Visual Studio 2010.

 

  • Right click on the solution and chose  Add->New  Project
  • Select Silvelright Class Library project template, give it the name SLCustomCtrl, and click OK button.

sl1

Now that you have the new Silverlit Class Library project in your solution, you have to add reference to your main Silverlight project.

  • Right click on References of theSLDemoPart2 project,  and chose Add->Reference, click Project Tab in the new dialog, and chose SLCustomCtrl project.

Implementation of Custom Control

If you want to extent functionality from the existing Silverlight control you have to add the new Silverlight Templated Control, and starting extend the new functionality from the existing one.

  • Right click on the SLCustomCtrl project, chose Add->New Item, and choose Silverlight Templated Control, name it SLDBNavigator.cs, and hit Add button.

sl2Open SLDBNavigator.cs and put the following source code:

public class DBNavigationBaseCtrl : Grid
{
    public event RoutedEventHandler AddNew;
    public event RoutedEventHandler DeleteCurrent;
    public event RoutedEventHandler DomainDataChanged;

    public DBNavigationBaseCtrl()
    {

    }
    public DomainDataSource DomainData
    {
        get { return (DomainDataSource)GetValue(DomainDataProperty); }
        set
        {
            SetValue(DomainDataProperty, value);
            OnDomainDataChanged(new RoutedEventArgs());

        }
    }

    private void OnDomainDataChanged(RoutedEventArgs e)
    {
        if (DomainDataChanged != null)
            DomainDataChanged(new object(),e);
    }

    public static readonly DependencyProperty DomainDataProperty =
        DependencyProperty.Register("DomainData", typeof(DomainDataSource), typeof(DBNavigationBaseCtrl), new PropertyMetadata(null));
    public bool IsCustomDelete
    {
        get { return (bool)GetValue(IsCustomDeleteProperty); }
        set { SetValue(IsCustomDeleteProperty, value); }
    }

    public static readonly DependencyProperty IsCustomDeleteProperty =
        DependencyProperty.Register("IsCustomDelete", typeof(bool), typeof(bool), new PropertyMetadata(false));

    protected void OnEventAddNew(RoutedEventArgs e)
    {
        if (AddNew != null)
            AddNew(new object(), e);
    }
    protected void OnEventDeleteCurrent(RoutedEventArgs e)
    {
        if (DeleteCurrent != null)
            DeleteCurrent(new object(), e);
    }
}

Implementation of the previous source code contains the three Routed Event Handlers, and two properties. The source code is very simple so you can see very quickly what’s going on in the source code.

Implementation of User Control

Now that we have base custom control for manipulation database tables and views, we need to implement custom Silvelright control derived from it  to expose implemented properties and events from the base class in to XML.

  • Right click on SLCustmCtrls project, chose Add->New Item, select Silverlight User Control, name it DBNavigatorCtrl.xaml, and click Add button.

sl3

Implementation is achieved with putting  several buttons in to controls and subscribe to corresponded click events. The implementation of the DBNavigationCtrl is in the following two listing:

<!--DB Navigator-->
    <StackPanel Margin="2" Orientation="Horizontal" HorizontalAlignment="Center" >
        <Button Content="&lt;|" Height="Auto" Name="btnFirst"  Width="30" Click="btnFirst_Click" />
        <Button Content="&lt;" Height="Auto"  Name="btnPrev"   Width="30" Click="btnPrev_Click" />
        <TextBlock Width="70" Name="textCurrentItem" Text="" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
        <Button Content="&gt;" Height="Auto"  Name="btnNext"  Width="30" Click="btnNext_Click" />
        <Button Content="|&gt;" Height="Auto" Name="btnLast"  Width="30" Click="btnLast_Click" />
        <Button Content="+" Height="Auto"  Name="btnAdd"  Width="30" Click="btnAdd_Click" />
        <Button Content="-" Height="Auto" Name="btnDelete"  Width="30" Click="btnDelete_Click" />
    </StackPanel>
public partial class DBNavigatorCtrl : DBNavigationBaseCtrl
{
    public DBNavigatorCtrl()
    {
        InitializeComponent();
        this.DomainDataChanged += new RoutedEventHandler(DBNavigatorCtrl_Loaded);

    }

    void DBNavigatorCtrl_Loaded(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
        {
            DomainData.DataView.CurrentChanged += (ss, ee) =>
            {
                var dds = ss as DomainDataSourceView;

                if (dds != null)
                    textCurrentItem.Text = (dds.IndexOf(dds.CurrentItem) + 1).ToString() + "/" + dds.Count.ToString();
                else
                    textCurrentItem.Text = "0/0";
            };
        }
    }

    private void btnFirst_Click(object sender, RoutedEventArgs e)
    {

        if (DomainData != null)
            DomainData.DataView.MoveCurrentToFirst();
    }

    private void btnPrev_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
            if (DomainData.DataView.CurrentPosition > 0)
                DomainData.DataView.MoveCurrentToPrevious();
    }

    private void btnNext_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
            if (DomainData.DataView.CurrentPosition + 1 < DomainData.DataView.Count)
                DomainData.DataView.MoveCurrentToNext();
    }

    private void btnLast_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData != null)
            DomainData.DataView.MoveCurrentToLast();
    }

    private void btnAdd_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData == null)
            return;
        RoutedEventArgs e1 = new RoutedEventArgs();
        OnEventAddNew(e1);
    }

    private void btnDelete_Click(object sender, RoutedEventArgs e)
    {
        if (DomainData == null)
            return;
        if (IsCustomDelete)
        {
            RoutedEventArgs e1 = new RoutedEventArgs();
            OnEventDeleteCurrent(e1);
            return;
        }
        if (MessageBox.Show("Confirm delete by clicking the OK button",
                              "Deleting a record ...", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
        {
            DomainData.DataView.Remove(DomainData.DataView.CurrentItem);
        }
    }
}

Using DBNavigaorCtrl in Silvelright project

When we have DBNavigatorCtrl control, it is very easy to use it. Just put the control in to XAML, and in code behind assign it to domain data source of the Main Page.
Now select the main Silverlight project,and open MainPage.XAML, from the toolbox windows select DBNavigationCtrl item and drag and drop to mainpage, similar as picture shows below. If you don’t see DBNavigationCtrl in the ToolBox you have Rebuild the solution.

sl4

The result of our tutorial looks likes on the following picture:

sl5

The source code for this tutorial can be downloaded from here.
Implementation of the DBNavigation control in Silvelright 4

Silverlight 4 Business Application Part 2 od n


Connecting database to your Silverlight 4 Business application

The second article in series of the Silverlight Business application will cover Entity Framework and WFC RIA service, the two components by which you can achieve manipulation of database from your Silverlight Application.  A lot of blogs, articles and books you can find to learn about Silverlight Entity Framework and WFC RIA services. The blogs and book I would like to stress at the moment are http://jesseliberty.com/ the Silverlight and Windows Phone 7 Blog, and The book about Silverlight “Silverlight 4 UNLEASHED” by Laurent Bugnion . He is writing blog also at http://blog.galasoft.ch .

So, for now I will present how you can create Silverlight project from scratch, so you don’t need to use Visual Studio Template for Silverlight Business application. The reason is simple, if you don’t want to use ASP.Net generated database for users and logins, and want to use your own way of login the following tutorial is for you.

The requirements for the demo are the same as in previous post

1. First of all, Run Visual Studio 2010 any version (Ultimate, Professional or Express ), and chose File->New Project. The following picture shows New Project dialog and Silverlight Template projects.

image

2. Chose Silverlight from the left list box of project types, and select Silverlight  Application from the Silverlight project templates. Name the project as SLDemoPart2, and the Solution name let it be LSDemoPart2Solution.

After you click on OK button, another dialog appears, and you need to set some addition options about our Silverlight application. Check all option as picture show below, and click OK  button again.

image

Now, we have Silverlight empty project created within Visual Studio 2010. Every Silverlight application have to be hosted in Web page, so we need to create ASP.NET Application and host out Silverlight application in it.When the Visual Studio finished its jobs we can see the two projects: The Silverlight project we created, and ASP.NET Web application project  Visual Studio created for hosting our application.

Now that we have starting projects, we can start mapped our NorthWind database. If you need NorthWind database, please see previous post, where you can find the way you need to download NorthWind database.

Lets create Entity Framework Model and map the two common tables from the NorthWInd database: Orders and OrdersDetails.

3. Right Click on SLDemoPArt2.Web asp.net project, select Add –>New Item and chose ADO.NET Entity Data Model, name it the NorthWindModel.admx and click OK.

4. Follow the EF Wizard and define connection to your SQL Server database, and import mentioned tables. At the end finish the wizard window. When the VS 2010 finish rebuild the solution.The picture below shows the result:

image

We define our database model, but in this stage we cannot use it in Silverlight application, cause it is server component not client. To resolve this, we need such a service which can expose our database model to the client and make call to the database. RIA Services is component that you can achieve this. So lets create Domain data class one of the  component of the RIA Services.

5. Right Click on SLDemoPArt2.Web ASP.NETt project, select Add –>New Item and chose Domain Service Class . Type DDSNorthWindClient.cs in name edit box and click Add button.

Previously, if you rebuild your project now you can see the following dialog with Order and OrderDetails mapped tables. If you don’t see the tables, you have to rebuild the project.

image

Check the tables as well as check Enable Editing column, cause we want to read and modify the  data from the database as well. Click OK button. Now we are ready to use the NorthWind database from our Silverlight application.

Some of you may wonder, we didn’t touch Silverlight project, but how can we get our tables. The generated classes of the Domain Data Class, Visual Studio is exported to our Silverlight project in to Generated_Code folder, which is not included in to Silverlight project.

To prove that, click on Silverlight project, click on Show All Files toolbar of the the Solution Explorer Window, and we can see it. Try to open folder as well and generated file. You can see domain data class implementation in to Silverlight project.

image

Now that we convinced in to Domain Data Class implementation, we can use it in our Silverlight project.

6. Open MainPage.xaml in to XAML designer of the Silverlight project.

7. Chose main menu  Data->Show Data Sources, and we can see our tables within Data Sources Windows.

8. Drag  Orders table from Data Source Window in to MainPage XAML designer and what we can see?

image

We see completely the same technique like in WinForms application. Its Amassing !

Run the project and you can see Orders from your database in to your browser!

image

Source code for the tutorial can be downloaded from here.