User:Amr M. Elabsy/Blogs/Fourth blog:All in one

The Greatest Experience in my Life, Thanks GSoC, Thanks MediaWiki, Thanks Yaron Koren, Thanks Priyanshu Varshney.

This is the best description for my GSoC Experience, I have learnt a lot in every single step in my journey.

My Project Tasks

My project consists of five tasks:

1. jQuery UI Autocomplete is used for autocompletion within #forminput
2. jQuery UI Autocomplete is used for the text with autocomplete and textarea with autocomplete input types within forms
3. jQuery UI Datepicker is used for the datepicker and datetimepicker input types
4. jQuery UI Widget is used by the Fancytree library, which in turn is used by the tree input type
5. jQuery UI Sortable is used by the jsGrid library, which in turn is used by display=spreadsheet and Special:MultiPageEdit.

The first two tasks was finished in the first month, and the next two was finished in the next 5 weeks, and The last (and tallest) task is being finished now by the last week of the internship.

jQuery UI Autocomplete is used for autocompletion within #forminput

The #forminput in not actually an input type, but it is an input used to enter a form, to create or edit a page. The usage of this input requires only one value, not a multiple values, and PageForms supports such a thing that doesn't use jQuery UI, which is "Combobox", instead, it uses Select2.js. So, it was simply safe to call the Combobox constructor, instead of calling attachAutocomplete(), the function that uses jQuery UI.

jQuery UI Autocomplete is used for the text with autocomplete and textarea with autocomplete input types within forms

These two input types are corresponding to the <text> and <textarea> html tags, the important difference (at least for my project) is the autocompletion feature. Both of them can hold single value, or multiple values, depending on the parameter |list. On the other hand, PageForms supports two input types which use Select2.js instead of jQuery UI, Tokens and Combobox. Tokens can hold multiple values, and Combobox can hold single value. Thus, We made the classes of Text(area) with autocomplete stubs for Tokens and Combobox.

So, if the input type should hold Single value, then call the class of the Combobox, otherwise, call the class of the Tokens.

jQuery UI Datepicker is used for the datepicker and datetimepicker input types

The Library OOUI, which is developed by MediaWiki developers, has two widgets, DateInputWidget and DateTimeInputWidget. This tasks required two main steps:

First, to write the PHP and JS Code to implement the widgets

This step included calling the class in php, in this way

$widget = new DateInputWidget( array(
	'type' => 'date',
	'name' => $this->mInputName,
	'value' => $this->mCurrentValue,
	'id' => 'input_' . $this->mInputNumber,
	'classes' => array( 'ext-pageforms-datetimewidget' ),
	'infusable' => true,
) );

which returns the HTML text for the widget, and infusing them in JS to allow the developer to handle it in JS, in this way

oo.ui.infuse( $( '.ext-pageforms-datewidget' ) );

Second, to handle the date format

There is a difference in the date format. So, we defined a new method "getConvertedFormat()" to convert the format the user enters, into the format the Widget expects.

jQuery UI Widget is used by the Fancytree library, which in turn is used by the tree input type

This was one of the most interesting tasks I have ever made. The Tree input type in PageForms is a special thing in my opinion. It has two types to define, From WikiText, or From the name of the Category. The first type is to define the tree data in a bullets shape, and the second is to write the name of the category, and the Tree class would retrieve the sub-categories of this category.

The PHP code consists of two classes, PFTree and PFTreeInput.

When I worked on the first class, I felt it as a Data Structure, which was one of the best things in GSoC, because it was my first time to deal with Data Structure. The aim of this class is to convert the shape of the data from the regular array that PageForms generates, to the structure that jsTree library expects.

The next class aims to convert this structure to JSON and pass it to HTML to be used in JS.

The JS code handles the parameter passed from PHP through the HTML, to render the tree as it should.

The jsTree shows only data, rather than inputs, so, it was needed to define a new <input> to hold the data that user selects, and holds the data that should come from database, either in show changes page, or edit with form page.

jQuery UI Sortable is used by the jsGrid library, which in turn is used by display=spreadsheet and Special:MultiPageEdit.

This one of the most difficult and complex tasks I have ever made, though, it was very intersting. The Special:MultiPageEdit page allows the user to edit many pages as he wants from one place, using a table.

The table should get the data from the Database using AJAX request, and then render the table. The user can edit any cell and then two anchors will be displayed, "Save" and "Cancel" to save the data into database, or cancel changes. The Table should also allow user to "Add" new page.

About The Journey

In the last few days in the Journey of GSoC, I want to thank my mentors in person, Thanks Yaron Koren, Thanks Priyanshu Varshney. Both of you helped me a lot, and I've learnt a lot from both of you. Thanks in advance.

The journey of GSoC witnessed a lot of things that happens to me for the first time. This was my first open source participation, and I really really loved it and I am completely sure that I would share in open source again, and, as a senior student, I would share in GSoC again next year.

This was my first time to explore a Framework source code. At the beginning I thought it would be impossible for me to finish any simple task, but now, I have learnt a lot of things that inspired me in my Graduation Project, which will consists of three libraries, and will be published as an open source project.

This was my first time to share in an English online meeting, and they were many meetings. At the very first meeting I was afraid that I will not understand most of the meeting, and I wouldn't be able to talk, but I could understand nearly every thing, and I talked as I am talking in Arabic.

This was my first time to deal with a Code Review, and the first time I notice such a convention, some times I was getting errors because of some spaces, an extra tab or even a typo in a comment. I've learnt a lot about how to write a clean code.

The greatest thing about GSoC, MediaWiki and the mentors, is that they didn't teach me a specific language or function, but they taught me how to think as a Software Engineer, and I am sure that will help me a lot.