Dressing up an Entity Framework model with a rich app UI in 5 min
Imagine that we have already build a mobile app using DXTREME such as the DXSK8 demo and already have a ready-to-use Entity Framework data model. Now we are faced with a task to provide a rich administrative application that will be mainly used in Intranet from the desktop (Windows) or web browser. This application should have a typical CRUD UI for managing goods in an online shop, content on our main web site, etc. and of course have potential for future extensibility and customization by a customer request. Following the instructions of this post it should be easy to do it your self from scratch in less than five minutes! (Sample app at then end of this post).
1) Create a XAF Cross-platform application
Create a new XAF solution called DXSK8.Admin by using the DXperience v12.2 XAF Cross-Platform Application project template as shown below.
Below we see the created solution which contains two ready to run XAF applications (DXSK8.Admin.Win, DXSK8.Admin.Web) and three empty XAF modules where the DXSK8.Admin.Module is the platform agnostic one. We are going to work in the platform agnostic module because we want to minimize code duplication between our Win and Web XAF applications.
2) Adding Entity Framework model types to XAF
XAF auto generates rich CRUD UI for our data using our award-winning DevExpress visual components. However our Entity Framework model is located in an external library so in our platform agnostic module we need to reference the EF model container which is the DXSK8.Service assembly along with the System.Data.Entity and DevExpress.ExpressApp.EF assemblies.
Next its time to add the all the EF model entities in our application business model by using the following code in the constructor of this platform agnostic module.
public sealed partial class AdminModule : ModuleBase {
public AdminModule() {
InitializeComponent();
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Customer));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Address));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Brand));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Employee));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.ImageSource));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Login));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.NotificationChannel));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Order));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.OrderItem));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Person));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Product));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.ProductFlavor));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.ProductType));
AdditionalExportedTypes.Add(typeof(DXSK8.Service.Store));
}
As a result now the XAF Application Model contains all types from the EF model and we are ready to use it we are ready to modify the auto generated Views, define the navigation structure or empower our app with built-in or open source modules.
For example in the sample app in the end of the post we used the Model Editor to modify the model of the platform agnostic module and create a Navigation menu for both platforms as shown:
Note: Creating Navigation Items is fully described in XAF docs (Add an Item to the Navigation Control). In addition you can find a detail tutorial and a big list of How To that can help you get the most out of XAF really fast!
3) Switch the Application to Using the Entity Framework
We continue to work in the platform agnostic DXSK8.Admin.Module. To use the
EFObjectSpace instances to access data we need to provide an
IObjectSpaceProvider implementation designed for
EF and located in
DevExpress.ExpressApp.EF assembly. For this we need to modify again our
Module.cs codebehind class as shown.
Note that EFObjectSpaceProvider’s first parameter is Entity Framework’s ObjectContext implementation from DXSK8.Service project.
public override void Setup(XafApplication application) { base.Setup(application);
application.CreateCustomObjectSpaceProvider += ApplicationOnCreateCustomObjectSpaceProvider;
}
void ApplicationOnCreateCustomObjectSpaceProvider(object sender, CreateCustomObjectSpaceProviderEventArgs e) {
var typesInfo = (TypesInfo)Application.TypesInfo;
const string metadata = "res://*/SK8Data.csdl|res://*/SK8Data.ssdl|res://*/SK8Data.msl";
const string provider = "System.Data.SqlClient";
var objectContextType = typeof(DXSK8.Service.SK8DataContainer);
e.ObjectSpaceProvider = new EFObjectSpaceProvider(objectContextType, typesInfo, null, e.ConnectionString, metadata, provider);
}
Note: XAF will not modify the schema of your existing database!
Conclusion
Microsoft recommends when accessing data to use Entity Framework, which from v5 is open sourced and has an unlimited list of add-ons and really big audience. We used this amazing technology to create the DXSK8 data service and in this post we demoed how to use XAF with three simple steps to manage its content by creating rich CRUD UI views as below on the spot. Therefore it should be clear that we can deliver app prototypes for our EF models really fast and our end users can enjoy access to their data with modern UI look & feel from day one! Note that XAF has a lot of build-in and open sourced modules that can be install with a simple drag and drop and can save you months of work.
In the next images we see two of the default auto generated XAF CRUD Views one for each platform (Win and Web).
For those of you that you have Entity Framework models and you want to try these instructions on them you may download an XAF trial from here.
Sample Download (Contains DXSK8.Service project as well).
In next post we will continue with a discussion over reusable EF models in XAF stay tuned!
We would appreciate your feedback on this post. Has it been useful to you? Feel free to contact us with any further questions.
Until next time,
Happy XAF’ing!
