Graphical Menu like gmenu from typo3

Topics: General
Jun 20, 2011 at 10:43 AM

Hi everybody,

I need to rebuild a company website which is currently served by typo3 and and I would like to try Compsite C1.
Unfortunately I can't change the design of the site so that I need someting similar to gmenu,
creating graphical navigation menus with a fixed tty-font.
I really appreciate your help.

Regards,

Michael

Jun 20, 2011 at 7:48 PM

You may want to clarify what you want to implement when it comes to GMenu. Is the back-end user interface that you can't change? Do you want to make Composite C1's interface into something like GMenu, or are you wanting to keep your company's navigation using GMenu. If GMenu is just  a CSS/Javascript menu, there shouldn't be a problem using it with a Composite C1 site.

Perhaps a link to sample GMenu functionality and a few more details would help.

Jun 21, 2011 at 10:26 AM

1) For generation image for menu you can write handler ImageBox.ashx:

<%@ WebHandler Language="C#" Class="ImageBox" %>

using System;
using System.IO;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging; using System.Collections.Generic;
using Composite.C1Console.Drawing; using Composite.Core.WebClient;

public class ImageBox : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
try
{
string title = context.Request["title"];
if (string.IsNullOrEmpty(title) == true) throw new ArgumentException("Missing query string argument 'title'");


string filePath = context.Server.MapPath(UrlUtils.ResolvePublicUrl("Frontend/ImageMenu/Images/imagebox.png"));

Bitmap bitmap = (Bitmap)Bitmap.FromFile(filePath);

//You can load font from file, see MSDN or google :-)
Font font = new Font("Tahoma", 8.0f, FontStyle.Bold);
StringFormat stringFormat = new StringFormat() {
Alignment = StringAlignment.Center,
LineAlignment = StringAlignment.Center
};

using (Graphics graphics = Graphics.FromImage(bitmap))
{
//write text for a:link
graphics.DrawString(title, font, new SolidBrush(Color.Black), new RectangleF(0, 0, 200, 40), stringFormat);
//write text for a:hover
graphics.DrawString(title, font, new SolidBrush(Color.White), new RectangleF(0, 40, 200, 40), stringFormat);
}

context.Response.ContentType = "image/png";

MemoryStream ms = new MemoryStream();
bitmap.Save(ms, ImageFormat.Png);

ms.WriteTo(context.Response.OutputStream);
}
catch (Exception ex)
{
Composite.Core.Logging.LoggingService.LogError(this.GetType().ToString(), ex.ToString());
throw;
}
}


public bool IsReusable
{
get
{
return false;
}
}

}

2) Write xslt function for menu (add Composite.Page.Sitemap)

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:csharp="http://c1.composite.net/sample/csharp" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
  <xsl:template match="/">
    <html>
      <head>
        <style type="text/css">
          #ImageMenu {
            list-style:none;
            margin:0;
            padding:0;
            clear: both;
          }
          #ImageMenu li{
            display:block;
            float: left;
          }
          #ImageMenu a{
            display:block;
            width: 200px;
            height: 40px;
            background-position: 0 0;
          }
          #ImageMenu a:hover{
            background-position: 0 40px;
          }
        </style>
      </head>
      <body>
        <xsl:apply-templates select="/in:inputs/in:result[@name='SitemapXml']/Page[@isopen='true']" />
      </body>
    </html>
  </xsl:template>
  <xsl:template match="Page">
    <ul id="ImageMenu">
      <xsl:apply-templates select="." mode="MenuItem" />
      <xsl:apply-templates select="Page" mode="MenuItem" />
    </ul>
  </xsl:template>
  <xsl:template match="Page" mode="MenuItem">
    <xsl:if test="@MenuTitle != ''">
      <li>
        <a href="{@URL}" style="background-image: url(/Frontend/ImageMenu/ImageBox.ashx?title={csharp:UrlEncode(@MenuTitle)})">
          
        </a>
      </li>
    </xsl:if>
  </xsl:template>
  <msxsl:script implements-prefix="csharp" language="C#"> 
    <msxsl:assembly name="System.Web" /> 
    <msxsl:using namespace="System.Web" /> 

        public String UrlEncode( string source )
        {
            return HttpUtility.UrlEncode( source );
        }
     </msxsl:script> 
</xsl:stylesheet>

  

 

Jun 21, 2011 at 10:29 AM

Menu have size 200x40, imagebox.png have size 200x80 in sample

Jun 28, 2011 at 1:35 PM

Thanx to everyone!

I have to admit that I'm pretty new in this field so it took me a while to understand and adapt the code.
But now I have it working (still deeply impressed) and heading to the next steps. Guess I will have to ask
some further questions :-)

So once again thanks for your help!

Michael