Comet Drawing First Test

I am using CometD Java Library and HTML 5 Canvas to implement real time drawing application in my final year project. This is a very first draft version that created by me. I have tested by opening four browsers, and writing in one browser, and it can be seen that all 3 other browsers will draw itself. However, here should have other problems that I am going to fix it up. The source code is not available for this moment.

Here have a look for.

Variable access using JavaScript OO

Based on Java coding:

public Class Dog {
    int a = 1;;
    int b = this.a;
    public int c() {
        return a+b;
    }
}

Corresponding with JavaScript, we have:

function Dog() {
    d = new Object();
    d.a = 1;
    d.b = d.a;
    d.c = function() {
        return this.a+this.b;
    }
    return d;
}

Remember in JavaScript, if variable b want to get variable a, should use d.a but not this.a, however inside method, want to get variable a, should use this.a instead of d.a.

This is a kind of JavaScript Object-oriented reliazation method.

Simple Web Form Showcase

As I am in the journey of learning web page design, now I am in the stage of designing web form layout. There is a long run of research on the web form layout such as the place where the label to be put, the font size or font weight of the text should be put, and etc.

By referring to the Luke W Research and UxMatters Blog, I have found some useful information that can help me to design a web form.

I have created a sample web form layout and I am now going to show the design for the reader. But please be noted that what I show here is not the final decision and will be changed later. Try give me any comments after you have tested it.

Screenshots

First, let us see the screenshots of the web form layout:

Sample Web Form Layout from fyhao.com 

HTML / CSS

Second, let us see the HTML / CSS coding that make the above web form layout real life.

HTML

<!– form –>
            <div class="form">
                <h2>Sample Form</h2>
                <p>
                    <label>Name: </label><span class="required">(Required)</span>
                    <br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here.  </span>
                    <input class="text" type="text" value="Default" />
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Name: </label><span class="required">(Required)</span>
                    <br /><span class="error">test </span>
                    <textarea class="text">Default</textarea>
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Name: </label><span class="required">(Required)</span>
                    <br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here.  </span>
                    <input class="text" type="text" value="Default" />
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Hobby: </label><span class="required">(Required)</span>
                    <br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here.  </span>
                    <span class="group">
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                    </span>
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Like: </label><span class="required"></span>
                    <span class="error"></span>
                    <span class="group">
                        <span class="pair"><input type="checkbox" /> One </span>
                        <span class="pair"><input type="checkbox" /> One </span>
                        <span class="pair"><input type="checkbox" /> One DDSFSF </span>
                        <span class="pair"><input type="checkbox" /> One  sfsdfsfsf</span>
                        <span class="pair"><input type="checkbox" /> One </span>
                        <span class="pair"><input type="checkbox" /> One </span>
                    </span>
                    <br />
                    <div class="fieldinfo">Just choose what you like</div>
                </p>
                <p>
                    <input class="button" type="button" value="Submit" />
                </p>
            </div>
            <!– form –>

 

CSS

/* form */
.form {border:#CCC solid 1px;padding:0.5em;}
.form h2 {text-align:center;font-size:1.3em;}
.form p {margin:0.8em auto 0.8em auto;clear:both;}
.form label {font-weight:bold;}
.form .required {color:#666;font-weight:bold;}
.form .fieldinfo {color:#666;font-size:0.85em;clear:left;margin-top:1em;}
.form .error {color:red;font-size:0.8em;float:right;width:20em;margin:1em auto auto auto;text-align:justify;}
.form .text {margin:1em 1em auto auto;width:20em;}
.form .button {width:auto;}
.form .group {margin-bottom:2em;width:20em;display:block;margin-top:0.5em;}
.form .group .pair {display:block;float:left;}

Hello World to Direct Web Remoting

This is a simple article that how to hello world to DWR (Direct Web Remoting).

First, go http://directwebremoting.org/dwr/download.html download dwr.jar, for me I download 2.0.6 version in order it can be supported in Google Appengine. Put dwr.jar in WEB-INF/lib

Second, download commons-logging-1.1.1.jar, put this jar in WEB-INF/lib also.

Third, modify web.xml to add this content of

    <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>

Fourth, create dwr.xml and with the content of

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "
http://getahead.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="DWRStuff">
      <param name="class" value="com.fyhao.secs.DWRStuff"/>
    </create>
  </allow>
</dwr>

Then you have to create DWRStuff.java file with the content of

package com.fyhao.secs;

public class DWRStuff {

    public String shownum(int a) {
        return "" + (a * 3);
    }
}

Create a JSP file, called ajax.jsp with the content of

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src=’dwr/interface/DWRStuff.js’></script>
<script src=’dwr/engine.js’></script>
<script type="text/javascript">
function update() {
    DWRStuff.shownum(5, function(data) {
                                 alert(data);
                                 });
}
</script>
</head>

<body>
<div id="num"></div>
<script>update();
</script>
</body>
</html>

Remember the DWRStuff.js shown in the script source there.

Now, you can try to see if it is success.

Appengine JPA persist data problem

There is sometime coding JPA persist data problem may occured.

For example, I have a code that is about:

public class MemberBean {

    public void registerMember(Members member) {
        EntityManager em = EMF.get().createEntityManager();
        try {
            em.persist(member);
            //em.refresh(member);
        } finally {
            em.close();
        }
    }

As you can see that, if you run this code, sometimes you will got:

Problem accessing /fyhaosecs. Reason:

    Illegal argument
Caused by:
javax.persistence.PersistenceException: Illegal argument
	at org.datanucleus.jpa.NucleusJPAHelper.getJPAExceptionForJDOException(NucleusJPAHelper.java:214)
	at org.datanucleus.jpa.EntityManagerImpl.close(EntityManagerImpl.java:157)
	at org.datanucleus.store.appengine.jpa.DatastoreEntityManager.close(DatastoreEntityManager.java:54)
	at com.fyhao.secs.MemberBean.registerMember(MemberBean.java:18)
	at com.fyhao.secs.FyhaosecsServlet.doGet(FyhaosecsServlet.java:24)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:693)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:806)

Solution:

The solution is: just add em.refresh(member); after you persist.

You can also refer to this link: http://www.datanucleus.org/products/accessplatform_1_1/jpa/em.html