Search This Blog

Wednesday, June 5, 2013

Discussing UI customization in XAF by example of customizing controls associated with Actions on the Web

One of the ways to access and customize controls associated with Actions on the Web is to inherit from the ProcessActionContainerHolderController class. It represents a base class from which Controllers (there is a number of standard descendants) customizing Action Container controls are derived.

Example
For instance, imagine that we want to enable scrolling of large menu items in our Web application and want to use the following feature of our DevExpress ASP.NET menu control: ASP.NET Menu Scrolling - today I had a real customer wanting to perform this customization.

So, you can consider using the following example code in version 12.2+:

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Web.SystemModule;
using DevExpress.ExpressApp.Web.Templates.ActionContainers;
using DevExpress.ExpressApp.Web.Templates.ActionContainers.Menu;
using DevExpress.Web.ASPxMenu;

namespace MainDemo.Module.Web.Controllers {
    // This is a demo controller that builds an Action with a lot of items in the UI.
    public class Class1 : ViewController {
        public Class1() {
            SingleChoiceAction dropDownMenuAction = new SingleChoiceAction(this, "Test", DevExpress.Persistent.Base.PredefinedCategory.View);
            dropDownMenuAction.ItemType = SingleChoiceActionItemType.ItemIsOperation;
            for (int i = 0; i < 100; i++) {
                dropDownMenuAction.Items.Add(new ChoiceActionItem("Test" + i.ToString(), i));
            }
        }
    }
    // This is our descendant of the standard controller to access and customize controls of a required Action.
    public class EnableScrollingMenuItemsController : ProcessActionContainerHolderController {
        protected override void OnActionContainerHolderActionItemCreated(WebActionBaseItem item) {
            base.OnActionContainerHolderActionItemCreated(item);
            MenuActionItemBase menuItem = item as MenuActionItemBase;
            if (menuItem != null && menuItem.MenuItem.Menu is ASPxMenu && menuItem.Action.Id == "Test") {
                // Accessing the ASPxMenu control and customizing it according to the DevExpress ASP.NET documentation.
                ((ASPxMenu)menuItem.MenuItem.Menu).EnableSubMenuScrolling = true;
            }
        }
    }
}

That's it and we can now run our test app (I used our MainDemo) to see the result:


What we might have learned here?

  • Controllers can be used to implement custom features in XAF, e.g. to customize a certain UI element, to change your application's flow and implement custom end-user interaction;
  • XAF provides a number of built-in Controllers and Actions that are used when generating the default UI. For instance, CRUD, validation, navigation and search features are powered by Controllers;
  • It is possible to create custom Controllers derived from built-in ones to customize the default UI generation and behavior.
  • The default XAF UI is built at runtime and consists of regular controls using the standard development techniques. The only specificity of XAF is that it focuses on reusing code where possible - think of it like about building your application from custom user controls to avoid duplicate work.
  • In XAF, you can access a required UI element or control and customize it using the approaches you are accustomed to in the traditional development with WinForms or ASP.NET frameworks. See one, two, three topics in our docs for more customization examples.

No comments:

Post a Comment