Silverlight Business Application

Transcription

1 Silverlight Business Application Venelina Jordanova, Uwe Habermann Requirements To take the steps described in this article, you have to have several development tools installed. With all versions of Visual Studio comes the installation of the free version SQL Server 2008 Express. In our example we will use the SQL Server as data source. Visual Studio 2010 You can create Silverlight 4 applications with any version of Visual Studio We are using the version Visual Web Developer 2010 Express which is available for download free of charge. Basically all Silverlight 4 applications can be developed with this free version of Visual Studio But the various commercial versions of Visual Studio offer an extended debugging, automatized testing capabilities, and the possibility of integrating them in a source code management system. However, the free Visual Web Developer 2010 Express is the right choice for beginners. And in many cases it will suffice for doing professional development work. The website for downloading and installing the Visual Web Developer is: Upon the first start, the Visual Web Developer will show up in the welcome screen as a 30 days trial version offered only for evaluation purposes. Via the menu item Help -> Register product you can execute a simple registration on the Microsoft website, thus obtaining a licensed version of Visual Web Developer. The licensed version has no usage limit, and you are allowed to use it for professional software development and for the deployment of the applications created, too. Silverlight 4 Tools The product development cycles of Silverlight and Visual Studio are independent from each other. This is good news because the evolution of Silverlight is being driven forward a lot faster than the development of Visual Studio. Only nine months passed between the releases of the most recent versions of Silverlight. After installing Visual Studio you have to install the package Silverlight 4 Tools. It contains components to enable the development of Silverlight applications. Among others, there is the template project Silverlight Business Application which we treat in depth in this article. To download the Silverlight 4 Tools, open the Microsoft website: Silverlight 4 Toolkit It s not indispensable, but we recommend to install the Silverlight 4 Toolkit, a project available from Codeplex: The Silverlight 4 Toolkit contains powerful and comfortable controls. Do not mistake the Silverlight 4 Toolkit for the Silverlight 4 Tools. They are not the same. Database Our first business application shall work with an SQL Server database. Microsoft offers various sample databases for downloading. We employ the Northwind database. VFP developers also know it by the name Tastrade. The download address is: aspx?familyid= a0-8da2- eebc53a68034&displaylang=en

2 Visual Studio Now that all necessary development tools have been installed, we can start. To VFP programmers the development environment Visual Studio might look unfamiliar. But upon closer scrutiny everybody will discover many things it has in common with VFP. Visual Studio has a menu and a toolbar. We know some of their functions from VFP. Apart from this, the screen is filled by the Start Page. It is similar to VFP s Task Pane. We use it to open the recently used projects, create new projects, and have current information from the Internet displayed. Visual Studio has a command window, too, but its capabilities cannot be compared to those of the VFP command window. New Project To create a new project in Visual Studio, we click the first icon in the toolbar, New Project. A dialog pops up for choosing from a lot of template projects (see Figure 1). These template projects have been installed with Visual Studio or with the Silverlight 4 Tools. Third-party providers also offer template projects which arrive in this dialog as well. To the left hand side of the dialog there is a treeview control showing the template projects in a hierarchical order. Under Visual C#, the entry Silverlight is located. In this selection, a list of Silverlight template projects turns up in the middle part of the dialog. Choose the Silverlight Business Application. (If the Silverlight Business Application is not listed, this means that the Silverlight 4 Tools have not yet been installed.) In the lower section of the dialog you can give a name to the project. By default the suggested name is BusinessApplication1. In the Location field one defines the folder to store the project. The name of the solution folder is the file name of the project, and normally it will be identical to the project name. The checkbox Create directory for solution should be ticked. Thus, a new directory with the name of the solution folder will be set up in the place you specified in the Location field. For further projects no new location then needs to be put in; for each project a dedicated directory is created. With a click on the OK button you copy the template project to the target directory and open it in the Solution Explorer The Solution Explorer in Visual Studio is roughly an equivalent of the Project Manager in VFP. A substantial difference is that you can gather several projects in one solution folder. So Visual Studio provides an additional container wherein more than one project can be managed. This comes handy especially with Silverlight Internet applications because each Internet app consists of at least two projects, a server project and a client project. Apart from this, the form MainPage.xaml opens up for editing. We do not want to edit this form, though, and close the window. What s in it? We can start and test the freshly created project immediately. In Visual Studio applications are executed in debug mode when you click the green arrow in the toolbar or push the function key F5. Figure 1. New Project Dialog Page 2 FoxRockX November 2010

