บันทึกเล็กๆของผ้มมม...

Tuesday, September 4, 2012

สร้าง executable jar

เมื่อเขียนโค้ดจาวาเสร็จแล้ว อยากจะเผยแพร่ให้คนอื่นใช้ จะทำอย่างไรดี

สำหรับคนที่ใช้ Eclipse จะสามารถคลิกขวาที่โปรเจ็ค เลือก Export แล้วสร้าง executable jar ได้

แต่บางครั้งก็มีปัญหาครับ เพราะหากโค้ดของเรามีการใช้ไฟล์ jar จากภายนอกเพิ่มเติม บางที Eclipse ก็ไม่สามารถทำได้

ลองมาทำกันแบบ command line ดีกว่า

สมมติว่าเราติดตั้ง jdk ในเครื่องแล้ว กำหนด path ให้ถูกต้อง

1 เปิด command prompt
2 ไปที่โฟลเดอร์ที่เก็บผลลัพธ์จากการคอมไพล์ (ที่มีไฟล์ .class)
3 สร้างไฟล์ manifest.txt แนะนำให้ใช้ notepad ธรรมดา
4 เติมเนื้อหาดังเช่น

Main-Class: QRReader
Class-Path: dsj.jar JNative.jar

ความหมาย
Main-Class:(เคาะ)ชื่อของคลาสหลัก
Class-Path:(เคาะ)ชื่อของ external jar (ถ้ามี) ต้องเรียงลำดับตามการอ้างถึงในคลาสหลัก เช่นตามตัวอย่างคลาสใน dsj.jar จะถูกเรียกใช้ก่อน JNative.jar
(ขึ้นบรรทัดใหม่)

ต้องระวังให้ดีว่า บรรทัดสุดท้ายของไฟล์ manifest นี้ต้องเคาะให้เป็นบรรทัดว่างเสมอ

5 ใช้คำสั่ง jar -cfm test.jar manifest.txt *.class
6 จะได้ไฟล์ test.jar มา ซึ่งสามารถย้ายไปไว้ที่เดียวกับไฟล์อื่นๆที่จำเป็น เช่น ตามตัวอย่างคือ dsj.jar และ JNative.jar รวมถึงไฟล์อื่นๆอีกเช่นไฟล์ dll เป็นต้น
7 ลองใช้คำสั่ง java -jar test.jar หรือ javaw -jar test.jar ทดสอบรัน หรือสำหรับบางเครื่องสามารถดับเบิลคลิกไฟล์ jar ได้เลย
8 ถ้ามีปัญหาดับเบิลคลิกไฟล์ jar ไม่ได้ ก็เขียน batch file (นามสกุล .bat เช่น test.bat) แล้วแปะโค้ด java -jar test.jar หรือ javaw -jar test.jar ลงไป
9 ถ้าอยากใช้ java executable wrapper เพื่อสร้างไฟล์ exe ที่ไปเรียก jar ไฟล์อีกที แนะนำลองใช้ Lanuch4j ครับ สุดยอดมากๆ

Thursday, May 3, 2012

jQuery UI Autocomplete widget

เห็น widget อันนี้แล้วต้องการใช้ครับ เอาไปประยุกต์ในการพัฒนาระบบค้นหาข้อมูลได้

ใช้โค้ดหลักๆเหมือนตัวอย่างที่แล้วนะครับ แต่มาเปลี่ยนฟอร์มกับสคริปดังนี้

ฝั่ง html

    <div>
    <p>    Search <input type="text" id="search" /> </p>
    </div>

ฝั่ง javascript

$(function() {
   var tags = ["love","like","bike"];
   $("#search").autocomplete({
       source: tags
   });
});

แค่นี้เองครับ แต่ที่ต้องทำต่อคือการไปดึงข้อมูลมาจากฐานข้อมูลแทน

เอกสารอ้างอิง

http://jqueryui.com/demos/autocomplete/

ปล. เท่าที่ทราบ ระบบของ google ไม่ได้เป็นแบบนี้ครับ แต่ใช้ ajax ทำการ sync ข้อมูลกับฐานข้อมูลตลอด

ลองเล่น jQuery UI

ข้อมูลจาก jqueryui.com ครับ

