วันจันทร์ที่ 4 ตุลาคม พ.ศ. 2553

ขั้นตอนในการสร้าง Report ด้วย iReport

สำหรับคนที่สนใจการสร้าง Report ด้วย iReport มีขั้นตอนในการเตียมการดังนี้

1. เนื่องจาก iReport เป็นเครื่องมือออกแบบ JasperReport ซึ่งเป็น engine หลักของ Report และถูกสร้างขึ้นจากภาษา Java ครับ ฉนั้น ในเครื่องคอมพิวเตอร์ของผู้ใช้จะต้องมี JRE ติดตั้งอยู่ แต่ผมขอแนะนำให้ติดตั้งด้วย JDK ไปเลยดีกว่าครับ เราสามารถดาวน์โหลด JDK ได้จาก http://java.sun.com/ จากนั้นก็ทำการติดตั้ง JDK ลงในเครื่องคอมพิวเตอร์ของเราครับ

2. ดาวน์โหลด iReport จาก http://jasperforge.org/ และทำการติดตั้ง iReport ลงในเครื่องคอมพิวเตอร์

3. เตรียมฐานข้อมูล ซึ่ง iReport รองรับฐานข้อมูลได้หลายชนิด เท่าที่ผู้เขียนรู้จักกับฐานข้อมูล เช่น ORACLE ,MSSQL ,MySQL ฯลฯ iReport ก็สามารถรองรับได้หมดครับ สำหรับผู้ที่ต้องการฝึกใช้แบบอย่างรวดเร็วก็อาจใช้ฐานข้อมูลที่หาได้ง่ายๆใน เครื่องเช่น Access เป็นต้น จากนั้นก็สร้างฐานข้อมูลและตารางข้อมูลสำหรับใช้สร้างรายงาน

4. จากนี้เราก็จะสามารถใช้ iReport ในการสร้าง Report ได้แล้วครับ ซึ่งขั้นตอนหลักในการออกแบบรายงานที่ต้องทำก็คือ


* การตั้งค่า iReport เช่นเส้นทางในการบันทึกและcompile รายงาน

* การสร้าง Connection/Datasource เพื่อติดต่อกับฐานข้อมูล

* การสร้าง Query เพื่อดึงฟิลด์ข้อมูลมาใช้ในรายงาน

* การออกแบบรายงาน เช่น การจัดวางออบเจ็ค การกำหนดฟอนต์ เป็นต้น

* การบันทึกและการแสดงผลรายงาน

วันอังคารที่ 24 สิงหาคม พ.ศ. 2553

About BIRT Reports

A BIRT report is a structured document that displays data from an externa information system, such as a database or application. Data in the report is organized and formatted so that it is meaningful and useful to the person who reads the report. A BIRT report is not a document that you type, like an essay or research paper, although you could use BIRT Report Designer to create such documents.

Using BIRT Report Designer, you can create operational reports, such as a bill of materials, a purchase order, or an invoice. You can also create reports that provide real-time information about business performance, such as the number of calls handled by your customer service organization, the number of problems handled, categorized by levels of complexity, and the number of repeat calls made by the same customer. You can use BIRT to create clientfacing reports, such as account statements and transaction details. Any time that you need to gather, analyze, summarize, and present data from an information system, a report is the solution.



How to installing BIRT

These are the prerequisites to create a web project including Seam and BIRT capabilities

◦Eclipse Platform 3.3.1
◦Data Tools Platform (DTP) 1.5.1
◦Eclipse Modeling Framework (EMF) 2.3.1
◦Graphical Editing Framework (GEF) 3.3.1
◦Web Tools Platform (WTP) 2.0.1
◦Java Development Kit (JDK) 1.5
On BIRT Downloads for build 2.2.1, perform one of the following tasks:

■ If you are using Windows, choose the following archive file in Report Designer Full Eclipse Install :

birt-report-designer-all-in-one-2_2_1.zip

■ If you are using Linux, choose the following archive file in Report Designer Full Eclipse Install For Linux :

birt-report-designer-all-in-one-linux-gtk-2_2_1.tar.gz

■ Choose the download site that is closest to your location.

■ The BIRT Report Designer all-in-one archive file downloads to your system.
■ Extract the archive file to a hard drive location that you specify. The extraction creates a directory named eclipse at the location that you specify.

To test the BIRT Report Designer installation, start Eclipse, then start BIRT Report Designer as described in the following procedure. BIRT Report
Designer is a perspective within Eclipse.



How to test the BIRT Report Designer installation :

วันอังคารที่ 13 กรกฎาคม พ.ศ. 2553

การสร้าง Style กับไฟล์ .css ( การใช้งานแบบ External )

External เป็นจุดประสงค์หลักของการใช้งาน CSS และมันจะประหยัดพื้นที่ในการเก็บแฟ้มต่างๆบนเซิฟเวอร์ เพราะว่าได้มีการแยกโค๊ดคุณสมบัติของเอกสาร HTML ออกมาเป็นแฟ้มเดียวแต่สามารถจัดการลักษณะทั้งหมดในทุกๆเว็บเพจที่เชื่อมโยง มายังแฟ้ม CSS แฟ้มเดียวได้ เมื่อแยกแฟ้มออกมาเป็นแฟ้มเดี่ยวแล้วให้บันทึกแฟ้ม CSS นั้นให้มีนามสกุลเ็ป็น .css เท่านั้นแล้วทำการใช้แท็ก ในเอกสาร HTML เพื่อทำการเชื่อมโยงแฟ้มเอกสาร HTML และแฟ้ม CSS เข้าด้วยกัน ทุกๆเว็บเพจที่มีการเชื่อมโยงมายังแฟ้ม CSS จะมีลักษณะตามที่กำหนดไว้ในแฟ้ม CSS นั้น

ตัวอย่างการใช้งาน

body{

color:#8B0000;

font-size:15px;

}

โดยปกติแล้วแบบ inline เราจะนำ code ดังกล่าวไปใส่ไว้ใน

หรือ

color:#8B0000; font-size:15px;">ข้อความ