3 Figure 2. The template application in the development environment At the startup of the application, the message ASP.NET Development Server shows up in the info area of Windows. We are creating an Internet application in Silverlight. Internet apps are being hosted by an Internet server and are executed in a Web browser. Visual Studio carries with it an Internet server which starts up automatically with the application. That s what the message in the info area points out. This ASP.NET Development Server also runs on the home versions of Windows which normally have no Internet Information Server of their own. A moment later, the default browser is launched. In most cases it will be the Internet Explorer. Now the Silverlight application starts up in the browser. The template application carries a headline with a symbol and the app name. Farther to the right there are two buttons for activating the pages Home and About. The contents of the main area change accordingly. Just below the headline there is a separate line with a Login button. The template application comes with a rudimentary user management. It s nice for learning purposes, but do not think of using it for real business applications. Figure 3. The template application at runtime November 2010 FoxRockX Page 3

4 During your testing you will have noticed that the browser s address line changes whenever you click a button. The name of the loaded page is displayed at the end of the address line. This feature may be of benefit in the particular case that the user, by putting in an address, directly starts a specific function. However, with most business applications such user shortcuts will not be wanted. The Silverlight Business Application is a template. You need not employ all its functions in your own applications. But there s a good deal to learn from this template app. So we take the template app as the base for developing. The server project As mentioned before, a Silverlight Internet application consists of at least two projects. Let s turn to the server project first. The server project contains all functions for data access and it provides functions via a domain server through the Internet. We can compare a domain server to a Web service like we know it from VFP. In the Solution Explorer the server project is displayed in bold letters. After its project name it carries the extension.web. Thus in our example it s named BusinessApplication1.Web. Setting the start page An Internet application has a start page. The Internet user puts the name of the page into the address line of his browser. The Silverlight Business Application comes with two start pages both located in the server project. Their names are BusinessApplication1TestPage.aspx and BusinessApplication1TestPage.html. From the context menu of the respective page you can choose set as start page. Why are there two start pages in the first place? Well, there might be some existing ASP.NET Web applications into which you want to integrate a Silverlight application. In such a situation it is practical if you instantly have an.aspx page through which to launch the Silverlight app. On the other hand there might be HTML Web sites into which you want to integrate a little Silverlight app. Then you ll appreciate having an.html page that can launch the Silverlight app. But real Silverlight business applications will most likely not get integrated into existing.aspx applications or.html pages. As applications they will rather claim the entire window of the browser for themselves. In that case the start via an.html page is the simpler solution. Then nothing needs to be configured at the Internet server in order to execute.aspx applications. Any start page not needed may be deleted from the project. Data access Any business app works on data. From a Silverlight application you can in principle reach all data sources accessible by ODBC or OLE-DB, of course also including VFP databases. But the wizards in Visual Studio do not support using Figure 4. Adding an ADO.NET Entity Data Model Page 4 FoxRockX November 2010

