General Components Extra Property Editors Google Maps Getting Started

GoogleMapPropertyEditor. Getting Started

In this lesson, you will learn how to apply the Google Maps Property Editor. Follow the steps below.

Open an existing XAF solution or create a new one.
Add XafariModule and XafariEditorsModule to the platform-agnostic Module Project (Module.cs | ModuleDesigner.cs).
Add XafariWebModule and XafariEditorsWebModule to the platform-dependent ASP.NET Web Module Project (WebModule.cs | WebModuleDesigner.cs).
Add Xafari.dll to the ASP.NET Web Module Project references.
Prepare the data to be displayed. It is recommended to use the ClassWithGeoPoint business class. This class is implemented in the code below. In the Solution Explorer, right-click the Business objects folder of the platform-agnostic module, and choose Add | New Item. In the opened dialog, select an XPO Business Object XAF Domain Object (code only), specify ClassWithGeoPoint as the new item's name, and click Add. As a result, you will get an automatically generated ClassWithGeoPoint.cs file. Replace the automatically generated file content, as follows:

using Xafari.Base;
// ...
DefaultClassOptions;
public class ClassWithGeoPoint : BaseObject
{
  public ClassWithGeoPoint(Session session)
    : base(session)
  {
  }
  public override void AfterConstruction()
  {
    base.AfterConstruction();
  }
  private string title;
  private string office;
  public string Title
  {
    get
    {
      return title;
    }
    set
    {
      SetPropertyValue("Title", ref title, value);
    }
  }
  public string Office
  {
    get
    {
      return office;
    }
    set
    {
      SetPropertyValue("Office", ref office, value);
    }
  }
  public GeoPoint point
  {
    get
    {
      return this.GetDelayedPropertyValue<GeoPoint>("point");
    }
    set
    {
      this.SetPropertyValue<GeoPoint>("point", value);
    }
  }
}

using Xafari.Base;
// ...
{
     [DefaultClassOptions]
public class ClassWithGeoPoint : BaseObject
     {
         public ClassWithGeoPoint(Session session)
             : base(session)
         {
         }
         public override void AfterConstruction()
         {
             base.AfterConstruction();
         }

         private string title;
         private string office;
         public string Title
         {
              get { return title; }
              set { SetPropertyValue("Title", ref title, value); }
         }
         public string Office
         {
              get { return office; }
              set { SetPropertyValue("Office", ref office, value); }
         }
         public GeoPoint point
         {
              get { return this.GetDelayedPropertyValue<GeoPoint>("point"); }
              set { this.SetPropertyValue<GeoPoint>("point",value); }
         }
     }
}

Open the Module.cs file and override the RegisterEditorDescriptors method, as follows in the code below (do not forget about using Xafari.Base namespace):

Then, open WebModule.cs file and override RegisterEditorDescriptors and ExtendModelInterfaces methods, as shown below:

protected override void RegisterEditorDescriptors(List<EditorDescriptor> editorDescriptors)
{
  base.RegisterEditorDescriptors(editorDescriptors);
  editorDescriptors.Add(new PropertyEditorDescriptor(new EditorTypeRegistration("GeoPointPropertyEditor", typeof(GeoPoint), typeof(ASPxGoogleMapsPropertyEditor), true)));
}
public override void ExtendModelInterfaces(ModelInterfaceExtenders extenders)
{
  extenders.Add<IModelPropertyEditor, IModelPropertyEditorWebLayout>();
  extenders.Add<IModelMemberViewItem, IModelMapPropertyEditorWeb>();
}

Protected Overrides Sub RegisterEditorDescriptors(ByVal editorDescriptors As List(Of EditorDescriptor))
  MyBase.RegisterEditorDescriptors(editorDescriptors)
  editorDescriptors.Add(New PropertyEditorDescriptor(New EditorTypeRegistration("GeoPointPropertyEditor", GetType(GeoPoint), GetType(ASPxGoogleMapsPropertyEditor), True)))