ซึ่งแน่นอนว่าหากเราต้องการนำไปใช้กับไฟล์อื่นๆ ก็ต้องนำ code ไปใส่ในลักษณะเดียวกัน แต่ปัญหาคือ สมมุตว่าเรามีไฟล์อยู่ 50 ไฟล์ ใส่ code ให้ตัวอักษรเป็นสีแดงและขนาดตัวอักษร 15px แล้ว วันดีคืนดีต้องการที่จะเปลี่ยนเป็นตัวอักษรสีฟ้า ขนาดตัวอักษร 14px ............. ซวยแล้ว ตั้ง 50 ไฟล์นะ ไล่เปลี่ยนไหวหรอ เสียเวลาทำมาหากินมาก แทนที่จะเอาเวลามานั่งเปลี่ยน 50 ไฟล์นี้ เอาเวลาไปปลูกป่าช่วยโลกร้อนยังได้ประโยชน์มากกว่าเลย

และนี่คือสาเหตุที่ต้องมีการใช้งานแบบ External ซึ่งทุกๆไฟล์สามารถดึง CSS มาใช้ได้หมด หากต้องมีการเปลี่ยนแปลง เราเปลี่ยนแค่ไฟล์ .css ไฟล์เดียวจบเลยครับ หมดปัญหาในการเสียเวลามานั่งเปลี่ยน 50 ไฟล์ และข้อดีอีกอย่างหนึ่งคือ จะเป็นผลดีกับการทำ SEO สำหรับ Google เล็กน้อยด้วย เพราะทำให้ Google Robot ไม่ต้องไปอ่าน code มากๆ เพราะ Google Robot ไม่มีความจำเป็นที่จะต้องไปอ่านพวก CSS หรือ Javascript ทำให้ Google Robot นั้นเก็บข้อมูลเว็บเราได้ง่ายขึ้นครับ

เอาล่ะ มาถึงวิธีใช้แบบ External

จากตัวอย่าง code

body{

color:#8B0000;

font-size:15px;

}

ให้เรานำ code นี้ ไปใส่ใน notepad แล้วเซฟเป็น

(ชื่อไฟล์.css) ในที่นี้ผมจะตั้งชื่อว่า style.css

เวลาเรียกใช้ในหน้า HTML

ข้อความ 1

ข้อความ 2

ข้อความ 3

การใช้ CSS ใน style Tag ( Internal )

Internal

รูปแบบการใช้งานก็จะมีความคล้ายกับแบบ Inline Internal คือเขียนโค๊ดในเอกสาร HTML นั้น และจะมีผลเฉพาะภายในเอกสาร HTML นั้นเท่านั้น รูปแบบ Internal ค่อนข้างจะมีการใช้งานอยู่มากและการใช้งานจะต้องมีแท็ก


เนื้อหา เวบเพจ

นี่เป็นเพียงแต่แบบร่างสำหรับการใช้งาน CSS แบบ Internal เพราะฉะนั้นตัวอย่างโค๊ดต่อไปจะอยู่ภายในแท็ก

วันจันทร์ที่ 12 กรกฎาคม พ.ศ. 2553

ทำ CSS Style Sheet ง่าย ๆ ใน Dreamwaver

CSS ย่อมาจาก Cascading Style Sheets ซึ่งเป็นนมาตราฐานนึงในการกำหนดรูปแบบลักษณะต่าง ๆ ของข้อมูลบนเว็บเพจ CSS ช่วยเราได้อย่างมากในการออกแบบหรือจัดการกับปัญหาบางอย่างที่ HTML โดยปรกติไม่สามารถทำได้ หรือทำได้ไม่ดีเท่าที่ควร เช่น การกำหนดขนาด Font ให้ได้ขนาดตามที่เราต้องการ หรือการใส่สีสรรให้กับช่องกรอกข้อมูลบนหน้าเว็บ และอื่น ๆ ในบทเรียนนี้เราจะมาเริ่มรู้จักกับการใช้งาน CSS กับโปรแกรม Dreamweaver เบื้องต้นกันสักนิด สำหรับเทคนิควิธีการใช้งาน CSS ต่าง ๆ คุณอาจจะหาอ่านได้จากหน้า Tricks ของเว็บไซต์นี้

ข้อดีสำคัญของ CSS

  1. ไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะโค้ดน้อยกว่า
  2. มีความยืดหยุ่นสูงในการปรับแต่งแก้ไขในอนาคต
  3. สามารถควบคุมเว็บหลายๆ หน้าได้ด้วย style sheet เพียงแค่ ไฟล์เดียว
  4. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
  5. ง่ายในการเรียกดู Source
  6. ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ
การใช้งาน CSS Styles Panel เบื้องต้น
1. การเรียกใช้งาน CSS Styles Panel
สำหรับโปรแกรม Dreamweaver เราสามารถเรียกใช้งานหน้าต่าง CSS Styles ได้จาก Main menu -> Window -> CSS Styles หรือหากเป้นเวอร์ชั่น MX2004 คุณสามารถเรียกใช้งานได้จาก Panel Group ทางขวามือของโปรแกรม (ตามค่าเริ่มต้นของโปรแกรม) หน้าตาของ CSS Styles Panel ก็จะได้ดังรูป



2. วิธีการสร้าง CSS Style Sheet ใหม่
เราสามารถสร้าง CSS ขึ้นมาใหม่ได้โดยไปที่หน้าต่าง CSS Styles จากนั้นให้ทำการกดไปที่ Icon ที่มีเครื่องหมายบวก(+) หรือเราเรียก icon นี้ว่า New CSS Styles จะเห็นได้ตามภาพ เมื่อทำการกดไปแล้ว โปรแกรมจะทำการเปิดหน้าต่างขึ้นมาให้เราทำการตั้งชื่อหรือเลือก TAG ของ HTML มาใช้ในการกำหนดค่า ดังรูป


