Wicket TagIt!

I am not a web designer, but I really like fancy UI Components! Such a widget named Tag-It, which I tried to "wicket-ize"[1]!!

What is Tag-It?

• Tag-It is a nice jQuery widget that lets the user enter multiple values that are kept in a old time classic input text field as a comma separated string. 

Why do I need such a component?

• User Interface is not in 3NF!! For instance a single field might be used to enter multiple values.
• Your users do not like scrolling, so you should render as less UI components as possible.
• Your users are lazy and they want you to guess what they want to write, this feature is called autocomplete[2]! 

[to be continued when I will complete the implementation and testing of my TagIt-Wicket-ized. If you are interesting on this stuff contact me and I will send what I have done so far..]

Notes:
[1] I will soon publish my implementation as open source, but I am still working on that.
[2] Sometimes you guess wrong, or even worse you don't allow your user to write what really want to. I have such an experience using my iPhone 4s writing in Greek.. most of the times it guesses wrongly!!

How to socialize my Java based web app?

Problem: "How to socialize my Java based web app?":
Solution: "Simply use Spring Social"!!
Problem: "Spring Social is integrated with Spring MVC, how may I use with my non-Spring MVC Java web app?"
Solution: "Translate the Spring MVC code of the Spring Social's web module!"
Problem: "I am lazy and I do not want to do so!"
Solution: "In case that you use Apache Wicket, simple use my solution that you can find in google code!"

Do you still have a problem, feel free to ask me!

WICKET: Auto sliding panels

Do you have content but you don't have space? Would you like to make a fancy slideshow of Wicket components? I have the solution!

You can download the source code from here. Note that it is implemented using Wicket 1.4 and WiQuery 1.

PS: The solution is based on the implementation of "mb.scrollable" (site, demo).

Refrences:

1. mb.scrollable [http://pupunzi.open-lab.com/mb-jquery-components/mb-scrollable/]
2. Wicket 1.4 [http://wicket.apache.org/]
3. WiQuery [http://code.google.com/p/wiquery/]

Wicket Beans, quick and easy creation of CRUD forms

Do you need an easy way to create CRUD web forms? WicketBeans is the answer. It is a framework that is implemented on top of Apache Wicket 1.4 and makes it possible to generate model driven CRUD forms and CRUD grids. You can test the online example and visit the project's home page for farther information at http://code.google.com/p/wicket-web-beans/

Wicket Tooltip

Do you need to add tooltips to your web application?
Do you use Wicket and want a "behavior" that adds tooltip functionality to any Component?
If you answered yes to both questions the I have the solution! I used code from the article "Create a Nice, Lightweight JavaScript Tooltip" and I generated a behavior like class that uses the javavascript and style sheet in order to add tooltip functionality to any Component. The code of the behavior like class looks like the following:

public class TooltipPlugin implements Serializable{
private final Component component;

public TooltipPlugin(Component component, String tooltip) {
this.component = component;
component.add(HeaderContributor.forJavaScript(getClass(), "TooltipBehavior.Script.js"));
component.add(HeaderContributor.forCss(getClass(), "TooltipBehavior.Style.css"));
setTooltip(tooltip);
}

public void setTooltip(String tooltip) {
if (tooltip == null || tooltip.length() == 0) {
component.add(new AttributeModifier("onmouseover", true, new Model("")));
component.add(new AttributeModifier("onmouseout", true, new Model("")));
} else {
component.add(new AttributeModifier("onmouseover", true, new Model("tooltip.show('" + tooltip + "');")));
component.add(new AttributeModifier("onmouseout", true, new Model("tooltip.hide();")));
}
}
}

Where the "TooltipBehavior.Script.js" and "TooltipBehavior.Style.css" are the script and the style sheet files from the article "Create a Nice, Lightweight JavaScript Tooltip".

References:
1) Create a Nice, Lightweight JavaScript Tooltip

Downloads:
1) Original code of article "Create a Nice, Lightweight JavaScript Tooltip"
2) Full source code

Wicket Autocomplete - Show suggestions on focus

There are some cases that an autocomplete field is used for a limited number of option. For instance it can be used for selection of a Country. So we should show to the user all the available options when he focus on the field. The solution is to extends the DefaultCssAutocompleteTextField of wicket and override the "newAutoCompleteBehavior(IAutoCompleteRenderer, AutoCompleteSettings)" method as follows

@Override
protected AutoCompleteBehavior newAutoCompleteBehavior(IAutoCompleteRenderer renderer, AutoCompleteSettings settings) {
settings.setShowListOnFocusGain(true);
settings.setShowListOnEmptyInput(true);
settings.setShowCompleteListOnFocusGain(true);
return super.newAutoCompleteBehavior(renderer, settings);
}

If you need even more details leave a comment and I will give you even more information..

Χρησιμοποιώντας Wicket..