End Sub
Public Overrides Sub ExtendModelInterfaces(ByVal extenders As ModelInterfaceExtenders)
  extenders.Add(Of IModelPropertyEditor, IModelPropertyEditorWebLayout)()
  extenders.Add(Of IModelMemberViewItem, IModelMapPropertyEditorWeb)()
End Sub

Add a new View Controller to the ASP.NET Web Module Project, name it GoogleMapsViewController, and modify the automatically generated file content as follows.

using DevExpress.ExpressApp.Web.Templates;
using System.Web.UI;
// ...
public partial class GoogleMapsViewController : ViewController
{
  private void CallbackManager_ScriptCreating(object sender, ScriptCreatingEventArgs e)
  {
    ((Page)Frame.Template).ClientScript.RegisterStartupScript(typeof(Page), "mapScript", "<script type=\"text/javascript\" src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>");
  }
  private XafCallbackManager GetCallbackManager()
  {
    XafCallbackManager manager = null;
    if (Frame != null && Frame.Template != null)
    {
      var holder = Frame.Template as ICallbackManagerHolder;
      if (holder != null)
        manager = holder.CallbackManager;
    }
    return manager;
  }
  private void Frame_TemplateChanging(object sender, EventArgs e)
  {
    var callbackManager = GetCallbackManager();
    if (callbackManager != null)
      callbackManager.ScriptCreating -= CallbackManager_ScriptCreating;
  }
  private void Frame_TemplateChanged(object sender, EventArgs e)
  {
    var callbackManager = GetCallbackManager();
    if (callbackManager != null)
      callbackManager.ScriptCreating += CallbackManager_ScriptCreating;
  }
  protected override void OnFrameAssigned()
  {
    base.OnFrameAssigned();
    Frame.TemplateChanging += Frame_TemplateChanging;
    Frame.TemplateChanged += Frame_TemplateChanged;
  }
}

Imports DevExpress.ExpressApp.Web.Templates
Imports System.Web.UI
' ...
Public Partial Class GoogleMapsViewController
  Inherits ViewController
  Private Sub CallbackManager_ScriptCreating(ByVal sender As Object, ByVal e As ScriptCreatingEventArgs)
    CType(Frame.Template, Page).ClientScript.RegisterStartupScript(GetType(Page), "mapScript", "<script type=" + Chr(34) + "text/javascript" + Chr(34) + " src=" + Chr(34) + "http://maps.google.com/maps/api/js?sensor=false" + Chr(34) + "></script>")
  End Sub
  Private Function GetCallbackManager() As XafCallbackManager
    Dim manager As XafCallbackManager = Nothing
    If Frame IsNot Nothing AndAlso Frame.Template IsNot Nothing Then
      Dim holder = TryCast(Frame.Template, ICallbackManagerHolder)
      If holder IsNot Nothing Then
        manager = holder.CallbackManager
      End If
    End If
    Return manager
  End Function
  Private Sub Frame_TemplateChanging(ByVal sender As Object, ByVal e As EventArgs)
    Dim callbackManager = GetCallbackManager()
    If callbackManager IsNot Nothing Then
      callbackManager.ScriptCreating -= CallbackManager_ScriptCreating
    End If
  End Sub
  Private Sub Frame_TemplateChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim callbackManager = GetCallbackManager()
    If callbackManager IsNot Nothing Then
      callbackManager.ScriptCreating += CallbackManager_ScriptCreating
    End If
  End Sub
  Protected Overrides Sub OnFrameAssigned()
    MyBase.OnFrameAssigned()
    Frame.TemplateChanging += Frame_TemplateChanging
    Frame.TemplateChanged += Frame_TemplateChanged
  End Sub
End Class

The controller provides the java script required for the Google Maps.

Run the ASP.NET application. Select the ClassWithGeoPoint item in the navigation control and click New Action. In the invoked Detail View, you can observe the Google Maps Property Editor.