User Tools

Site Tools


tutorial:printdatausinglazreport

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
tutorial:printdatausinglazreport [2019/12/22 10:23]
admin
tutorial:printdatausinglazreport [2019/12/29 23:24] (current)
admin
Line 7: Line 7:
  
 =====เริ่มต้นใช้งาน===== =====เริ่มต้นใช้งาน=====
 +ในหัวข้อนี้ จะแสดงตัวอย่างการใช้งาน LazReport เพื่อดึงข้อมูลทั้งที่เป็นตัวแปรเดี่ยว และแบบ Array\\
 +
 1. ก่อนใช้งาน ต้องทำการ Download ไฟล์ Package ของ LazReport มาติดตั้งเสียก่อน \\ 1. ก่อนใช้งาน ต้องทำการ Download ไฟล์ Package ของ LazReport มาติดตั้งเสียก่อน \\
-2. สร้างโปรเจคที่เป็น Form-Based Application จากนั้นให้นำ ​Button1 Button2 ​มาวางบน Form1 + 
-สำรับ LazReport ให้นำ ​Control ชื่อ frReportfrUserDataset ​และ ​frDesigner ​มาวางบน Form1 เช่นกัน+2. สร้างโปรเจคที่เป็น Form-Based Application จากนั้นให้นำ ​Control 5 ตัวมาวางบน Form1 ดังนี้\\ 
 +2.1 Standrad Control ใ้นำ ​ Button1 Button2 มาวางน Form1\\ 
 +2.2 LazReport ​Control ​ให้นำ ​frReport1frUserDataset1 ​และ ​frDesigner1 ​มาวางบน Form1 \\
  
 {{tutorial:​lazreport1.png}} {{tutorial:​lazreport1.png}}
 +
 +3. สำหรับ Control แต่ละตัวนั้น ให้สร้าง procedure ดังนี้
 +
 +^  Control ​ ^  Procedure ​ ^ Description ^
 +| Form1 | FormCreat() | สร้าง Event ที่ทำงานเมื่อ Form1 ถูกสร้าง |
 +| Button1 | Button1Click() | สร้าง Event ที่ทำงานเมื่อ Button1 ถูก Click |
 +| Button2 | Button2Click() | สร้าง Event ที่ทำงานเมื่อ Button2 ถูก Click |
 +| frReport1 | frReport1GetValue() | สร้าง Event ที่ทำงานเพื่อรับข้อมูลไปแสดงใน Report |
 +| frUserDataset1 | frUserDataset1CheckEOF() | สร้าง Event ระบุเงื่อนใขในการหยุดการแสดงข้อมูลที่เป็น DataSet (ในที่นี้คือ ArrData[]) |
 +| ::: | frUserDataset1First() | สร้าง Event ที่ทำงานเมื่อ DataSet ถูกอ่านครั้งแรก |
 +| ::: | frUserDataset1Next() | สร้าง Event ที่ทำงานเมื่อ DataSet ถูกอ่านครั้งถัดไป |
 +
 +<sxh delphi;>
 +    procedure FormCreate(Sender:​ TObject);
 +    procedure Button1Click(Sender:​ TObject);
 +    procedure Button2Click(Sender:​ TObject); ​   ​
 +    procedure frReport1GetValue(const ParName: String; var ParValue: Variant);
 +    procedure frUserDataset1CheckEOF(Sender:​ TObject; var Eof: Boolean);
 +    procedure frUserDataset1First(Sender:​ TObject);
 +    procedure frUserDataset1Next(Sender:​ TObject);
 +</​sxh>​
 +\\
 +**__หมายเหตุ__** - จะสังเกตว่าไม่มี Procedure เกี่ยวกับ frDesigner1 แต่ถึงกระนั้น frDesigner1 ก็ยังสำคัญเพราะหากเราไม่ใส่ Control ตัวนี้มาที่ Form1 เราจะไม่สามารถเรียกใช้งาน Procedure ที่ชื่อ frReport1.DesignReport() ซึ่มีไว้เปิด Report ในโหมด Design  ​
 +
 +
 +4. สร้างตัวแปรดังนี้
 + - ตัวนับ index ของ Array ชื่อ "​nc"​ ซึ่งเป็นตัวแปร integer
 + - Array ขนาด 2 x 20 ชื่อว่า "​ArrData[]"​
 + - ตัวปร integer ชื่อ "​nc"​ สำหรับใช้ระบุ index ของ ArrData[] ​
 +
 +
 +<sxh delphi;>
 +var
 +  Form1: TForm1;
 +  MyHeader:​string = '​INFORMATION';​
 +  MyName:​string = '​Lazarus-IDE';​
 +  MyLanguage:​string = '​Object Pascal';​
 +  MyNumber:​integer = 120;
 +  ArrData:​array[1..2,​1..7] of string;
 +  nc:integer = 1; 
 +</​sxh>​
 +\\
 +5. ให้ click เลือก Control ชื่อ frReport1 จากนั้นกด Right-Click จะมีเมนูให้เลือก ให้กดเลือกคำว่า Design Report จากนั้นจะเกิดหน้าต่างแสดงหน้ากระดาษเปล่าขึ้นมา ซึ่งหน้ากระดาษดังกล่าว คือ Report ในโหมด Design นั่นเอง เราสามารถปรับแก้ สร้าง Template ได้โดยง่ายบนหน้าต่างนี้\\
 +
 +จากนั้นให้ทำการ Save As .. ไฟล์ ชื่อ report1.lpr โดยไฟล์ดังกล่าวจะต้องอยู่ที่เดียวกันกับไฟล์ Project\\
 +
 +<hidden ภาพประกอบข้อ 5>
 +{{tutorial:​lazreport_createreport.png}}
 +
 +{{tutorial:​lazreport_designerview.png}}
 +</​hidden>​
 +\\
 +
 +6. พิมพ์คำสั่งเข้าไปใน Event ชื่อ FormCreate ดังนี้
 +
 +<sxh delphi;>
 +procedure TForm1.FormCreate(Sender:​ TObject);
 +begin
 +  Button1.Caption:​='​Print Preview';​
 +  Button2.Caption:​='​Edit Design Report';​
 +
 +  ArrData[1,​1]:​='​TButton';​
 +  ArrData[1,​2]:​='​TStringgrid';​
 +  ArrData[1,​3]:​='​TToolBar';​
 +  ArrData[1,​4]:​='​TSaveDialog';​
 +  ArrData[1,​5]:​='​TSQLQuery';​
 +  ArrData[1,​6]:​='​TSpinEdit';​
 +  ArrData[1,​7]:​='​TfrReport';​
 +
 +  ArrData[2,​1]:​='​Standard';​
 +  ArrData[2,​2]:​='​Additional';​
 +  ArrData[2,​3]:​='​Common Controls';​
 +  ArrData[2,​4]:​='​Dialogs';​
 +  ArrData[2,​5]:​='​SQLdb';​
 +  ArrData[2,​6]:​='​Misc';​
 +  ArrData[2,​7]:​='​LazReport';​
 +end;
 +</​sxh>​
 +\\
 +6.1 สองบรรทัดแรก เป็นการเปลี่ยน Caption ของ Button1, Button2 ส่วนบรรทัดที่เหลือ เป็นการใส่ข้อมูลให้กับ Array\\
 +6.2 สำหรับ Button1 เราจะกำหนดให้ Button1Click แล้วเรียกหน้าต่าง PrintPreview ของไฟล์ report1.lrf ขึ้นมาโดยใช้คำสั่งดังนี้ ​
 +
 +<sxh delphi;>
 +procedure TForm1.Button1Click(Sender:​ TObject);
 +begin
 +  frReport1.LoadFromFile('​report1.lrf'​);​
 +  frReport1.ShowReport;​
 +end; 
 +</​sxh>​
 +\\
 +6.3 สำหรับ Button2 เราจะกำหนดให้ Button2Click แล้วเรียกหน้าต่าง DesignReport ขึ้นมาเพื่อทำการแก้ใขไฟล์ report1.lrf โดยใช้คำสั่งดังนี้
 +
 +<sxh delphi;>
 +procedure TForm1.Button2Click(Sender:​ TObject);
 +begin
 +  frReport1.LoadFromFile('​report1.lrf'​);​
 +  frReport1.DesignReport;​
 +end;   
 +</​sxh>​
 +\\
 +
 +7. สำหรับการดึงข้อมูลจากโปรแกรม ไปพิมพ์ลงบน report ให้พิมพ์โค๊ดใน Event ที่ชื่อ frReport1GetValue ดังนี้
 +
 +<sxh delphi;>
 +procedure TForm1.frReport1GetValue(const ParName: String; ​
 +var ParValue: Variant);
 +begin
 +  if ParName='​Header'​ then
 +     ​ParValue:​=MyHeader;​
 +  if ParName='​Name'​ then
 +     ​ParValue:​=MyName;​
 +  if ParName='​Language'​ then
 +     ​ParValue:​=MyLanguage;​
 +  if ParName='​Number'​ then
 +     ​ParValue:​=MyNumber; ​ //No need to convert to string
 +  if ParName='​no'​ then
 +     ​ParValue:​=nc;​
 +  if ParName='​Arr1'​ then
 +     ​ParValue:​=ArrData[1,​nc];​
 +  if ParName='​Arr2'​ then
 +     ​ParValue:​=ArrData[2,​nc];​
 +end;   
 +</​sxh>​
 +\\
 +7.1 เนื่องจากเรามีข้อมูลแบบ Array ที่จำเป็นต้องมีตัวช่วยในการดึงข้อมูลแบบซ้ำๆ ให้เขียนโค๊ดลงบน Event ที่เหลือดังต่อไปนี้
 +
 +<sxh delphi;>
 +procedure TForm1.frUserDataset1CheckEOF(Sender:​ TObject; var Eof: Boolean);
 +begin
 +  Eof:​=nc>​length(ArrData[2]);​
 +end;
 +
 +procedure TForm1.frUserDataset1First(Sender:​ TObject);
 +begin
 +  nc:=1;
 +end;
 +
 +procedure TForm1.frUserDataset1Next(Sender:​ TObject);
 +begin
 +  inc(nc);
 +end;   
 +</​sxh>​
 +\\
 +มาถึงตอนนี้ เราจะได้โค๊ดทั้งหมดเป็นดังนี้
 +
 +<hidden Source Code - Unit1>
 +<sxh delphi;>
 +unit Unit1;
 +
 +{$mode objfpc}{$H+}
 +
 +interface
 +
 +uses
 +  Classes, SysUtils, FileUtil, LR_Class, LR_DSet, LR_Desgn, Forms, Controls,
 +  Graphics, Dialogs, StdCtrls;
 +
 +type
 +
 +  { TForm1 }
 +
 +  TForm1 = class(TForm)
 +    Button1: TButton;
 +    Button2: TButton;
 +    frDesigner1:​ TfrDesigner;​
 +    frReport1: TfrReport;
 +    frUserDataset1:​ TfrUserDataset;​
 +    procedure Button1Click(Sender:​ TObject);
 +    procedure Button2Click(Sender:​ TObject);
 +    procedure FormCreate(Sender:​ TObject);
 +    procedure frReport1GetValue(const ParName: String; var ParValue: Variant);
 +    procedure frUserDataset1CheckEOF(Sender:​ TObject; var Eof: Boolean);
 +    procedure frUserDataset1First(Sender:​ TObject);
 +    procedure frUserDataset1Next(Sender:​ TObject);
 +  private
 +
 +  public
 +
 +  end;
 +
 +var
 +  Form1: TForm1;
 +  MyHeader:​string = '​INFORMATION';​
 +  MyName:​string = '​Lazarus-IDE';​
 +  MyLanguage:​string = '​Object Pascal';​
 +  MyNumber:​integer = 120;
 +  ArrData:​array[1..2,​1..7] of string;
 +  nc:integer = 1;
 +
 +implementation
 +
 +{$R *.lfm}
 +
 +{ TForm1 }
 +
 +procedure TForm1.FormCreate(Sender:​ TObject);
 +begin
 +  Button1.Caption:​='​Print Preview';​
 +  Button2.Caption:​='​Edit Design Report';​
 +
 +  ArrData[1,​1]:​='​TButton';​
 +  ArrData[1,​2]:​='​TStringgrid';​
 +  ArrData[1,​3]:​='​TToolBar';​
 +  ArrData[1,​4]:​='​TSaveDialog';​
 +  ArrData[1,​5]:​='​TSQLQuery';​
 +  ArrData[1,​6]:​='​TSpinEdit';​
 +  ArrData[1,​7]:​='​TfrReport';​
 +
 +  ArrData[2,​1]:​='​Standard';​
 +  ArrData[2,​2]:​='​Additional';​
 +  ArrData[2,​3]:​='​Common Controls';​
 +  ArrData[2,​4]:​='​Dialogs';​
 +  ArrData[2,​5]:​='​SQLdb';​
 +  ArrData[2,​6]:​='​Misc';​
 +  ArrData[2,​7]:​='​LazReport';​
 +end;
 +
 +procedure TForm1.Button1Click(Sender:​ TObject);
 +begin
 +  frReport1.LoadFromFile('​report1.lrf'​);​
 +  frReport1.ShowReport;​
 +end;
 +
 +procedure TForm1.Button2Click(Sender:​ TObject);
 +begin
 +  frReport1.LoadFromFile('​report1.lrf'​);​
 +  frReport1.DesignReport;​
 +end;
 +
 +procedure TForm1.frReport1GetValue(const ParName: String; var ParValue: Variant
 +  );
 +begin
 +  if ParName='​Header'​ then
 +     ​ParValue:​=MyHeader;​
 +  if ParName='​Name'​ then
 +     ​ParValue:​=MyName;​
 +  if ParName='​Language'​ then
 +     ​ParValue:​=MyLanguage;​
 +  if ParName='​Number'​ then
 +     ​ParValue:​=MyNumber; ​ //No need to convert to string
 +  if ParName='​no'​ then
 +     ​ParValue:​=nc;​
 +  if ParName='​Arr1'​ then
 +     ​ParValue:​=ArrData[1,​nc];​
 +  if ParName='​Arr2'​ then
 +     ​ParValue:​=ArrData[2,​nc];​
 +end;
 +
 +procedure TForm1.frUserDataset1CheckEOF(Sender:​ TObject; var Eof: Boolean);
 +begin
 +  Eof:​=nc>​length(ArrData[2]);​
 +end;
 +
 +procedure TForm1.frUserDataset1First(Sender:​ TObject);
 +begin
 +  nc:=1;
 +end;
 +
 +procedure TForm1.frUserDataset1Next(Sender:​ TObject);
 +begin
 +  inc(nc);
 +end;
 +
 +end.
 +</​sxh>​
 +</​hidden>​
 +\\
 +
 +8. หลังจากตรวจทานโค๊ดทุกบรรทัดให้ถูกต้องแล้ว ให้กด Compile โปรแกรมได้ จะได้หน้าตาโปรแกรมเป็นดังนี้
 + 
 +{{tutorial:​lazreport_runform.png}}
 +\\
 +
 +8.1 เนื่องจากเรายังไม่ได้ตกแต่งหน้าตา report ใน Design View ดังนั้น ให้กดปุ่ม Button2 ที่ขึ้นข้อความว่า "Edit Design Report"​ จากนั้นจะมีหน้าต่างแสดง Design View ของ report1.lfr ขึ้นมา ให้จัดรูปแบบ report ตามในรูปข้างล่าง
 +
 +{{tutorial:​lazreport_designpreview.png}}
 +\\
 +
 +<hidden ภาพรายละเอียดของ Design Report>
 +{{tutorial:​lazreport_designpreviewcompleted.png}}
 +</​hidden>​
 +\\
 +
 +**__หมายเหตุ__** - หากเราลืมใส่ Control ที่ชื่อว่า frDesigner1 ลงบน Form ในตอนแรก จะทำให้ไม่สามารถแสดง Design View ด้วยการกดปุ่ม ฺButton2 ดังกล่าวได้ ดังนั้นจึงไม่ควรลืมใส่ frDesigner1 เด็ดขาด \\
 +
 +เมื่อแก้ใข report เสร็จแล้ว ควรกดปุ่ม save ทุกครั้ง
 +
 +8.2 หลังจากจัดการ report เสร็จเรียบร้อย สามารถเรียกดู Print Preview ได้จากการ click ปุ่ม Button1 จะมีหน้าต่าง Print Preview ขึ้นมาดังรูปข้างล่าง  ​
 +
 +{{tutorial:​lazreport_previewcompleted.png}}
 +\\
 +
 +**__หมายเหตุ__** - เราสามารถสั่งพิมพ์ report ดังกล่าวได้โดย click ที่รูป Printer ​
tutorial/printdatausinglazreport.1576985009.txt.gz · Last modified: 2019/12/22 10:23 by admin