Applying Styles to a View

(Please note that this article requires some familiarity with our upcoming ExpressApp Framework product library)

EAF does a good job of generating a default UI which in turns allows end users to perform desired actions using a familiar Outlook style interface. Depending upon the nature of the data to display, however, you may want to change the default settings of the controls on your form. To do this, you would start the model editor...but in so doing, you will find that there are no options in the model to do this very thing...The obvious question is why?

Our intention was to make the application model independent from its UI implementation. Currently we have both a WinForms and Web implementations that can interpret the same UI model (It is very possible that we will add Win Mobile and WPF UI implementations as well). This is the reason we don't have an XtraGrid option in the model for the ListView. At the same time you still need to tune your views.

Let me describe a specific problem I encountered recently in rewriting an internal sales management system. We have a Customer class and a Customer's ListView. There are thousands of customers and the nature of the business implies that every time you visit the Customers list view you need to find a specific customer. Search criteria can vary - you may have a Customer ID, an email address or just a misspelled company name. So I wanted to activate the FilterRow feature of the XtraGrid (which is used for the ListView in EAF applications).

Quick and Dirty: Write View-Specific Code

Because I need to activate the AutoFilterRow option of the XtraGrid (so that I can search for a specific customer in the list view that displays Customer objects) I must write the necessary code manually. I'll add a new ViewController named GridController:

    public class GridSetup : ViewController {
        private void InitializeComponent() {
            this.TargetViewNesting = DevExpress.ExpressApp.Nesting.Root;
            this.TargetViewType = DevExpress.ExpressApp.ViewType.ListView;
            this.ViewControlsCreated += new System.EventHandler
                        (this.GridSetup_ViewControlsCreated);
        }
        public GridSetup()
            : base() {
            InitializeComponent();
        }

        private void GridSetup_ViewControlsCreated(object sender, EventArgs e) {
            if((View as ListView).Editor is GridEditor) {
                GridEditor editor = ((View as ListView).Editor as GridEditor);
                GridView view = editor.GridView as GridView;
                if(View.DataSource.ObjectType == typeof(Customer)) {
                    view.OptionsView.ShowAutoFilterRow = true;
                }
            }
        }
    }

This code does the job, but it is not reusable. If you are writing many similar applications you don't want to add the same code again and again. You may want to use a single option in the application model. If this is the case, you can use the following approach:

Reusable: Extend the Model

You need to tell EAF that every ListView model should now have an additional attribute - ShowAutoFilterRow with values "True" and "False". You do this by returning a schema extension for the module:

	public sealed class MyDXModule : ApplicationModule {

        public override Schema LoadSchema() {
            return new Schema(new DictionaryXmlReader().ReadFromString(
                @"<Element Name=""Application"">
					<Element Name=""Views"">
						<Element Name=""ListView"">
							<Attribute Name=""ShowAutoFilterRow"" 
							Required=""False""  Choice=""True,False"" 
							IsNewNode=""True"" />
						</Element>
					</Element>
				</Element>" ));
        }
	}

Now you have a new attribute in the model editor for the ListView node:

In your controller code you can evaluate the attribute for the current view and decide whether to activate the option:

 
        private void GridSetup_ViewControlsCreated(object sender, EventArgs e) {
            if((View as ListView).Editor is GridEditor) {
                GridEditor editor = ((View as ListView).Editor as GridEditor);
                GridView gridView = editor.GridView as GridView;
                gridView.OptionsView.ShowAutoFilterRow = 
                                View.Info.GetAttributeBoolValue("ShowAutoFilterRow", false);
            }
        }

This method is definitely more universal than the previous one. You can reuse this controller across multiple applications, tune list views as needed without recompilation and even allow users to modify grid options.

Dreaming about Styles

The truth is that I don't like either of the solutions listed above. While I can use the first method as a local hack, the universal approach looks much more dangerous to me. By using it, I would end up with all XtraGrid options exposed - which is more than 100 attributes. This model schema will be directly coupled with the specific implementation (XtraGrid) and not be usable in the Web implementation or a different UI.

After all, if you need to control every aspect of every component you have, you don't need EAF at all, just place component on your form and you will be able to work with them in any manner you desire.

So - let's go back to my original task and look at why I need this ShowAutoFilterRow option. The answer is obvious of course - the nature of the Customer class in this app is that the user will want to search for one. But IMO, this is not the place where you will likely group, filter data, analyze trends or make summaries.

This answer does not depend upon the UI I use. Regardless of whether it is a web, mobile or command-line application, I will want to search for customers. Therefore, it is clearly a universal attribute of the list view - a style.

The definition of a style can be hidden from me. All I need to know is that this list view must be easy to search against - whatever this might mean for a particular UI implementation I am using. This decoupling allows the style implementation to evolve without the need to reconfigure hundreds of views I have already created.

Unfortunately at this time, I cannot show you any sample code for the use of styles, and I cannot even promise when they will be available within the product, but at least you will now see the direction we are heading in. As always, your feedback and opinions will help us to refine our ideas, so any comments are quite welcome.

Free DevExpress Products - Get Your Copy Today