Previous tutorial: Getting first Google app engine app with slim3 framework

At previous tutorial, we have installed Slim3 plugin for Eclipse, create a new project, and done some configuration for testing application on Local App Dev Server. To get familiar with Slim3 framework, Let's try to code a simple application.
  As I mentioned before, at Slim3 framework official page, they have tutorial about create new application like twitter, but it so simple to know more details about how Slim3 is. I want to make it more detail and make that application better.

 Some requirement for GAE twitter Clone application 

  -  User can post their status  called tweet on application .
  -  Users can see their posted tweets  and tweets posted by other.
  -  User can follow another.
  - Comment on tweet or retweet --> I think I should not cover that, because it can not make you know more about Slim3  (you will realize later after moving step by step on my posts)

Well, because our purpose is learn how to use Slim3, so it's not as normal as we dev some application before  such as  system design --> detail design --> coding --> testing. We will make an application from bottom up, learn to create some function, screen, and build it up.

 In this post we will learn how to create a tweet by  creating a simple form, submit it and save some thing into GAE Datastore.

Slim3 is a MVC (model - view - controller ) framework 

Slim3 is a mvc framework for GAE, everyone know that, so Let's start to create a tweet function in that model.
Basic Model - View - Controller model

 Using build.xml to generate Controller in Slim3

Slim3 support generating Controller through build.xml in each project. Just double click on build.xml under project. In outline view (normally at the right side of Eclipse), choose gen-controller (default)

right-click gen-controller task and select Run as > Ant Build(first item). It's will open a new popup and let us automatic generate a new controller and view.

 If you face an exception like this:
BUILD FAILED
/Users/tranchung/Documents/workspace/twitterClone/build.xml:25: java.lang.UnsatisfiedLinkError: Cannot load 32-bit SWT libraries on 64-bit JVM

Total time: 2 seconds
please go to this link to resolve it :  Cannot load 32-bit SWT libraries on 64-bit JVM

 In the ant input dialog, input "/twitter/", and click OK button. The important point is that:
  •  "/twitter/" ends with "/"
  • "/twitter/" is short for "/twitter/index" 
"tutorial.controller.twitter.IndexController", "tutorial.controller.twitter.IndexControllerTest" and "war/twitter/index.jsp" are created by "/twitter/index" path. You can check it by take a look at project source.

- Run your project and check at : http://localhost:8888/twitter/
 Let's take a look at /src/root.controller.twitter/IndexController.java

package root.controller.twitter;

import org.slim3.controller.Controller;
import org.slim3.controller.Navigation;

public class IndexController extends Controller {

    @Override
    public Navigation run() throws Exception {
        return forward("index.jsp");
    }
}
As you can see, when you visit "/twitter/", tutorial.controller.twitter.IndexController#run() is performed. The return value of run() is a destination path. "index.jsp" is equivalent to "war/twitter/index.jsp".

Let's open /war/twitter/index.jsp
 
<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>twitter Index</title>
</head>
<body>
<p>Hello twitter Index !!!</p>
</body>
</html>
you can see that, content will be displayed in View.
Well, let's create a new form and save it into Datastore

Create tweet from and save new tweets into GAE Datastore 

- Open /war/twitter/index.jsp , and create a new form like follow 
 The index.jsp source code now become the follow:

<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>twitter Index</title>
<p>Hello twitter Index !!!</p>
<p>Compose new tweet ....</p>
 <form method="post" action="tweet">
  <textarea name="content"></textarea><br />
  <input type="submit" value="tweet"/>
 </form>
</head>
<body>

</body>
</html>
now, just try to input something and press the Tweet button. You can see the browser direct webpage into : http://localhost:8888/twitter/tweet , and echo 404 NOT FOUND. It means the controller : tweetController.java haven't been created, so Let's create it by Ant build now.
  As I mentioned before, we can generated new Controller in Slim3 by using build.xml. After double click on build.xml under project. In outline view (normally at the right side of Eclipse), choose gen-controller-without-view  (we do not need view because we will redirect it back to Index  latter ) , and in the ant input dialog, input "/twitter/tweet", and click OK button.

"tutorial.controller.twitter.TweetController", "tutorial.controller.twitter.TweetControllerTest" are created. A TweetController transfers to "/twitter/ after it is performed, so you don't need to define JSP
If you want to create a controller without JSP, use gen-controller-without-view task.
Open /src/root.controller.twitter/tweetController.java

package root.controller.twitter;

import org.slim3.controller.Controller;
import org.slim3.controller.Navigation;

public class TweetController extends Controller {
    @Override
    public Navigation run() throws Exception {
        return null;
    }
}


- Reload the browser, you will see 404 NOT FOUND is not occur any more. There is nothing in the webpage because the controller just return null.
- Now, I want to change a bit in TweetController. After user submit the form, we will save data by using TweetController and I want it redirect back into Index.
In the TweetController , I change "return null" statement into "return redirect(basePath)".
package root.controller.twitter;

import org.slim3.controller.Controller;
import org.slim3.controller.Navigation;

public class TweetController extends Controller {
    @Override
    public Navigation run() throws Exception {
        return redirect(basePath);
    }
}
Let's reload the browser again, you will see it redirect into index.jsp . From now, each time user press the tweet button, It will submit into TweetController, and then turn back index.jsp.
 --> In this case, "basePath" is equivalent to "/twitter/"

We've created form View and Controller. Now move to create Model to store the Tweet content.

 Create data Model in Slim3 Framework