Το τελευταίο καιρό έχω αρχίσει να ασχολούμαι με ένα ακόμα web framework, το wicket. Το wicket είναι ένα framework για Java που ανήκει στην μεγάλη οικογένεια του Apache Foundation. Το ιδιαίτερο χαρακτηριστικό που έχει, σε σχέση με άλλα παρόμοια, είναι ότι διαχωρίζει την εμφάνιση από την λογική. Αυτό επιτυγχάνεται με το να απαιτείται για κάθε τι που εμφανίζεται αφενός ένα στοιχείο HTML σε κάποια σελίδα και αφεταίρου αντίστοιχο Wicket Component's instance που να δημιουργείται στον Constructor κάποιας ομώνυμης με την σελίδα κλάσης. Επίσης διαθέτει δυνατότητα χρήσης Ajax αλλα παράλληλα και κλασικού submit/refresh.

Εαν θέλετε να μάθετε περισσότερα μπείτε στην επίσημη ιστοσελίδα του project: http://wicket.apache.org/

ή ζητήστε μου να γράψω περισσότερα.

Στην αναζήτηση RIA framework

Καταρχήν να σας πω τι ειναι το RIA, το RIA είναι μια τεχνολογία που χρησιμοποιείται για να φτιαχνονται User Friendly web based εφαρμογες. Δείτε παραδείγματα στο RIA pedia. Έτσι μπορούμε και φτιαχνουμε εφαρμογές που μοιαζουν με stand alone αλλά τρέχουν μέσω browser. Το οποίο μπορεί να σημαίνει οτι μια εταιρεία μπορει να έχει ένα Server με όλες τις απαραίτητες εφαρμογές της, υπο μορφή web 2 application και ο κάθε υπαλληλος να μην έχει κανονικό υπολογιστή [υψηλό κόστος αγοράς αλλά και μεγάλο κόστος για άδεια λογισμικού για κάθε μηχάνημα], αλλά thinclient [τα οποία ειναι απλά μηχανήματα, μικρού κόστους τα οποία το μονο λογισμικο που χρειάζονται είναι ένας web browser, κι ίσως και κάποια plug in]. Αλλά γιατι εγώ το ψάχνω...
Εδώ κι ένα μήνα περίπου έχω αρχήσει να ψάχνω framework για αναπτυξη εφαρμογής σε Java [Ώστε να το αξιοποιήσουμε σε ένα έργο που αναπτύσουμε στην εταιρια όπου εργάζομαι, αλλά και γενικότερα γιατί θέλω να δω πως μπορώ να φτιάχνω τέτοιου είδους εφαρμογές]
Στην αναζήτηση μου βρήκα πολλά και διαφορα..εμπορικά και μη [σαφώς προτιμώ το open-source για να μπορώ να το "γαργαλάω" κιολας]..Αλλα αυτά που θεώρησα καλύτερα και θέλω να μοιραστώ μαζι σας ήταν [σύντομα θα γράψω αναλυτικότερες πληροφοριες για το κάθε ένα, αλλα προς το παρον τα αναφέρω ονομαστικά]:

1. Wicket, το οποιο χρησιμοποιούμε ήδη στην ανάπτυξη του front-end της εφαρμογής μας κι έχει αποδειχθεί αρκετά καλο.. Το όποιο προτιμήθηκε γιατί έχει πολλά ρεαλιστικά παραδείγματα αλλα και μεγάλη βιβλιοθήκη απο widget που μπορεσαμε να χρησιμοποιήσουμε.
2. Echo 2, το οποίο έχει πάρα πολύ υλικό, μπορεί να συνδυαστεί με το Wicket, και το καλυτερό του χαρακτηριστικό είναι ότι έχει plug-in για το eclipse.... αλλά δυστυχώς ειναι επί μισθώσι :-(
3. ThinWire, το οποίο είναι ένα πολλά υποσχόμενο framewok, αλλά με πολλά μειονεκτήματα. Ενα από αυτά είναι ότι [τουλάχιστον εγώ δε βρήκα] δεν έχει καλό documentation ώστε να μπορεσεις να το επεκτείνεις.
4. GWT [Google Web Toolkit], δε θα μπορούσε να λείπει από το παιχνίδι ο πολυαγαπημένος μου Γούγλης... αλλά μου την χαλάει γιατι δε το δίνει 100% open source και πανω από όλα δεν ειναι 100% Java.. σιγουρα καλος χρυσός και έχει απο πίσω τον Γούγλη, αλλά εγώ θελω να τα "γαργαλάω"! Οπότε σας προτίνω να το αποφύγετε αν θέλετε να κανετε κατι μεγάλο.
5. Adobe Flex 2, το οποιο καλό, χρυσό, open source, αλλά από μια τελείως commercial εταιρία. Που σε αφήνει να κάνεις τρομερά πράγματα, πολύ καλλιτεχνικά. Αλλά τα ωραία τα κάνεις με τα δικά τους εργαλεία τα οποία φυσικά τα πληρώνεις.. Ρίχτε μια ματια αν φτιαχνεται κάτι για commercial εφαρμογες.

ΥΓ: Να με συγχωρήσετε για ενδεχόμενα ορθογραφικά λάθη

Βιβλιογραφία:

1. Rich Internet application - Wikipedia