Presentation Layer – Design Time Experience [En]
August 23rd, 2010 | Building Enterprise Applications [En] | 4 Comments »
In this post I will introduce to you some of the features of Composite Human Experience (CHE) Platform in Microsoft Visual Studio 2008. CHE is as part of Asseco SEE Experience Platform for building Enterprise Application. The goal was to develop platform for completely new banking software line of products competitive on global market and based on Microsoft technologies, IBM’s IFW models, and Asseco SEE skill to adopt these models and technologies and apply them in today banking domain. Asseco SEE Experience Platform also includes tools to modeling data (entities), transactions, reports, documents, business intelligence etc.
CHE is a toolkit for creating modular, business-focused client applications. CHE enables you to build reusable, connectable components and assemble them into working applications that are easy to change.
Today CHE Leverages .NET 3.5 SP 1
It’s build on the top of .NET Framework 3.5 SP1, and includes a run-time framework, design-time tools, and out-of-the-box functionality. It also follows the proven UX and UI style guidelines. CHE uses many proven techniques and technologies like WPF 3.5SP1, WPF Toolkit, Unity, MSSQL, SSRS, SSAS, Enterprise Library, MEF, Linq, Click Once deployment strategy…
In Run Time, desktop client uses many OS capabilities as: Windows Feedback Services, Windows Error Reporting, Restart Manager, Sidebar Gadgets, Command Links, Task dialog as Application Service with on-off capability.
In design time our tools use technologies like T4, GAT/GAX, VS SDK and Tools, VTO for Office Integration…
We’ll be growing to many different clients, starting from WPF 3.5 and going to WPF 4.0, Silverlight 4.0, ASP.NET MVC , OBA , Windows Phone during the next future. We are trying to move CHE Factory to Dot Net 4.0 and VS 2010 in next release and to move to cloud.
This walkthrough demonstrates the end-to-end process of creating an application in CHE. Next article will describe Run Time experience with CHE.
Steps
- Create a Business Module.
Create the application project.
- Model Presentation Meta data of Module
Tune application look and feel.
- Generate code from Module meta data
Create and Extend code.
- Run Application
Watch application without line of code.
Create a Business Module
The first step in creating a CHE application is to open a new project. The CHE includes a solution template that you can use as the starting point for your client application. The solution includes recommended practices and techniques; it is the basis for the procedures and automated guidance included with the software factory.
We have three options
Create Parts project with Test Shell.
This is used for creating reusable Parts for application.
Create Only Shell for deployment and production.
This is used for production Shell, this Shell can be Deployed with Click Once and module configuration
Create Business Module with Shell.
This is most used template for creating module with test Shell that can be used for starting application. This Shell is not a production Shell. It serves for development purposes only.
After selecting Create Business Module with Shell, GAX starts a wizard to gather information that it uses to customize the generated source code. Business modules are distinct deployment units of a CHE application that contain different business logic elements.
In this wizard we can see preview of solution, and choose presentation model used in module. After that, we can set module name and namespace.
Output of this wizard is a Visual Studio solution with a Source solution folder.
This solution contains the following projects:
Training – Business Module contains folders for module elements like Commands, Pages, Data Providers, Application Services, etc. Each module has: NavigationMap.xml – used to configure area pages of the module; ModuleInit.cs – base class of module used for startup of module; Module Commands – contains definitions of WPF Routed Commands used in module.
Training.Interface – is Business Module Contract with Constants. Commands and data providers are identified by unique strings. These unique strings are defined as constants for each of these element types, grouped in different classes located in the Constants folder;
Training.Parts – This project contents parts of this domain.
Projects for Resources and Test also exist. Shell is used to host module and display. Shell has following elements: ContainerConfigurator.cs – class used for overriding DI container configuration and controlling startup of Shell; ProfileCatalogV2.xml – contains configuration of modules that shell must load; App.config – initial configuration of application; EntryPoint.cs – as start up class with shell that controls single instance of application and parameter passing to the platform; App.Chm – for application help purposes.
If we click F5, we can get application shell that host module with area page, home page, search, ribbon, tabbed area for display screens and other common application features.
Next steps is to model application module
Model Presentation Meta data of a module
We are going with the next steps of modeling our module. We are going to use our tool Model Explorer from VS 2008. Model Explorer is visual representation of single model, some particular model part, or multiple models in the same time. Model Explorer is tree-like control which enables hierarchical view of model, easy navigation through model, as well as manipulation with model elements using drag and drop (and other) functionalities. Model Explorer allows creating, viewing, editing, and deleting individual model elements contained in a model. Each model element is represented with different icon in order to improve model “readability”.
Model Explorer provides easy creation of model elements.
Model Explorer provides common interfaces to interact with other user interface controls (drag and drop, cut or copy/paste…), such as custom designers or other tool windows.
Model Explorer has natural integration with Visual Studio environment.
Model Explorer is hosted inside Visual Studio as one of Visual Studio Tool windows. Integration with Visual Studio goes even further, and Model Explorer element properties are displayed inside Visual Studio Properties Window. When model is explored, using Model Search feature, result is displayed in Result Window, and using double click on one of results focus goes back to related Model Explorer element.
Model Connector dialog gives possibility to connect to one or more models or some of their parts. On the picture below you can see container nodes for all available model types. These container nodes are containers for model instance of the specified type. To choose model instance to connect to you must click on the appropriate check box.
We use Presentation model in this case, but we can have other models like configuration (for technical data), entity etc. Presentation model is a container for design and run time information that must be captured, managed and processed in order to bring reach and consistent visual identity of our application, and provide role based user interface. It is persisted inside Metadata Repository and accessed and managed through Metadata Service or Model Explorer. We use Presentation Domain Model to generate different clients: WPF, Silverlight, Mobile and provide rich runtime customization.
Now we can configure Presentation Meta data of module. We do this from scratch or import from entity assembly (Data Model), we can also use copy paste from other model or external data sources. Logic is simple: for every strong entity overview screen, list screen, task and parts with default mapping are build.
If entity class has data annotations as attributes from System.ComponentModel (http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx ) these attributes will be used for mappings.
The mapping is feature of Model Explorer. The screen for generating model directly from assembly that contains entities is shown in picture below.
All models are located in database, and can be used in design time or run time. If you are SQL master you can directly model application with TSQL.
Furthermore, you can use already made, third party models. For example, Asseco started from IBM’s IFW model, and modified and improved it for specific business area. It is very important to have model owners which will provide consistent model using across product family. Model owners are responsible to provide model with no duplicate features.
Assets in model provide a repository of Screen and UI parts for particularly business capability/functionality. As instances of platform components, assets represent default views of business information and product independent features, like preview of customer, product etc. These screens and parts can be used for composing solutions in the Visual Studio or in Run-Time for extending application functionality.
Using of IBM IFW models to generate reusable assets for composition banking applications, is shown in picture below.
We now continue to use Model Explorer in creating our module. Select model and right click to create package that contains our module:
By doing this, we are getting an instance of module meta data.
We choose to copy entities from Involved Party package (which is generated from Asseco customization of IFM model).
At this moment, we got all elements associated with selected DateItem shown in picture above (CustomerScore) like screens, parts and data providers.
Presentation Model Package in Model Explorer contains: reference to role module, definition of screens, parts, command classification, various commands types, application services, data items (entities), formulas, queries, data providers, deployable artifacts, converters and representing types.
Screens
For selected DataItem we have three screens, one for overview this enity, one for preview collection of entitys and one for Create and Update. We dont have Delete screens, beacuse we do not remove enitys from database, but we can create StatusUpdate Screen for chaning object status, similiary to delete.
And by selecting one screen in ME, Property Grid of Visual Studio will show model attributes of that particular screen:
We can Add UI Part to screen with right click on screen and then Add Part/View Relation button click:
After this command, dialog for selecting specific part will be shown, like in the picture below:
And part view relation on screen is now created:
It is on your further decision to describe this part – screen relationship. For example, you can choose is it runtime or design time part. Runtime parts are loaded in runtime a can be changed in runtime, because this model also provides runtime configuration.
Parts
Part is associated with data item, and we can setup attributes on data filed of part.
Attributes of selected DataField are show in picture below:
Model explorer provides setting the same value of some property to multiple DataFields.
For example, if we decide that some DataFields are not interesting in business purposes, you can set their IsTechnical attribute on true. In that case, it won’t be generated. But if we set IsVisible to false, Data Field will be generated but not visible. In runtime customization, you can change visibility of these data fields.
And now we can fine tune visible data fields. In most cases, we will first setup representing type on data fields if default mapping is not correct for specific business scenario. The picture below shows setting of alternative search representing type. This representing type provides setting of reference (link) to customer with lookup.
In conclusion, modeling of part is in most case how to hide, order data fields and setup their representing types.
Part View has attributes too:
Commands
For each screen we get navigation command.
We can setup several attributes on commands, but in our case defaults are solid and there is no need to change anything.
DataProviders
For each screen data provider is generated, but we can build our own.
Setup of data provider behavior is also available, like in the picture below:
After all these steps, it is time to generate code to see what we have modeled.
Generate code from Presentation Model
By simple using of ME commands we can generate code from model in Visual Studio solution.
We can generate all packages or each element of package separately.
After this, we have got solution with code:
Generated code for every model element always comes in two file. Owner of first file is generator, this file is regenerated each time we change model in ME. Owner of other file is Developer and this is partial class of first class. This class contains placeholders, where you can put custom code if need. This file is generated from ME for the first time and it will never be updated from ME if you do not want that.
Generated code of screen with runtime parts look like this:
And partial extension class:
Extension class has template methods as a placeholder for custom code if needed.
Parts are generated in Parts project:
Parts code behind look as shown below:
We use generator to achieve:
- Technology separation – generate one code for WPF 3.5, diff.erent for Sliverlight 4.0, Asp.Net, Windows Phone etc.
- Hide complexity of abstraction model – with generator we hide some of UI patterns that are complex for understanding and using.
- Provide faster execution – we can generate code that is faster then runtime discovering (by using reflection or other abstract methods).
Generators use T4 Templates, and you can change them if you want better results. T4 Templates are places in installation dictionary.
Next step is to translate application, add validation rules, fine tune it etc. and all this is part of runtime configuration. This will be presented in some of next articles. Application Services – Run Time Experience [En]
Run modeled Business module
Here is what we have got:
When we click on Training, we get features below:
Everything is a collection, modules is a collection of application, screens are collection of module, part are collection of screen, views are collection of part, data fields are collection of view. Why? Take simple list and create radically different visualiation, ( http://css.maxdesign.com.au/listamatic/, http://www.alistapart.com/articles/taminglists/, http://www.getpivot.com/ )
Other deliverables of CHE Design Time
Common developer activities supported by CHE are:
Recipes – automate procedures in How-to topics, either entirely or selected steps. This helps developer to complete routine tasks with minimal input.
Templates are prefabricated application elements with placeholders for concrete arguments. They can be used for many purposes, including creating initial solution structures to creating individual solution artifacts, such as project items.
Designers provide information that architects and developers can use to model applications at a higher level of abstraction. Designers can also generate code that is compatible with the architecture baseline.
With rich guidelines support
Quick Starts includes the source code for several small, focused applications that illustrate UI composition, dynamic modularity, commanding and event aggregation.
How-to topics explain specific tasks from development, test or deployment corner.
Reference Implementation. This is a composite application that is based on a real world scenario. This intentionally incomplete application illustrates the CHE baseline architecture. This is a good reference to see how many challenges are addressed by this guidance, when building composite applications.
Code snippets are provided for faster development of common structures like Event Subscribe or Publish, etc.
Documentation includes the architectural overview, reference implementation overview, design and technical concepts for composite applications, applied patterns, How-to topics, Quick Starts overviews, and deployment topics. Much of this guidance is applicable even if you are not using the Composite Human Experience and represent best practices for creating composite applications.
More Details @
- Separated Presentation
- Presentation model
- Application Host [En]
- Shell
- Screen
- UI Part
- Representing Types
- Data Provders
- Commands
More Information @
Application Services – Run Time Experience [En]
http://www.asseco-see.com/index.php?option=com_content&task=blogcategory&id=71&Itemid=196















































4 Responses
[...] Presentation Layer – Design Time Experience (milanCHE) [...]
Hi Milan,
Amazing work,
Thanks for sharing bits of architecture,
this is precious information.
Thanks,
Kirill
I hope you will keep updating your content constantly as you have one dedicated reader here.
I would like to thank you for the efforts you have made in writing this interesting and knowledgeable article. I am hoping the same best effort from you in the future as well.