HowTo: Use PicLens and other MediaRSS Clients for your own Website (create MediaRSS with LINQ to XML)

1 Jul, 2008 by Robert Muehsig  No Comment

This blogpost is related to the "RSS XLINQ" post – but this time the result will be cooler ;) .

About this post
This post is about the "MediaRSS" standard and how you can use it for your own website. If you have never heard of it – never mind. But maybe you have heard of a really cool Firefox Plugin called "PicLens".

image 

"PicLens"?
"PicLens" is a incredible surface for some internet services, like YouTube, Google picture search, Flickr or Amazon:

image
This is the Amazon-Surface:

image

Media RSS
The Piclens guys have implemented the "MediaRSS" standard – that means: Each site with an MediaRSS can be viewed in Piclens. 
If you are a webmaster, you should take a look at this site. We created in the last post an RSS feed with XLinq – MediaRSS shouldn´t be much harder to code:

XLINQ

We have the same project files – only the RSS generation must be changed:

        XNamespace media = "http://search.yahoo.com/mrss";
        XNamespace atom = "http://www.w3.org/2005/Atom";
        public void ProcessRequest(HttpContext context)
        {

            XDocument document = new XDocument(
                                    new XDeclaration("1.0", "utf-8", "yes"),
                                    new XElement("rss",
                                        new XAttribute("version", "2.0"),
                                        new XAttribute(XNamespace.Xmlns + "media", media),
                                        new XAttribute(XNamespace.Xmlns + "atom", atom),
                                        new XElement("channel", this.CreateElements())
                                       ));

            context.Response.ContentType = "text/xml";
            document.Save(context.Response.Output);
            context.Response.End();
        }

        private IEnumerable<XElement> CreateElements()
        {
            List<XElement> list = new List<XElement>();

            for(int i = 1; i < 100; i++)
            {
                XElement itemElement = new XElement("item",
                                            new XElement("title", i),
                                            new XElement("link", "Code-Inside.de"),
                                            new XElement(media + "thumbnail",
                                                new XAttribute("url", "http://code-inside.de/blog/wp-content/uploads/image-thumb" + i + ".png")),
                                            new XElement(media + "content",
                                                new XAttribute("url", "http://code-inside.de/blog/wp-content/uploads/image-thumb" + i + ".png"))
                                       );
                list.Add(itemElement);
            }

            return list;
        }

This time we need 2 XNamespaces – "media" and "atom" are need to create a valid MediaRSS:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss" xmlns:atom="http://www.w3.org/2005/Atom">
...
</rss>

These namespaces must be added by using the XAttribute class. The syntax is in my point of view a bit to complex, but I didn´t  find a better way. 

The source code above is everything you need to create a "simple" MediaRSS – there are some other elements supported by piclens – look at the Guide for more information.

Result:

We created the RSS auto-detection in the last blogpost. Piclens can now find the MediaRSS elements and show us the pictures on the "Wall" (the Piclens-Button glow if it find a MediaRSS Feed on the site) :

image

image 
If you have several pictures on your site – publish a MediaRSS Feed. It´s very easy and it´s an open standard (Specification @ Yahoo) – Piclens is just one MediaRSS Client (but today the client with the best surface).

[ Download Source Code ]

PS: I use my german blog as the picture source – please don´t abuse this example (traffic :( ) ;)

kick it on DotNetKicks.com

HowTo: Create RSS Feeds with LINQ to XML (XLinq)

20 Jun, 2008 by Robert Muehsig  3 Comments

It´s really easy to create XML with LINQ to XML – you can find a HowTo on my german blog.
Now we´ll try to create an RSS Feed with XLINQ

My Projectfiles:

image

The "Rss.ashx" will create your RSS. At first I want to make sure, that my site-visitors detect my nice RSS Feed automatically: 

<head runat="server">
    <title>Untitled Page</title>
    <link rel="alternate" href="Rss.ashx" type="application/rss+xml" title="" id="rss" />
</head>

This RSS feature is called "RSS Autodiscovery".

The "Rss.ashx":

We create the head (name, declaration and so on) of the RSS XML in the ProcessRequest Method:

        public void ProcessRequest(HttpContext context)
        {

            XDocument document = new XDocument(
                                    new XDeclaration("1.0", "utf-8", "yes"),
                                    new XElement("rss",
                                        new XAttribute("version", "2.0"),
                                        new XElement("channel", this.CreateElements())
                                       ));

            context.Response.ContentType = "text/xml";
            document.Save(context.Response.Output);
            context.Response.End();
        }

At the end of the method the  XDocument is saved into the Response.Output. Your RSS items are created in the "CreateElements" Method.

The "CreateElements"-Method:

This method returns IEnumberable<XElement> and the elements will be appended the channel-Element (which is created in the ProcessRequest-Method):