5 ODBC drivers and OLE-DB providers. So it takes some programming work if you want to operate with such data sources. We take the simplest path, opting for the mode of data access which is perfectly supported by Visual Studio for Silverlight applications: The ADO.Net Entity Data Model. These entity data models require a special type of driver; the one for Microsoft SQL Server is being installed along with Visual Studio. In the server project there is a Models folder. In its context menu, pick Add, New Item. A dialog will pop up showing the installed templates. It is similar to the New Project dialog we already know. In the group Data we find the ADO.Net Entity Data Model. We rename it to NorthwindModel because we want to work with the Northwind database. Figure 5. The Entity Data Model Wizard The Entity Data Model Wizard starts up. First we select Generate from database and click on Next. The next step is to select the connection to the database. Here we click on New connection. In the subsequent dialog Connection Properties, Microsoft SQL Server is pre-selected. As the server name we put in the name of our own SQL Server. If the SQL Server has been installed with Visual Studio, there will be an installed instance by the name SQLEXPRESS. At the local machine we can access this SQL Server by the name.\sqlexpress Windows authentication can be used. From the combo box you may choose the Northwind database. And just click on Test Connection to check out whether you can establish the connection to the database. A click on OK copies the connection to the Entity Data Model wizard. In the field Entity Connection String the generated connection string is shown. The entity connection settings are stored with a name in the file Web.Config. The suggested name is NorthwindEntities which we accept. At runtime the connection string is being read from the file Web.Config. In case the application shall run on a real Internet server the administrator can customize the connection string in Web.Config. As it is a text file, an editor will do for modifying it. The next Step in the wizard lets us select objects from the database for getting displayed in the model we just set up. In VFP we always have access to an entire database. In contrast to this, by using a model we can limit the visible objects. For the first application, selecting only the table Customers will suffice. The data model is being saved in the server project with the model namespace NorthwindModel. At the click on Finish the wizard shuts down, and the database access has been set up. Visual Studio automatically adds various references to the server project. You do not need to worry about this for now. Visual Studio merely takes all the necessary steps for us. Then the model is opened in the visual designer which resembles the Database Designer of VFP. We close the window as no modifications of the model are due. The server project has to be compiled anew in order to let the fresh model be recognized by the other components of the application and by Intellisense. To that end, select Rebuild in the context menu of the server project. Domain Service The Silverlight application running in an user s Internet browser communicates with the server via a domain service. November 2010 FoxRockX Page 5

6 A domain service is basically a special Web service similar to the Web services we know from VFP. In the server project we find a Services folder intended for domain services. In that folder s context menu, once more select Add, New Element. On the page Internet you will find the Domain Service Class. Let us name the service NorthwindService. After a click on OK the wizard Add New Domain Service Class starts. In a combo box the wizard offers the ADO.NET Entity Data Models to choose from. After selecting a model you will see a list of the objects the model contains. If in this wizard there is no possibility to select something and there are models in the server project, then the server project has not been compiled after adding the model. As rule of thumb one should tick all checkboxes in this wizard. We intend to work with all tables of the model. And of course we want to have writing access to the data. The wizard shall plainly generate all code for us it can generate. With a click on OK it starts working and generates the class NorthwindService. cs. The class is being opened in the code window. No closer look the details of the generated code is required here, but scrolling through the code window you will see which methods have been generated, namely GetCustomers, InsertCustomers, UpdateCustomers, and DeleteCustomers. These methods get published by the domain service. Through them the data exchange between the Silverlight client and server happens. By the method GetCustomers you execute the SQL command SELECT to read data from the Customers table and send them to the Silverlight client. The method InsertCustomers executes the SQL command INSERT to create new records. The method UpdateCustomers runs the UPDATE command and saves modified customer data. And via the method DeleteCustomers you can delete customer data. So the fundamental functionality for handling data is there. We don t want to change the code and therefore close the code window. At this point we are in fact finished with the server project. We have established the connection to a database with a model, and based on this model we have generated a domain service. All this was done in simple steps, guided by the wizard and without any programming effort. Before turning to the client project, we create the entire solution anew. To that end, go to the Solution Explorer, do a rightclick on the solution entry, then choose Rebuild Solution. The Client project The client project is the essential Silverlight project. This project is being executed in the browser of the Internet user. Figure 6. Wizard for the Domain Service Class Form As we already saw in the first test, the application is basically able to run. The form that makes the frame in the browser is MainPage.xaml. In this frame, two pages can be activated: Home.xaml and About. xaml. You find these pages in the client project (BusinessApplication1) in the Views folder. A double click will open the page About.xaml in the designer of Visual Studio. The designer appears in a window in two parts. The upper part shows the design view, comparable to the form designer in VFP. The lower part shows the XAML code. Page 6 FoxRockX November 2010

