一、JAVA Applet 波浪
利用五芒星來畫出波浪，並以number變數控制其波數。
提示：
不需放在CMSimple內，直接執行程式即可，五芒星可以不必旋轉。
參考：
『Java - Wave Applet 範例』、『Java - Draw Star 範例方法』
範例結果如下：
二、CMSimple AJAX 表單輸入
在CMSimple中建立一個form表單包含三個input輸入框，能夠輸入你自己的 班級、姓名、學號 驗證身份是否正確，
若答案正確則在CMSimple中印出身份正確，
若其中一個答案錯誤則印出身份錯誤。
條件：
1. 必須包含AJAX menu選單。
參考：
『CMSimple - my_main_function 範例plugins程式』
提示：
PHP使用if多個條件成立的使用方法如下...
if(a=="字串1" && b=="字串2" && c=="字串3") {
echo "內容1";
} else {
echo "內容2";
}
三、CMSimple AJAX 即時顯示
請參考『Java - Draw Applet Gear 範例方法』將其編譯並產生Class檔案，在CMSimple中建立一個form表單包含四個input輸入框，
能夠輸入 座標x、座標y、節圓半徑rp、齒數n，
再使用Applet來顯示齒輪並能夠藉由以上參數來控制，
最後必須能夠由AJAX即時顯示在CMSimple中。
條件：
1. 必須包含AJAX menu選單。
參考：
『CMSimple - my_main_function 範例plugins程式』、『CMSimple - my_main_function 範例plugins子程式』
四、以Java Applet繪製動畫
請繪製一個寬為100的小正方形，讓小正方形能夠持續繞著寬為500的大正方形行走，
參考：
『Java - Draw Anime Star 範例』
提示：
大正方形可以不用畫出來。
範例結果如下：
參考範例目錄
- Java - Wave Applet 範例
- Java - Draw Star 範例方法
- CMSimple - my_main_function 範例plugins程式
- CMSimple - my_main_function 範例plugins子程式
- Java - Draw Gear 範例方法
- Java - Draw Anime Star 範例
Java - Wave Applet 範例
// 在 Eclipse 執行, 以滑鼠右鍵, Run as Applet
// 在 NetBeans 執行, 則以滑鼠右鍵, 按下 Run File (系統會建立對應的 html)
// 若 Application 與 Applet 同時存在, 在 Eclipse 可以分別以滑鼠右鍵, 選擇執行
// 若 Application 與 Applet 同時存在, 在 NetBeans 按下 Run File, 僅會執行 Application
import java.applet.Applet;
import java.awt.*;
public class HelloWorld extends Applet {
Stroke drawingStroke = new BasicStroke(2);
// static 變數才可以在各方法中共用
String peakNumber = "";
int number;
public void init() {
peakNumber = getParameter("peakNumber");
if(peakNumber != null) {
// 轉成整數使用 Integer.parseInt()
// 轉為浮點數使用 Float.parseFloat()
number = Integer.parseInt(peakNumber);
} else {
// 若 peakNumber 取不到值, 則內定為 5
number = 5;
}
}
public void paint(Graphics g) {
int i;
Graphics2D graph = (Graphics2D)g;
graph.setStroke(drawingStroke);
graph.setPaint(Color.black);
for(i=1;i<=number;i++) {
// 每一行向下增量 20 單位
graph.drawString("Hello World", 10, 10+i*20);
printC(graph,i, 80, 10+i*20);
}
for(i=number-1;i>=1;i--) {
// 必須考慮前半部已經增量 number*20
graph.drawString("Hello World", 10, 10+(number+number-i)*20);
printC(graph,i, 80, 10+(number+number-i)*20);
}
}
public void stop()
{
}
public void printC(Graphics g, int m, int x, int y) {
Graphics2D graph = (Graphics2D)g;
int i;
for(i=0;i<m;i++) {
graph.drawString("!", x+i*10, y);
}
}
}
Java - Draw Star 範例方法
//drawstar(graph, x座標, y座標, 半徑, 旋轉角度);
public void drawstar(Graphics g, int x, int y, int r, int angle){
Graphics2D graph = (Graphics2D)g;
int i,j;
double deg = 3.14159/180.;
double temp1, temp2, temp3, temp4;
double[] ptt_x = new double[10];
double[] ptt_y = new double[10];
double[] pt_x = new double[10];
double[] pt_y = new double[10];
for (i=0;i<7;i++) {
pt_x[i] = x+r*Math.sin(72.*deg*i+angle*deg);
pt_y[i] = y-r*Math.cos(72.*deg*i+angle*deg);
temp1 = Math.cos(54.*deg-72.*deg*i-angle*deg);
temp2 = Math.sin(54.*deg-72.*deg*i-angle*deg);
temp3 = Math.sin(18.*deg);
temp4 = Math.cos(36.*deg);
ptt_x[i] = x+r*temp3*temp1/temp4;
ptt_y[i] = y-r*temp3*temp2/temp4;
}
for (i=0;i<5;i++) {
graph.drawLine((int)pt_x[i], (int)pt_y[i], (int)ptt_x[i], (int)ptt_y[i]);
j=i+1;
graph.drawLine((int)ptt_x[i], (int)ptt_y[i], (int)pt_x[j], (int)pt_y[j]);
}
}
CMSimple - my_main_function 範例plugins程式
<?php
// 檔名:index.php
// 編寫成類別格式的程式樣版 (ready for CMSimple plugin)
// CMSimple呼叫格式「#CMSimple $output.=my_main_function();#」
// 程式的主函式
function my_main_function() {
$myplugin = new Cmyplugin;
return $myplugin->myplugin_main();
}
// 程式類別
class Cmyplugin{
public $common1 = "common1";
public $common2 = "common2";
function myplugin_main() {
$menu=$_GET["menu"];
$printonce=0;
if ($menu) {
switch($menu) {
case "function1":
// could be html form or action scripts
$output .= $this->myplugin_function1();
$output .= $this->myplugin_printmenu();
break;
case "function2":
// could be html form or action scripts
$output .= $this->myplugin_function2();
$output .= $this->myplugin_printmenu();
break;
case "function3":
// AJAX 即時顯示範例
$output .= $this->myplugin_function3();
$output .= $this->myplugin_printmenu();
break;
case "printmenu":
$output .= $this->myplugin_printmenu();
break;
default:
// use function3 as default function
$output .= $this->myplugin_printmenu();
}
} else {
// 未指定 menu 則列出表單
$output .= $this->myplugin_printmenu();
}
return $output;
}
//範例程式1 - 印出文字測試
function myplugin_function1() {
$output = "function 1 and some html ".$this->common1." and ".$this->common2;
$output .= " some more html";
return $output;
}
//範例程式2 - 印出文字測試
function myplugin_function2() {
$output = "function 2 and some html ".$this->common1." and ".$this->common2;
$output .= " some more html";
return $output;
}
//範例程式3 - AJAX 即時顯示結果
function myplugin_function3() {
global $sn, $su;
$output.="
<script src=\"./jscript/prototype.js\" language=\"JavaScript\" type=\"text/javascript\"></script>
<script language=\"JavaScript\" type=\"text/javascript\">
function submitEntryForm(event) {
var updater = new Ajax.Updater({success:'var_list',error:'error_list'}, './plugins/my_main_function/addaction.php', {
parameters: {num1:$('num1').value, num2:$('num2').value, num3:$('num3').value}
});
event.preventDefault();
}
function addObservers(event) {
$('entry').observe('submit', submitEntryForm);
}
Event.observe(window, 'load', addObservers);
</script>
<form id='entry' action='' method='post'>
num1: <input type='text' name='num1' id='num1' value='10' /><br />
num2: <input type='text' name='num2' id='num2' value='20' /><br />
num3: <input type='text' name='num3' id='num3' value='30' /><br />
<input type='submit' id='submit' value='Send' />
</form>
<div id='var_list'></div>
<div id='error_list'></div>
";
return $output;
}
// 以下成員函式, 用來測試 AJAX 表單的使用
function myplugin_printmenu() {
global $sn,$su;
$output.="
<script src=\"./jscript/prototype.js\" language=\"JavaScript\" type=\"text/javascript\"></script>
<script src=\"./jscript/Menu.js\" language=\"JavaScript\" type=\"text/javascript\"></script>
<script language=\"JavaScript\" type=\"text/javascript\">
Menu.init(\"menu2\");
</script>
<style type=\"text/css\">
#menu2,
#menu2 ul { margin: 0; padding: 0; }
#menu2 li { list-style-type: none; }
#menu2 { font: 12px Verdana, Arial; }
#menu2 li,
#menu2 a { float: left; }
#menu2 a { display: block; padding: 6px; text-decoration: none; background-color: #FFF; color: #2362AF; }
#menu2 a:hover,
#menu2 a.menu_open { background-color: #2362AF; color: #FFF; }
#menu2 ul { visibility: hidden; position: absolute; width: 150px; border: 1px solid #CCC; margin-top: 1px; }
#menu2 ul li { width: 150px; }
#menu2 ul a { width: 144px; padding: 3px; }
* html #menu2 ul a { width: 150px; }
#menu2 ul a.submenu { background-image: url(\"./jscript/menu_arrow_right.gif\"); background-repeat: no-repeat; background-position: 138px 6px; }
#menu2 ul a.submenu:hover,
#menu2 ul a.submenu.menu_open { background-image: url(\"./jscript/menu_arrow_right_mo.gif\"); }
#menu2 ul ul { margin-top: -1px; }
</style>
<ul id=\"menu2\">
<li><a href=\"".$sn."?".$su."&menu=function1\">Data 1</a></li>
<li><a href=\"".$sn."?".$su."&menu=function2\">Data 2</a>
<ul>
<li><a href=\"".$sn."?".$su."&menu=function2\">Data 2-1</a></li>
<li><a href=\"".$sn."?".$su."&menu=function2\">Data 2-2</a>
<ul>
<li><a href=\"".$sn."?".$su."&menu=function2\">Data 2-2-1</a></li>
<li><a href=\"".$sn."?".$su."&menu=function2\">Data 2-2-2</a></li>
</ul>
</li>
<li><a href=\"".$sn."?".$su."&menu=function2\">Data 2-3</a>
</ul>
</li>
<li><a href=\"".$sn."?".$su."&menu=function3\">AJAX即時顯示</a></li>
</ul>
";
return $output;
}
}
CMSimple - my_main_function 範例plugins子程式
<?php //檔名:addaction.php $total = $_POST['num1'] + $_POST['num2'] + $_POST['num3']; echo $_POST['num1']."+".$_POST['num2']."+".$_POST['num3']."=".$total; ?>
Java - Draw Gear 範例方法
//drawgear(graph, x座標, y座標, 節圓半徑, 齒數);
public void drawgear(Graphics g, int midx, int midy, int rp, int n){
Graphics2D graph = (Graphics2D)g;
int imax=15;
int i=0;
int j=0;
double a=0, d=0, ra=0, rb=0, rd=0, dr=0, num=0, sigma=0,
ang=0, ang2=0, lxd=0, lyd=0, r=0, theta=0, alpha=0,
xpt=0, ypt=0, xd=0, yd=0, lfx=0, lfy=0, rfx=0, rfy=0;
double pi = Math.acos(-1);
double deg = pi/180.;
graph.drawLine(midx, midy, midx, midy-rp);
a = 2*rp/n;
d = 2.5*rp/n;
ra = rp+a;
rb = rp*Math.cos(20*deg);
rd = rp-d;
dr = (ra-rb)/imax;
num = n;
sigma = 3.14159/(2*num)+Math.tan(20*deg)-20*deg;
for(j=0;j<n;j++) {
ang = -2.*j*pi/num+sigma;
ang2 = 2.*j*pi/num+sigma;
lxd = midx+rd*Math.sin(ang2-2.*3.14159/num);
lyd = midy-rd*Math.cos(ang2-2.*3.14159/num);
xd = rd*Math.sin(-ang);
yd = rd*Math.cos(-ang);
for(i=0;i<=imax;i++) {
r = rb+i*dr;
theta = Math.sqrt((r*r)/(rb*rb)-1.);
alpha = theta - Math.atan(theta);
xpt = r*Math.sin(alpha-ang);
ypt = r*Math.cos(alpha-ang);
if(i==0) {
graph.drawLine((int)(midx+xpt), (int)(midy-ypt), (int)(midx+xd), (int)(midy-yd));
}
graph.drawLine((int)(midx+xpt), (int)(midy-ypt), (int)(midx+xpt), (int)(midy-ypt));
if(i==imax) {
lfx = midx+xpt;
lfy = midy-ypt;
}
}
/*the line from last end of dedendum point to the recent
end of dedendum point*/
graph.drawLine((int)lxd, (int)lyd, (int)(midx + xd), (int)(midy - yd));
for(i=0;i<=imax;i++) {
r = rb+i*dr;
theta = Math.sqrt((r*r)/(rb*rb)-1.);
alpha = theta-Math.atan(theta);
xpt = r*Math.sin(ang2-alpha);
ypt = r*Math.cos(ang2-alpha);
xd = rd*Math.sin(ang2);
yd = rd*Math.cos(ang2);
if(i==0) {
graph.drawLine((int)(midx+xpt), (int)(midy-ypt), (int)(midx+xd), (int)(midy-yd));
}
graph.drawLine((int)(midx+xpt), (int)(midy-ypt), (int)(midx+xpt), (int)(midy-ypt));
if(i==imax) {
rfx = midx+xpt;
rfy = midy-ypt;
}
}
graph.drawLine((int)lfx, (int)lfy, (int)rfx, (int)rfy);
}
}
Java - Draw Anime Star 範例
import java.applet.Applet;
import java.awt.*;
public class MovingHelloWorld extends Applet implements Runnable{
Stroke drawingStroke = new BasicStroke(2);
String peakNumber = "";
int number;
int frame, delay = 13;
Thread animator;
boolean frozen = false;
Dimension offDimension;
Image offImage;
Graphics offGraphics;
double deg=3.14159/180.;
int pos_x=0;
int vel_x=1;
int pos_y=0;
int vel_y=1;
int bound_x=200;
int bound_y=200;
public void init() {
setBackground(Color.white);
peakNumber = getParameter("peakNumber");
if(peakNumber != null) {
number = Integer.parseInt(peakNumber);
} else {
number = 3;
}
}
public void start() {
if (frozen) {
} else {
if (animator == null) {
animator = new Thread(this);
}
animator.start();
}
}
// 利用繪圖物件變數 g 執行每一影格的繪圖
public void paintFrame(Graphics g) {
int i;
// 將 g 轉換為 Graphics2D 物件格式, 然後將位址指給 graph 繪圖物件
// 實際執行繪圖的物件為 graph
Graphics2D graph = (Graphics2D)g;
// 有關繪筆種類 (選擇筆觸格式)
Stroke stroke =
//new BasicStroke (15.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);
new BasicStroke (2.0f, BasicStroke.CAP_SQUARE, BasicStroke.JOIN_MITER);
//graph.setStroke(drawingStroke);
graph.setStroke(stroke);
graph.setPaint(Color.black);
if (pos_x < 0) { // 列印位置碰到左邊界時, 位置歸零, 並且改變速度方向
pos_x = 0; // 將 x 列印位置歸零
vel_x = -vel_x; // 改變速度方向.
} else if (pos_x > bound_x) { // 列印位置碰到右邊界時, 位置設為右邊頂值, 並且改變速度方向
pos_x = bound_x; // 將 x 列印位置停在右邊邊界
vel_x = -vel_x; // 改變速度方向
}
// x 列印位置, 以 vel_x 的速度進行增量
pos_x += vel_x;
if (pos_y < 0) { // 列印位置碰到左邊界時, 位置歸零, 並且改變速度方向
pos_y = 0; // 將 y 列印位置歸零
vel_y = -vel_y; // 改變速度方向.
} else if (pos_y > bound_y) { // 列印位置碰到右邊界時, 位置設為右邊頂值, 並且改變速度方向
pos_y = bound_y; // 將 y 列印位置停在右邊邊界
vel_y = -vel_y; // 改變速度方向
}
// y 列印位置, 以 vel_y 的速度進行增量
pos_y += vel_y;
// 畫出旋轉的 drawstar
drawstar(graph, 100+pos_x, 100+pos_y, 30, frame);
}
public void stop() {
animator = null;
offImage = null;
offGraphics = null;
}
public void run() {
long startTime = System.currentTimeMillis();
while (Thread.currentThread() == animator) {
frame++;
repaint();
try {
startTime +=delay;
Thread.sleep(Math.max(0, startTime-System.currentTimeMillis()));
} catch (InterruptedException e) {
break;
}
}
}
public boolean mouseDown(Event e, int x, int y) {
if (frozen) {
frozen = false; start();
} else {
frozen = true; stop();
}
return true;
}
// 更新繪圖畫面
public void update( Graphics g ) {
Dimension d = getSize();
offImage = createImage(d.width, d.height);
offGraphics = offImage.getGraphics();
offGraphics.setColor(getBackground());
offGraphics.fillRect(0, 0, d.width, d.height);
offGraphics.setColor(Color.black);
paintFrame(offGraphics);
g.drawImage(offImage, 0, 0, null);
}
//drawstar(graph, x座標, y座標, 半徑, 旋轉角度);
public void drawstar(Graphics g, int x, int y, int r, int angle){
Graphics2D graph = (Graphics2D)g;
int i,j;
double deg = 3.14159/180.;
double temp1, temp2, temp3, temp4;
double[] ptt_x = new double[10];
double[] ptt_y = new double[10];
double[] pt_x = new double[10];
double[] pt_y = new double[10];
for (i=0;i<7;i++) {
pt_x[i] = x+r*Math.sin(72.*deg*i+angle*deg);
pt_y[i] = y-r*Math.cos(72.*deg*i+angle*deg);
temp1 = Math.cos(54.*deg-72.*deg*i-angle*deg);
temp2 = Math.sin(54.*deg-72.*deg*i-angle*deg);
temp3 = Math.sin(18.*deg);
temp4 = Math.cos(36.*deg);
ptt_x[i] = x+r*temp3*temp1/temp4;
ptt_y[i] = y-r*temp3*temp2/temp4;
}
for (i=0;i<5;i++) {
graph.drawLine((int)pt_x[i], (int)pt_y[i], (int)ptt_x[i], (int)ptt_y[i]);
j=i+1;
graph.drawLine((int)ptt_x[i], (int)ptt_y[i], (int)pt_x[j], (int)pt_y[j]);
}
}
}
