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.
- c#
- VB
[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.
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:
- c#
- VB
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.
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.
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.
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".
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.
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.
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.
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.
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.
Run the WinForms application and see how its UI has changed after the customization.
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.