ที่หน้าต่าง New CSS Style นี้จะมีช่องให้เราตั้งชื่อหรือเลือกรูปแบบของ CSS ได้ ดังนี้

  • Selector : เป็นการกำหนดชื่อของ CSS ที่เราต้องการ และที่ช่องนี้จะทำงานสัมพันธ์กับ Type ด้านล่าง หากเราเลือก Type เป็น Redifine HTML TAG ที่ช่อง Selector จะมี List ของ TAG HTML ให้เราเลือกเพื่อทำการกำหนดคุณสมบัติใหม่ให้กับ TAG HTML

  • Tyle : เลือกรูปแบบที่เราจะกำหนดคุณสมบัติ CSS มี 3 ค่าให้เลือก คือ
    Make Custom Style (class) เป็นการสร้าง CSS ขึ้นมาใหม่โดยเราทำการกำหนดชื่อของ Style ขึ้นเอง เราอาจจะเรียก Style นั้นว่า Class ก็ได้
    Redifine HTML Tag เป็นการเลือก TAG ของ HTML ขึ้นมาทำการกำหนดคุณสมบัติใหม่
    Use CSS Selector เป็นการกำหนดคุณสมบัติ CSS ให้กับบางจุดของหน้าเว็้บเพจที่เราต้องการ เช่น จุดที่เป็น Link จุดที่เรากำหนด ID ของ TAG นั้น ๆ ไว้ เป็นต้น ใน MX2004 จะใช้ชื่อ option นี้ว่า Advanced ดังรูป
3. วิธีการใช้งาน CSS
วิธีการใช้ CSS โดยการลากทึบที่ตัวอักษรแล้วคลิกขวาเลือก CSS Styles แล้วเลือก Style
ตามชื่อที่เราได้ตั้งไว้ แค่นี้เราก็จะได้ Style ในแบบของเรา

วันอาทิตย์ที่ 11 กรกฎาคม พ.ศ. 2553

Application import file(Excel)

JExcelApi เป็น java library ที่เอางานเกี่ยวกับ M$ Excel โดยสามารถที่จะ อ่าน, เขียน และทำการแก้ไข M$ Excel ได้
ก่อนอื่นนั้นต้องนำ library ของ jxl มาใส่ใน Folder : lib ก่อน

1. สร้างหน้าจอเพื่อต้องการเรียกไฟล์ excel มาแสดงผล






2. สร้าง controller.xml โดยไม่ต้องใช้ view-map เพื่อเรียกใช้ processImportFile ที่ไฟล์ AExcelEvents.java










3. สร้างไฟล์แบบ java โดยเมธอดชื่อ processImportFile

package com.orangegears.util;

import java.io.IOException;

import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import jxl.JXLException;
import jxl.Sheet;
import jxl.Workbook;

import org.ofbiz.base.util.Debug;
import org.ofbiz.entity.GenericDelegator;
import org.ofbiz.service.LocalDispatcher;