jQuery UI (UI = User Interface) ก็คือ widget หรือ interface ที่ออกแบบมาให้ใช้กับเว็บ ทำให้เว็บมีปฏิสัมพันธ์กับผู้ใช้ได้สะดวกและสวยงามขึ้น ซึ่ง jQuery UI เองก็ถูกพัฒนาโดยใช้ jQuery ซึ่งเป็น javascript library อย่างหนึ่ง (jquery.com)

ลองมาดูตัวอย่างการใช้งานครับ ในที่นี้เราจะลองใช้ datepicker widget หรือ calendar widget เพื่อป้อนข้อมูลวันที่ ดังนี้ครับ

การติดตั้งและขั้นตอนการใช้งาน ดูได้จาก http://jqueryui.com/docs/Getting_Started โดยสรุปสั้นๆว่า

ไปดาวน์โหลด jQuery UI มาก่อน สามารถเลือก theme หรือเลือกเฉพาะ widget ก็ได้ ถ้าอยากได้ง่ายๆไม่ต้องทำอะไรมากก็ดาวน์โหลดตัวปกติได้ที่หน้าหลัก เช่น http://jqueryui.com/download/jquery-ui-1.8.20.custom.zip
แตกไฟล์ออกมา จะมีไดเรกทอรี js (jQuery), css, development-bundle (เอกสาร, ตัวอย่าง, UI) และไฟล์ index.html
ใช้ text editor เปิดไฟล์ index.html จะเห็นว่ามี 3 บรรทัดคือ

< link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
< script type="text/javascript" src="js/jquery-1.7.1.min.js" > < /script >
< script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js" > < /script >

จากนั้นให้สร้างไฟล์ html ของเราที่จะใช้งาน เช่น testUI.html แล้วนำโค้ดข้างต้นมาเพิ่ม พร้อมกับเติม textbox ที่ต้องการป้อนค่าวันที่เข้าไป เช่น

<html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
    <div>
    <p>    Date <input type="text" name="date" id="date" /> </p> </div>
</body>
</html>

ต่อมาให้สร้างไฟล์ javascript เช่น myScript.js ให้สอดคล้องกับไฟล์ html ที่อ้างถึง แล้วเพิ่มรายละเอียด ได้แก่

$(function(){
    $('#date').datepicker();
});

บันทึกไฟล์ทั้งหมด แล้วลองเปิดไฟล์ html ก็จะได้ผลลัพธ์ตามต้องการครับ

อย่างไรก็ตาม วันที่ที่ป้อนจะเป็น เดือน/วัน/ปี โดยอัตโนมัติ เราสามารถเปลี่ยนรูปแบบให้เป็น วัน/เดือน/ปี ได้โดยกำหนด

$(function(){
    $('#date').datepicker({ dateFormat: "dd/mm/yy" });
});

เอกสารอ้างอิง

http://jqueryui.com/docs/Getting_Started
http://jqueryui.com/demos/datepicker/
http://jquery.com

Wednesday, May 2, 2012

การใช้แท็ก div + style เพื่อกำหนด layout

ปรับเปลี่ยนและอ้างอิงจาก http://www.w3schools.com/html/html_layout.asp ครับ

Content

HTML โค้ดครับ

<html>
<body>

<div id="container" style="width:100%">

<div id="header" style="background-color:#98BF21;">
<h1 style="margin-bottom:0;text-align:center">Title</h1></div>

<div id="menu" style="background-color:#AAAAAA;height:200px;width:20%;float:left;">
<b>Menu</b><br />
First<br />
Second<br />
Third</div>

<div id="content" style="background-color:#CCCCCC;height:200px;width:80%;float:left;">
Content</div>

<div id="footer" style="background-color:#98BF21;clear:both;text-align:center;">
Copyleft © 2012</div>

</div>

</body>
</html>

HTML quick reference

ข้อมูลจาก http://www.w3schools.com/html/html_quick.asp ไว้สำหรับอ้างอิงครับ

HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body> </html>

Heading Elements

<h1>Largest Heading</h1> <h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list

Ordered list

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
</tr>
<tr>
    <td>sometext</td>
    <td>sometext</td>
</tr>
</table>

Iframe

Frames

Forms

<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities

Other Elements

<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>