Designing a Data Entry Form using GWT
This tutorial will run through on how to design data Entry forms using GWT (Google Web Toolkit. The aim of this tutorial is to create the following page using GWT.
1. Install GWT using my previous tutorial which can be found in: https://wiki.auckland.ac.nz/display/BeSTGRID/GWT+Installation+Guide
2. Once you have installed GWT plugins for Eclipse, Restart Eclipse IDE.
3. Open the workspace.
4. Create a new GWT project from create new visualclass -> GWT -> Model -> GWT Java Project, as shown in the figure
5. Give a suitable name for the project(I ve used: 'Model Ecosystem'). and click 'next'. Do click on create GWT modules and click finish. !create new.png|thumbnail,align=center!
6. click 'ok' when asked to open associated view
7. By default, the project will be opened with 'ImageViewer.java' class. Click on the 'Design' view which is available at the bottom of the workarea as shown in the figure
8. If you have reached till there, You should be getting something like this :
9. Ok, Now lets start designing the Form. The basic panel which you see is called "Root Panel". we dont need the button at this stage and we may delete it now. Just click on the button and press delete. Now, drag the root panel as far as you could.
10. We need Textboxes, labels, buttons to achieve our aim. But, before that we need to add a Vertical pane to distinguish from the regular elements and the title of the page. So, lets first add a "Vertical panel" from the palette. Drag the Vertical panel to the edges of the root panel.
11. Now, lets add the title of the Data entry form as: Data collection Unit. This is done by placing a 'Label' from the widget to the vertical panel.And change the 'text' property of the label to: Data collection Unit as shown in figure. Also I would like the label to be at the centre of the panel. So, in the same properties you can set 'HorizontalAlignment' and 'VerticalAlignment' to center and middle respectively.
12. Similar to Step:10, let's add an "Absolute Panel" to the second half of the "vertical panel". You may be bit confused to which one is "vertical panel" and which one is "absolute panel". When you click on the Absolute panel on the left in the "Structure" explorer, Absolute panel will be distinguished separately. Infact we need to increase the size of the absolute panel, as we need to add form elements such as Text box, labels, and buttons and hence when we click this panel on "Strucutre explorer", it will be highlighted along with border. Just click and drag the edges.
13. Now lets try to add the fields to the main form. First, let's have a look at the form at the top of this page. We need to add 9 labels, 7 textboxes, and 6 combo boxes. lets add "Labels" in the Absolute Panel. To do this, click on the label box from the widget and place them in absolute panel. After placing all 9 labels, give a suitable text similar to step: 11.
14. Note: To see the corresponding code, you can click on the "source" button at the bottom of the workarea.
15. Now: the main task of adding Textboxes and Combo boxes. First, lets add textbox for five of the fields(samplername, speciesname, locationname, latitudeposition, longitudeposition). This is done similar to adding a label. Click on the "Textbox" in the widget and place them near the labels in the absolute panel.
17. After adding textboxes, give a reasonable variable names for each of the textboxes as only these variable names will be used in source code!
18. Now lets add combo boxes. these are similar to adding textboxes except that in text box we change "Text" property, in combo box we change "items" property. Make sure you change the "variable name" for the each of the combo boxes. Now, lets assume the first combo box represents the hours property in time. so the "items" for first combo box will contain values from 0 to 23;and second combo box will contain values from 0 to 59 and third combo box will contain values from 0 to 59. !combo added.png|thumbnail,align=center!
A text area is an improvised form of a textbox. A Textbox can only obtain values in a single row. But, "TextArea" on the other hand, can obtain values from multiple rows.
19. Now, lets add the Text Area (which is improvised form of Textbox) to obtain the DNA Sequence. Just like any other widget click and place the "TextArea" near the "DNASequence" label and modify the variable name!
20. Lets place a "Button" to submit the form. The one small change in Button is: the "HTML" property refers to the text that appears on the button. change this to "Submit" and of course, change the variable name to "submitButton". So, now we have everything but, the date and it will appear something like this:
21. Last but not least, Lets add date! GWT provides rich features such as "DatePicker" and "DateBox". Lets choose "Datebox" as it makes our task easy. If we choose DatePicker, we need to add a separate textbox and an associated event! so, click on the "Datebox" and place it near the date label. I would like to see the date as: YYYY-MM-DD. So, I choose, "ShortDateFormat" from the "format" property. You can choose any format. The primary reason I choose is that I can directly store this format in Database without any string manipulations! change the variable name for the "datebox"! And that's it! We are ready to go! The final form should look like: !final form.png|thumbnail,align=center!
22. Though this may not look exactly same as the form at top of this page, this is basic form we need to create! And to change the "LOOK AND FEEL!" we need to modify the "css". We can add .CSS property to each and every form element! For example. I have changed the css for the entire body by clicking on the vertical Panel on the structure explore and in the property, click on the css button right next to style name! You can modify the font/background etc. To obtain the form as in the top, change the css to: font: Times new roman, size: 24 px, bold. You can set for each element. For example, I need to change the color for button to blue, you can add your own css for tat!
23. Now, to run the program, right click on the "ImageViewer"> run as> gwt application. You will be prompted to a GWT development Mode window, where you can click on the "Lauch on default browser" to view in browser.
Okay, before validating the form, we need to do a very important thing. we need to pin the widgets to the form. only then we could access them. Else in the code, it will ask to modify the accessibilty. click on the vertical pane in the Structure explorer, and click "local to field" option which can be seen as in:
24. Okay, having created the forms, the next main task is to do validation! Well, this is a very important task indeed! So, lets see the validation part. Lets see how to check if the value entered in the textbox is not null. In our form, clicking the "submit" button should trigger the validation! So, click on the button and click on the "Show events" property which is denoted by a circled "C". select "onClick" event! Now, you will be prompted to the "source" window, in onClick event of the button! we need to check if the textboxes are empty and for valid double values in latt/long box! The following code is to check if the values are empty:
Similarly the code to check if the values are double can be easily done as well! Window.alert will prompt for an alert box!
The next task is to add the data collected to the database. But, GWT doesn't directly connect with server. It need Asynchronous calls to be sent to server, which in turn will update the databse. I will look into the Asynchronous calls and will update the Database part in next tutorial. Hope the tutorial was useful!