private IEnumerable<XElement> CreateElements()
        {
            List<XElement> list = new List<XElement>();

            for (int i = 1; i < 100; i++)
            {
                XElement itemElement = new XElement("item",
                                            new XElement("title", i),
                                            new XElement("link", "http://code-inside.de")
                                       );
                list.Add(itemElement);
            }

            return list;
        }

That´s it :)

[ Download Source Code ]

kick it on DotNetKicks.com

HowTo: Create PDF by click – on the fly

23 Apr, 2008 by Robert Muehsig  2 Comments

My college Oliver Guhr wroted a nice blogpost about PDF creation with nFop. The post is in german – but just scroll down to download the soure code.

Today I wanted to show you, how you could create a PDF by just clicking a link on a webpage. Oliver helped me again and wrote the source code of this blog post:

First step: J# dlls

I only have Visual Studio 2008 installed – without the Visual J# library – the "vjslib.dll". You need this dll for nFop. If you don´t have this dll, just download it here: Visual J# Redistributable Packages

The solution: A generic handler

It´s a bit tricky to write the PDF content in the context – here is the complete source code from my ASHX:

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

using System;
using System.Data;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using java.io;
using org.xml.sax;
using org.apache.fop.apps;
using System.IO;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class PdfHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/pdf";
        FileInputStream input = new FileInputStream(context.Request.PhysicalApplicationPath+"helloworld.fo");
        InputSource source = new InputSource(input);

        java.io.ByteArrayOutputStream output = new ByteArrayOutputStream();

        Driver driver = new Driver(source, output);
        driver.setRenderer(Driver.RENDER_PDF);
        driver.run();
        output.close();

        sbyte[] Pdf = output.toByteArray();
        BinaryWriter bw = new BinaryWriter(context.Response.OutputStream);
        for (int i = 0; i < Pdf.Length; i++)
        {
            bw.Write(Pdf[i]);
        }

        bw.Close();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

A look into the solution explorer:

image

The helloworld.fo:

<?xml version="1.0" encoding="utf-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format”>
  <fo:layout-master-set>
    <fo:simple-page-master  master-name=”A4″
                            page-width=”210mm” page-height=”297mm”>
      <fo:region-body region-name=”xsl-region-body”  margin=”2cm”/>
    </fo:simple-page-master>
  </fo:layout-master-set>

  <fo:page-sequence  master-reference=”A4″>
    <!– (in Versionen <2.0 “master-name”) –>
    <fo:flow flow-name=”xsl-region-body”>
      <fo:block>Hallo Welt!</fo:block>
    </fo:flow>
  </fo:page-sequence>

</fo:root>

Now you can create the "helloworld" PDF by just clicking this link:

http://localhost:56602/Pdf/PdfHandler.ashx

Easy :)

[ Download Democode ]

kick it on DotNetKicks.com

HowTo: Searchprovider / Browserplugin for IE7 and Firefox – the OpenSearchDescription

9 Apr, 2008 by Robert Muehsig  No Comment

Firefox (or Opera, Safari?) introduced a very handy feature: A little searchbox for all your favorite search engines. Microsoft added this in the Internet Explorer 7:

image

image

But how can I create my own plugin? The search provider should be installed with only one click.

The little search box and its provider relies on the "OpenSearchDescription" format.

I added a search provider for this blog – here is the XML:

<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Code-Inside International Blog</ShortName>
<Description>Blogging about .NET, ASP.NET, AJAX, Silverlight</Description>
<Image height="16" width="16" type="image/x-icon">http://code-inside.de/blog-in/wp-content/themes/notso_freshe/images/favicon.ico</Image>
<Url type="text/html" method="get" template="http://code-inside.de/blog-in/?s={searchTerms}"/>
</OpenSearchDescription>

The most important tag is the "Url"-Tag with the "searchTerm" template to create later such an URL: http://code-inside.de/blog-in/?s=AJAX 

Add the search provider to you browser

  • You could use Javascript: 
<a href="#" onclick='window.external.AddSearchProvider("http://code-inside.de/blog-in/browserplugin.xml");'>Code-Inside International Blog</a>

The javascript "AddSearchProvider" method invoke the browser to promt such an interface:

image

  • The browser get noticed about the "search plugin" 

You can tell the clients browser that you offer an search plugin – just add this in the head section of your site:

<link rel="search" type="application/opensearchdescription+xml" href="http://code-inside.de/blog-in/browserplugin.xml" title="Code-Inside International Blog" />

You reference your XML file and (for example) the firefox "search provider icon" show us a glow effect:

image

One click – and you be done:

image

The same process with the Internet Explorer 7:

image

Simple & very usefull for each "search" site :)

kick it on DotNetKicks.com