Embedding applications

You can extend the main menu in the lemoon editorial interface to embed your own applications. This is done by creating a new class in your project. The class should inherit from the Mindroute.Lemoon.Menus.MenuItemExtension class. The example below adds an new main menu item called "Extras". The weight (sort order) is set to 100 to ensure the menu item is located as the last item, so it doesn't interfer with existing main menu items. When clicking on the new main menu item, a redirect to ~/lemoon/admin/apps/default.aspx will be performed.

 

Example of adding a new menu item

using System;
using Mindroute.Core.Model;
using Mindroute.Lemoon.Menus;

namespace MyProject.Lemoon.Menus {

    [Icon("extras")]
    [Render(Name = "Extras", Weight = 100)]
    [Serializable]
    [DefaultValues("Link", "~/lemoon/admin/apps/default.aspx", "Policy", Mindroute.Lemoon.Model.Policy.Content)]
    public class ExtrasMenuItem : MenuItemExtension {
    
    }
}

 

Specifying an icon

You can use a custom icon for the main menu item. The icon should be a 32x32px .png file. You can store the image anywhere you like. The icon (and any other css rules you want to apply) is loaded from the icons.css file located in the ~/lemoon/content/ folder. If the css file doesn't exist, create it. Add a new class with the same name as specified in the class attribute [Icon], in this case extras with a background image set to the one you want. Look at the example below.

 

.extras { background:url(/images/icons/myapp.png) !important }

 

Styling the page

Often, you would like to have the same style and layout as the rest of the editorial interface. Since lemoon 4 is not built with frames, the page you redirect to must use the same master page and css as the editorial interface. Below is a simple example on how to get going with the page.

 

Example of the .aspx file

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="MyProject.Lemoon.Admin.Apps._default" masterpagefile="~/admin/master/main.master"%>
<%@ Register TagPrefix="lemoon" Assembly="Mindroute.Lemoon" Namespace="Mindroute.Lemoon.Web.UI.Admin.WebControls"%>
<asp:content contentplaceholderid="head" runat="server">

</asp:content>

<asp:content contentplaceholderid="submenu" runat="server">
  <lemoon:menu id="menu" runat="server" />
</asp:content>

<asp:content contentplaceholderid="content" runat="server">
   
</asp:content>

 

Example of the .aspx.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI;
using Mindroute.Core.Helpers;
using Mindroute.Core.Model;
using Mindroute.Core.Services;
using Mindroute.Lemoon.Helpers;
using Mindroute.Lemoon.Model;
using Mindroute.Lemoon.Services;
using Mindroute.Lemoon.Web.UI.Admin;

namespace MyProject.Lemoon.Admin.Apps {

    public partial class _default : PageBase {

        protected override void OnInit(EventArgs e) {
            base.OnInit(e);

            // Highlight main menu.
            MainMenu.Selected = "apps";

            // Create breadcrum.
            BreadCrumb.Items.Add(new Mindroute.Lemoon.Web.UI.Admin.WebControls.MenuItem() { Text = "Extras", HRef = "~/lemoon/admin/apps/default.aspx" });

        }
    }
}

 

As you can see in the examples above, the page should use the Main.master master page file and inherit from the Mindroute.Lemoon.Web.UI.Admin.PageBase class. The resulting page would look something like below.

Image 1. Embedding a custom .aspx into the editorial interface