PabloGSOC2010Proposal

Proposal Title: [GSoC] create nifty components

Student Name: Pablo Henrique dos Reis

Student E-mail: pablodosreis@gmail.com

University: UFMG / Brazil

Organization/Project: Apache Software Foundation / Tapestry 5

Assigned Mentors: Thiago H. de Paula Figueiredo,Ulrich Stärk

Proposal Abstract: Create the components Tapestryh Drag and Drop Palette and SelectWithAutoComplete

Detailed Description:

Tapestry Drag and Drop Palette

Objective: create a new component, DnDPalette, that can be used to can select and deselect items in a list using drag-and-drop. It will be implemented using the Draggable and Droppable classes provided by Scriptaculous, a JavaScript framework that is included in Tapestry.

Inputs

1. The component will receive all the options in a SelectModel

2. The component will receive the selecteds items in a java.util.Collection or java.util.List

3. The component will receive a ValueEncoder to obtain the client-side value corresponding to a given option.

How the component will be created:

Template

It will have two HTML <divs>.

The first <div> will contain a list of the available options.

The second <div> will contain the selected options.

The user will be able to move one option to or from the selected list.

Class

The Component Class will be an adaptation of the Palette Tapestry component.

JavaScript

A JavaScript file will be written containing the code that sets up the Droppables and Draggables.

References

Scriptaculous Draggable:

http://wiki.github.com/madrobby/scriptaculous/draggable

Scriptaculous Droppables:

http://wiki.github.com/madrobby/scriptaculous/droppables

Examples of drag and drop using Scriptaculous:

http://www.tutorialspoint.com/script.aculo.us/scriptaculous_drag_drop.htm

SelectWithAutocomplete

Objective: create a new component, SelectWithAutocomplete, based in the Ajax.AutoCompleter class from Scritaculous. As Select, it will be used to choose a value from a list of options, but it will be selected from an Autocomplete-like menu. SelectWithAutocomplete will be more appopriaate than Select for large numbers of options.

Inputs

1) The component will receive the selecteds items in a java.util.Collection or java.util.List

2) The component will receive a ValueEncoder to obtain the client-side value corresponding to a given option.

How the component will created:

Template

The template will use one text area. It will show the label of the selected option. A hidden Select will be used to hold the selected option client-side value and an unordered list will show the provided options.

Class

The page class will be adapted from the Select component.

JavaScript

A JavaScript file will be written to contain all the needed client-side code. The Ajax.AutoCompleter class from Scriptaculous will be used as a starting point.

Event

The component will receive all the options by triggering an event and passing what the user has typed as its context, just as the Autocomplete mixin does. The handler method must return a SelectModel containing the appopriate options.

References

Scriptaculous Ajax.AutoCompleter

http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter

Project Plan

1. Create the DnDPalette. (April – 15^th May)

2. Create the SelectWithAutocomplete (16^th May – 10^th July)

3. Create the App example.(10^th July – 16^th July)

4. Tests and improvements. (17^th July - 8^th August)

5. Delivery (9^th August 2010 )

Biography

I am Pablo Henrique dos Reis. I'm currently in the 4^th semester of the Information Systems undergratuate course at UFMG (Federal University of Minas Gerais, Belo Horizonte Brazil. I am a Sun Certified Programmer for the Java 2 Platform Standard Edition 5.0 (Janeiro/2009). I have been working full-time as a developer in a project built on Tapestry and Tapestry-IoC since January 2008. I am developer. My roles are the creation of components and general development using Tapestry 5, Hibernate, Spring and JasperReports. Among my activities was being an author of the AutoCompletObjecto, which is similar with the SelectWithObjects proposed above.

My home page