 |
JMaki Faces Yahoo Demo Script
This page describes building a simple Ajax webapp that uses the Yahoo YUI
AutoComplete widget using the NetBeans 6 Visual Web IDE. The user
enters an English word in the AutoComplete text field which
communicates to the server using Ajax to display a valid list of words with
that prefix. After selecting a word and pressing the "Translate" button,
the app will display the word translated into Spanish. Note: the sample
Yahoo component library used in this script is a work in progress and may
not be product quality.
Talking Points
- This jMaki yahoo complib demo shows how one can take existing Ajax and JavaScript components developed by other teams and use them in web apps.
- The web app developer focuses on building the domain-specific portions of the app and leaves the complexities and details of Ajax and JavaScript to the component developer.
- For more information, see the references below.
Initial Set up
First you need a recent version of NetBeans 6 such as the
M9 preview release.
You will need the "Web and Java EE" feature.
For a component to appear on the palette, it's component library must be
imported into the IDE userdir. If you already have a project with a complib
embedded in it, just open that project and the embedded complib will
automatically be imported. Import a complib file as follows:
- Download jmaki-faces-yahoo.complib to your computer.
- Use the Component Library Manager to import the complib file. You can access this from the Tools Menu or from the palette of a Visual Web Page.
- Select Import->Browse to your downloaded file.
- Close all dialogs.
Next prepare the translation dictionary library project which does the
actual translation. (Thanks to JimB for the code.)
- Download Dictionary2.zip
- Unzip it into your main NetBeans Projects directory.
Demo Procedure
Start with a new Visual Web Page and add the component library to the
project:
- Palette->Add Component Library...
- Select the jmaki-faces-yahoo component library and press "Add Component Library".
- "Yahoo Widgets" should now appear on the palette.
Build the app visually by dragging and dropping the following components as
shown in the image below:
- "Yahoo Widgets->AutoComplete" to input the English word and display words matching a prefix.
- "Button" to submit the input. Change the text to "Translate".
- "Text Area" to output a list of possible translations. Change the number of rows to a larger number like 5.
- Add two optional Labels: "English Word:" and "Translation(s):"
Adding the translation dictionary code to the project:
- Project Window->your app->Libraries->Add Project. Navigate to Java SE project "Dictionary2".
- Goto Navigator->Outline->ApplicationBean1 java code
- Use "Fix Imports" feature as needed below.
- Add private field: private DTree dict;
- Context menu: Generate Getter and insert code:
public DTree getDict() {
if (dict == null) {
dict = new DTree();
URL url = dict.getClass().getResource("resources/spanish.txt");
String file = url.getFile();
dict.readDictionary(file);
}
return dict;
}
Add the AutoComplete handler code to the web app:
- Go back to Page1.java design view. Because of a double-click bug (103337) use this workaround: context menu->Edit Event Handler->complete.
- Add the following code:
public void autoComplete1_complete(FacesContext context, String query, CompletionResult result) {
DTree dTree = getApplicationBean1().getDict();
String[] words = dTree.findWords(query);
for (int j = 0; j < words.length; ++j) {
result.addItem(words[j]);
}
}
Add the Button Handler to translate the word:
- Double click on "Translate" button and add the following code:
public String button1_action() {
// TODO: Process the action. Return value is a navigation
// case name where null will return to the same page.
String word = (String) autoComplete1.getValue();
DTree dTree = getApplicationBean1().getDict();
String[] definitions = dTree.findDefinitions(word);
StringBuffer buf = new StringBuffer();
if (definitions == null) {
buf.append("No translations");
} else {
for (int i = 0; i < definitions.length; ++i) {
//info("Word: " + word + ": " + definitions[i]);
buf.append(definitions[i] + "\n");
}
}
textArea1.setText(buf.toString());
return null;
}
Dynamic Faces Demo
For extra credit, this app can be improved by creating a Dynamic Faces
virtual form for the "Translate" button. This allows the translation to
occur using an Ajax request rather than a traditional form submit.
Troubleshooting
If there are problems, check the app server log or the IDE log files for
hints.
References
Updates
-- EdwinGoei
|