Italian community of Lazarus and Free Pascal

Italiano		English
L'esempio che vedremo durante tutta la guida è scaricabile al seguente indirizzo		The example that we will see throughout the guide can be downloaded at the following address

//www.lazaruspascal.it/esempi/ExtGrid_Example.zip

Prima di partire si necessita di capire cosa è Ajax, perchè ExtPascal è un wrapper per ExtJS, quindi non ne modifica la logica permette solo di usare una sintassi pascal.		Before starting you need to understand what Ajax is, why ExtPascal is a wrapper for ExtJS, so does not affect the logic just allows you to use a Pascal syntax.
AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo per la realizzazione di applicazioni web interattive (Rich Internet Application). Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente. AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Normalmente le funzioni richiamate sono scritte con il linguaggio JavaScript. Tuttavia, e a dispetto del nome, l'uso di JavaScript e di XML non è obbligatorio, come non è necessario che le richieste di caricamento debbano essere necessariamente asincrone. AJAX è una tecnica multi-piattaforma utilizzabile su molti sistemi operativi, architetture informatiche e browser web, ed esistono numerose implementazioni open source di librerie e framework. La tecnica Ajax utilizza una combinazione di:     HTML (o XHTML) e CSS per il markup e lo stile;     DOM (Document Object Model) manipolato attraverso un linguaggio ECMAScript come JavaScript o JScript per mostrare le informazioni ed interagirvi;     l'oggetto XMLHttpRequest per l'interscambio asincrono dei dati tra il browser dell'utente e il web server. In alcuni framework Ajax e in certe situazioni, può essere usato un oggetto Iframe invece di XMLHttpRequest per scambiare i dati con il server e, in altre implementazioni, tag  aggiunti dinamicamente ( JSON );     in genere viene usato XML come formato di scambio dei dati, anche se di fatto qualunque formato può essere utilizzato, incluso testo semplice, HTML preformattato, JSON e perfino EBML. Questi file sono solitamente generati dinamicamente da script lato server. Come DHTML o LAMP, Ajax non è una tecnologia individuale, piuttosto è un gruppo di tecnologie utilizzate insieme. Le applicazioni web che usano Ajax richiedono browser che supportano le tecnologie necessarie (quelle dell'elenco sopra). Questi browser includono: Mozilla, Firefox, Opera, Konqueror, Safari, Internet Explorer e Chrome. Tuttavia, per specifica, "Opera non supporta la formattazione degli oggetti XSL".		AJAX stands for Asynchronous JavaScript and XML, is a development technique for the creation of interactive web applications (RIAs). Developing applications with HTML AJAX is based on an exchange of data in the background between web browsers and servers, which allows dynamic update of a web page without reloading explicitly by the user. AJAX is asynchronous in the sense that the extra data are required to the server and loaded in the background without interfering with the behavior of the existing page. Normally the called functions are written in JavaScript. However, and despite the name, the use of JavaScript and XML is not required as it is not necessary that the required load must necessarily be asynchronous. AJAX is a cross-platform technique usable on many operating systems, architectures, and web browsers, and there are numerous implementations of open source libraries and frameworks. The Ajax technique uses a combination of:     HTML (or XHTML) and CSS for the markup and style;     DOM (Document Object Model) manipulated through an ECMAScript as JavaScript or JScript to display information and interact;     the XMLHttpRequest object for asynchronous exchange of data between your browser and the web server. In some Ajax frameworks and in certain situations, can be used an Iframe instead of XMLHttpRequest object to exchange data with the server and, in other implementations, dynamically added  (json);     is typically used as exchange format XML data, even if in fact any size can be used, including plain text, preformatted HTML, JSON and even EBML. These files are usually generated dynamically by server side scripts. Like DHTML, or LAMP, Ajax is not an individual technology, rather it is a group of technologies together. Web applications that use Ajax require browsers that support the technologies required (those on the list above). These browsers include Mozilla, Firefox, Opera, Konqueror, Safari, Internet Explorer and Chrome. However, for specific, "Opera does not support XSL formatting objects."
Innanzitutto vediamo come collegarci ad un database con zeos e come prendiamo i dati e li formattiamo per essere visualizzati nella Griglia di ExtPascal Toolkit. Per fare questo basta implementare la seguente unit scritta da me prendendo spunto da altre unit trovate su internet		First we see how to link to a database with ZEOS and how we take the data and we format to be displayed in the grid ExtPascal Toolkit. To do this just implement the following unit written by me taking a cue from other units found on the Internet


{Libreria realizzata da Sammarco Francesco - www.lazaruspascal.it}

unit ExtZQuery;

{$mode delphi}

interface

uses
  SysUtils, Classes, ZDataset,
{$IFDEF UseRuntime}
  Ext, ExtPascal, ExtPascalUtils, ExtForm,
  ExtData, ExtGrid, ExtUtil, ExtAir, ExtDd,
  ExtLayout, ExtMenu, ExtDirect, ExtState, ExtTree,
  ExtUxForm;

type
  {$M+}
  TExtPanel_Tab = TExtPanel;
  TExtFormTextField_Grid = TExtFormTextField;
  TExtFormNumberField_Grid = TExtFormNumberField;
  TExtFormDateField_Grid = TExtFormDateField;
  TExtFormTimeField_Grid = TExtFormTimeField;
  TExtFormCheckbox_Grid = TExtFormCheckbox;
  TExtFormComboBox_Grid = TExtFormComboBox;
  {$M-}

{$ELSE}
  ExtP_Design_Ctrls, ExtP_Design_Grid, ZConnection;
{$ENDIF}

type
  TExtZQuery = class(TZQuery)
      DataStore:TExtDataArrayStore;
  public
      MyErr: string;
      constructor Create(Owner : TComponent); override;
      destructor Destroy; override;
      function TransformsDatasetToDataStore(): boolean;
      function GetNumCols(): integer;
      function GetNumRows(): integer;
  private
         NumCols: integer;
         NumRows: integer;
  published
  end;

implementation

uses
    StrUtils, DateUtils, ZConnection;

constructor TExtZQuery.Create(Owner : TComponent);
begin
  inherited;
  Connection := TZConnection.Create(nil);
  with Connection do
  begin
    HostName := 'localhost';
    Database := 'c:\db_grid.s3db';
    User     := '';
    Password := '';
    Protocol := 'sqlite-3';
    Connect;
  end;
  DataStore:=TExtDataArrayStore.Create;
end;

destructor TExtZQuery.Destroy;
begin
  Close;
  Connection.Disconnect;
  Connection.Free;
  inherited;
end;

function TExtZQuery.TransformsDatasetToDataStore(): boolean;
var
   ret: boolean;
   i: integer;
   app: string;
begin
     try
        try
           NumCols:=0;
           NumRows:=0;
           MyErr:='';
           ret:=TRUE;
           With DataStore do
           begin
                //imposto le colonne
                if FieldDefs.Count>0 then
                begin
                     for i:=0 to FieldDefs.Count-1 do
                     begin
                          TExtDataField.AddTo(Fields).Name := FieldDefs.Items[i].Name;
                     end;
                     NumCols:=FieldDefs.Count;
                end;
                //inserisco le righe
                if not EOF then
                begin
                   First;
                   while not EOF do
                   begin
                        app:=app + '[';
                        for i:=0 to FieldDefs.Count-1 do
                        begin
                             app:= app + '"' + FieldByName(FieldDefs.Items[i].Name).asString + '"';
                             if i0 then
        app:=app;
     GetNumCols:=app;
end;

function TExtZQuery.GetNumRows(): integer;
var
   app: integer;
begin
     app:=NumRows;
     if app>0 then
        app:=app-1;
     GetNumRows:=app;
end;

end.


Analizzando la unit capiamo che nella create dell'oggetto TExtZQuery impostiamo i dati per collegarci al DB, mentre con TransformsDatasetToDataStore() prendiamo il risultato della query e la convertiamo in un formato leggibile dalla griglia.		By analyzing the unit we understand that the object created TExtZQuery we set the data to connect to the DB, while TransformsDatasetToDataStore () we take the result of the query and convert it to a format readable by the grid.
Durante la creazione di un nuovo progetto per poter usare le zeos bisogna trascinare un oggetto TZConnection su una form, poi cancellare la TZConnection e togliere le unit di zeos dal file *.LPR		When creating a new project to use the ZEOS TZConnection must drag an object on a form, then delete the TZConnection and remove the unit from the file ZEOS *.LPR
Ora vediamo il contenuto della form principale		Now we see the contents of the main form


unit Unit1;

interface

uses
  SysUtils, Classes, ExtZQuery,
{$IFDEF UseRuntime}
  Ext, ExtPascal, ExtPascalUtils, ExtForm,
  ExtData, ExtGrid, ExtUtil, ExtAir, ExtDd,
  ExtLayout, ExtMenu, ExtDirect, ExtState, ExtTree,
  ExtUxForm;

type
  {$M+}
  TExtPanel_Tab = TExtPanel;
  TExtFormTextField_Grid = TExtFormTextField;
  TExtFormNumberField_Grid = TExtFormNumberField;
  TExtFormDateField_Grid = TExtFormDateField;
  TExtFormTimeField_Grid = TExtFormTimeField;
  TExtFormCheckbox_Grid = TExtFormCheckbox;
  TExtFormComboBox_Grid = TExtFormComboBox;
  {$M-}

{$ELSE}
       ExtP_Design_Ctrls, ExtP_Design_Grid, ZConnection, StdCtrls;
{$ENDIF}

type

  { TMyForm }

  TMyForm = class(TExtWindow)
    ExtButton1: TExtButton;
    ExtButton2: TExtButton;
    ExtFormLabel3: TExtFormLabel;
    ExtFormLabel4: TExtFormLabel;
    ExtFormLabel5: TExtFormLabel;
    ExtFormLabel6: TExtFormLabel;
    Txt_Id_Old: TExtFormTextField;
    Txt_Row: TExtFormTextField;
    Txt_Row_Old: TExtFormTextField;
    Txt_App2: TExtFormTextField;
    RowSelect : TExtGridRowSelectionModel;
    Btn_Ins: TExtButton;
    Btn_Del: TExtButton;
    ExtFormLabel1: TExtFormLabel;
    ExtFormLabel2: TExtFormLabel;
    Txt_TotRow: TExtFormTextField;
    Txt_TotCol: TExtFormTextField;
    MyId_Field: TExtFormTextField_Grid;
    MyValue_Field: TExtFormTextField_Grid;
    Txt_Id: TExtFormTextField;
    MiaConn: TExtZQuery;
    MyGrid: TExtGridEditorGridPanel;
    procedure Btn_DelClick;
    procedure ExtButton1Click;
    procedure ExtButton2Click;
    procedure MyGridRowClick(This : TExtGridGridPanel; RowIndex : Integer; E : TExtEventObjectSingleton);
    procedure Btn_InsClick;
    procedure CaricaGriglia;
    procedure MyVersionOfGetCell();
    procedure MyGetCell;
    procedure MyDelete;
    procedure RowSelectOnRowselect(This : TExtGridRowSelectionModel; RowIndex : Integer; R : TExtDataRecord);
    procedure GestisciRigaSelezionata();
    procedure StampaValore;
    procedure MyValue_FieldOnFocus(This : TExtFormField);
    procedure AggiornaValoriRiga();
  public
    constructor Create;
    procedure Show;
  private
    FlagEvitaLoop: integer;
  end;
implementation

uses
  AppThread;

procedure TMyForm.Btn_InsClick;
var
   MiaExec: TExtZQuery;
begin
     MiaExec:=TExtZQuery.Create(nil);
     MiaExec.SQL.Text:='insert into MyTable(MyValue)VALUES("");'; //inserisco una riga vuota
     MiaExec.ExecSQL;
     MiaExec.Destroy;
     CaricaGriglia;
     CurrentThread.NumRows:=MiaConn.GetNumRows();
     CurrentThread.NumCols:=MiaConn.GetNumCols();
     Txt_TotRow.SetValue(IntToStr(CurrentThread.NumRows));
     Txt_TotCol.SetValue(IntToStr(CurrentThread.NumCols));
end;

procedure TMyForm.CaricaGriglia;
begin
     {inizio righe di codice per vedere nella griglia quello che ho nel db}
     MiaConn:=TExtZQuery.Create(nil);
     MiaConn.SQL.Text:='select Id, MyValue from MyTable;';
     MiaConn.Open;
     MiaConn.TransformsDatasetToDataStore();
     MyGrid.Reconfigure(MiaConn.DataStore, TExtGridColumnModel(MyGrid.ColModel));
     {fine righe di codice per vedere nella griglia quello che ho nel db}
end;

procedure TMyForm.AggiornaValoriRiga();
var
   MiaExec: TExtZQuery;
begin
     MiaExec:=TExtZQuery.Create(nil);
     MiaExec.SQL.Text:='UPDATE MyTable SET MyValue="' + CurrentThread.Query['NewValue'] + '" WHERE Id=' + CurrentThread.Query['IdRecord'] + ';';
     MiaExec.ExecSQL;
     MiaExec.Destroy;
end;
procedure TMyForm.MyGridRowClick(This : TExtGridGridPanel; RowIndex : Integer; E : TExtEventObjectSingleton);
begin
     //se clicco nella cella
     Ajax(MyVersionOfGetCell,['row',RowIndex,'col','Id']);
end;

procedure TMyForm.Btn_DelClick;
var
   ShowConfig:TExtShowConfig;
begin
     ShowConfig:=TExtShowConfig.Create;
     with ShowConfig do
     begin
          Title:='ATTENZIONE';
          Msg:='Vuoi cancellare la riga selezionata?';
          Icon:=ExtMessageBox.Question;
          Buttons:=ExtMessageBox.YesNoCancel;
          AnimEl:='Id';
          Fn:=Ajax(MyDelete,['ButtonId','%0','IdDaCancellare',Txt_Id.GetValue]);
     end;
     ExtMessageBox.Show(ShowConfig);
     ShowConfig.Free;
end;


procedure TMyForm.ExtButton1Click;
begin
     //stampo l'indice della colonna che voglio leggere ovvero la colonna MyValue
     Ajax(StampaValore,['valore',TExtGridColumnModel(MyGrid.ColModel).FindColumnIndex('MyValue')]);
end;

procedure TMyForm.ExtButton2Click;
var
   DataStore: TExtDataStore;
   DataRecord: TextDataRecord;
begin
     with MyGrid do
     begin
          DataStore:=TExtDataStore.Create();
          DataStore:=TExtDataStore(GetStore);
          DataRecord:=TextDataRecord(DataStore.GetAt(0));

          Ajax(StampaValore,['valore',DataRecord.Get('MyValue')]);
     end;
end;

procedure TMyForm.StampaValore;
begin
     ExtMessageBox.Alert('valore',CurrentThread.Query['valore']);
end;

procedure TMyForm.MyDelete;
var
   MiaExec: TExtZQuery;
   Risultato: string;
begin
     Risultato:=CurrentThread.Query['ButtonId'];

     if StrToInt(CurrentThread.Query['IdDaCancellare'])=0 then
       begin
            with MyGrid do
            begin
                 DataStoreNewValue:=TExtDataStore.Create();
                 DataStoreNewValue:=TExtDataStore(GetStore);
                 DataRecordNewValue:=TextDataRecord(DataStoreNewValue.GetAt(StrToInt(CurrentThread.Query['RowIndexOld'])));

                 Ajax(AggiornaValoriRiga,['Idrecord',CurrentThread.Query['MyDataSetIdOld'],'NewValue',DataRecordNewValue.Get('MyValue')]);
            end;
       end;
end;

procedure TMyForm.Show;
begin
  inherited Show;
  CaricaGriglia;
  CurrentThread.NumRows:=MiaConn.GetNumRows();
  CurrentThread.NumCols:=MiaConn.GetNumCols();
  Txt_TotRow.SetValue(IntToStr(CurrentThread.NumRows));
  Txt_TotCol.SetValue(IntToStr(CurrentThread.NumCols));
  Txt_Id.SetValue('-1');
  Txt_Id_Old.SetValue('-1');
  Txt_Row.SetValue('-1');
  Txt_Row_Old.SetValue('-1');
  Txt_App2.SetValue('-1');
end;

end.


Bene la prima cosa che dovrebbe saltare all'occhio è la creazione della form

Well the first thing that should catch the eye is the creation of the form



constructor TMyForm.Create;
begin
  inherited;
{$IFDEF UseRuntime}
 {$I *.inc}
{$ENDIF}
        {creo l'oggetto TExtGridRowSelectionModel che mi servirà a recuperare le righe selezionate}
        //RowSelect := TExtGridRowSelectionModel.Create(JSObject('singleSelect:true')); {permetto che venga selezionata una sola riga per volta}
        RowSelect := TExtGridRowSelectionModel.Create;
        RowSelect.SingleSelect := True;
        RowSelect.OnRowselect := RowSelectOnRowselect; {assegno l'evento apposito sulla selezione di una riga}

        MyGrid.SelModel := RowSelect; //assegno alla griglia l'oggetto che mi permetterà di lavorare con i dati selezionati
        MyGrid.onRowClick:=MyGridRowClick; //se clicco su una cella della griglia
        MyValue_Field.OnFocus:=MyValue_FieldOnFocus;
end;



Durante la create della form creo un oggetto TExtGridRowSelectionModel che poi assegno alla griglia e che mi permette di leggere la riga selezionata, in più gestisco gli eventi di selezione di una nuova riga, del click all'interno di una cella e dell'entrata dell'oggetto che mi permette di modificare il valore di un campo della mia griglia nello specifico quello che contiene il campo MyValue della query che popola la griglia.		When you create the form I create an object TExtGridRowSelectionModel then check the grid and that allows me to read the selected row, plus manage the events of selecting a new row, click inside of a cell and the entry of 'object that allows me to change the value of a field in my grid in the specific field that contains the MyValue the query that populates the grid.
Mentre con la Show vado a valorizzare le mie variabili e gli oggetti che uso come variabili. E carico la griglia con i valori dellla mia query.		While the show going to enhance my variables and objects used as variables. And load the grid with values in my query.



procedure TMyForm.Show;
begin
  inherited Show;
  CaricaGriglia;
  CurrentThread.NumRows:=MiaConn.GetNumRows();
  CurrentThread.NumCols:=MiaConn.GetNumCols();
  Txt_TotRow.SetValue(IntToStr(CurrentThread.NumRows));
  Txt_TotCol.SetValue(IntToStr(CurrentThread.NumCols));
  Txt_Id.SetValue('-1');
  Txt_Id_Old.SetValue('-1');
  Txt_Row.SetValue('-1');
  Txt_Row_Old.SetValue('-1');
  Txt_App2.SetValue('-1');
end;




Vediamo come carichiamo i dati all'interno della griglia

Let's see how to load data into the grid.



procedure TMyForm.CaricaGriglia;
begin
     {inizio righe di codice per vedere nella griglia quello che ho nel db}
     MiaConn:=TExtZQuery.Create(nil);
     MiaConn.SQL.Text:='select Id, MyValue from MyTable;';
     MiaConn.Open;
     MiaConn.TransformsDatasetToDataStore();
     MyGrid.Reconfigure(MiaConn.DataStore, TExtGridColumnModel(MyGrid.ColModel));
     {fine righe di codice per vedere nella griglia quello che ho nel db}
end;



Con le prime righe creiamo la query e la eseguiamo e in successione la traduco nel formato leggibile dalla griglia. Mentre con MyGrid.Reconfigure(MiaConn.DataStore, TExtGridColumnModel(MyGrid.ColModel)); popolo la griglia		With the first lines we create and execute the query sequence and translate it into readable format from the grid. With the MyGrid.Reconfigure(MiaConn.DataStore, TExtGridColumnModel(MyGrid.ColModel)); while people the grid
Ora prima di procedere vediamo come si usa Ajax con il binomio Lazarus ed ExtPascal		Now before we see how to use Ajax with the binomial and Lazarus ExtPascal

Browser -> Server -> Browser



Ajax(NomeProcedura,['nomecampo1',valore1,'nomecampo2',valore2,'nomecampoN',valoreN]);
.
.
.
procedure NomeClasse.NomeProcedura();
var
   app1,app2,appN: string;
begin
app1:=CurrentThread.Query['nomecampo1'];
app2:=CurrentThread.Query['nomecampo2'];
appN:=CurrentThread.Query['nomecampoN'];

.
.
.
end;



Bene capito questo tutto il resto del codice è facile da capire, perchè si basa su questo concetto. L'unica cosa che dovete sapere è che quando premete sul tasto inserisci crea nel database una riga vuota e quindi i campi devono accettare il null e poi uso la griglia come se fosse un foglio di calcolo, al cambio della riga vado a salvare i dati della riga appena abbandonata. Mentre quando cancello cancello la riga selezionata.		Well understood that the rest of the code is easy to understand, because it relies on this concept. The only thing you should know is that when you press the enter button creates a blank row in the database and therefore must accept the null fields and then use the grid like a spreadsheet, the change of the line going to save the data line just left. While gate gate when the selected row.
Un ultima cosa, quando andate a leggere un campo di una riga che non è quella selezionata vi è concesso leggere solo un campo per volta quindi vi conviene nel caso di lettura di più campi usare delle chiamate Ajax nidificate.		One last thing, when you read a field of a line that is not selected will be granted only read one field at a time so you might want to read in case of multiple fields using Ajax calls nested.
Ora non vi resta che studiare l'esempio e fare delle prove. Se attraverso le vostre prove trovate altre soluzioni o maniere migliori di fare quello che ho fatto io per cortesia segnalatemi le migliorie. Per provare l'esempio dopo averlo scaricato vi consiglio di sistemare il database in un posto facilmente raggiungibile e andate a parametrizzare Project -> Project Options -> Paths -> Target File Name (-o) Nel modo che più vi aggrada! Come ultima cosa chiedo scusa agli amici che leggeranno l'inglese, ho usato il traduttore di google.		Now you just need to study the example and experiment. If through your trials found other solutions or better ways to do what I did please Notify the improvements. Last thing I apologize to friends who read English, I used the google translator. To run the example after downloading I suggest you place the database in an easily accessible place and go to parameterize Project -> Project Options -> Paths -> Target File Name (-o) In a way that suits you best!

Italiano		English
Con questo mini howto vedremo come è possibile installare ExtPascal su Lazarus. L'installazione che ho eseguito è stata effettuata su LinuxMint 11 ma credo che possa tranquillamente essere ritenuta valida per qualsiasi installazione di Lazarus/Free Pascal. Il primo requisito fondamentale da verificare è la presenza dei componenti Indy e la compilazione (andata a buon fine) di uno dei progetti demo del pacchetto stesso. Senza Indy è inutile proseguire con l'installazione di ExtPascal. Comunque, a titolo informativo, nel mio caso si tratta di Indy 10. Per effettuare la mia installazione ho seguito la guida che trovate in:		With this mini howto we'll see how install ExtPascal in Lazarus. I tryed this installation on LinuxMint 11 but, I think, it may safely be considered valid for any linux distro with Lazarus / Free Pascal already installed.                                                             The first prerequisite is to verify the Indy components existence and (successful) compilation of package itself and a demo project. Without Indy is useless to continue with the installation of ExtPascal. However, for information, in my case I used Indy 10.                                                       To perform my installation I followed the guide found in:

http://code.google.com/p/extpascal/wiki/GettingStarted



Download di ExtJs

Il primo dubbio arriva già ora. ExtJs, nel momento in cui scrivo, è alla versione 4; l'ultima release disponibile della 3 è la 3.4.0 mentre nella guida si fa riferimento esplicitamente alla 3.2.1. Il dubbio è presto sciolto: scaricate esclusivamente la 3.2.1 in quanto con la 3.4.0 la compilazione dei progetti ExtPascal va a buon fine ma a run-time avrete delle bruttissime sorprese... Usate quindi, per il download, il seguente link

The first question comes immediately. ExtJS, at the time of writing, is at release 4, the latest minor release (referred to 3) is 3.4.0, while the guide refers explicitly to 3.2.1. The doubt is soon dissolved: download the 3.2.1 cause compilation using 3.4.0 is successful but you'll get ugly surprises at runtime...                                                                         So use the following link

http://www.sencha.com/products/extjs/download/ext-js-3.2.1



Download di ExtPascal

Ora possiamo scaricare la versione 0.9.8.0 di ExtPascal e, per fare questo, seguiamo il link sotto riportato

Now we can download version 0.9.8.0 of ExtPascal and, to do this, follow the link below

http://code.google.com/p/extpascal/downloads/list

Segue il link della guida, della quale per ora seguiremo solo la prima parte, quella che ci permetterà di ottenere un ambiente di lavoro funzionante su Lazarus.

Ora segue il link della guida, della quale per ora seguiremo solo la prima parte, che ci permetterà di ottenere un ambiente di lavoro funzionante in Lazarus.

http://code.google.com/p/extpascal/wiki/GettingStarted

Citazione01. Open ExtPascalSamples.dpr source in ExtPascalSamples folder using your favorite ObjectPascal IDE.

Riguardo questo punto, non credo ci sia molto da dire.

Regarding this point, I do not think there's much to say.

Citazione02. For Lazarus set these Parsing options (menu \Project\Compiler Options\Parsing):
Syntax mode: 'Delphi'
ON C++ Styled INLINE
ON C Style macros
OFF Constructor name must be init
OFF Static Keyword in Objects
ON Use Ansi Strings

Sarete felici di sapere che, almeno io, ho trovato tutto correttamente preimpostato e quindi, con molta probabilità, anche voi proverete lo stesso senso disoddisfazione.

You will be pleased to know that, at least I've found everything correctly preset and then, most likely, you too will experience the same sense of satisfaction.

Citazione03. For Delphi set these Syntax options (menu \Project\Options\Compiler):
04. For FreePascal use -Smdghie50 -venwhi -l as compiler options. Append these options -O2pPENTIUM4 -CXpPENTIUM4 -XXsi -CfSSE to release/final version. In Lazarus these options are not necessary, but you can use this path:

Questi punti, installando su Lazarus, vanno ignorati.

These steps, when installing on Lazarus, can be ignored.

Citazione05. Set the compiler "Search path" according. By example to C:\ExtPascal; C:\ExtPascal\ExtJSWrapper

In progetto -> Opzioni del Compilatore -> campo "altri file unit (-Fu)" verificate che siano impostate sia la path per Indy che per ExtPascal; nel mio caso:

In Project -> Compiler Options -> "other unit files (-Fu)" make sure you find paths for Indy and ExtPascal; in my case:

- /usr/lib/lazarus/0.9.28.2/components/indy/lazarus/lib/
- /usr/lib/lazarus/0.9.28.2/components/ExtPascal-0.9.8/

Citazione06. Compile ExtPascalSamples as example.

Aprite il progetto ExtPascal_embedded.lpi. Si tratta del modo più veloce di iniziare a vedere ExtPascal in quanto, senza dover né reperire né configurare un web server, abbiamo la possibilità di avere un binario con un web server embedded, cioè è il binario stesso il web server. E questo grazie ad Indy. Se nel vostro PC avete comunque già un web server che occupa la porta 80, prima di compilarlo cercate la riga:

Open ExtPascal_embedded.lpi project. This is the fastest way to start using ExtPascal because without having set up a web server, we can have a binary with a web server embedded inside. And this, thanks to Indy.                                                                                                                         In case your port 80 is not free, e.g. used by a web server, please find in source code the following line:


Application := TIdExtApplication.Create('ExtPascal Samples ' + ExtPascalVersion, TSession, 80, 5);


e sostituite il parametro 80 con 8080. In questo modo non avrete interferenze sulla porta del web server che avete già installato.

and substitute the 80 with 8080. In this way you will have no interference against the web server port already in use.

Ultime impostazioni / Last settings

Prima di lanciare la demo occorre fare un'ultima operazione. Ricordate ExtJs scaricato all'inizio? Ebbene decomprimetelo in una cartella, rinominatela in "ext" e copiatela nella cartella root del web server. Nel nostro caso, nella stessa cartella del binario ottenuto dalla compilazione.

Before launching this demo you need a last setting. Do you remember ExtJS downloaded few minutes ago? Well, unzip into a folder, rename it "ext" and copy it into the root of the web server. In our case, in the same folder as the binary obtained from the compilation.

Lancio! / Run!

A questo punto non vi resta che lanciare da riga di comando:

All you need is execute following code from a shell


./ExpPascalSample


e far puntare il vostro browser su:

and set your favourite browser pointing to

http://localhost:8080/Home


ExtPascal toolkit

Per programmare agevolmente con il binomio Lazarus + ExtPascal si necessita di installare anche i componenti "ExtPascal toolkit" (http://web.me.com/macpgmr/ExtPascal/). Questi componenti sono pressoché indispensabili per sviluppare nuove applicazioni in quanto mettono a disposizione: FmToExtP: un tool a linea di comando che, udite udite, converte form in delphi/lazarus in codice ExtPascal! Componenti specifici per la programmazione in ExtPascal l'aggiunta di "ExtPascal Application" e "ExtPascal Form" alla lista "Nuovo..." un componente griglia aggiuntivo da usare con ExtPascal da Lazarus o Delphi Se già avete seguito la guida di installazione di ExtPascal fino a quì vuol dire che avete già scaricato quasi tutto quello che vi serve. Ora procediamo all'installazione, per prima cosa diamo per assodato che se vi trovate su linux avete messo la cartella con ExtPascal nella seguente posizione /usr/lib/lazarus/0.9.30/components/ExtPascal-0.9.8/ (dove ovviamente 0.9.30 corrisponde con la vostra versione di Lazarus) oppure se siete sotto windows c:\lazarus\components\ExtPascal-0.9.8\ Bene all'interno di questa cartella trovate la seguente sotto cartella "ExtP Toolkit" andate a rinominarla così "ExtPToolkit", ovvero senza spazi. Perchè può dare problemi in fase di compilazione. Bene ora abbiamo bisogno di scaricare orpheus, quindi andate alla seguente pagina web

To easily work with Lazarus and ExtPascal you need to install additional components "ExtPascal toolkit" (http://web.me.com/macpgmr/ExtPascal/). We can consider these components almost indispensable to develop new applications as they provide: FmToExtP: a command line tool to convert Delphi / Lazarus forms in ExtPascal code! Specific components for programming in ExtPascal addition of "ExtPascal Application" and "ExtPascal Form" to "New ..." list options a ExtPascal grid component to use from Lazarus or Delphi If you've followed the ExtPascal installation guide up to here, means that you have already downloaded almost everything you need. We can proceed our installation process. Let's take it for granted that correct location for ExtPascal folder is in Lazarus components folder. E.g. on linux you must save the ExtPAscal folder in the following location: /usr/lib/lazarus/0.9.30/components/ExtPascal-0.9.8 / (where 0.9.30 represents your Lazarus release) on Windows c:\lazarus\components\ExtPascal-0.9.8\ Well, within this folder you can find "ExtP Toolkit" subfolder and we're going to rename as "ExtPToolkit", without any spaces. Just to avoid problems at compile time. Well now we need to download orpheus, then go to the webpage

http://wiki.lazarus.freepascal.org/OrphPort

ed eseguite il download tramite svn nella cartella in cui vi trovate ora ovvero "ExtPascal-0.9.8" Ora aprite lazarus ed installate i seguenti package nell'ordine:

and download using snv into the folder you're in: "ExtPascal-0.9.8"                                             Now run Lazarus to install following packages in the same order as:

extp_ctrls/extp_ctrls.lpk
extp_proj/extp_proj.lpk
orpheus/orpheus.lpk
extp_grid/extp_grid.lpk

Bene ora che avete compilato ed installato questi package dovete aprire il progetto fmtoextp/fmtoextp.lpi e compilarlo. Bene ora il vostro lazarus è pronto per lavorare con ExtPascal.

After these packages are compiled and installed, you must open and compile the project fmtoextp/fmtoextp.lpi. Well now you're ready to work with lazarus ExtPascal.

Configurare Apache / Configure Apache

Per far funzionare il tutto con Apache come web server, si richiede che sia installato il package components/fpweb/weblaz.lpk Poi scaricare il seguente file

To make all works fine with Apache web server, "components/fpweb/weblaz.lpk" component is required, so you must compile and install this one too. Then download the following file

http://www.fastcgi.com/dist/mod_fastcgi-2.4.6-AP22.dll

rinominarlo in "mod_fastcgi.so" spostarlo in c:\apache\modules o equivalente In (C:\Apache\conf) httpd.conf file inserire la seguente riga dove si trovano anche gli altri LoadModule

rename as "mod_fastcgi.so" and move in c:\apache\modules (or equivalent) In (C:\Apache\conf) httpd.conf file insert following line in same section of other "LoadModule"

LoadModule fastcgi_module modules/mod_fastcgi.so

Dichiarare il server esterno del fastcgi, aggiungere la seguente riga al fondo del file httpd.conf:

To declare the fastcgi external server, add following line at bottom of httpd.conf file:

fastcgiexternalserver cgi-bin/NomeDelVostroEseguibileCGI –host localhost:2014 –idle-timeout 3

Riavviare apache, eseguire da linea di comando il programma NomeDelVostroEseguibileCGI (contenuto nella cartella cgi-bin) e digitare

Restart Apache and run, on a shell, as command line, NameOfYourCGIApplication program (stored in cgi-bin folde) using

localhost/cgi-bin/NomeDelVostroEseguibileCGI

(altre informazioni le potete reperire all'indirizzo http://code.google.com/p/extpascal/wiki/GettingStarted ad esempio per ubuntu la procedura è leggermente diversa)

(you can find more info at http://code.google.com/p/extpascal/wiki/GettingStarted e.g. on ubuntu Apache configuration is slightly different)

Hello world

Bene, ora vediamo come costruire la nostra prima applicazione con le ExtPascal:

Well, now we see how to build our first application with ExtPascal:

File --> New --> ExtPascal Application

Vi compare una form (di tipo TExtWindow) andate nella tab "ExtPascal" della palette e trascinate un pulsante (di tipo TExtButton) sulla form. Cliccate due volte sul pulsante e inserite il seguente codice

A new (type TextWindow) form will appear. Go to the "ExtPascal" palette and drag a button (type TExtButton) on the form. Double click on the button, and enter the following code

ExtMessageBox.Alert('Hello','Wolrd');

Ora andate a cambiare la proprietà Text del pulsante in "PREMERE QUI". Ora compilate il progetto e quando avete ottenuto l'eseguibile spostatelo nella cartella c:\apache\cgi-bin\ oppure in /usr/lib/cgi-bin/ Quindi la riga che prima abbiamo menzionato se l'eseguibile si chiama project1 da così fastcgiexternalserver cgi-bin/NomeDelVostroEseguibileCGI –host localhost:2014 –idle-timeout 3 dovrebbe diventare (per linux)

Now change the Text property of the button "CLICK HERE". Now compile the project and move it, when you got the executable, in c:\apache\cgi-bin\ or /usr/lib/cgi-bin/ folder. So in case your project is called as "project1", referring to previous line, from fastcgiexternalserver cgi-bin/NomeDelVostroEseguibileCGI-host localhost: 2014-idle-timeout 3 now should become (on linux)

fastcgiexternalserver cgi-bin/project1 –host localhost:2014 –idle-timeout 3

(Windows)

fastcgiexternalserver cgi-bin/project1.exe –host localhost:2014 –idle-timeout 3

Ipotizziamo che il vostro eseguibile si chiama project1 dovete aprire una console o shell ed eseguire questa vostra applicazione. Ora se tutto è correttamente impostato dovreste aprire un browser e digitare

Assume that your executable is called project1 you open a shell and run this console or your application.                                         Now if everything is set correctly you should open a browser and type

http://localhost/cgi-bin/project1.exe                       (Windows)

http://localhost/cgi-bin/project1                              (Linux)

Godetevi le fatiche del vostro lavoro!

Enjoy your work!

xinyiman e nomorelogic

Per gli amici di Lazarus/FreePascal che leggono la parte scritta in inglese, ci scusiamo per eventuali imprecisioni invitandoli a segnalarci eventuali correzioni da apportare. Grazie.

For the friends of Lazarus / FreePascal who read the part written in English, we apologize for any errors, inviting them to report any corrections to be made. Thanks.

Con questo mini howto vedremo come è possibile installare ExtPascal su Lazarus. L'installazione che ho eseguito è stata effettuata su LinuxMint 11 ma credo che possa tranquillamente essere ritenuta valida per qualsiasi distribuzione linux con Lazarus/Free Pascal già funzionanti.

Il primo requisito fondamentale da verificare è la presenza dei componenti Indy e la compilazione (andata a buon fine) di uno dei progetti demo del pacchetto stesso. Senza Indy è inutile proseguire con l'installazione di ExtPascal. Comunque, a titolo informativo, nel mio caso si tratta di Indy 10.

Per effettuare la mia installazione ho seguito la guida che trovate in:
http://code.google.com/p/extpascal/wiki/GettingStarted


Download di ExtJs


Il primo dubbio arriva già ora. ExtJs, nel momento in cui scrivo, è alla versione 4; l'ultima release disponibile della 3 è la 3.4.0 mentre nella guida si fa riferimento esplicitamente alla 3.2.1.
Il dubbio è presto sciolto: scaricate esclusivamente la 3.2.1 in quanto con la 3.4.0 la compilazione dei progetti ExtPascal va a buon fine ma a run-time avrete delle bruttissime sorprese...

Usate quindi, per il download, il seguente link
http://www.sencha.com/products/extjs/download/ext-js-3.2.1



Download di ExtPascal

Scaricare la versione 0.9.8.0 da http://code.google.com/p/extpascal/downloads/list

Seguiamo la guida che troviamo in http://code.google.com/p/extpascal/wiki/GettingStarted
Per ora ci interessa seguire solo la prima parte, quella che ci permetterà di ottenere un ambiente di lavoro funzionante su Lazarus.

Citazione01. Open ExtPascalSamples.dpr source in ExtPascalSamples folder using your favorite ObjectPascal IDE.

Riguardo questo punto, non credo ci sia molto da dire.

Citazione02. For Lazarus set these Parsing options (menu \Project\Compiler Options\Parsing):
Syntax mode: 'Delphi'
ON C++ Styled INLINE
ON C Style macros
OFF Constructor name must be init
OFF Static Keyword in Objects
ON Use Ansi Strings

Sarete felici di sapere che, almeno io, ho trovato tutto correttamente
preimpostato e quindi, con molta probabilità, anche voi proverete lo
stesso senso disoddisfazione.

Citazione03. For Delphi set these Syntax options (menu \Project\Options\Compiler):
04. For FreePascal use -Smdghie50 -venwhi -l as compiler options. Append these options -O2pPENTIUM4 -CXpPENTIUM4 -XXsi -CfSSE to release/final version. In Lazarus these options are not necessary, but you can use this path:

Questi punti, installando su Lazarus, vanno ignorati.

Citazione05. Set the compiler "Search path" according. By example to C:\ExtPascal; C:\ExtPascal\ExtJSWrapper

In progetto -> Opzioni del Compilatore -> campo "altri file unit (-Fu)"
verificate che siano impostate sia la path per Indy che per ExtPascal:
nel mio caso:
- /usr/lib/lazarus/0.9.28.2/components/indy/lazarus/lib/
- /usr/lib/lazarus/0.9.28.2/components/ExtPascal-0.9.8/

Citazione06. Compile ExtPascalSamples as example.

Aprite il progetto ExtPascal_embedded.lpi
Si tratta del modo più veloce di iniziare a vedere ExtPascal in
quanto, senza dover né reperire né configurare un web server, abbiamo
la possibilità di avere un binario con un web server embedded, cioè
è il binario stesso il web server. E questo grazie ad Indy.

Se nel vostro PC avete comunque già un web server che occupa la porta
80, prima di compilarlo cercate la riga


Application := TIdExtApplication.Create('ExtPascal Samples ' + ExtPascalVersion, TSession, 80, 5);


e sostituite il parametro 80 con 8080. In questo modo non avrete
interferenze sulla porta del web server che avete già installato.


Ultime impostazioni

Prima di lanciare la demo occorre fare un'ultima operazione. Ricordate
ExtJs scaricato all'inizio? Ebbene decomprimetelo in una cartella,
rinominatela in "ext" e copiatela nella cartella root del web server.
Nel nostro caso, nella stessa cartella del binario ottenuto dalla
compilazione.



Lancio

A questo punto non vi resta che lanciare da riga di comando:
./ExpPascalSample

e far puntare il vostro browser su:
http://localhost:8080/Home



ExtPascal toolkit


Per progrmmare agevolmente con il binomio Lazarus + ExtPascal si necessita di installare anche i componenti "ExtPascal toolkit" (http://web.me.com/macpgmr/ExtPascal/).
Questi componenti sono pressoché indispensabili per sviluppare nuove applicazioni in quanto mettono a disposizione:

• FmToExtP: un tool a linea di comando che, udite udite, converte form in delphi/lazarus in codice ExtPascal!
• Componenti specifici per la programmazione in ExtPascal
• l'aggiunta di "ExtPascal Application" e "ExtPascal Form" alla lista "Nuovo..."
• un componente griglia aggiuntivo da usare con ExtPascal da Lazarus o Delphi

Se già avete seguito la guida di installazione di ExtPascal fino a quì vuol dire che avete già scaricato quasi tutto quello che vi serve. Ora procediamo all'installazione, per prima cosa diamo per assodato che se vi trovate su linux avete messo la cartella con ExtPascal nella seguente posizione

/usr/lib/lazarus/0.9.30/components/ExtPascal-0.9.8/ (dove ovviamente 0.9.30 corrisponde con la vostra versione di Lazarus)

oppure se siete sotto windows

c:\lazarus\components\ExtPascal-0.9.8\

Bene all'interno di questa cartella trovate la seguente sotto cartella "ExtP Toolkit" andate a rinominarla così "ExtPToolkit", ovvero senza spazi. Perchè può dare problemi in fase di compilazione.

Bene ora abbiamo bisogno di scaricare orpheus, quindi andate alla seguente pagina web

http://wiki.lazarus.freepascal.org/OrphPort

ed eseguite il download tramite svn nella cartella in cui vi trovate ora ovvero "ExtPascal-0.9.8"

Ora aprite lazarus ed installate i seguenti package nell'ordine:

extp_ctrls/extp_ctrls.lpk
extp_proj/extp_proj.lpk
orpheus/orpheus.lpk
extp_grid/extp_grid.lpk

Bene ora che avete compilato ed installato questi package dovete aprire il progetto fmtoextp/fmtoextp.lpi e compilarlo. Bene ora il vostro lazarus è pronto per lavorare con ExtPascal.



Configurare Apache

Per far funzionare il tutto con Apache come web server, si richiede che sia installato il package components/fpweb/weblaz.lpk

Poi scaricare il seguente file
 http://www.fastcgi.com/dist/mod_fastcgi-2.4.6-AP22.dll

rinominarlo in "mod_fastcgi.so"
spostarlo in c:\apache\modules o equivalente

In (C:\Apache\conf) httpd.conf file inserire la seguente riga dove si trovano anche gli altri LoadModule

LoadModule fastcgi_module modules/mod_fastcgi.so

Dichiarare il server esterno del fastcgi, aggiungere la seguente riga al fondo del file httpd.conf:

fastcgiexternalserver cgi-bin/NomeDelVostroEseguibileCGI –host localhost:2014 –idle-timeout 3

Riavviare apache, eseguire da linea di comando il programma NomeDelVostroEseguibileCGI (contenuto nella cartella cgi-bin) e digitare

localhost/cgi-bin/NomeDelVostroEseguibileCGI

(altre informazioni le potete reperire all'indirizzo http://code.google.com/p/extpascal/wiki/GettingStarted ad esempio per ubuntu la procedura è leggermente diversa)


Hello world

Bene, ora vediamo come costruire la nostra prima applicazione con le ExtPascal:

File --> New --> ExtPascal Application

Vi compare una form (di tipo TExtWindow)

andate nella tab "ExtPascal" della palette e trascinate un pulsante (di tipo TExtButton) sulla form. Cliccate due volte sul pulsante e inserite il seguente codice

ExtMessageBox.Alert('Hello','Wolrd');

Ora andate a cambiare la proprietà Text del pulsante in "PREMERE QUI".

Ora compilate il progetto e quando avete ottenuto l'eseguibile spostatelo nella cartella c:\apache\cgi-bin\ oppure in /usr/lib/cgi-bin/

Quindi la riga che prima abbiamo menzionato se l'eseguibile si chiama project1 da così

fastcgiexternalserver cgi-bin/NomeDelVostroEseguibileCGI –host localhost:2014 –idle-timeout 3

dovrebbe diventare (per linux)

fastcgiexternalserver cgi-bin/project1 –host localhost:2014 –idle-timeout 3

oppure (per window)

fastcgiexternalserver cgi-bin/project1.exe –host localhost:2014 –idle-timeout 3

Ipotizziamo che il vostro eseguibile si chiama project1 dovete aprire una console o shell ed eseguire questa vostra applicazione.

Ora se tutto è correttamente impostato dovreste aprire un browser e digitare

http://localhost/cgi-bin/project1.exe                       (se usate windows)

http://localhost/cgi-bin/project1                              (se usate linux)


Godetevi le fatiche del vostro lavoro!
xinyiman e nomorelogic

Volendo sviluppare per web con lazarus, una delle possibili opzioni è
nell'uso delle librerie ExtJs tramite l'uso di ExtPascal.
Allo scopo, ho fatto un piccolo approfondimento sulle licenze delle
librerie in questione.


ExtPascal

Licenza LGPL e cioè: GNU LIBRARY GENERAL PUBLIC LICENSE - Version 2 -
June 1991, modificata.
La LGPL (la troviamo nel file "ExtP Toolkit/COPYING.LGPL") ci permette
di utilizzare la libreria coperta da questa licenza senza imporre che
il software da realizzare venga rilasciato sotto la medesima
(nonostante permanga l'obbligo di fornire il sorgente se richiesto).
In pratica viene lasciata libertà di scelta di licenziare sia con la
LGPL stessa che con una licenza commerciale che di usare una GPL.

Da sottolineare che gli sviluppatori di ExtPascal hanno ritenuto
opportuno applicare la stessa licenza che deve essere applicata al
software creato con Free Pascal e in caso di uso della RTL.

Cito la modifica di ExtPascal

CitazioneAs a special exception, the copyright holders of this library give you
permission to link this library with independent modules to produce an
executable, regardless of the license terms of these independent modules,
and to copy and distribute the resulting executable under terms of your choice,
provided that you also meet, for each linked independent module, the terms
and conditions of the license of that module. An independent module is a
module which is not derived from or based on this library. If you modify this
library, you may extend this exception to your version of the library, but
you are not obligated to do so. If you do not wish to do so, delete this
exception statement from your version.

La quale differisce, rispetto a quella del Free Pascal, come si legge
nel sito http://www.freepascal.org/faq.var#general-license, solamente
nella sintassi del penultimo passaggio.

CitazioneIf you modify this library, you may extend this exception to your version
of the library, but you not obligated to do so.

CodePress

Nella cartella di ExtPascal troviamo anche CodePress.
Come è possibile rilevare direttamente dal sito
http://codepress.sourceforge.net/
anche CodePress viene rilasciato con licenza LGPL, senza modifiche.


ExtJs

Infine la libreria sulla quale tutto si basa: ExtJs.
ExtJs viene rilasciato in triplice licenza, per maggiorni informazioni
consiglio di leggere in
http://www.sencha.com/products/extjs/license/
dove tutto viene spiegato molto approfonditamente.

Prima licenza: Commercial Software License
E' la licenza da utilizzare nel caso si intenda sviluppare un prodotto
commerciale (che non verrà coperto quindi da una GPL). E' una licenza
nominativa ma con possibilità di riassegnazione nel caso venga
utilizzata da una software house.

Seconda licenza: Commercial OEM License
E' la licenza da usare se si intende sviluppare un SDK od un "web
application builder".

Terza licenza: Open Source License
La quale, ovviamente, obbliga lo sviluppatore a rilasciare il software
realizzato sotto GPL.


Buon lavoro
nomorelogic

Quando si effettua programmazione orientata al web con le CGI Free Spider si necessita a volte di voler fare un redirect, ad esempio per una gestione di login capita di doverlo fare nella fase di convalida del dato! Bene fare ciò è abbastanza facile, basta inserire questa procedura nel vostro codice, unico vincolo è che il vostro TDataModule si chiama TDataModule1 (diversamente cambiatelo nel codice sottostante con il vostro nome).


procedure TDataModule1.Redirect(var Response: TSpiderResponse; Url: string);
begin
     Response.Add('< HTML >');
     Response.Add('< HEAD >');
     Response.Add('< TITLE >Redirect...< /TITLE >');
     Response.Add('< META HTTP-EQUIV="REFRESH" CONTENT="0; URL=' + Url + '" >');
     Response.Add('< /HEAD >');
     Response.Add('< BODY >');
     Response.Add('Redirect...');
     Response.Add('< /BODY >');
     Response.Add('< /HTML >');
end;


Per richiamare questa procedura ad esempio per fare un redirect a www.lazaruspascal.it basta  scrivere così


Redirect(Response,'http://www.lazaruspascal.it/');


Per far funzionare correttamente il codice togliete gli spazi dopo il carattere < e prima del carattere >. Ho dovuto aggiungerli per non creare problemi al sito!

Facile vero?!