fyhao stuffs
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.
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.
Now I am getting involved in technical research, from wherever the points
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.
First, let us see the screenshots of the web form layout:
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;}
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.
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
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
As I now try to research some web design blog and article, to learn something about web design. What I learnt I will put in this blog content.
The research from “How To Size Text in CSS” tells us that, not every browser supports pixel in text size, however we can use em to specify the text size. It had gone through six iterations, such as “text size in pixels”, “text size in ems”, “body sized as percentage”, “setting line height in pixels”, “setting line height in ems” and “the Safari monospace problem”. By doing this, we can get something like this:
<style type="text/css">
body {
font-size:100%; /* retain all font sizes first */
line-height:1.125em; /* 1.125 x 16 = 18px */
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
Here we have Complex Example (A List Apart, n.d.) that showed us the way in sizing text. Refer to its CSS file, we can see that font-size, line-height, margin, both of them are using em to resize. We can refer to this in doing typography.
I have found another articles Line Spacing (Typographyforlawyers, 2008) tells us the optimal line spacing is usually between 125% and 140% of the font size. It is meant that for 12 px font, the font size must be somewhere between 15px to 17px.
I recently found that “Type is the backbone of good web design” (TheDesignCubicle, 2009), it gives web designer some hints on designing the typography. I have summarized the important point that is found from there.
.bodytext p {
font-size:1em; /* 1em=16px */
line-height: 1.5em; /*1.5em of a 1em (or 16px font) = 24px
}
What he recommended is the line height we can just set to 1.5em, however, I have learnt this technique before, but here is the good explanation why we should put this. 1.5 em is the good and readable line height for body copy, it said.
It said that we should introduce one px letter spacing for all caps and small caps because it bring a long nice balance of the web.
.bodytext p {
font-size:1em; /* 1em=16px */
letter-spacing: 1px;
}
“The Elements of Typographic Style Applied to the Web” (Webtypography.net, n.d.) tells us the comportable measure for the text, for single column that is 45-75 characters for one line, 40-50 characters for multiple columns. The CSS we can put is something like this:
DIV#col1 {
width:400px }
DIV#col2 {
width:50% }
DIV#col3 {
width:33em }But it tells us no matter how reader increases the text size, the width of the box that set in em will always introduce 66 characters per line. Therefore it is recommended we set em in width of the box.
Other than that, it also told us hierarchy and contrast is important in the web page. We should give readers to digest information in chunks, to allow them to retain more information and stay longer on our site.
On Web Typography (Jason, S. M., 2009) told us that contrast is important, even the font face we use. We can try to write down our general description of the message and find one suitable font face that can give qualities to that message. It is recommended using Sans and Serif to give cohesive look. However, there are also other typefaces pairing for example Perpetua and Gill Sans or Meta Sans and Meta Serif. Finding two divergence typefaces can create new meaning or an interesting juxtaposition, as long as the contrast is strong.
960 Grid System used by TheDesignCubide.com where it employs 960px for the width of the web page. It is a good system that enhance good layout. Looking into, we can find Custom CSS generator, HTML Layout generator inside. There also have some good examples on how to set 12 col and 16 col in grid system. Better we get reference inside.
1KB CSS Grid System is another recommendation from me that, we can choose number of columns, column width and gutter width, then we can download the resulted CSS files without tricky code. Good Recommendation when we need structuring a website.
Other than this, Mike Smith had written good posts “20 Do’s and Don’ts of Effective Web Typography“, something had repeated as above, that meant it is agreed by most of the professional web designers. In summary:
Other than typography, another “20 Do’s and Don’ts of Effective Web Design” by Mike Smith, we can also reference to there.
ColourLovers contains generated palettes, patterns and colors for web designer to use.
Lastly, this blog article is not still finalized and maybe refined later.
Thanks you for reading this blog.
I am pursuing B.SC. In Computer Science, Coventry University, currently is conducting a final year project and would like to gather information on my proposed system which named as Operational Transformation For Cloud-based Social Enterprise Collaboration Software.
What you can do is help me fill in the questionnaire at the link below. Thanks.
fyhao.com wishes all the people ‘Happy Chinese New Year’ no matter what races, religions you are.
Wish the world become peace and no war.
Welcome to http://www.fyhao.com and http://bbs.qxinnet.com (my forum) to celebrate Chinese New Year. You are welcome.