Java Web - Canvas Derleyicisi
- Sevdanur GENC
- Jun 23, 2013
- 2 min read
Java web uygulamasi uzerinde basit bir turkce icerikli canvas derleyicisi hazirlayalim. Bunun icin jsp ile iletisimde kalabilecek bir java class'ina ihtiyacimiz bulunmaktadir.
Yapimizi yandaki gormus oldugunuz gorselde ki gibi hazirlayabilirsiniz. Burada kullanicidan almis oldugunuz komut icerisindeki koordinatlari ayristirarak her birini canvas icin gerekli olan javaScript icerisindeki fonksiyonlara sirasiyla gondermek amactir.
Ornek olarak yapilmis bu basit uygulama, istege gore daha ileri bir seviyede gelistirilebilir.
Kodlari inceleyecek olursak;
Convertor.Java Kaynak Kodlari;
package com; import java.util.*; public class convertor extends TreeMap { private String name; private String[] dizi; private String kodAl, metinAl, verileriAl, deger0, deger1, deger2, deger3,renk; private int ilkParantezeKadarAl, sonParantezdeBitir; public convertor() { } public void setName(String formName) { if (formName != "") { name = formName; } } public String getDeger0() { return this.deger0; } public String getDeger1() { return this.deger1; } public String getDeger2() { return this.deger2; } public String getDeger3() { return this.deger3; } public String getRenk() { return this.renk; } public String getName() { metinAl = this.name; ilkParantezeKadarAl = metinAl.indexOf('('); sonParantezdeBitir = metinAl.indexOf(')'); kodAl = metinAl.substring(0, ilkParantezeKadarAl); verileriAl = metinAl.substring(ilkParantezeKadarAl + 1, sonParantezdeBitir); dizi = verileriAl.split(","); deger0 = dizi<0>
; deger1 = dizi<1>
; deger2 = dizi<2>
; deger3 = dizi<3>
; renk = dizi<4>
;
if (renk.equals("Kirmizi")) {
renk = "red";
}
if (renk.equals("Mavi")) {
renk = "blue";
}
if (renk.equals("Siyah")) {
renk = "black";
}
if (renk.equals("Yesil")) {
renk = "green";
}
if (renk.equals("Mor")) {
renk = "purple";
}
if (renk.equals("Gri")) {
renk = "gray";
}
if (renk.equals("Pembe")) {
renk = "fuchsia";
}
if (renk.equals("Turkuaz")) {
renk = "aqua";
}
if (renk.equals("Turuncu")) {
renk = "orange";
}
if (renk.equals("Sari")) {
renk = "yellow";
}
name = deger0 + " " + deger1 + " " + deger2 + " " + deger3 + " " + renk;
return name;
}
}
Index.Jsp Kaynak Kodlari;
<%@ page isThreadSafe="false" import="java.util.*, com.convertor" %>
<jsp:useBean id="myconvertor" scope="session" />
<jsp:setProperty name="myconvertor" property="name" param="name" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body onload="myFunction(verial1.value ,verial2.value, verial3.value,verial4.value,verial5.value)" >
<form>
<table border="1" align="center" >
<tr >
<td>
<br>
<p><b>DaireCiz Komutu</b>
<u><p>Kullanim Sekli</u>
</p>
<p>Oncelikle dairemizin nereden baslayacagini belirtebilmemiz icin X ve Y
koordinatlarini belirliyoruz. Ardindan dairemizin yaricapini belirledikten
sonra cizmeye hangi koordinattan itibaren baslayacagini belirtiyor ve komudumuza yaziyoruz.
Dairemize renk verebilmek icin, besinci parametreye renginizi yazabilirsiniz.
</p>
<p>DaireCiz(100,100,100,100,Kirmizi);
</p>
<textarea name="name" cols="40" rows="3">DaireCiz(100,100,100,100,Kirmizi);</textarea><br>
<br>
<input type="submit" value="Hadi Kodlayalim !..." >
</form>
<% if (request.getParameter("name") != null) {%>
<br><Br>Vermis oldugunuz komutlar ;
<%@ page import="java.util.*,com.convertor" %>
<br>
<jsp:getProperty name="myconvertor" property="name" />
<% }%>
<input type="hidden" name="verial1" value="<jsp:getProperty name="myconvertor" property="deger0"/>" id="verial1">
<input type="hidden" name="verial2" value="<jsp:getProperty name="myconvertor" property="deger1"/>" id="verial2">
<input type="hidden" name="verial3" value="<jsp:getProperty name="myconvertor" property="deger2"/>" id="verial3">
<input type="hidden" name="verial4" value="<jsp:getProperty name="myconvertor" property="deger3"/>" id="verial4">
<input type="hidden" name="verial5" value="<jsp:getProperty name="myconvertor" property="renk"/>" id="verial5">
</td>
<td>
<canvas width="700px" height="400px" id="dairecizdir" ></canvas>
<script>
function myFunction(deger1,deger2,deger3,deger4,renk)
{
canvas = document.getElementById("dairecizdir") ;
context = canvas.getContext("2d");
context.beginPath();
context.arc(deger1,deger2,deger3,deger4,6*Math.PI);
context.strokeStyle = renk;
context.stroke();
return;
}
</script>
</td>
</tr>
</table>
</section>
</div>
</div>
</body>
</html>
Ekran Goruntusu;
Keyifli Calismalar Dilerim.
Comments