General Components Extra Property Editors Tabbed Detail Getting Started

Tabbed Detail Property Editor. Getting Started

This topic describes how to set and customize the Tabbed Detail Property Editor. The required modules are Xafari, Xafari.Editors, and appropriate platform-dependent Xafari.Win, Xafari.Editors.Win, Xafari.Web, Xafari.Editors.Web or Xafari.Editors.Mvc.

Important

If you develop MVC application, it is also necessary to add Xafari.Editors.Mvc.Module NuGet package to the project.

For demonstration purposes, we will consider a sample business class with a significant number of properties. The code snippet below implements the TabbedDetailPropertyEditorObject class and should be added to the platform-agnostic module project.

[DefaultClassOptionsAttribute]
public class TabbedDetailPropertyEditorObject : BaseObject
{
  public TabbedDetailPropertyEditorObject(Session session)
    : base(session)
  {
  }
  public string FirstName
  {
    get
    {
      return GetPropertyValue<string>("FirstName");
    }
    set
    {
      SetPropertyValue("FirstName", value);
    }
  }
  public string LastName
  {
    get
    {
      return GetPropertyValue<string>("LastName");
    }
    set
    {
      SetPropertyValue("LastName", value);
    }
  }
  public string FullName
  {
    get
    {
      return FirstName + " " + LastName;
    }
  }
  public DateTime BirthData
  {
    get
    {
      return GetPropertyValue<DateTime>("BirthData");
    }
    set
    {
      SetPropertyValue("BirthData", value);
    }
  }
  public string Organization
  {
    get
    {
      return GetPropertyValue<string>("Organization");
    }
    set
    {
      SetPropertyValue("Organization", value);
    }
  }
  public string Phone
  {
    get
    {
      return GetPropertyValue<string>("Phone");
    }
    set
    {
      SetPropertyValue("Phone", value);
    }
  }
  public string HomePhone
  {
    get
    {
      return GetPropertyValue<string>("HomePhone");
    }
    set
    {
      SetPropertyValue("HomePhone", value);
    }
  }
  [ModelDefault("RowCount", "2")]
  [Size(SizeAttribute.Unlimited)]
  public string Address
  {
    get
    {
      return GetPropertyValue<string>("Address");
    }
    set
    {
      SetPropertyValue("Address", value);
    }
  }
  [VisibleInDetailView(false), VisibleInListView(false)]
  public TabbedDetailPropertyEditorObject ThisObject
  {
    get
    {
      return this;
    }
  }
}

<DefaultClassOptionsAttribute> _
Public Class TabbedDetailPropertyEditorObject
  Inherits BaseObject
  Public Sub New(ByVal session As Session)
    MyBase.New(session)
  End Sub
  Public Property FirstName As String
    Get
      Return GetPropertyValue(Of String)("FirstName")
    End Get
    Set
      SetPropertyValue("FirstName", value)
    End Set
  End Property
  Public Property LastName As String
    Get
      Return GetPropertyValue(Of String)("LastName")
    End Get
    Set
      SetPropertyValue("LastName", value)
    End Set
  End Property
  Public ReadOnly Property FullName As String
    Get
      Return FirstName + " " + LastName
    End Get
  End Property
  Public Property BirthData As DateTime
    Get
      Return GetPropertyValue(Of DateTime)("BirthData")
    End Get
    Set
      SetPropertyValue("BirthData", value)
    End Set
  End Property
  Public Property Organization As String
    Get
      Return GetPropertyValue(Of String)("Organization")
    End Get
    Set
      SetPropertyValue("Organization", value)
    End Set
  End Property
  Public Property Phone As String
    Get
      Return GetPropertyValue(Of String)("Phone")
    End Get
    Set
      SetPropertyValue("Phone", value)
    End Set
  End Property
  Public Property HomePhone As String
    Get
      Return GetPropertyValue(Of String)("HomePhone")
    End Get
    Set
      SetPropertyValue("HomePhone", value)
    End Set
  End Property
  <ModelDefault("RowCount", "2")> _
<Size(SizeAttribute.Unlimited)> _
Public Property Address As String
    Get
      Return GetPropertyValue(Of String)("Address")
    End Get
    Set
      SetPropertyValue("Address", value)
    End Set
  End Property
  <VisibleInDetailView(False), VisibleInListView(False)> _
Public ReadOnly Property ThisObject As TabbedDetailPropertyEditorObject
    Get
      Return Me
    End Get
  End Property
End Class

Important

The ThisObject property returns an object of the TabbedDetailPropertyEditorObject type, i.e. this property represents the entire object. We will apply Tabbed Detail Property Editor to this property.

Note

