GSOC Weekly Blog Entry (2009-07-27)

I’ll make this one short because it’s past 1.30 AM and I still want to practice at my piano…

This week was quite productive. Here’s what was done:

- The visualxml plugin successfully converts between non-standard html code (<obs…/>) to standard html code (<span…></span>)
- The framework for registering the visual code of each widget is ready (its foundations at least) and its showcased with the numeric widget

I also learned a lot about javascript regular expressions.

However, there are still plenty of bugs to correct (which I’ll try to identify in my wiki page soon). For the next week, solving those bugs and adding the renderers for other widgets should be my priority. I’m still behind on the schedule, but I think I can get back on track (my estimate is around 8-10 of August).

And here’s the video of the current version of the designer. At the end there was a bug (because the editor tried to figure the type of a conceptid that didn’t exist), but I think the designer is finally shaping itself (you should go to the youtube page to see it better).

GSOC Weekly Blog Entry (2009-07-20)

I managed to configure tinyMCE in my module, although it was not as smooth process as I would like. Actually, the problem wasn’t in tinymce, but in my module’s build.xml file. If you are using the helloworld module as the starting point for creating your module, please use the basicmodule instead, since the helloworld module isn’t updated since revision 4002. I’ve opened a ticket regarding this issue and I’m planning to update the helloworld module after I’m finished with my own problems

Configuring tinymce was quite easy. I quickly given up the idea of creating a new theme, since the advanced theme offers all the customization I need. For now there are just 3 buttons on tinymce (Bold, Italic, Underline), just to keep it, but all the functionality of a full-fledged wysiwyg editor can be added by just changing a few parameters.

Most of this week was passed trying to figure out how can I solve the conversion from code view to design view. I need to transform this:

<obs conceptID=”1234″ labelText=”Weeks old: “/>

Into this:

<div class=”numeric”><div class=”label”>Weeks old:</div><input type=”textfield”/></div>

And vice-versa. Fortunately, tinymce has a good event manager and good DOM utilities that will make this possible (at least I hope so!).

Actually, I tried to create a plugin that showed something like: “Here be widgets!” each time a concept was entered in the code view (via the Add Concept button, for example). I didn’t succeed yet, but the amount of research I had into the tinymce code will surely help me with next week. Also, I’ve realized how really “pro” javascript works, and I think I can improve my “widget factory” a lot.

So, for the next week, I think I should have a code view <-> design view translator plugin ready (which I called visualxml) and I should have figured a way for widgets to register themselves with this plugin.

PS: A weekly blog entry wouldn’t really be one without a screenshot

GSOC Weekly Blog Entry (2009-07-14)

College exams are finally over! This means the project will occupy most of my time from now on. I’ll do my best to keep things on schedule before the end of the month!

So, about last week. I’ve added a way to add concepts from the database into the textarea. The foundations of the Add Concept dialog are now relatively complete. Here’s a small video demonstration from the state of the Html Form Entry Designer. You can see it in “HD” for better quality (and better size if you follow the link to youtube):

I also had to choose (once and for all) the wysiwyg editor to use. The main contenders were TinyMCE and FCKEditor, and I’ve chosen TinyMCE. They are great tools to work with, so this choice wasn’t  an easy one.

I’ve chosen TinyMCE because it’s smaller, more simple and faster. I also loved its interface (although there are several themes for both editors. FCKEditor was very close, it was less buggy (or at least so they say) and had a solid feel to it. If you (the reader) don’t know what one to choose, then take my advice, choose one and stick with it. They are both good…

So, for the next week, I’ll integrate TinyMCE to the project (install, costumize, etc.) and I will add a button for the Add Concept dialog. If it’s easy to use tinymce popups, I’ll try to convert the dialog to those popups (which are floating divs). If it’s not, I’ll look for other alternatives, probably inside OpenMRS (I recall seeing an OpenMRS Popup tag). I’ll also plan the way to change non-visual code (obs tags) to visual (html) tags. I’ve been thinking about this for a long time, and I think the solution is to use the TinyMCE events to dinamically change between visual and non-visual code. This would be accomplished if each widget implements a “code” parser.

GSOC Weekly Blog Entry (2009-07-05)

This week was more productive than the others (mostly because I had my last exam on Wednesday).

Here’s what I’ve done this week:

• Added AJAX functionality to the Add Concept dialog, via jQuery.
• Added a flexible way for programmers to add new widgets to the HTML Form Entry Designer module. Basically, the developers just need to specify an HTML template for the form in the Add Concept dialog and create a Javascript class with handleSubmit (called when the user presses the submit button) and generateHTML (which should return the string to put in the textarea) methods. If you want to know the full process of creating a add concept dialog for a (new) widget, you can see some examples.
• Added the Numeric, Text and Boolean widgets dialogs

Mid-term evaluations should start next week, so here’s a balance of the period. The goal for the mid-term evaluation was to have  the Add Concept dialogs generating proper HTML (milestones 1-3). Milestone #2 (retrieving concepts and its datatype from the database) isn’t ready yet (haven’t started it yet!), but I’ll try to finish that before next week. To compensate for that, I’ve worked into milestone #5 (a framework for developers to add widgets), so I could say that the goal was almost reached.

I’m a bit behind on schedule, mostly due to my wrong estimates of available time during my school exams period. Now that the first period of exams is gone (I’m just counting on going to one other exam in the second period), I’ll have more time to get it back on schedule.

For the next week I’ll try to complete milestone #2 (retrieve concepts from the database) and I’ll begin “playing” with tinymce and fckeditor to decide on what editor to use. I’ll post the advantages and disadvantages I find on each one in the next weekly blog entry.

Some screenshots of the new widgets’ dialogs: