DevExpress ile XtraReport Oluşturma (Master-Detail Report)

Hiç beklenmedik anda karşınıza XtraReport, Crystal Report vb. çat diye bir talep çıkabiliyor. Çok sık tekrarlanmadığından pratikliğiniz zaman aşımına uğrayabiliyor.

Bunu unutmamak adına, hem kendim hem de uğraşanlar için veri tabanından dinamik bir şekilde dataları çekip, Devex componentleri ile XtraReport oluşturup-almayı anlatacağım.

1. Visual Studio'da yeni bir proje oluşturuyoruz.

2. Solution Explorer'da Reports'a sağ tıklayıp Add-> New Item seçiyoruz.

3. DataSet'i seçip projemize ekliyoruz. DataSet' i tercihe göre isimlendiriyoruz. Ben "Northwind" dedim.

4. Daha sonra Server Explorer'dan  Data Connections' a sağ tıklayıp Add Connection seçiyoruz.

5. Açılan pencerede; Server name kısmına: (local) yazıyoruz ve aşağısında "Select or enter a database name" kısmında MSSQL' de oluşturduğumuz database ler listeleniyor, data alacağımız database i seçiyoruz ve OK diyoruz. Ben daha önceden oluşturmuş olduğum Northwind database i seçtim.

6. Seçtiğimiz database; tables, views.. vs. tüm içeriğiyle Server Explorer'a geldi. Şimdi raporlama için ihtiyaç duyduğumuz dataları barındıran tabloları seçiyoruz ve alana taşıyoruz. Birden fazla seçim için Ctrl tuşuna basılı tutarak tıklayın.

7. Ardından tabloda Fill,GetData()' yı sağ tıklayıp Preview Data' yı seçin.

8. Preview Data penceresinden table içindeki dataları görüntüleyebiliriz.

9. Daha sonra, projemize yeni bir item daha ekliyoruz.

10. Menüden DXperience v13.1 Report Class' ı seçiyoruz ve ardından tercihe göre isimlendirip Add diyoruz. Ben ürün ve müşteri ilişkili bir rapor hazırladığımdan ProductReport olarak isimlendirdim.

11. Rapor sayfası geldikten sonra sol üst taraftaki oka tıklıyoruz ve oradan DataSource seçiyoruz, listede çıkan database i tıklıyoruz. DataMember kısmında database içinden seçtiğimiz tabloları görebiliriz ve seçim yapabiliriz. Bende Categories tablosu seçili ve DataAdapter kısmında categoriesTableAdapter seçili durumda.

12. Rapor sayfamızda Detail kısmına tıklıyoruz. Field List' te bulunan tablolardan gerekli columnları detail içine taşıyoruz.

13. Preview' a tıkladığımızda rapora veri tabanından gerekli bilgilerin çekildiğini görebiliriz.

14. Detail'i seçip sağ tıklıyoruz ve Insert Detail Report -> CategoryProducts seçiyoruz. Eğer sadece bir tablodan data çekeceksek Unbound seçebiliriz ama iki tablo ilişkili olduğundan böyle yapıyoruz.

15. Detail altına  açılan kısma da diğer gerekli columnları ekliyoruz. Columnların raporda düzgün görünmesi için yerlerini ayarlıyoruz. En alttaki yatay çizgiyi de columnların hemen altına kadar taşımayı her seferinde yapıyoruz. Böylece birer satır boşluk olacak.

16. Tekrar Preview yaptığımızda rapor bu hali almış oluyor. Gerekirse Devex componentlerinden label vb. seçerek ilgili column için bilgi yazabiliriz. Sonrasında sol üstte raporu kaydedebiliriz.

ExtJS 'in Temel Yapısı ve Özellikleri

Ext.app.Application : Tek bir sayfaya ait ExtJS 4 uygulaması ve Viewport ile temsil edilir.

Ext.application({
                  name: 'Myapp',
                  launch: function(){
                            Ext.create('Ext.container.Viewport',{
                                    items: {
                                            html: 'my app'
                                           }
                                      });
                                    }
               });

Bu uygulamanın bütün sınıflarını tek bir ad altında toplar. Önce myapp adlı global bir değişken oluşturulur. myapp, başvuru almak için GetApplication yöntemini kullanır.

var app=MyApp.getApplication(); => Şimdi kullanıma hazır ve genellikle viewport ile kullanılır.

Ext.app.Controller : Controller ile birlikte uygulamanın bağlanması sağlanır. Burada kullanıcıları yönetmek için bir denetleyici oluşturulur.

Ext.define('MyApp.controller.Users',{
                         extend: 'Ext.app.Controller',
                         init  :  function(){
                                  this.control({
                                     'viewport>panel':{
                                         render:this.onRendered
                                                      } 
                                               });
                                            },
                   onPanelRendered: function(){
                          console.log('The panel was rendered');
                                              }
                });

