User:Rishimittalneo/gsoc14

Switching Semantic Forms Autocompletion to Select2

 * Public URL: https://www.mediawiki.org/wiki/User:Rishimittalneo/gsoc14
 * Bugzilla report: BugZilla-61974
 * Announcement: (link to the announcement of your proposal at the wikitech-l mailing list.

Name and contact information
Name: Rishi Mittal Email: rishimittal_ajmer@yahoo.com IRC or IM networks/handle(s): #rishimittal (on freenode), Channels : #mediawiki, #mediawiki-i18n Web Page / Blog / Microblog / Portfolio:LinkedIn, GitHub , facebook Resume (optional):MyResume Location:Hyderabad,India Typical working hours:09:00AM to 2:00PM until August,04:00PM to 10:00PM after August (Indian Standard Time)(Adjustable) TimeZone: Kolkata,INDIA, UTC+5:30

Synopsis
Semantic Forms is an extension to MediaWiki that allows users to add, edit and query data using forms. It is heavily tied in with the Semantic MediaWiki extension, and is meant to be used for structured data that has semantic markup. Semantic Forms allows you to have forms for adding, editing and querying data on your wiki, without any programming. Forms can be created and edited by users also. Semantic Forms also supports autocompletion of fields, so users can easily see what the previously-entered values were for a given field. This greatly helps to avoid issues of naming ambiguity, spelling, etc.

Project Objective
The autocompletion in Semantic Forms should be converted from jQuery UI Autocomplete to Select2.

Major Drawbacks in present autocomplete

 * It is very naive and old approach, new and customizable and improved javascript based UI features are available.
 * It does not shows the image along side in the search bar(Newer versions provides this solution, but not that optimized).
 * Actually Select2 is also developed using JQuery but it is more inclined to solve the specific issues related to search/select text box.
 * No support for AJAX/JSONP in built support, Have to go through the entire lifecyle for the same for loading remote data.
 * No Responsive Design, Have to explicilty mention the size of the select box . etc.

Benefits of using Select2

 * Auto Tokenization
 * Flexible autocompletion for characters with accents
 * Display of an image associated with each term
 * Displaying values in a tree-type structure
 * Much better support for autocompletion on remote data sets(In-Built AJAX/JSONP support )
 * Good Browser Compatibility : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
 * Complete and Robust System Developed over the JQuery.
 * Capability to work with large data sets/ preload data.
 * Enabled tagging and In-Built improved UI support

Source : Select2-Documentation

Possible mentors

 * Yaron Koren, Stephan Gambke

Project Scope
There are significant amount of the improvements that could be made by using Select2, Few of the important / required changes are mentioned in this section. Source : Select2-Documentation
 * Display of and Image associated with each term (if it exists)
 * Flexible autocompletion for characters with accents (Select2's default matcher will ignore diacritics, making it easier for users to filter results in international selects).
 * Handling Events (May be in the later Stages Could be used for the provide event- based service in Semantic Forms)
 * Responsize UI (Size of the Select box is based on the length of the string.)
 * Sorted Listed Items(Defines the listed items in a sorted order)
 * "Tokenization" of values (putting squares around each term), which has become increasingly common in user interfaces
 * Displaying values in a tree-type structure

Project Plan
I have divided the entire project in three major modules : * Involves the understanding of the data, previous code, and Select2 JS framework. * Establishing proper co-ordination with project mentors. * Understanding the current usage of autocomplete in Semantic forms using JQueryUI. * Developing the unit test cases for the all the proposed functionality to be added. * Existing Autocomplete feature replaced and now using Select2 * Develop the basic UI and Add functionality of "Tokenization" of values (putting squares around each term). * Develop Flexible autocompletion for characters with accents * Develop feature to display of an image associated with each term * Displaying values in a tree-type structure * Improve the UI and discuss the UI with mentors/admins. * Discuss with the mentors for the potential improvements in the project. * Review all the functionalites * Testing the functionalites * Re-Code all the failed Test Cases * Documentation for all the Changes
 * Preparation Phase
 * Development Phase
 * Testing Phase

About you

 * Education completed or in progress:


 * How did you hear about this program?


 * Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?


 * We advise all candidates eligible to Google Summer of Code and FOSS Outreach Program for Women to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?

Past experience

 * Please describe your experience with any other FOSS projects as a user and as a contributor:


 * Please describe any relevant projects that you have worked on previously and what knowledge you gained from working on them (include links):


 * What project(s) are you interested in (these can be in the same or different organizations)?