User Tools

Site Tools


tutorial:printdatausinglazreport

Differences

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

Link to this comparison view

Next revision
Previous revision
tutorial:printdatausinglazreport [2019/12/22 08:43]
admin created
tutorial:printdatausinglazreport [2019/12/29 23:24] (current)
admin
Line 7: Line 7:
  
 =====เริ่มต้นใช้งาน===== =====เริ่มต้นใช้งาน=====
-ก่อนใช้งาน ต้องทำการ Download ไฟล์ Package ของ LazReport มาติดตั้งเสียก่อน+ในหัวข้อนี้ จะแสดงตัวอย่างการใช้งาน LazReport เพื่อดึงข้อมูลทั้งที่เป็นตัวแปรเดี่ยว และแบบ Array\\ 
 + 
 +1. ก่อนใช้งาน ต้องทำการ Download ไฟล์ Package ของ LazReport มาติดตั้งเสียก่อน ​\\ 
 + 
 +2. สร้างโปรเจคที่เป็น Form-Based Application จากนั้นให้นำ Control 5 ตัวมาวางบน Form1 ดังนี้\\ 
 +2.1 Standrad Control ให้นำ ​ Button1 Button2 มาวางบน Form1\\ 
 +2.2 LazReport Control ให้นำ frReport1, frUserDataset1 และ frDesigner1 มาวางบน Form1 \\ 
 + 
 +{{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.1576978995.txt.gz · Last modified: 2019/12/22 08:43 by admin