Using the Client Framework to Develop Lightweight Front Ends

The Agile Business Suite (AB Suite™) Client Framework creates a number of new possibilities for developing modern front-end applications. Windows Presentation Foundation (WPF), Microsoft® Model-View-Controller (MVC), and Windows Communication Foundation (WCF) are supported out of the box, making it a suitable complement to most modern development practices.

In the web and mobile application development worlds, JavaScript frameworks like jQuery, Knockout, Angular, and Microsoft WinJS are often used to create applications that run completely on the client, minimizing the requirements placed on front-end servers without demanding extra installations. These frameworks have the ability to use Model View ViewModel (MVVM) patterns and data-bind the results of a web service call to deliver highly responsive and interactive web sites or mobile applications.

So, how can the Client Framework make use of these JavaScript frameworks?

The Client Framework and JavaScript

MVC-generated C# models from the Client Framework use technology called T4 code generation to scaffold controllers and views. With T4, you code a template that generates code. So, when integrating JavaScript into the Client Framework, you have to develop unique T4 templates for each JavaScript framework. And if needed, specific requirements from clients can be integrated by customizing the T4 templates. In this example, we will be customizing the MVC templates to create a JavaScript web application using a REST service and Knockout data-binding. We’ve used bootstrap for the GUI in order to make the web site responsive to various screen sizes.

Note that depending on where you installed Visual Studio, the T4 templates may be found under “extensions,” such as: C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions\.

There, under a generated id you will find \Templates\ScaffolderCodeGenerator.

Knockout Demo

For this article, we adjusted the Chocsys application from the AB Suite student guide by creating a master-detail view for every Ispec. For example, it displays a list of “Cust” records in a grid and opens a detail view whenever a specific record is selected. We used the koGrid, a Knockout add-in that provides client-side filtering and column selection without the need to rebind and collect new data, to add a nice, responsive feel to the application.

Selecting a specific individual opens a popup showing the detailed contents. The GUI elements include a widget for the dropdown that accommodates the listbox elements from AB Suite, as well as a slider for the numeric fields. In addition, client-side validation is included. Remember: these screens are completely generated by the T4 templates, so once they are developed no more coding is needed, only generation.

T4 Templating

As noted earlier, some customization must be done to the T4 templates when generating an application. In this case, only a few templates require customization.

As Knockout has the ability to data-bind the results of a REST service, only a small change to the controller is necessary to accommodate validation by the binding engine.

In order for Knockout to process data from the service, it is modified within the controller and sent back as Json data.

Some extra data items are also included to support the processing of service calls.

The majority of the changes occur on the view and JavaScript model. We’ll examine them in the remainder of the article.

MVVM View (HTML)

The MVVM pattern decouples the view from the logic and the data. However, the ViewModel binds the view to the data, meaning the T4 template for the view and JavaScript must be adjusted to fit the needs of Knockout. To adjust the view, we must first include references to the JavaScript files and then bind the form to the JavaScript model using “with:” binding.

Since we’re using a master-detail view, we’re able to create a grid with the popup for the detail view included via standard bootstrap functionality.

In the details view, we loop over the properties of the model generated from the Client Framework. And just like with MVC, the proper HTML elements are generated – many through HTML helpers with attributes added for bootstrap. That said, a different HTML input element is created depending on the property. For instance, a list property – one that reads from the XML metadata file generated during a Client Framework conversion – will be transformed into a dropdown list.

To enable the dropdown to work as intended, a list generated by the new Glb.List element introduced in the Client Framework is used for the auto-complete function.

In addition, we performed some extra JavaScript work to glue the dropdown to the list REST call.

The grid itself does not have too many extra elements in the view because we will be using the binding engine from Knockout. The columns are read from the provided JavaScript model.

That’s the sum total of the changes made to the view itself. This view is also the location to make further adjustments, should you need to address individual client requirements.

MVVM ViewModel (JavaScript)

As it serves as the glue between the Model (data) and the View, the ViewModel handles the majority of the processing in the MVVM. It includes bindable properties, as well as some basic Knockout specific methods. For example, the object is initialized via self.initData. And, it is connected to the REST service using a submit handler that is present with the callback to bind the result to the model (this.submitClick).

Then, some prototype functions are added to the JavaScript object to handle the REST service calls, including functions that retrieve the object’s data, list the dropdown elements, and transmit data back to the AB Suite system.

And finally, a bit of jQuery code glues the view to the data received from the web service.

Summary

With these modifications to the standard MVC T4 templates, it’s possible to create modern, responsive, and lightweight applications for the Web and mobile devices. This brings a new perspective to classic AB Suite applications by opening them up to modern, front-end application development practices without losing the strength of AB Suite’s model-based development environment.

Customizing the Client Framework to use JavaScript frameworks creates an extra avenue for web and mobile application development. While this example shows the power of Knockout combined with a REST service, there are certainly more options open to you. For more, see the example we created that uses the WinJS JavaScript library in a similar fashion to how we employed Knockout.

And if you’d like to learn more about building modern front ends with the Client Framework, please email us at ABSuite@unisys.com.