Courses/CS 491ab/Winter 2008/Dong Liu
From CSWiki
[edit] Week 1 - January 4, 2008
Introduction
[edit] Week 2 - January 11, 2008
Because of something personal, I will be absent today, and I will redo the demostration next week.
Google Web Toolkit
Google Web Toolkit (GWT) is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.
Installing Google Web Toolkit
- Install the Java SDK. If you don't have a recent version of the Java SDK installed, download and install Sun Java Standard Edition SDK.
- Download Google Web Toolkit. Download the Google Web Toolkit package for your operating system.
- Unzip the Google Web Toolkit package. On Windows, extract the files from gwt-windows-[version].zip with a program like WinZip.
- Done! Start using Google Web Toolkit.
Creating an Application from Scratch (with Eclipse)
GWT ships with a command line utility called applicationCreator that automatically generates all the files you'll need in order to start a GWT project. It can also generate Eclipse project files and launch config files for easy hosted mode debugging. To generate an Eclipse project for a new application, first use the projectCreator script to generate a shell Eclipse project for your application:
projectCreator -eclipse MyProject
Then generate your GWT application as described above, but with an additional -eclipse flag specifying the name of your Eclipse project:
applicationCreator -eclipse MyProject com.mycompany.client.MyApplication
When you're done with these scripts, in addition to the MyApplication-shell and MyApplication-compile scripts, you should see .project, .classpath, and MyApplication.launch files in your current directory.
To open your project in Eclipse, launch Eclipse and click the File -> Import menu. Choose "Existing Projects into Workspace" in the first screen of the wizard, and enter the directory in which you genetrated the .project file in the next screen of the wizard. When you are complete, you should see your GWT project loaded into your Eclipse workspace. And then just click the "Run" button at the top of the window to start your project in hosted mode.
For more Infomation, please see http://code.google.com/webtoolkit/gettingstarted.html
[edit] Week 3 - January 18, 2008
[edit] Week 4 - January 25, 2008
[edit] Direct Web Remoting(DWR): Easy AJAX for JAVA
DWR is a RPC library which makes it easy to call Java functions from JavaScript and to call JavaScript functions from Java.
It has a large user-base, active mailing list and has been used in many projects including the Walmart shopping site and American Airlines flight booking site.
DWR has a number of features like call batching, marshalling of virtually any data-structure between Java and Javascript (including binary file uploading and downloading), exception handling, advanced CSRF protection and deep integration with several Java server-side technologies like Spring and Guice.
DWR consists of two main parts:
- A Java Servlet running on the server that processes requests and sends responses back to the browser.
- JavaScript running in the browser that sends requests and can dynamically update the webpage.
DWR works by dynamically generating Javascript based on Java classes. The code does some Ajax magic to make it feel like the execution is happening on the browser, but in reality the server is executing the code and DWR is marshalling the data back and forwards.
This method of remoting functions from Java to JavaScript gives DWR users a feel much like conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web without requiring web-browser plug-ins.
The DWR project is developing a method of automatically creating Java versions of JavaScript APIs which developers can use to control browsers from the server. A server-side version of the TIBCO GI library is currently in alpha release, and the DWR project aims to expand this to cover other client side APIs including the Dojo Toolkit, JQuery, YUI, Ext and others.
[edit] Getting Started with DWR
1. Install the DWR JAR file Download the dwr.jar file. Place it in the WEB-INF/lib directory of your webapp. You'll probably have a set of jar files in there already.
2. Edit the config files The following lines need to be added to WEB-INF/web.xml. The <servlet> section needs to go with the other <servlet> sections, and likewise with the <servlet-mapping> section.
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
Then create a dwr.xml file that lives in WEB-INF alongside web.xml. A simple way to start is with something like this:
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="JDate">
<param name="class" value="java.util.Date"/>
</create>
<create creator="new" javascript="Demo">
<param name="class" value="your.java.Bean"/>
</create>
</allow>
</dwr>
The DWR config file defines what classes DWR can create and remote for use by Javascript. In the example above we are defining 2 classes that are remoted and giving the classes names in Javascript.
The new creator that we used above uses the public no-args constructor that all JavaBeans must have. It is also worth remembering that DWR has a few restrictions:
- Avoid reserved JavaScript words; Methods named after reserved words are automatically excluded. Most JavaScript reserved words are also Java reserved words, so you won't be having a method called "try()" anyway. However the most common gotcha is "delete()", which has special meaning from JavaScript but not Java.
- Overloaded methods can be involved in a bit of a lottery as to which gets called, so avoid overloaded methods.
3. Go to the following URL
http://localhost:8080/[YOUR-WEBAPP]/dwr/
You should see a page showing you the classes that you've selected in step 2. Having followed a link you should see an index of all the methods all ready for calling. These pages are dynamically generated examples of what you can do using DWR.
[edit] Week 5 - February 1, 2008
[edit] Introducing JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.
JSON is built on two structures:
- A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
- An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangable with programming languages also be based on these structures.
[edit] Week 6 - February 8, 2008
[edit] Week 7 - February 15, 2008
[edit] Week 8 - February 22, 2008
[edit] Introducing DOJO
Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a "unified" toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.
Dojo allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript sanely. You can use the components that Dojo provides to make your web sites more usable, responsive, and functional. With Dojo you can build degradable user interfaces more easily, prototype interactive widgets quickly, and animate transitions. You can use the lower-level APIs and compatibility layers from Dojo to write portable JavaScript and simplify complex scripts. Dojo's event system, I/O APIs, and generic language enhancement form the basis of a powerful programming environment. You can use the Dojo build tools to write command-line unit-tests for your JavaScript code. The Dojo build process helps you optimize your JavaScript for deployment by grouping sets of files together and reuse those groups through "profiles".
Dojo does all of these things by layering capabilities onto a very small core which provides the package system and little else. When you write scripts with Dojo, you can include as little or as much of the available APIs as you need to suit your needs. Dojo provides multiple points of entry, interpreter independence, forward looking APIs, and focuses on reducing barriers to adoption.
[edit] Installation
There are three main ways to install Dojo:
- Install nothing! Use Dojo from AOL's Content Distribution Network (CDN).
- Install the latest release on your server
- Install directly from source control
[edit] Use Dojo from CDN
This method is quick and painless! You simply load Dojo through <script> tags pointing to the AOL CDN. You don't need to invest any of your own server disk space or resources nor will you need to install Dojo locally in many cases.
[edit] Use Dojo from your Own Server
- For you traditionalists out there, you can download, install and use Dojo the old fashioned way.
- Download the latest build from http://dojotoolkit.org/downloads. Uncompress the file onto your web server. Assuming you install it under the directory /js, when you're done, the file system should look something like this:
- With your browser, open http://yoursite.com/js/dojo-0.9.0/dijit/themes/themeTester.html You should see a page like this:
You've got a working Dojo!
[edit] Hello World
[edit] Requirements
Obviously, you need Dojo first! You can get the latest stable build from http://download.dojotoolkit.org. Next you need a web server. Whether it's hosted offsite or onsite, on Linux or Windows or Mac ... matters naught. The Dojo JavaScript library is simply pulled from your web server to the browser as needed. However, the AJAX examples in this document require a server-side scripting language like PHP or ASP.
The Dojo and Dijit code, which runs on the client browser, is certified to run on IE 6 and 7, Firefox 2, and Safari.
[edit] Setting Up Dojo
First, you should create a directory on the web server. We'll call ours HelloWorldTutorial. Then create a directory called dojoroot underneath it. Finally, use your favorite unzipping tool to unzip Dojo into /HelloWorldTutorial/dojoroot. It'll look like this when you're done:
[edit] Getting Started
Once we have setup the directory and file structure for the tutorial, we will need to setup the JavaScript component of our HTML page. Have a look at the code below:
<html>
<head>
<title>Dojo: Hello World!</title>
<!-- SECTION 1 -->
<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
</head>
<body class="tundra">
</body>
</html>
As it can be seen above, the page is a just a standard HTML skeleton with three things:
- A couple of CSS style sheets. The one marked Tundra is the theme we will use from Dijit for this example. There are other themes available.
- A script element inserted into the head section. This script element is responsible for loading the base Dojo script that provides access to all the other Dojo functionality that we will use.
- Lastly, we place the tundra CSS class in the body tag.
[edit] Creating a Button Widget
Ok, now for the exciting part! In this example we're going to create a Button widget with the text 'Hello World!'. In the case of the Button widget, three visual states (mouseOut, mouseOver, and mouseDown) are available which means that we are able to enhance the user's experience somewhat.
The first step in creating the widget is telling Dojo to load the appropriate modules. In the header, add another section (hereafter referred to as section 2) below section 1 as follows:
<!-- SECTION 2 -->
<script type="text/javascript">
// Load Dojo's code relating to the Button widget
dojo.require("dijit.form.Button");
</script>
The dojo.require line instructs Dojo to load the Button widget. If you were to omit this line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect.
After making the changes, insert the following code into the body section of the HTML:
<button dojoType="dijit.form.Button" id="helloButton">Hello World!</button>
The key attribute of this HTML element to notice is the dojoType attribute. The dojoType attribute is responsible for instructing Dojo on how to process the element when the page is loading. In this case we've used a button element for the button though we could have used an input element - Dojo will work with either as long as the dojoType attribute is present. It is worth noting that if we did use an input element, we would have to specify the button's text by using adding a caption attribute that contained the desired text.
[edit] Connecting an Event to the Widget
A button is all well and good, but what about getting it to do something when it's clicked? We could just specify an onClick event handler for the button, but there's another, more efficient way - the Dojo event system!
The easiest way to attach an event to a button is through a script tag. But not just any script tag ... this one has a type of dojo/method, like this:
<button dojoType="dijit.form.Button" id="helloButton">
Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
</button>
Pretty simple, eh? Putting the script inside the tag body makes a good deal of sense. And you can harness the full power of DOM Level 2 events inside the script. That means you can detect SHIFT and CTRL keys, get all sorts of event properties, and bubble events up through the HTML tree. If you've ever used Level 2 events, you know how IE and Firefox use different syntax. In Dojo, the same functions work in any supported browser. That's powerful stuff!
[edit] Reading Data from the Server
Having an alert pop up when we press the button is great, but what if we want to retrieve some data from the server? Again, Dojo comes to the rescue with an easy method of accomplishing this - dojo.xhrGet. For easy reference, the code for this section is available as HelloWorld-Section5.html and response.txt in the attachments section.
To get started, we first need a callback function to handle the data to be returned from the server. Insert the following code into the header:
<script>
function helloCallback(data,ioArgs) {
alert(data);
}
function helloError(data, ioArgs) {
alert('Error when retrieving data from the server!');
}
</script>
The two arguments to the functions (data, and ioArgs) are important - don't leave any of them out! The first argument (data) contains the data sent back from the server, whilst the second argument contains a Dojo I/O Bind object. Only the first concerns us right now.
The next step is to link the click of the button to the server request. To do this, modify the following code:
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
To this:
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'response.txt',
load: helloCallback,
error: helloError
});
</script>
The above code basically tells Dojo to query the URL specified by url and to use the function specified by handler to process the response from the server.
Finally, we need to create another file in the same directory as HelloWorld.html called response.txt. In this file, place the text 'Welcome to the Dojo Hello World Tutorial'.
Now, when the button is clicked, a JavaScript alert should display the text from the response.txt file. Dojo-Easy!
Next, we'll look at doing something meaningful with that server request.
[edit] Sending Data to the Server Using GET
It's all well and good retrieving static data from the server, but it is hardly a widely used situation in real life. So, instead of simply requesting data from the server we also will send it some information for it to process. In this section, we'll use the GET method whilst in the next section we'll use the POST method. For easy reference, the code for this section is available as HelloWorld-Section6.html in the attachments section. Server side code is also available as HelloWorldResponseGET. where type is ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), or Java ('.jsp').
Firstly, in the markup section of the HelloWorld.html file (i.e. the body section), we need to add another element - an input element. So, change the code in this section from:
<button dojoType="Button" widgetId="helloButton">
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'response.txt',
load: helloCallback,
error: helloError
});
</script>
</button>
to:
<button dojoType="dijit.form.Button" id="helloButton">
Hello World!
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'HelloWorldResponseGET.php',
load: helloCallback,
error: helloError,
content: {name: dojo.byId('name').value }
});
</script>
</button>
Please enter your name: <input type="text" id="name">
[edit] Week 9 - February 29, 2008
[edit] An AJAX client-side framwork: ExtJS
Ext (pronounced "extent") is an open-source JavaScript library, for building richly interactive web applications using techniques such as AJAX, DHTML and DOM scripting.
[edit] Supported functionality
A diverse set of form controls is available for use within web applications, including:
- text fields and textareas
- date fields with a pop-up date-picker
- numeric fields
- combo box
- radio and checkbox controls
- html editor control
- grid control (with both read-only and edit modes, sortable data, lockable and draggable columns, and a variety of other features)
- tree control
- tab panels
- toolbars
- Windows-style menus
- region panels to allow a form to be divided into multiple sub-sections
Many of these controls are able to communicate with a server using AJAX just by providing appropriate configuration information.
There are several other useful functions that can add interactivity to HTML pages, including:
- dialog boxes
- "quicktips" to display validation messages and information about individual fields
Other features include a powerful DOM selector class allowing operations to be performed on elements within the page with a high degree of flexibility, data stores that can be used to contain and manipulate complex sets of data, and classes to create and manipulate data in JSON and XML formats.
[edit] HelloWorld
- Go to http://extjs.com/download to download the Ext SDK in zip format
- Unzip the file, and the files structure below:
- In the "examples" folder , create a folder "helloworld". In the folder "helloworld", we create a file "helloworld.html". The content of this file is:
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script>
Ext.onReady(function(){
Ext.MessageBox.alert('helloworld', 'Hello World.');
});
</script>
- Double click the file "helloworld.html":
It works!
[edit] Week 10 - March 7, 2008
[edit] Final Report
[edit] Brief project description
A class scheduler Facebook application for college students (or CSULA student only) with AJAX technique. Users can create and share their class schedules with other users who has this application.
[edit] Anticipated users
The users will be Facebook users who add this application in Facebook application list.
[edit] Main conceptual (i.e., user-level) objects
- Users: name, other Facebook descriptions
- Schedules: class schedule
[edit] Primary conceptual (i.e., user-level) operations
Vistors can:
- register on Facebook.com.
Users can:
- directly add this application to the application list or receive the application invitation from other Facebook users.
- create one or more class schedules.
- add the classes or invite selected users to join the classes in schedule.
- search for your classmates.
- possible other features: file sharing with classmates, courses browsing.
[edit] Why I am interested in this project
I don't like the class schedule in GET system. Google Calendar is good, but I want the scheduler can help me find classmates. Facebook is one of the most popular social network in US. A lot of college students have registered on it. With so many users, I try to make a scheduler application that can share the class schedule with the students in same college network and find the classmates from the same classes.
[edit] Status
Still in progress... I will try to use PHP.
