WaveCalender 5: Wave Code Prettifier

In wave you would often like to show some code to get some feed back on it. A gadget which can help with it is wave code prettifier by Milan Andrejevic . It is a gadget you can put into your Wave and you can then get formatted code in your wave.
The code gets highlighted as you type. The language is determinate automatically, or you can overwrite the control.

The gadget XML can be found hire.


You can enter you non formatted text on the top in the small window, and then the formatted text will be showed in the button panel. The buttum panel will be expanded as a result of data typed.

When you type something data is directly shared to the other users. If you type fast on a large text you are sometime send to the buttom of the field and complete the text at the end.

I would also like to see that gadget to have difference between edit mode and view mode. That way you would only see the formatted text as an ordinary user.

The gadget is written in Javascript and Jquery and uses a lot of standard libraries for code highlighting. The code in the gadget is only 29 lines. That is impressive.

Bookmark and Share

Gadget and Robots interaction

In some instances you want to have the robots and gadgets to interact. A scenario where it could make sense is, when the user wants information about a site. The page which could be showed could be the sales report of the customer or some other information which is of interest to the participants.

This tutorial has basis in the Creating A Simple Inline Gadget To Show External Web Applications, which shows how to inline a page into the a wave using a gadget. There is a robot which creates a form for entering the url of the page. When the user press submit the robot adds a gadget which inline the specified url.

First the robot which inserts the gadget.

public class EmbedUrlRobotServlet extends AbstractRobotServlet {
    public final String URLFIELD = "URL_FIELD";
    public void processEvents(RobotMessageBundle bundle) {
        Wavelet wavelet = bundle.getWavelet();
        String creator = wavelet.getCreator();
        if (bundle.wasSelfAdded()) {
            Blip blip = wavelet.appendBlip();
            TextView textView = blip.getDocument();
            textView.appendMarkup("<p><b>Inline the url</b></p>\n");
            FormView form = textView.getFormView();
            form.append(new FormElement(ElementType.INPUT, URLFIELD,"http://"));
            form.append(new FormElement(ElementType.BUTTON, "submit", "INSERT"));

        for (Event e : bundle.getEvents()) {
            if (e.getType() == EventType.FORM_BUTTON_CLICKED) {
                Blip blip = e.getBlip();
                FormView form = blip.getDocument().getFormView();
                FormElement urlElement = form.getFormElement(URLFIELD);
                GadgetView gadgetView= blip.getDocument().getGadgetView();
                gadgetView.append(new Gadget("http://pollenvarsel.appspot.com/gadget?url="+urlElement.getValue()));


The robots listens for two event. First the SELF_ADDED which creates the URL form with a text box and a submit button. When the button is pressed a gadget is inserted in to the Blip, with the url of the gadget + the target URL. Probably something should be performed to ensure that the submitted URL is valid and can be sent as a query parameter. Probably a URL encoding should be performed or save the data in the datastorage.

    public void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws IOException {
        PrintWriter out= resp.getWriter();
        out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
      +"<ModulePrefs title=\"inline_external_page\" height=\"400\" width=\"800\"/>"
      +"<Content type=\"html\">"
      +"<![CDATA[ "
      +" <div id=\"main\"><!--Main container for the iframe-->"
      +" <iframe name=\"check\" id=\"check\" height=\"100%\" src =\""+(String)req.getParameter("url")+"\" width=\"100%\" frameborder=\"0\">"
        +"<p>Your browser does not support iframes .</p>"
        +"</iframe> <!-- this is where contents of the links are displayed -->"

The code is the same in the original blog it has just been placed into a servlet, to make it possible to have parameters inside. It just inserts the query parameter into the gadget XML.

The code can be found at code.google.com.

Bookmark and Share