public class AExcelEvents {
public static final String module = AExcelEvents.class.getName();

public static String processImportFile(HttpServletRequest request, HttpServletResponse response) {
LocalDispatcher dispatcher = (LocalDispatcher) request.getAttribute("dispatcher");
GenericDelegator delegator = (GenericDelegator) request.getAttribute("delegator");
Debug.logInfo("1==============================================", module);

try
{
ServletInputStream is = null;
try {
is = request.getInputStream();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
byte[] junk = new byte[1024];
int bytesRead = 0;

// the first four lines are request junk
try {
bytesRead = is.readLine(junk, 0, junk.length);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
bytesRead = is.readLine(junk, 0, junk.length);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
bytesRead = is.readLine(junk, 0, junk.length);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
bytesRead = is.readLine(junk, 0, junk.length);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

try {
Workbook workbook = Workbook.getWorkbook(is);
Sheet sheet = (Sheet) workbook.getSheet("Sheet1");

Debug.logInfo("=============================================="+sheet.getCell(0, 0).getContents(), module);
Debug.logInfo("=============================================="+sheet.getCell(0, 1).getContents(), module);
Debug.logInfo("=============================================="+sheet.getCell(1, 0).getContents(), module);
Debug.logInfo("=============================================="+sheet.getCell(1, 1).getContents(), module);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}
catch (JXLException e)
{

}
Debug.logInfo("2==============================================", module);
return "success";
}
}

วันอาทิตย์ที่ 4 กรกฎาคม พ.ศ. 2553

สร้าง Confirmation Window สำหรับ button

ใน ofbiz.9.04 ไม่สามารถเพิ่ม Confirm-message ได้ เหมือนกับ ofbiz.10.04 จึงได้ลองหาวิธีต่าง ๆ มาใช้ โดยลองนำการสร้างปุ่มไปไว้เป็นไฟล์ ftl แล้วเรียกใช้ include เข้ามาใช้แทนการใช้ปุ่มโดยตรง

1. เรียกใช้ javaScript โดยเพิ่มใน common/widget/CommonScreen.xml
ตรง เพื่อใช้สำหรับทุกเพคเกจสามารถเรียกใช้ javascript นี้ได้



2. เขียนคำสั่งแสดง dialog โดยการเรียกใช้ dojo javascript ในไฟล์ testDialog.js ดังตัวอย่างต่อไป

dojo.addOnLoad(function(){
dojo.parser.parse();
});

function removeThis(){
this.destroyRecursive()
}

function showDlg1(formIdName){
var d = new dijit.Dialog({id:'dlg',title:'Dojo Dialogs',content: "

Do you need to do this thing ?

" +
"",onExecute:removeThis,onCancel:removeThis});
d.show()
}

3. หน้า Screen ของเราจะทำการ include-form เข้ามาแล้วเรียกใช้ปุ่มที่สร้างไว้ผ่าน ftl





4. Comment ปุ่มในหน้า Form ที่ต้องการเรียกใช้ javaScript

5. สร้างไฟล์ submitButton.ftl มาเพื่อเรียกใช้ปุ่มและ javaScript ซึ่งในที่นี่เราจะศึกษาเกี่ยวกับการใช้ dojo (ศึกษาเพิ่มเติมได้จาก http://www.dojotoolkit.org/)




6. เมื่อทดลองใช้ DOJO

วันจันทร์ที่ 21 มิถุนายน พ.ศ. 2553

การสร้าง Data Source เพื่อใช้ดึงข้อมูลจาก Database

สร้างการออกแบบรายงานใหม่

รัน Eclipse และสร้างโปรเจ็คใหม่ หลังจากนั้นก็สร้างรายงานใหม่

  • สร้างรายงานจากแม่แบบ
  • สร้างรายงานว่างๆ

กำหนดข้อมูลที่จะใช้

รายงานสามารถเข้าถึงข้อมูลได้จากหลายแหล่งด้วยกัน เช่น ฐานข้อมูล, ไฟล์ข้อความ, เอกสาร XML และ Web Service ในการกำหนดให้รายงานสามารถเข้าถึงข้อมูลได้นั้น ประกอบด้วยขั้นตอน ดังนี้

  • ใน BIRT Report Designer ให้เลือกชนิดของ Data Source
  • กำหนดการเชื่อมต่อไปยัง Data Source
  • สร้าง Data Set ที่ระบุข้อมูลที่นำมาจาก Data Source
การสร้าง Data Source เพื่อใช้ข้อมูลจาก Database


การเข้าถึงข้อมูลของ BIRT Report จะต้องใช้ Birt data sourceData source คือแหล่งข้อมูลที่จะนำมาใช้ใน Report ใน 1 Report สามารถสร้างได้หลายก้อน ข้อมูลนั้นมาจาก Database หรือ File ได้
  • การสร้าง JDBC data source
  1. ในหน้าต่าง Data Explorer > Data source คลิกขวา เลือก New Data Source
  2. เลือก JDBC Data Source ใน list
  3. หลังจากนั้นคลิก Next จะได้หน้าต่าง.... ในช่อง Driver Class ให้เราเลือก Driver ของ Database ของเรา คือ jdbc:odbc:
  4. หรือจะ Browse หา โดยเข้าไปที่ Manager Driver
  5. *ถ้ายังไม่มี JDBC Driver คุณต้องไปโหลดมาติดตั้งเอง
    ในช่อง
    Database URL ก็ให้นำ link ที่เชื่อมไปยัง Database มาใส่ เช่น
    java:comp/env/jdbc/MyDataSource

    ใน ช่อง
    username,password ใส่ username,password ของ Database ลงไป
    เสร็จ แล้วก็ลอง
    Test Connection

    เมื่อทดสอบผ่านแล้ว Finish ไปได้เลย เราจะได้ Data Source มา 1 ก้อน
    เป็นอันสำเร็จ ตอนนี้เราต่อ Database ได้แล้ว ทีนี้ก็สามรถใช้ข้อมูลที่มาจาก Database ได้แล้ว
    การสร้าง Data Set นั้น ก่อนจะสร้าง Data set ได้ก็ต้องสร้าง Data source มาก่อนนะคับData set นี้ก็เป็นที่อยู่ของ Table or entity สามารถเลือกมาได้หลายวิธี ด้วยกัน แต่ส่วนมากจะใช้คำสั้ง sql ในการดึงข้อมูลมาใช้ใน Report
    • Build a Data set
    1.ในหน้าต่าง Data Explorer > Data source คลิกขวา เลือก New Data Source

ในช่อง Data set name ให้ใส่ชื่อของ Data set
ในช่อง Data source ให้ใส่ชื่อของ Data source
ในช่อง Data set type เลือกรูปแบบ SQL select query(ใช้คำสั่ง sql ในการดึงข้อมูล)


เลือกข้อมูลได้แล้ว กด Finish เป็นอันเสร็จสิ้น
เพียง เท่านี้ก็จะได้ข้อมูลจาก Database มาใช้ใน Report เรียบร้อย...

วันอาทิตย์ที่ 20 มิถุนายน พ.ศ. 2553

ความรู้พื้นฐานเกี่ยวกับ Birt Report

Birt (Business Intelligence and Reporting Tools) คือ รายงาน BIRT เป็นเอกสารที่แสดงข้อมูลจากระบบภายนอก เช่น ฐานข้อมูล หรือโปรแกรมต่างๆ ข้อมูลในรายงานจะถูกจัดการ และจัดรูปแบบให้คนสามารถอ่าน และทำความเข้าใจกับรายได้ ซึ่งเรื่องนี้เป็นสิ่งสำคัญมากทีเดียว รายงาน BIRT ไม่ใช่เอกสารที่จะสามารถพิมพ์ตัวอักษรลงไปได้เหมือนกับกระดาษทั่วไป แต่สามารถใช้เครื่องมือออกแบบ BIRT Report Designer สร้างเอกสารรายงานนี้ขึ้นมา

ในการใช้งานเครื่องมือออกแบบ BIRT Report Designer นั้น สามารถสร้างรายงานปฏิบัติการต่างๆ ได้ เช่น รายงานวัตถุดิบที่ใช้ในการผลิต (Bill Of Material) รายงานการสั่งซื้อ (Purchase Order) หรือรายการใบแจ้งหนี้ (Invoice) นอกจากนี้ยังสามารถสร้างรายงานได้แบบเวลาจริง (real-time) เกี่ยวกับประสิทธิภาพของธุรกิจ เช่น จำนวนครั้งการรับโทรศัพท์ของแผนกบริการลูกค้า จำนวนปัญหาที่ต้องแก้ไข จัดหมวดหมู่ระดับความซับซ้อนของปัญหา หรือจำนวนครั้งของลูกค้าคนเดียวกันโทรเข้ามา หรือจะเป็นรายงานแบบ client-facing เช่น รายการรายละเอียดบัญชี เป็นต้น ทุกๆครั้งที่ผู้ใช้งานต้องการดูผลการวิเคราะห์ ผลรวม หรือข้อมูลสารสนเทศต่างๆ จะต้องใช้ รายงาน
กระบวนการการออกแบบรายงาน
  1. วางแผนรายงาน
  2. สร้างการออกแบบรายงานใหม่
  3. กำหนดข้อมูลที่จะใช้
  4. จัดวางรายงาน
  5. จัดรูปแบบเนื้อหาในรายงาน
  6. ออกแบบ Master Page
  7. แสดงผล และทดสอบรายงาน
สำหรับผู้ที่ไม่มีทักษะทางด้านการทำรายงาน จะต้องทำความเข้าใจการบวนการการทำรายงานเป็นรอบๆไป ดีกว่าที่จะทำงานเป็นเส้นตรง หมายความว่าให้ทำงานแต่ละงานหลายๆครั้ง โดยที่ไม่จำเป็นต้องเรียงลำดับ อาจจะเริ่มพัฒนาจากกำหนดข้อมูลที่จะใช้ จัดวางข้อมูล แสดงผลรายงาน เปลี่ยนการจัดวาง แสดงผลอีกครั้ง หรืออะไรก็ตามจนกระทั่งเนื้อหา และรูปลักษณ์เป็นที่น่าพอใจ

การสร้าง service ที่ใช้แก้ไขข้อมูลใน entity

การสร้าง service ที่ใช้แก้ไขข้อมูลใน entity โดยใช้ simple method ในไฟล์ *Services.xml มีวิธีทำดังนี้

1. สร้างฟอร์มชื่อ EditBlog ที่ *Forms.xml


<form type="single" target="editBlog" title="" name="EditBlog">
<auto-fields-entity name="Blog" type="edit">
<field name="blogId">
<drop-down empty="false">
<entity-options description="${description}" name="Blog"></entity-options>
</drop-down>
</field>
<field name="editButton" title="Save"><submit type="button"></submit>
</field>
</auto-fields-entity>
</form>



2.เรียกใช้ form ชื่อ EditBlog เพิ่มเข้าไปในไฟล์ *Screens.xml
























3. ไฟล์ *Forms.xml ฟอร์มชื่อ EditBlog จะมี target="editBlog" ใน controller.xml ทำการสร้าง request-map และสั่งให้มีการการ invoke simple method ชื่อ editBlog ที่ services.xml










4. ใน services.xml มีการ invoke editBlog ในไฟล์ *Services.xml โดยทำการเรียกใช้ editBlog




เพราะกำหนด type="id-ne"
user must be input








5. สร้าง service ชื่อ updateBlog ในไฟล์ BlogServices.xml













6.การใช้ controller ให้เรียก view ที่มีหน้า form ของการ edit new blog มาแสดงผล


7. เพิ่ม controller ชื่อ EditBlog ใน controller.xml ให้เรียก view ชื่อ CreateBlog มาแสดงผล เมื่อมีการเรียกเข้ามาที่ controller นี้









8. สร้าง view ชื่อ EditBlog เพื่อเรียกใช้ฟอร์มที่สร้างมาแสดงผล







9../startofbiz.sh ใหม่อีกครั้ง แล้วทดลองเแก้ไขข้อมูลลงใน entity

วันเสาร์ที่ 12 มิถุนายน พ.ศ. 2553

การเรียกใช้ service แบบ java

การเรียกใช้ service แบบ java
1. สร้าง entity ให้เป็นแบบ java ก่อน
ตัวอย่างการสร้าง entity Blog




primary sequenced ID

















2. สร้าง Method Service ใน FaiiServices.xml ใช้สำหรับ createBlog







3. include form ชื่อ CreateBlog เข้าไปในไฟล์ FaiiScreens.xml


















5. ใน controller.xml ทำการสร้าง request-map และสั่งให้มีการการ invoke simple method ชื่อ createBlog ที่ services.xml








6. ใน services.xml จะมีการ invoke= "createBlog" ในไฟล์ FaiiServices.xml







7.สร้าง service ชื่อ createBlog ในไฟล์ BlogServices.xml











8. ต่อไปจะทำการ controller ให้เรียก view ที่มีหน้า form ของการ create new blog มาแสดงผล
โดยเพิ่ม controller ชื่อ CreateBlog ใน controller.xml ให้เรียก view ชื่อ CreateBlog มาแสดงผล เมื่อมีการเรียกเข้ามาที่ controller นี้







8.สร้าง view ชื่อ CreateBlog เรียกฟอร์มการสร้างมาแสดงผล






9. ทำการ ./startofbiz.sh ใหม่อีกครั้ง แล้วทดลองเพิ่มข้อมูลลงใน entity

การนำ service ไปใช้งานในหน้าจอ

การนำ service ไปใช้งานในหน้าจอ

1. เข้า ofbiz web http://ofbiz.apache.org/
2. เข้า documentation
3. เลือก Technical Documentation
4. เลือก Framework Introduction Videos and Diagrams
5. แล้วสามารถเลือกดูการทำงานต่าง ๆ ของ framework


จากรูปสรุปได้ว่า
1. สร้าง entity แต่ละ entity ใน entityModel.xml
2. โดยที่ Faiilanguage.xml ใช้สำหรับเก็บข้อมุลภาษาของแต่ละ field
3. ใน FaiiService.xml นั้นจะสร้าง simple method ที่ใช้ในการ create update delete ของแต่ละ entity โดยสามารถเรียกใช้ผ่านทาง Service.xml
4. Service.xml ใช้ในการเรียกใช้ FaiiService หรือเรียกใช้คำสั่งในการ create update delete ของแต่ละ entity ซึ่งในหน้านี้เราจะนำ url ของหน้า FaiiService.xml มาใส่ในนี้
5. หลังจากนั้นหน้า Service.xml จะเรียกใช้ Controller.xml เพื่อใช้ควบคุมการแสดงผลไปยังหน้าจอ ซึ่งจะมีการเรียกใช้หลาย ๆ แบบ เช่น screen และ view เป็นต้น
6. หน้าจอแสดงผลลัพธ์ที่ผู้ใช้กำหนดไว้

วันอังคารที่ 8 มิถุนายน พ.ศ. 2553

สร้าง Postgresql

การเปลี่ยน database ให้เป็น postgresql
ก่อนอื่นเรามาทำความรู้จัก กับ postgresqkl ซึ่ง postgresql เปรียบเสมือน oracle ส่วน pgadmin เป็นตัวจัดการ postgresql
PostgreSQL คือ ระบบจัดการฐานข้อมูลเชิงวัตถุ-สัมพันธ์ (Object-Relational DataBase Management System หรือ ORDBMS) โดยสามารถใช้รูปแบบของภาษา SQL ได้เกือบทั้งหมด และสามารถใช้ subselects , transactions , user-defined types และ functions ได้ อีกทั้งเป็น Database ซึ่งให้ Source code ฟรี

PgAdmin III คือ โปรแกรมสำหรับช่วยในการเขียน SQL กับฐานข้อมูล PostgreSQ โปรแกรม pgAdmin III เป็นโปรแกรมที่มาพร้อมกับการติดตั้ง PostgreSQL เป็นโปรแกรมสำหรับจัดการกับระบบในทุก ๆ ด้าน และที่สำคัญคือเป็นโปรแกรมแบบ GUI ทำให้ผู้ใช้ทำงานได้สะดวกกว่าการจัดการแบบ command prompt การเรียกใช้โปรแกรมนี้

การจัดการข้อมูล (สร้างข้อมูล อัพเดตข้อมูล แก้ไขข้อมูล ลบข้อมูล)
- ติดตั้ง postgresql และ pgadmin
1. เข้า system --> Adminstration
2. เลือก Synaptic Manager
3. พิมพ์ postgresql แล้วคลิกขวา Mark all
4. Apply แล้วรอระบบทำการติดตั้ง
5. หลังจากติดตั้ง postgresql เสร็จแล้วให้ติดตั้ง pgadmin เหมือนกัน

การเชื่อมต่อกับ Server
โดยปกติเมื่อเรียกโปรแกรมนี้มันจะเชื่อมต่ออยู่กับเซอร์เวร์ localhost ที่พอร์ต TCP 5432 ผู้ใช้จะเชื่อมต่อกับเซอร์เวอร์ตัวอื่น ๆ ได้โดยการใช้คำสั่งจากเมนู File » Add Server ซึ่งจะทำให้สามารถจัดการเซอร์เวอร์ได้หลาย ๆ ตัวพร้อมกัน โดยเมื่อเริ่มโปรแกรม pgAdmin จะแสดงเครื่องหมายกากบาทแดงทับออบ เจคต์ไว้ ในลักษณะดังรูป

ซึ่งหมายถึงขณะนี้ยังไม่มีการเชื่อมต่อกับเซอร์เวอร์ ถ้าต้องการเชื่อมต่อผู้ใช้ต้องคลิกลงบนไอคนที่มีเครื่องหมายกากบาทแดงนั้นโปรแกรมก็จะถามรหัสผ่านด้วยหน้าต่างดังรูป


จากหน้าต่าง connect to server จะเห็นว่ามี checkbox ชื่อ "Store password" อยู่ถ้าคลิกเลือกรายการนี้หลังจากป้อนรหัสผ่านแล้วครั้งต่อไปเมื่อคลิกที่ Server โปรแกรมจะไม่ถามรหัสผ่านอีก วิธีนี้อาจส่งผลเรื่องความปลอดภัยเนื่องจากใคร ๆ ก็สามารถเข้ามาแก้ไขระบบได้หากเปิดเครื่องทิ้งไว้ ในการเซ็ตกลับไปให้เหมือนเดิมคือต้องการให้มีการถามรหัสผ่านทุกครั้ง ให้ทำตามขั้นตอนต่อไปนี้

1.คลิกขวาลงบน PosgreSQL 8.4 (หรือตามชื่อเวอร์ชัน) ในรายการย่อย Server เพื่อทำการปิดการเชื่อมต่อ (ในกรณีที่กำลังเชื่อมต่อกับ server อยู่) ดังรูป

2.เลือกรายการ "Disconnect" จากเมนู โปรแกรมจะปลดการเชื่อมต่อกับ Server และจะมีเครื่องหมายกากบาทสีแดงบนไอคอน
3.คลิกขวาลงบน PosgreSQL 8.4 (หรือตามชื่อเวอร์ชัน) อีกครั้งจะมีเมนูเดิมปรากฏขึ้น
4.เลือกรายการ Properties


5.จะเห็นว่าในรายการ "Store password" มีการเลือกไว้ให้นำเมาส์ไปคลิกเพื่อนำเครื่องหมายเลือกออไป
6.กดปุ่ม OK
หลังจากกระบวนการที่กล่าวมาเมื่อทดลองเชื่อมต่อกับ Server อีกครั้งหนึ่งโปรแกรมจะถามรหัสผ่านตามปกติ




วันจันทร์ที่ 7 มิถุนายน พ.ศ. 2553

การดึงข้อมูลจากตาราง

การดึงข้อมูลจากตาราง
1. Eclipse ----> freemarker ---->webapp/freemarker/widget/FreemarkerScreen.xml
2. เลือกหน้าที่ต้องการเช่น ต้องการดึงข้อมูลมาไว้ที่หน้า index.ftl ดูตรง
พิมพ์ใน
3. ส่วนดึงตาราง Example มาแสดงในหน้า index.ftl โดยใส่คำสั่งดังนี้
4. ส่วนการดึงตารางที่มีคีย์ร่วมกันมาแสดง
5. เปิด index ถ้าดึงข้อมูลจากตาราง Example เพียงตารางเดียว
${resultMap.exampleId} , ${resultMap.exampleId} ชื่อคอลัมภ์ที่ต้องการแสดง
ถ้าดึงข้อมูลจาก ExampleItem ใช้ list ในการแสดง
<#list resultList as itemMap> ${itemMap.exampleItemSeqId} -

${itemMap.description}

6. ส่วนใน ofbiz เข้า Application --> Example --->new Example -->type Real World -->status Appoved --> Example name: index --> description --> index desc --> create
จากนั้นเลือก เมนู Items แล้วเพิ่มเมนูเข้าไป Add

การใช้ subversion บริการของ Google Code

การใช้ subversion บริการของ Google Code
เราจะใช้บริการของ Google ที่มีชื่อว่า Project Hosting ก่อนอื่นก็สมัคร Account ของ google ก่อนนะครับ เพื่อสามารถใช้งาน Project Hosting ของ google ได้



เมื่อสมัครเสร็จเรียบร้อยแล้วก็มาสร้างโปรเจคกันต่อค่ะ



Project Name :
Project Summary:
Project Description : Version control system: เลือก Subversion
Source code license: มีหลายแบบที่เราอยากให้ code เราเป็น public หรือไม่อย่างไร
Project lables: คำที่เกี่ยวข้องกับโปรเจคเรา เช่น java , sql , c++ เป็นต้น

ทั้งหมดนี้เป็นการเตรียมการที่จะใช้ subversion กับโปรแกรม Eclipse-galileo และบริการของ project hosting ของ google code

วันเสาร์ที่ 5 มิถุนายน พ.ศ. 2553

เรามาทำความรู้จักกับ Freemarker กัน

เรามาทำความรู้จักกับ freemarker กัน
FreeMarker IDE is a FreeMarker aware editor with the following features:
o Syntax Hilighting
o Content Assist
- Variables (Object aware)
- Directives
- Macros
- Macro Parameters
o Outline View

ตัวอย่างการทำ freemarker
- สร้างหน้า menu.ftl เพื่อเรียกใช้ template ของเว็บเพจเรา
สร้างแถบเมนูด้านบน

<#macro menu>
  • Homepage

  • Abous Us

  • About Ofbiz

  • Gallary

  • Contact Me



  • สร้างข้อมูลข่าวด้านข้างซ้าย

    <#macro news>


    [01/06/2010]ERP AND Ofbiz


    [02/06/2010]ติดตั้งOfbizบนUbuntu


    [03/06/2010]Eclipse Plugin


    [04/06/2010]Freemarker



    <#macro copyright>

    Copyright © 2006 Salt & Pepper. Designed by Free CSS Templates




    - การสร้าง controller ในการจัดการ freemerker

    - การเรียกใช้ freemarker
    1.การเรียกใช้เมนูด้านบน
    <#import "component://freemarker/webapp/menu.ftl" as mymenu><#--freemarker-->
    <@mymenu.menu />
    2.การเรียกใช้ข้อมูลด้านข้างซ้าย
    <#import "component://freemarker/webapp/menu.ftl" as mynews><#--freemarker-->
    <@mynews.news />
    3.การเรียกใช้ copyright
    <#import "component://freemarker/webapp/menu.ftl" as mycopy><#--freemarker-->
    <@mycopy.copyright />

    วันศุกร์ที่ 4 มิถุนายน พ.ศ. 2553

    การสร้าง Component

    ในการพัฒนา OFBiz จะเรียกการสร้าง application หรือ module ว่า component โดยแต่ละ component จะมี data model, views, controller เป็นของ component เอง แต่สามารถทำงานร่วมกับ component อื่นได้ component หลักของ OFBiz จะอยู่ใน folder ชื่อ applications ส่วน component ที่ถูกสร้างขึ้นจะถูกสร้างไว้ในโฟลเดอร์ hot-deploy โดย

    ขั้นตอนในการสร้าง component สำหรับ OFBiz มีดังนี้

    1. เปิด Terminal แล้วเข้าไปยัง folder ที่มีการรัน OFBiz 2. ทำการเรียก ant ให้สร้าง component โดยใช้คำสั่งดังนี้

    ./ant create-component


    3. ant จะให้ตั้งค่าต่างๆ ของ component รูปแบบดังนี้
    ในที่นี้เราจะตั้งชื่อ component ว่า hwm

    ./ant create-component
    Component name: hwm
    Component resource name: Hwm
    Webapp name: hwm
    Base permission: HWM
    Confirm: Y;


    component name : เป็นชื่อของ component (และเป็นชื่อ folder ที่อยู่ใน component นั้นๆด้วย ซึ่งจะถูกสร้างอยู่ใน hot-deploy ) ในที่นี้ชื่อต้องเป็นตัวพิมพ์เล็กทั้งหมด เช่น hwm

    component resource name : ใช้เหมือนเป็น prefix นำหน้าชื่อข้อมูลจำพวกไฟล์ seed ต่างๆ โดยส่วนใหญ่แล้วให้ขึ้นต้นตัวอักษรแรกเป็นตัวใหญ่ เช่น Hwm

    webapp name : ใช้เป็นทั้งชื่อ และ uri ของ application ซึ่งใช้เป็นชื่อแรกของการอ้างอิง uri ในการเข้าถึง component นั้นๆ ในที่นี้ชื่อต้องเป็นตัวพิมพ์เล็กทั้งหมด เช่น hwm

    base permission : ใช้เป็น prefix สำหรับ การกำหนดค่าพื้นฐานทางโปรแกรมในการอนุญาตการเข้าถึงโปรแกรม ในด้านความปลอดภัย ให้ขึ้นต้นด้วยตัวพิมพ์ใหญ่ทั้งหมด HWM
    เมื่อเสร็จสิ้นคำสั่งดังกล่าวแล้วเราจะได้ผลลัพธ์ดังรูป



    4. เมื่อกำหนดค่าทั้งหมดแล้ว ant จะให้ confirm สิ่งที่ตั้งค่าไป เมื่อถูกต้องทั้งหมดแล้วกด y เพื่อยืนยัน ant จะเริ่มทำการสร้าง component ให้


    5. ทดสอบการสร้าง component โดยลองเรียกผ่านทาง web browser ดังนี้

    https://localhost:8443/ชื่อคอมโพเน้นท์/control/main หรือ http://localhost:8080/ชื่อคอมโพเน้นท์


    หลังจากที่สร้าง component เสร็จแล้ว ยังไม่สามารถล็อกอินเข้าใช้คอมโพเน้นท์ที่สร้างได้ ต้องแอด data security ให้กับ component ก่อน โดยมีขั้นตอนดังนี้
    1. login เข้าไปใน webtools ของ OFBiz ที่ได้ติดตั้งไว้ ตาม url ดังนี้

    https://localhost:8443/webtools/control/main

    2. ค่า default ของการ login เข้าใช้งาน OFBiz ดังนี้

    username = admin
    password = ofbiz

    3. ในการ import data security เข้าไปใน webtools ดังนี้

    วิธีที่ง่ายที่สุดคือ XML Data Import Dir
    1. เลือก XML Data Import ใน webtools
    2. ใส่ค่า absolute path ของ data directory ลงในช่อง Absolute directory path: เช่น

    /thanakrit/Projects/ofbiz.10.04/hot-deploy/sand/data

    3. กดปุ่ม import file หากไม่มี error แจ้งว่า fail แสดงว่าการนำเข้าสำเร็จ

    เมื่อ ทำการเพิ่ม data security ให้กับ component นี้แล้ว แอคเคาท์ admin จะสามารถ login เข้าใช้งาน component นี้ได้ ทดสอบได้โดยการ login เข้าไปใน url ดังนี้

    https://localhost:8443/ชื่อคอมโพเน้นท์/control/main

    เมื่อ ล็อกอินเข้ามาแล้วจะพบหน้า OFBiz ว่าง ซึ่งต้องทำการเซ็ต controller ของ webapp ใน component ของ OFBiz ให้เรียก views มาแสดงผลได้ ซึ่งจะแสดงในบทความต่อไป


    วันพฤหัสบดีที่ 3 มิถุนายน พ.ศ. 2553

    plug-in ของ eclipse

    ติดตั้ง plug-in ของ eclipse
    - subclipse จากเว็บ http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA
    แล้วเลือก Eclipse update site URL: http://subclipse.tigris.org/update_1.6.x
    - groovy จากเว็บ
    http://dist.springsource.org/release/GRECLIPSE/e3.5/
    - jBoss จากเว็บ http://download.jboss.org/jbosstools/updates/stable/galileo/

    หลังจากที่ติดตั้ง plug-in eclipse แล้ว สร้าง component ใหม่
    เข้า Terminal--->cd ofbiz.10.04 ---> ./ant create-component ---> name: orangegears, resource : Orangegears , webapp:orangegears , base : ORANGEGEARS
    confirm : Y
    http://localhost:8080/orangegears แล้ว login admin
    ./startofbiz.sh
    แล้วก็ทิ้งหน้าจอนี้ไว้เลย.......

    วันพุธที่ 2 มิถุนายน พ.ศ. 2553

    ติดตั้ง Ubuntu

    Ubuntu

    การลง subversion Eclipse
    1. System ---> Administration ---> Synaptic Package Manager
    2. พิมพ์ subversion ในช่องค้นหา
    3. เลือก subversion ---> mark all ---> apply
    4. หลังจากนั้นรอระบบทำการติดตั้ง

    การลง Plugin Eclipse
    1. Application ---> Programming ---> Eclipse --->menubars
    2. Help ---> Install New Software ---> เลือก Galileo Update Site
    3. เลือก Business Intelligent, Database Development ,web , xml
    4. แล้วเลือก Hide item that are ready installed แล้ว Next
    5. I accept ----> Finish
    6.รอโปรแกรมทำการอัพเดตสักครู่

    อัพเดต ofbiz ให้เป็นรุ่นล่าสุด
    1.Application ---> Accessaries ---> Terminal
    2. พิมพ์ svn : http://svn.apache.org/repon/asf/ofbiz/branches/release10.04 ofbiz.10.04
    แล้ว Enter
    3. รอจนกว่าจะอัพเดตเสร็จเรียบร้อย

    ความรู้เกี่ยวกับ ERP

    เรามาทำความรู้จักกับ การทำงานของ ERP
    ERP หรือ Enterprise Resource Planning หมายถึง ทฤษฎีหรือหลักการที่ออกแบบมาใช้พัฒนากับการวางแผนทรัพยากรทางธุรกิจขององค์กรโดยรวมเพื่อให้เกิดประโยชน์สูงสุด นอกจากนั้นแล้วระบบ ERP สามารถบูรณาการรวมงานหลักต่าง ๆ ในบริษัททั้งหมด ได้แก่ การจัดจ้างการผลิต การขาย การบัญชี และการบริหารบุคคลเข้าด้วยกันเป็นระบบที่สัมพันธืสามารถเชื่อมโยงกันอย่าง real time

    ส่วน Open Source คือวิธีในการออกแบบพัฒนาและแจกจ่ายสำหรับต้นฉบับของสินค้าหรือความรู้ โดยโอเพนซอร์ซเปิดโอกาสให้บุคคลอื่นนำเอาระบบไปพัฒนาได้ต่อไป
    หลังจากที่รู้จัก ERP กับ Open Source ไปแล้วเรามารู้จัก
    ส่วน Apache Ofbiz ERP/CRM คือ Apache for business เป็นโครงการ enterprise automation software (ซอฟต์แวร์อัติโนมัติสำหรับองค์กร) ที่อยู่ภายใต้อนุญาตของ Apache License 2.0


    จัดการการปรับปรุง Ubuntu
    1. System
    2. Administration
    3. Update Manager
    4. Check
    5. Install Update
    6. รอการอัพเดต

    ลง JDK บน ubuntu
    1. System
    --->Administration ---> Synaptic Package Manager
    2. พิมพ์ jdk ในช่องค้นหา
    3. เลือก sun jdk
    4. แล้วคลิกขวาเพื่อ mark ตัวที่ต้องการ install--->Repositories
    5. เลือกแถบ Other Software
    6. เลือก เครื่องหมายถูก หน้าข้อความทั้งสองบรรทัด
    7. กลับมาเลือกแถบ Ubuntu Software เหมือนเดิม
    8. ตรงช่อง Download from: ให้คลิกเลือก Other...
    9. ให้เลือกเซิฟเวอร์ที่จะโหลด จาก เว็บไทย อันใดอันหนึ่
    10. Choose Server ---> close
    11. เลือก jdk ที่ mark เอาไว้ ---> apply
    12. รอ ระบบจัดการลง JDK ให้เรา

    ลง ant (ลงหรือไม่ก็ได้)
    1. System
    --->Administration--->Synaptic Package Manager
    2. พิมพ์ ant ในช่องค้นหา
    3. เลือก ant
    4. เลือก mark--->apply
    5. รอ ระบบ จัดการลง ant ให้เรา