7 Figure 7. The About form with DataGrid What would we do to create a simple form in VFP? By drag & drop we d pull a table from the project manager into the data environment of the form, and then, again by drag & drop, we d drop this table on the form. As a result we would have a grid on the form which displays the data from the table. To create a first Silverlight form, you can indeed take similar action in Visual Studio. From the menu Data, Show Data Sources, you can open the window Data Sources. Now the NorthwindService shows up in this window, and the table Customers below it. It s time to consider what exactly is happening here. We develop an Internet application with Silverlight. We have created the server project, including its data model and its domain service. Now we are working with the client project and a form is opened in the designer. In the window Data Sources we see tables from the server project which can be accessed via the Internet and via the domain service. Here Visual Studio 2010 provides very powerful tools making it really quite easy to produce Silverlight applications. From the window Data Sources we drag the table Customers to the design view of the form About.xaml. As VFP developers we d expect that a grid is created on the form. And, lo and behold, a Silverlight DataGrid in fact comes to life on the form. All necessary settings, especially the connection to the database, are done automatically. In the lower XAML part of the form we see the XAML code is being generated. Let us test the result of our labour and push F5. The application gets started. Again the browser appears, and the Silverlight application is being loaded with the page Home.xaml. A click on About activates the page About.xaml, and we see DataGrid. A brief moment later the data from table Customers are being displayed. Done! The first Silverlight business application is running. It displays data from an SQL Server database. We have composed an Internet application which can be published on an Internet server, accessible to any Internet user. To VFP developers, having hitherto developed only desktop applications, this is a huge leap. Apart from the DataGrid we d like to add a few TextBoxes to the form. In VFP we would drag a field from a table in the data environment and drop it on the form. In Visual Studio we tackle this quite similarly. The window Data Sources shows the objects in a tree view. There s a tiny arrow before the name of the table Customers to open the object. A list of field names surfaces. Now we can pull a field from November 2010 FoxRockX Page 7

8 Figure 8. The form with DataGrid and text boxes Figure 9. The finished application at runtime Page 8 FoxRockX November 2010

9 this list onto the form. This creates a container with a label and a TextBox. Again, all settings are done automatically. So nothing has to be set up by hand. We can test the capability of the form. As expected, it all works. What does the form achieve? At its start, all records from the table Customers are loaded into the DataGrid. Here lies of course a potential for optimizing because data loading via the Internet usually takes place rather slowly. In the DataGrid the user can move the record pointer by mouse clicks or via the keyboard. Gladly we notice that the display in the TextBoxes gets updated. No refresh is needed here, in contrast to VFP. In the DataGrid the user can set the sorting sequence to a column by a click on its column header. This feature is provided in Silverlight DataGrids without any programming involved. What comes next? In the next article you will see how to save modified data and create new records. To that purpose buttons will be added to the form, and the first lines of code will be written. Author Profile Uwe works for the German-speaking FoxPro User Group (dfpug) as well as for several software and system houses as a freelancer. He is the product manager of the well-known Rapid Application Development Framework Visual Extend. Together with Venelina he has written the books for Visual Extend 8.0, 9.0, and Uwe is a Microsoft Certified Professional for VFP. He has been given lectures at numerous regional meetings since 1996 and at the VFP developer conference in Frankfurt since 2000 and the Prague VFP DevCon since 2004 as well as at Developer Events in Bucharest, Bunnik, and Paris. He is doing workshops, and one-day user meetings regularly, as well as individual coaching. Uwe is working together with Venelina Jordanova in the company V&U Ltd, located in Varna, Bulgaria. Based on their long-year experience, V&U ( eu) is focused to realize FoxPro projects. Uwe@VandU.eu Venelina has been a FoxPro developer since FoxPro for DOS version 2.0. She is specialized in database development and designing application architecture. She is a Microsoft Certified Professional for SQL Server, and for Analyzing Requirements and Defining Solution Architectures. Venelina has been a regular speaker at the German VFP developer conference since 2003, and the VFP DevCon in Prague since 2004, and spoke at Developer Events in Bucharest, Bunnik, Paris, Varna, Burgas, and Sofia. She has written several technical articles for FoxTalk and FoxX Professional. Venelina is the lead developer of the well-known Rapid Application Development Framework Visual Extend. Venelina is working together with Uwe Habermann in the company V&U Ltd, located in Varna, Bulgaria. Based on their long-year experience, V&U ( is focused to realize FoxPro projects. Venelina@VandU.eu November 2010 FoxRockX Page 9