ajax : enviando formulario

twitter/app/controllers/Api.java

@@ -0,0 +1,40 @@
+package controllers;
+
+import java.util.List;
+
+import flexjson.JSONSerializer;
+
+import models.Tweet;
+import models.User;
+import play.mvc.Controller;
+import play.utils.Utils;
+import responses.ApiResponse;
+
+public class Api extends Controller {
+
+	public static void tweetsNew(String msg){
+		Tweet t = new Tweet(msg, Security.userConnected());
+		t.validateAndSave();
+		ApiResponse resp = new ApiResponse();
+		if(validation.hasErrors()){
+			resp.status = "ERROR";
+			resp.message = Utils.join(validation.errors(), ",");
+		}else{
+			resp.status = "OK";
+			resp.result = t;
+		}
+		JSONSerializer serializer = new JSONSerializer().include("status", "message", "result.msg", "result.date", "result.author.username").exclude("*");
+		renderJSON(serializer.serialize(resp));
+	}
+
+	public static void tweetsAll(){
+		List<Tweet> tweets = Tweet.find("order by date desc").fetch();
+		renderJSON(new JSONSerializer().include("msg", "date", "author.username").exclude("*").serialize(tweets));
+	}
+
+	public static void tweetsFromUser(String username){		
+		List<Tweet> tweets = Tweet.find("select tweet from Tweet tweet where tweet.author.username = ? order by tweet.date desc", username).fetch();
+		renderJSON(new JSONSerializer().include("msg", "date", "author.username").exclude("*").serialize(tweets));
+	}
+
+}

twitter/app/responses/ApiResponse.java

@@ -0,0 +1,8 @@
+package responses;
+
+public class ApiResponse {
+	public String status;
+	public String message;
+	public Object result;
+
+}

twitter/app/views/Timeline/index.html

@@ -8,21 +8,81 @@
 </ul>
 #{/set}
 
-#{ifErrors}
-	<div class="alert-message error">
-	#{errors}
-       <p>${error}</p>
-   #{/errors}
-	</div>
-#{/ifErrors}
 
-#{form @Timeline.create()}
+<div class="alert-message error" data-bind="visible: error() != null">
+	<a class="close" href="#" data-bind="click: clearError">×</a>
+	<p data-bind="text: error"></p>
+</div>
+
+
+
+<form data-bind="submit:createTweet">
 	<div class="clearfix">
-		<textarea class="xxlarge" name="tweet" rows="3"></textarea>
+		<textarea class="xxlarge" name="tweet" rows="3" data-bind="value:newTweet"></textarea>
 	</div>
 	<input type="submit" class="btn primary" value="Tweet">
-#{/form}
+</form>
+
+<div data-bind="template :{name:'renderTweet', foreach:tweets}">
+
+</div>
+
+<script type="text/html" id="renderTweet">
+<div class="tweet">
+    <div class="tweet-author">{{= author}}</div>
+    <div class="tweet-msg">{{= msg}}</div>
+    <div class="tweet-date">{{= date.toLocaleDateString()}}</div>
+</div>
+</script>
 
-#{list items:tweets, as:'tweet'} 
-	#{renderTweet tweet /} 
-#{/list}
+<script>
+	var Tweet = function(msg, date, author){
+		this.msg = msg;
+		this.date = date;
+		this.author = author;
+	}
+
+	var viewModel = {
+		newTweet : ko.observable(''),
+		error : ko.observable(null),
+		tweets : ko.observableArray([])
+	}
+
+	function parseTweet(tweet){
+		return new Tweet(tweet.msg, new Date(tweet.date), tweet.author.username);
+	}
+
+	viewModel.updateTweets = function(){
+		$.get('@{Api.tweetsAll()}', function(data){
+			var tweets = $.map(data, function(item){
+				return parseTweet(item);
+			})
+			viewModel.tweets(tweets);
+		});
+	}
+
+	viewModel.createTweet = function(){
+		var action = #{jsAction @Api.tweetsNew(':msg')/}
+		$.get(action({msg : viewModel.newTweet()}), function(data){
+			if(data.status === 'OK'){
+				viewModel.tweets.unshift(parseTweet(data.result));
+				viewModel.newTweet('');
+				viewModel.clearError();
+			}else{
+				viewModel.error(data.message);
+			}
+		});
+		return false;
+	}
+
+	viewModel.clearError = function(){
+		viewModel.error(null);
+		return false;
+	}
+
+	ko.applyBindings(viewModel);
+
+	$(function(){
+		viewModel.updateTweets();
+	});
+</script>

twitter/app/views/main.html

@@ -6,10 +6,16 @@
         <meta charset="utf-8">
 
         <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
-        <script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
+
+        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+
         <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
         <script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-dropdown.js"></script>
 
+
+        <script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"/></script>
+        <script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
+
         <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
         #{get 'moreStyles' /}
         #{get 'moreScripts' /}

twitter/conf/dependencies.yml

@@ -3,3 +3,4 @@
 require:
     - play
     - play -> secure
+    - net.sf.flexjson -> flexjson 2.1

twitter/conf/routes

@@ -9,6 +9,9 @@ GET     /                                       Timeline.index
 GET     /stats									Timeline.stats
 POST    /create									Timeline.create
 
+GET     /api/tweets/fromUser/{username}              Api.tweetsFromUser
+GET     /api/tweets/all								 Api.tweetsAll
+GET     /api/tweets/new                              Api.tweetsNew
 # Ignore favicon requests
 GET     /favicon.ico                            404