You can view the code used in this lesson in the Xafari.Feature Center.|Editors| TabbedDetailPropertyEditorObject.cs file of the Feature Center demo installed with Xafari. By default, the Feature Center application is installed in %PUBLIC%\Documents\Xafari Framework vXX.X.XXXX Demos\ Feature Center.

Now you can build and run the application to see what Detail View XAF is generated for this object by default.

tabbeddetailpropertyeditor_111

In the code snippet above, note the ThisObject property being a subject of designing through Tabbed Detail Property Editor. Decorate this property with EditorAliasAttribute in the following manner:

public class TabbedDetailPropertyEditorObject : BaseObject
{
  //...
  [EditorAlias("TabbedDetailPropertyEditor")]
  public TabbedDetailPropertyEditorObject ThisObject
  {
    get
    {
      return this;
    }
  }
}

Public Class TabbedDetailPropertyEditorObject
  Inherits BaseObject
  '...
  <EditorAlias("TabbedDetailPropertyEditor")> _
Public ReadOnly Property ThisObject As TabbedDetailPropertyEditorObject
    Get
      Return Me
    End Get
  End Property
End Class

Note

There are several ways to set a Property Editor for the certain property. You can add the required modules to any platform-specific module project, invoke the Model Editor, and set the PropertyEditorType property manually (see the image below). This lesson demonstrates the usage of DevExpress.Persistent.Base.EditorAliasAttribute; it is a more general approach to using editors.

tabbeddetailpropertyeditor_111-1

Invoke the Model Editor and navigate to the Views node. Add three extra Detail Views: TabbedDetailPropertyEditorOffice_DetailView, ...Person_DetailView, and ...Realization_DetailView. In the ModelClass property, set the "TabbedDetailPropertyEditorObject" value as shown in the screenshot below.

tabbeddetailpropertyeditor_112

These Views will be used later; each created tab will display one of them.

Build the project and perform further customizations of the Property Editor in the platform-specific module. For instance, it may be a Windows Forms Module Project. Invoke the Module Designer and add the Xafari.Win and Xafari.Editors.Win modules to the Required Modules section.

tabbeddetailpropertyeditor_113

Build the project, invoke the Model Designer, and navigate to the Views|...|TabbedDetailPropertyEditorObject_DetailView|Items|ThisObject node to make sure that the PropertyEditorType property has the correct value "Xafari.Editors.Win.WinTabbedDetailPropertyEditor".

tabbeddetailpropertyeditor_114

This value is set automatically using the Alias and DevExpress.Persistent.Base.EditorAliasAttribute.

Next, define the main Detail View that will display the ThisObject reference property and additional Detail Views to be presented on the tabs.

The main Detail View will be TabbedDetailPropertyEditorObjectRealization_DetailView. Navigate to the Views|...|TabbedDetailPropertyEditorObjectRealization_DetailView|Items node, call the context menu with a right mouse click, and select Add|Property Editor from there. For the new item, set the PropertyName property to the "ThisObject" value and make sure that the PropertyEditorType property is "Xafari.Editors.Win.WinTabbedDetailPropertyEditor". Set the Id property as shown in the image below.

tabbeddetailpropertyeditor_115

Select the Tabs node and add three tabs there. Set the DetailView and Caption properties as follows in the table:

DetailView	Caption
TabbedDetailPropertyEditorObject_DetailView	Full Data
TabbedDetailPropertyEditorObjectOffice_DetailView	Office
TabbedDetailPropertyEditorObjectPerson_DetailView	Person

Add a This Object Layout View Item to the Layout node. The main Detail View is shown in the figure below. The tabs will display the respective Detail Views.

tabbeddetailpropertyeditor_116

Substitute the default Detail View for the TabbedDetailPropertyEditorObject object. Navigate to the BOModel|…|TabbedDetailPropertyEditorObject node, and set the DefaultDetailView property to the TabbedDetailPropertyEditorObjectRealization_DetailView value.

tabbeddetailpropertyeditor_117

Now, the application displays the TabbedDetailPropertyEditorObject object via TabbedDetailPropertyEditorObjectRealization_DetailView. Run the application and see that the default Detail View alternately displays three tabs that correspond to the Full Data, Office, and Person Detail Views. The Office and Person Detail Views are still empty.

tabbeddetailpropertyeditor_118

Stop the application, invoke the Model Editor, and customize the Items and Layout nodes for the Office and Person Detail Views. Thus you define the properties to be displayed on each tab.

tabbeddetailpropertyeditor_119

Run the WinForms application and see how its UI has changed after the customization.

tabbeddetailpropertyeditor_120

The steps to configure the Tabbed Detail Property Editor for web applications are similar to those described above. This should be done in the corresponding platform-specific module.

To see some additional features, refer to the Learn More topic.