Uygulamayı takip edebilmek için init fonksiyonu güncellendi.Init fonksiyonu; doğrudan viewportun panelini bulur.

Ext.button.Button: Tıklandığında kodu çalıştırmak veya kullanmak için buton oluşturur.

Ext.create('Ext.Button',{
                         text: 'Click me',
                         renderTo: Ext.getBody(),
                         handler: function(){
                                  alert: ('Butona tıkladın');
                                            }
          });


Ext.button.Cycle: Bir buton içerisinde birden fazla özellik seçebiliriz. Butonda açılan bir choose menü gibi düşünebiliriz.




Ext.button.Split: Tıklandığında ayrı bir olay açılır.

Ext.container.ButtonGroup: Butonların sekmeli bir şekilde düzenlenmesini sağlar.

Ext.create('Ext.panel.Panel',{
           title: 'Panel with...',
           width: 500,
           height: 300,
           renderTo: document.body,
           bodyPadding: 10,
           html: 'HTML Panel Content',
           tbar: [{
                   xtype: 'buttongroup',
                   columns: 3,
                   title:
                   items: [{
                             text: ..
                             scale: ..  },
                  ...
                 {
                  ...
                 }]
                  
Sınıf Örneği:
function Bilet(){
                  this.adet=0;
                  this.tip=null;
                  this.getAdet=function(){
                                       return "Adet: "+this.adet;
                                         };
                }

Nesne Örneği:
var bilet= new Bilet();
//ya da
var bilet={
           adet : 0,
           'tip': null,
              getAdet: function(){
                                return this.adet;
                              };
          toString: function(){
                                return "Adet: "+this.adet;
                              };
          }
             
var bilet= new Object();
bilet.adet= 0; 
bilet.'tip'= null;
Bilet.getAdet= function(){...};
Bilet.toString= function(){...};


Kalıtım: Piyango.prototype=new Bilet();
         Piyango.prototype.constructor=Bilet;
         function Piyango(){
                            this.tip='PIYANGO';
                            this.toString=function(){
                                   return "Adet: "+this.adet;
                                                    };
                                                                    }
Bilete getTip adlı bir metod eklediğimizde Piyango'da da görünmesini istiyoruz.
Bilet.prototype.getTip=
             function(){
                        return this.tip;
                       }


'Super' metodları çocuk sınıfından çağırmak
Piyango.prototype.getTip=function(){
            Bilet.protoype.getTip.call(this);
                                   }

• Function.call javascriptin sağladığı bir özelliktir. Eğer çalıştırılan metot parametre alıyorsa "this"den sonra sırasıyla gönderilmelidir.
• JS metotlarında override,overload yoktur. Bir bağlam içinde, aynı isimli (parametreler önemli değildir) birden fazla metot yazıldığında hata vermez.

function method1(p1,p2){...} => geçersiz

function method1(abc){...}

1. Tip kontrolü yoktur.
2. Metot çağırırken parametre sayısı önemli değildir. Çalışma zamanında önemlidir.

Action: ExtJS' de eylem oluşturmak mümkündür.

var action=new Ext.Action //yeni eylem tanımladık.

({

   text: 'Seçim 1',

   handler: function(){ //tıklandığında yapması gerekenleri //içeren fonksiyon

Ext.Msg.alert('Tıkladın','Seçim 1'e tıkladınız');

                     });

Doğrudan bir araç çubuğuna eylem eklemek için;

(oluşturduğumuz form elemanının içinde)

...

tbar[                      //Araç çubuğunda bir action menu oluşturduk

     action,

     {

      text: 'Action Menu',

      menu: [action]

     }]

new Ext.Button(action) //butona eylem ekleme
action.setText(text);  //butonun adını değiştirme
action.setDisabled(!action.isDisabled());
this.setText(action.isDisabled() ? 'Aktif et' : 'Pasif et');

Bir edit menüsü butonu oluşturabiliriz ve action ile butona eylem verebiliriz.

var editMenuBtn={
                  text: 'Edit',
                  menu: [ pasteAction ]} 
/*pasteAction öncesinde şunu tanımlamalıyız: 
var pasteAction= new Ext.Action({
                                 text: 'Paste',
                                 handler: genericHandler}); genericHandler içine de özelliğini istediğmiiz fonksiyonu atabiliriz */

Kısa Notlar:

• new Ext.Action
• Değişken tanımlama: var
• ExtJS bir script dilidir ve <script></script> arasında yazılır.
• Script,<head></head> veya <body></body> içerisinde tanımlanabilir.
• Script tipleri tanımlanır ve kodlar Ext.onReady(function(){...}); içinde yazılır.

Accordion: ExtJS ile accordion penceresi ve pencereye accordion paneli koymak mümkündür. Bunun için yeni bir pencere oluşturmak ve layout parametresini accordion olarak belirlemek yeterlidir.

Bir panel oluşturalım. ( var panel1={ 
                           xtype: 'panel', 
                           title: 'Panel1',
                           html: 'xy'  })

Bunu pencerede çağırıp; pencereye accordion özelliği verelim.

new Ext.Window{

           width: 500,
           height: 300,
           layout: 'accordion',
           layoutConfig{ animated: true},// panellerin kayarak inmesini sağlar, dinamik bir görünüm gibi    
           items: [panel1]}).show(); //elemanların içinde paneli çağırıp, gösteriyoruz.




Viewport: ExtJS'de görünüm alanı oluşturmayı sağlar. İçine butondan pencereye, girdden treeye her şeyi ekleyebiliriz. Bir container gibi düşünebiliriz. collapsible: true dediğimizde viewport açılıp/kapanma özelliğine sahip olur.

new Ext.Viewport ile çağrılır.

new Ext.Viewport({
                  layout: 'border',
                  defaults: {
                             frame: true,
                             split: true
                            }
                 },

                items: [{

                    region:'north',   //konumu ortada

                                                  minHeight: 300

                       ...

                    collapsible: true

                        },

                        {                     

                    xtype: 'container',  //viewportun geri kalanını doldurur.

                    region:'center',

                    layout: 'fit'

                       ...    

                                                          }

var panel1= new Ext.Panel   //panel oluşturur.

hbox: Viewport'a panel koyabildiğimiz gibi window içinde hbox da tanımlayabiliriz.

new Ext.Window({
                layout: 'hbox',
                    ...
                layoutConfig: { pack: 'start' }
                    ...
                items: [
                        {
                         title: 'panel1',
                                                              height: 100,
                         width: ... }, ...
                       ]
               }).show();

Grid: ExtJS ile uğraşırken en çok grid özellikleri işime yaramıştı. Grid, tablo verilerini dinamik olarak değiştirmek, gizlemek, sıralamak, sütunlar ile esnek bir şekilde çalışmak vb. işlemlerin yapılmasına olanak sağlar.

var gridOzellik= new Ext.grid.PropertyGrid({
                   ...
                   propertyNames: {
                        tasted: QA,
                           ...
                                  },
                   source: {//tablo elemanları beirlenir.
                       '(isim)': 'Grid Özellikleri',
                       gruplama: false,
                             //tarih tanımlama fonksiyonu
                       tarih: new Date(Date.parse('01.01.2014'));
                       borderWidth: 3 //kenar genişliği özelliği vs.
                           },
                  viewConfig: {
                       forceFit: true,
                       scrollOffset: 2
                              }          });

Daha sonra istediğimiz şekilde (örn. buton içinde) çağırabiliriz.

ozellikliGrid.setSource({
  '(isim)': 'Grid Özellikleri',
  gruplama: false });

//setSource ile butona tıklayınca verileri default haline getirir.


Tooltip: Ext.Tooltip kütüphanesini kullanır. Daha sonra tanımlanan tooltip div'de çağrılır.

new Ext.Tooltip({
                 target: 'tip1',
                  html: 'basit' });

div'de çağırıyoruz

...
<body>
<div id='tip1' class=...> Temel</div>
</body>

• dismissDelay: 5000 //5 saniye boyunca açık olur.
• closable: true //kapatılabilme özelliği
• draggable: true //sürüklenebilme özelliği

Ext.dd sınıfı drag-drop olayını yönetmeyi sağlar.
Ext.apply DD yeni oluşturulan örneklere geçersiz nesne uygulamayı sağlar.

Textarea: Metin kutusu alanı. Herhangi bir panelde (formpanel,viewport vb.) items içinde tanımlanır.

items: [{
          xtype: 'textarea',
          name: ...,
          labelSeparator: ...,
          anchor: '%100'
        }, {...} ]


Statusbar: Statusbar eklemek için;
<link rel="stylesheet" type="text/css" href="ext-3.4.0"/examples/ux/statusbar/css/statusbar.css /> satırı <head> içine eklenir.

Önce bir fonksiyon tanımlanır.

var loadFn= function(btn,statusBar){
    btn=Ext.getCmp(btn); //veriyi alır.
    statusBar=Ext.getCmp(statusBar);
    btn.disable();
    statusBar.showBusy(); //meşgul göster.

(function(){
            statusBar.clearStatus({useDefaults: true});
            btn.enable(); }).defer(2000);
           });

new Ext.Panel({
               collapsible: true,
               bodyStyle: 'padding 10 px;',
               ...
               items[{
                       xtype: 'button',
                       ...
                       bbar: new Ext.ux.StatusBar({//statusbar
                                                   ...
                                                     //özellikleri tanımlanır.
                                                  });
}]
});