Here I am in a new internship!
I work for a professor who wants to create an online software to practice math, student tracking and management skills. We will normally work with Google Web Toolkit!
With this toolkit code that Google's applications and the concept is pretty simple and interesting:
- Only the JAVA!
I do not know if this is good news but it's like this: D
The operation is therefore called everything in Java code using the appropriate libraries. We normally never touches a line of code js and is fully object. So I installed it
tonight and it makes me really want so I recommend it, I'm going to seriously and I will post some tutorials on this subject.
Ci cons first screen that gives a new project:
I now propose a small tutorial discovery GWT:
is strongly inspired tutorial that offers google here: StockWatch
must first install Eclipse if you have not already done so.
1. Download the latest version of eclipse on http://www.eclipse.org/downloads/
2. then go to Eclipse -> Help -> New Software
Once in New Software, we add this url: http://dl.google.com/eclipse/plugin/3.5 containing sources GWT and GWT plugin for eclipse
3. Check all
4. Continue the installation until the end, logically no problem if not follow what they say, then restart.
5. New things appear now, especially with the 3 icons emblematic g google.
6. Just installed Eclipse and GWT are now ready to use.
I work here with screenshots for the code to not copy you (stupidly) the code as it is incomparable difference between writing code and copy it to understand.
We now create a new web application google. It's pretty instinctive, it is this icon.
It informs the project name: StockWatch and the package, I usually just put com
It therefore generates the hello world is pretty funny, it shows just how it is organized but it is not used much.
will now be in war and opening the file stockwatcher.html (it depends on the name you made for your project name, I took my "Stockwatch) then does the housework, just by removing the comments, we arrive at something clean and simple:
\u0026lt;! doctype html>\u0026lt;html>\u0026lt;head>\u0026lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="StockWatcher.css"> <title>Web Application Starter Project</title> <script type="text/javascript" language="javascript" src="stockwatcher/stockwatcher.nocache.js"></script> </head> <body> <h1>StockWatcher</h1>\u0026lt;div id="stockList"> \u0026lt;/ div>\u0026lt;iframe src = "javascript:''" id = "__gwt_historyFrame" tabIndex = ' -1 'style = "position: absolute; width: 0; height: 0; border: 0"> \u0026lt;/ iframe>\u0026lt;/ body>\u0026lt;/ html>
GWT uses the id to say where he wants to display its elements. Thus, it was a div with the id stocklist vacuum but in order to put our content.
it now opens com.client . StockWatcher.java
We have our class declared like this: public class StockWatch implements Entrypoint} {
I you remember we said what we need directly in the classroom.
In this tutorial, we want to add Ajax into new entries in a table, so we will need:
- a table (flexTable)
- an input text (TextBox)
- a label to indicate the date of last update (Label)
- a button (Button)
We also need a panel that is typical of Java, let us consider the simply a pedestal.
- a panel for display (VerticalPanel) and a horizontal panel for adding entries
But all these elements require the import of certain files.
We put these import libraries at the top of the file.
So we put it just below the class declaration.
The entry point of the program is the function public void onModuleLoad () {}
is our "hand" to those who sought .. .
We first create our table where we will store the data, the FlexTable stocksFlexTable:
It will be 4 columns.
We will then put the input text and the button to add new entries in the horizontalPanel addPanel:
Now we put in mainPanel the table, the panel Added entries and our label update:
Then something very interesting, the concept of RootPanel. The
RootPanel is our page! We do not declare it is pervasive and is used to communicate between our class and our html file.
Thus, we will put our mainPanel in the div id stocksList like this:
Now, if seconded F11 in Eclipse, we build our project and we can see in our browser preferred (except when I write about chromium in ubuntu is a shame! Google anyway: S)
But for now, nothing happens by clicking on our button and the table is empty.
must create an action on the click of a button you can send the contents of the input text to flexTable.
This is done with the method of our object addClickHandler addStockButton.
You see here that there is a call as soon as you click on the button addStockButton, addStock function (); But this function does not exist and eclipse you will get noticed.
Eclipse is nice! It will even offer to create it for you.
imagine we do not want to add 2 times the same thing in our FlexTable and only entries of more than 4 characters and no special characters.
We created a list of entries is added each time and we'll check it does not exist in our list before adding the flexTable and tested the contents with REGEX matches with the function (" ^ [0-9A-Z \\.] {1.10} $ ")
It displays an error message with the Window object, accessible through inclusion:
import com.google . gwt.user.client.Window;
can finally add some things in our flexTable! Enjoy
is our "hand" to those who sought .. .
We first create our table where we will store the data, the FlexTable stocksFlexTable:
We will then put the input text and the button to add new entries in the horizontalPanel addPanel:
Now we put in mainPanel the table, the panel Added entries and our label update:
Then something very interesting, the concept of RootPanel. The
RootPanel is our page! We do not declare it is pervasive and is used to communicate between our class and our html file.
Thus, we will put our mainPanel in the div id stocksList like this:
Now, if seconded F11 in Eclipse, we build our project and we can see in our browser preferred (except when I write about chromium in ubuntu is a shame! Google anyway: S)
But for now, nothing happens by clicking on our button and the table is empty.
must create an action on the click of a button you can send the contents of the input text to flexTable.
This is done with the method of our object addClickHandler addStockButton.
You see here that there is a call as soon as you click on the button addStockButton, addStock function (); But this function does not exist and eclipse you will get noticed.
Eclipse is nice! It will even offer to create it for you.
imagine we do not want to add 2 times the same thing in our FlexTable and only entries of more than 4 characters and no special characters.
We created a list of entries is added each time and we'll check it does not exist in our list before adding the flexTable and tested the contents with REGEX matches with the function (" ^ [0-9A-Z \\.] {1.10} $ ")
It displays an error message with the Window object, accessible through inclusion:
import com.google . gwt.user.client.Window;
We forget not instantiate our inventory list ArrayList, just below other statements
Can we write our function. It gives this:
0 comments:
Post a Comment