Google Summer of Code (Sugar Labs) Part 2

A little more than a month has elapsed since my last blog post on the work on my GSoC project.

This blog post will mostly revolve around a new web activity written using the HTML5 – JavaScript framework and getting in the Object Chooser functionality in the current framework.

The current datastore api in sugar-web hasn’t really been tested extensively. Therefore the primary objective behind writing this activity is to test the datastore api by bringing in the object chooser into sugar-web.

Markdown Activity

Markdown is a text-to-HTML conversion tool was made by John Gruber for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Here are some of the Markdown Syntax_examples.

Markdown activity is a web activity in sugar. It contains an editor that allows to write in markdown format and you can simultaneously see the formatted text on the right hand side.

Screenshot from 2013-08-25 14:56:42

It comes in with inbuilt editor buttons which can help you format/edit the markdown content.

So anyone can write HTML content and you need not know how to make use of various HTML tags.

You can download the activity here markdown activity.

I’ve also published it on github, you can play with it on your browser here.

Features of version Markdown version 1:
– Can convert markdown text to HTML format
– Text editors buttons(Bold, Header, Ordered/Unordered List , Undo/Redo, Link, Horizontal line, Italics)
– Datastore capability (activity is automatically saved and loaded when you open it at a later stage)

Framework used
The PageDown framework is made use of to parse the markable text and convert it to equivalent HTML text.

Overview of the framework:
Used in a regular browser environment, it provides a top-level object called Markdown with two properties:
Markdown.Converter is a constructor that creates a converter object. Call this object’s makeHtml method to turn Markdown into HTML:
var converter = new Markdown.Converter();
document.write(converter.makeHtml("**I am bold!**"));

Markdown.Editor.js
var editor2 = new Markdown.Editor(converter2, "-second", options);

The created editor object has (up to) three methods:
– editor.getConverter() returns the converter object that was passed to the constructor.

– editor.run() starts running the editor; you should call this after you’ve added your plugins to the editor (if any).

– editor.refreshPreview() forces the editor to re-render the preview according to the contents of the input, e.g. after you have programmatically changed the input box content. This method is only available after editor.run() has been called.

Challenges:

Well, I’d consider this task as the most challenging one allotted by Lionel so far. The initial work, mainly integrating the Pagedown framework into the activity went pretty fast. Pagedown framework came in with inbuilt format/edit buttons so I really didn’t have to reinvent the wheel there, I had to patch the framework in order to integrate sugar-like buttons though. The most daunting part was to bring in the Sugar Object Chooser feature into the activity.

Unfortunately, while I commenced work on this, my college reopened and I got tied up with campus recruitment and other college stuffs which impeded me from devoting all my attention towards the completion of the task.

Nevertheless, with help from Daniel, I managed to get the object chooser up and running in the sugar-web.
As I mentioned earlier, the main intention of this task was to test the datastore api in sugar-web. I can confidently say that it served it’s purpose as I managed to unearth bugs in the datastore api. Rest assured Daniel is at it and will be fixing them as soon as possible.

Working of Object Chooser:


def show_object_chooser(self, request):

chooser = ObjectChooser(self._activity)

chooser.connect(‘response’, self._chooser_response_cb, request)

chooser.show()

We call this function from JavaScript when we need to insert something from the journal in our activity.

ObjectChooser(self._activity) returns an object which we can use to bring up the object chooser(chooser.show()).

Before we bring up the object chooser we have to make sure we watch out for the response signals which occur when we interact with the object chooser. We do this using chooser.connect('response', self._chooser_response_cb, request) . This calls the _chooser_response_cb function on receiving a response signal.


def _chooser_response_cb(self, chooser, response_id, request):
if response_id == Gtk.ResponseType.ACCEPT:
object_id = chooser.get_selected_object_id()
self._client.send_result(request, [object_id])
else:
self._client.send_result(request, [None])
chooser.destroy()

Screenshot from 2013-09-06 22:15:50

This part takes care of the event handling in the object chooser. The response_id is Gtk.ResponseType.ACCEPT when the user selects an object from the listed objects in the list. We send the object_id of the selected object to the web activity using self._client.send_result(request, [object_id]) and [None] otherwise.

Finally we destroy the chooser object object created earlier and it closes the object chooser window.

I must thank Daniel for patiently answering each of my queries regarding the same and lent a big helping hand, and Lionel, who despite being away on vacation still found time to monitor and give me invaluable inputs on my work. Credits goes to Gonzalo Odiard too , for the markdown activity idea was initially proposed by him. This activity would be very useful as future help content for activities could be written in markdown. Looking forward to my next post where I’ll try to sum up all my work and write more about my GSoC experience by the end of this month , by when, hopefully I would have successfully completed my project.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: