Proof of Concept with DevExpress XAF Mobile

Some words upfront:

DevExpress XAF Framework is one of our .net Dev Tools with it we creates lot of our Business Apps in the last couple of years. 

Now DevExpress was understand his customer needs to support also the Mobile Devices. 

The mobile apps will reuse the database, as well as certain aspects of the data model, application logic and UI settings of our existing XAF applications.

More Information on XAF :(https://www.devexpress.com/Products/NET/Application_Framework/)

More Information on XAF Mobile :
(https://sqlnetcon.blogspot.de/2016/06/xaf-goes-mobile-ctp-version-ships-with.html)


Why i wrote this Post: 
We need to test the new XAF Mobile Solutions for our LOB Apps 
and try to find out how we use it, and how fast end efficient is the tool to meet our customer Requirement for Mobile Apps. 


let's start:  

Download the latest Version of DevExpress from Download Center 
in my Case: 

• eXpressApp Framework v15.2.9 ( currently i use 16.1. Beta )
• Visual Studio 2015  ( it works from VS2012ff ) 
• XAF Data Service Visual Studio Template Download it here :( C# / VB.net ) 
• ASP.NET MVC 4 ( that's installed in VS2012 ff - in case not :  ( you can download it here )  

we use our Yoga Classroom Schedule Reservation System. 
This App is used for Yoga or Training Studios to handle Scheduling, Customer Communication, Contract Administration and Invoicing.   

Here is the Sample Screen Shot

That's the Web UI. 

The Mobile App needs to following functions: A Student needs to check the next Events, Contract Details and Invoice/Payments. Event Reservation and Canceling must be possible. 

back to VS Solution and add the DataService to the Project.

common pitfall: 
after adding the DataService you need to recompile one Time the Project to update the NUGet Packages. Do nothing else odd .. ( a coffee is possible ) 

now change the Application Name in new MobileApplication.cs

in my Case: pncYCRS

now let's add the Module Classes

if you miss the Model Class in Tool Box, validate the framework Settings in DataService Project in my Case all Projects running on  ( Default for DataService is 4.0.0.0 but the DevExpress Default for new Projects is > 4.0.0.0  so compare and set it all the same.   

now we can add the Module to DataService Project:

after this Step the Module and all Reference Modules are loaded.

now open the web.config in DataService Project and change the 

connectionString="" to your SQL Server and Database.

DataServcice is ready. 

Now go back to the Mobile App and change Security, Views and Navigation.


MobileApplication Security:

In our App we use AuthenticationStandard so we need to modify the 

MobileApplication.cs file 

   protected override void OnSetLogonParametersForUIBuilder()
        {
           
            // If your application requires authentication before building a mobile application UI, 
            // create a test user in DatabaseUpdater and provide these test user credentials through SecuritySystem.LogonParameters here.
            AuthenticationStandardLogonParameters logonParameters = (AuthenticationStandardLogonParameters)SecuritySystem.LogonParameters;
            logonParameters.UserName = "Admin";
            logonParameters.Password = "";

            //base.OnSetLogonParametersForUIBuilder();

        }

[edit:] is only needed for Simulator to run an App with Authentication

add the EventHandler for OnSetLogonParametersForUIBuilder()

in My PoC i use a very Secure way : Admin without Password ;-)  ( don't do it in PROD ;-)


MobileApplication Model Editor Views:
[edit:] in Mobile Application open the Model Editor
you need to modify the Property: Mobile visible = true 
the Views with the 

don't forget to flat the Navigation, 
currently no SubItems are supported:


MobileApplication Model Editor Navigation:

save, compile 

and Run the MobileApplication in VS Studio  ( Start DEBUG ( Default Port is 62695 ) ) 

if the Browser is open, open a new TAB and paste the App Simulator URL 

http://maindemo.cloudapp.net/Simulator/?appPage=/player.cshtml?app=http://localhost:62695/MetadataService.svc/AppConfig?dataServiceUrl=http://localhost:62695/DataService.svc 

and run the App Simulator: 

... so and drums .... ( the VS Studio is in Debug Mode at this Time  ) 

so a Student can now ( after the very secure Login ) set a seat in a Class Room ..




Work Hours spent on this effort:
4 hours  : Programming for DataService and configuration
12 hours Model Design View Column shaping, 
Details Page Shaping to prepare the Mobile UX / UI.

well done DevExpress !! I love it :-)  

my Next Steps 

• use the production Code base 
• add Mobile App there 
• deploy the Mobile App to App Store
• prepare the PROD Environment with Load Balancer and 2 Web Servers

this point will be new Posts in next Days.

so enjoy 

Cheers Lars 

XAF Goes Mobile: CTP Version Ships with v15.2.9

with the new Release of XAF we can provide our Solution also to Mobile Devices. So we reach a new State for all our Business Solutions. WIN, WEB and Mobile. That's awesome. Thank you DevExpress!

Some more infos about you can find on devexpress Web Site:

https://community.devexpress.com/blogs/eaf/archive/2016/04/21/xaf-goes-mobile.aspx

Cheers Lars