How to create Silverlight applications

In this tutorial we will show you how to create a Silverlight application from a sample Microsoft database AdventureWorks using Xomega.Net for Visual Studio and open source Xomega Framework.

With just several simple steps we will generate a powerful search form that allows searching records in a given table by any criteria using various operators. We will also generate a details form that allows viewing, editing and deleting selected records as well as creating new records.

• 0. Prerequisites.
• 1. Create a new solution for an Xomega Silverlight application.
• 2. Import model from the database.
• 3. Generate CRUD operations.
• 4. Build the model.
• 5. Generate service implementations.
• 6. Add Silverlight service references.
• 7. Generate search and details pages.
• 8. Start the application.

Before running this tutorial please make sure that you have the AdventureWorks database set up and the Xomega.Net for Visual Studio 2010 or 2008 installed with a valid license. You also need to verify that you have Silverlight 3.0 SDK installed if you are planning to target .Net Framework 3.5 (or if you have VS2008) and Silverlight 4.0 SDK (included in VS2010 Service Pack 1) if you target .Net Framework 4.0.

To do that you need to add a new project in Visual Studio, expand the Xomega templates and pick the Xomega Silverlight Solution template. You can target .NET framework 4, which will use Silverlight 4 or .NET framework 3.5, which will use Silverlight 3. Specify the name for the solution, which should not contain spaces or any other illegal characters to make things go smoother. In our tutorial we will just use the default name MyProject1.

Click OK to create a solution. You will have five projects in the solution as follows.

Build the model project and make sure there are no errors. Reload all the corresponding projects as prompted. Next build the entire solution and make sure that there are no errors.

Select the generator for importing the model from a database in the model project (Generators > Model Enhancements > Import from Database) and open the properties for this generator (hit F4 or Enter). Open the database connection configuration dialog for the Database Connection parameter and click the Configure button.

Select SQL Native Client in the Provider tab and click Next. Specify the connection information for the AdventureWorks sample database, test the connection, and click OK if the test was successful.

Click Next on the Database Connection Configuration dialog to review a list of tables and possibly exclude some of the tables from the model. We will import all tables in this tutorial, so you'll need to just click Next again, review the connection summary and click Finish, which will save this connection as a default for the model project.

Now you can run the generator by selecting the Generate option from the context menu.

The files with the object definitions based on each database table will be added to the model project under the Import folder.

Note: you can also watch our video tutorial on how to import from database and further enrich the model.

In this step you need to pick the object, for which you want to create the standard Create/Read/Update/Delete (CRUD) operations as well as a Read List operation to read a list of objects based on a number of criteria. In this tutorial we will use the Error Log object, for which we will generate the presentation and the service layers. Generate the model CRUD operations for the error log object by selecting the corresponding menu option from the context menu.

Make sure that the error_log.xom now contains operations as part of the object definition.

Note: you can also watch our video tutorial on how to define and customize the service layer.

In this step you need to build the model project to run all model generators that are included in the model build (i.e. the Include in Build parameter is set to true). Wait till the build finishes and reload all the projects as prompted.

Generate the classes for the entity data model by selecting the EntityModel.edmx file and running the custom tool on it.

Make sure that the EntityModel.Designer.cs appears under the EntityModel.edmx file.

The service structures and interfaces for the error log operations should be generated whenever the model project is built as they are regenerable. Xomega also provides a generator to create the initial implementation for those interfaces that uses LINQ over the entity model and Xomega Framework base classes. This generator is not supposed to be a rerunnable after you start making manual edits and therefore it is not included in the build by default.

Generate the initial service implementation for the error log operations by selecting the corresponding option from the context menu for the error_log.xom file.

The error log service implementation class should be added to the Entities project.

One Silverlight idiosyncrasy is that it only allows asynchronous WCF communication and therefore can use only asynchronous WCF services, which are not generated by Xomega directly. Therefore, there is an extra step of adding a service reference for Silverlight applications. Right-click on the References node of the Silverlight project and select the Add Service Reference context menu.

In the dialog that comes up you can click the Discover button to display the services defined in the solution. Pick the ErrorLogService and set the namespace to be the name of the service appended with the Ref suffix. It is important to follow this naming convention, since the generators use it to be able to invoke the services.

Click OK and make sure that the service reference has been added to the project. If you have VS2008 and get an error at this point, you may need to delete the service reference, restart the Visual Studio and repeat this step.

Note: You will have to update each service reference through a context menu whenever you change any model operations or structures, which affect the service layer.

Right click on the error_log.xom file and run the generators for the Silverlight search page and the Silverlight details page.

Select the Silverlight project in the solution explorer and click the Show All Files button. You should now see a Gen folder that contains the details form and the search form based on the Read List operation. Include these files in the project.

Note: before you start manually editing these forms you will want to rename these files and classes and move them to the appropriate location to prevent Xomega generators from cleaning them up accidentally.

Edit the MainPage.xaml file of the Silverlight project to make the source URI point to the search form XAML file.

Make sure that the Silverlight.Web project is set to be the startup project for the solution. Make the TestPage of that project to be the start page by selecting the corresponding context menu.

Build the solution and start the application. You should see the error log search page come up.

You can run the search using a number of criteria and operators. If you have records in the database table, you will be able to see them in the results grid and view the details by clicking the Details button. If you don't have any records yet, you can create new ones by clicking the New button in the search form.

The required fields will be highlighted in bold. The form will also display any validation errors and will prompt for unsaved changes if you try to close it without saving. After you save the form, the updated data will be displayed in the results grid of the search form.