Briefcase Applications Explained - Building the Application
(Page 3 of 4 )
Now let's start building the GUI of the application. Go to the ADO tab and drop an ADOquery (rename to q), an adoconnection component, and then drop an opendialog component (rename to opd) from the dialogs tab, on a form. Then select the adoconnection component and go to its "connectionstring" property in the object inspector. Click on the ellipses button and you should now see the following screen:
Click on the "build" button. The following screen should now appear:
Select the "Microsoft OLE DB for ODBC drivers" option and click on "next." You should now see the following screen:
Make sure that the "Use data source name" option is selected, then on the drop down list select "Brief Case Application." Then test the connection to see that it connects okay. Then press the OK button and close the open windows. You are now done setting up the database connection for the application.
Continuing with building the GUI, drop a tlistview component (rename to lvContacts) and three buttons (rename to getdata with the caption Get Data from Server, btngetdatafile with the caption Get Data from File and exit with the caption Exit) on to the form. Set lvContacts' viewstyle to vsReport. Double click on it and add the following column headers: Name, Surname and Phone number and then save the application. It should now look something like this:
We already know how the application is meant to work. It is meant to retrieve data from the server and then save the data to am XML file on the local disk. In our application the data will be saved to a file the moment we download it from the server as the code below demonstrates. Double click on the button that says "get data from server" and add the following code:
procedure TForm1.getdataClick(Sender: TObject);
var
li:tlistitem;
begin
// Connect to MySQL and fetch some data and save to file:
savedata.xml
q.Connection := ADOConnection1;
q.SQL.Text:= 'select * from contacts';
q.Open;
q.SaveToFile('savedata.xml',pfXML);
q.Close;
q.LoadFromFile('savedata.xml');
while not q.Eof do
begin
li:=lvcontacts.Items.Add;
li.Caption:=q.fieldbyname('cID').Value;
li.SubItems.Add(q.fieldbyname('name').text);
li.SubItems.Add(q.fieldbyname('surname').text);
li.SubItems.Add(q.fieldbyname('phone_no').AsString);
q.Next;
end;
So what does this code do? It sets the connection for the query component and then runs a query to retrieve all the records on the server as in:
q.Connection := ADOConnection1;
q.SQL.Text:= 'select * from contacts';
q.Open;
The query component is now filled with data from the server. The next piece of code now saves the data to a file and closes the query:
q.SaveToFile('savedata.xml',pfXML);
q.Close;
At this stage, we still cannot see the data that we just downloaded. So the next thing to do is display that data. We do this by loading the saved file back into the query dataset:
q.LoadFromFile('savedata.xml');
And then we run a loop to retrieve the data from the dataset and display the results in the listview component:
while not q.Eof do
begin
li:=lvcontacts.Items.Add;
li.Caption:=q.fieldbyname('cID').Value;
li.SubItems.Add(q.fieldbyname('name').text);
li.SubItems.Add(q.fieldbyname('surname').text);
li.SubItems.Add(q.fieldbyname('phone_no').AsString);
q.Next;
When this button is pressed you should see the following results:
Now that we downloaded the data that we wanted from the server, we need to be able to work on that data. We do this by loading the data into a dataset from the file in which it was saved, to work on. So double click on the "get data from file" button and add the following code:
procedure TForm1.btnGetDataFileClick(Sender: TObject);
begin
q.Close;
if opd.Execute then
begin
q.LoadFromFile(opd.FileName);
q.open;
form2.show;
end;
The code below basically enables you to select a file from an "open file" dialog box, loads that file into the query component, and then opens form two of the application.
if opd.Execute then
begin
q.LoadFromFile(opd.FileName);
q.open;
form2.show;
We have not created that form yet, so add another form to the application and save it as "update." Add the following components to it:
- DBGrid - available from the Data Controls Tab.
- Three buttons - with captions: Save Changes to Disk, Apply Changes to Server and Exit.
- Datasource component -available from the Data Access tab.
The form should look something like this:
Click on the dbgrid component, go to its "datasource" property and select "datasource1" as its data source. Then click on "datasource1" and on its "dataset" property, select "form1.q." This tells the dbgrid to display records that are stored in the query that is located on form one.
The purpose of form two is to enable us to view and change the records stored in the file that was saved previously. When this form is shown, the results of the data that was stored in the previous query will be displayed in the dbgrid. This "dbgrid" is what is called a "data aware" component that displays records of any dataset to which it is connected. In this case the dbgrid is connected the query component on form one, and shows the following when the form is opened:
In order for us to do anything with the data stored in the XML file, we need to load the data into a data set and then make the changes we want. Then we need to save those changes back to the file. We cannot directly work with the data while it is in the file, we can only do it when it is loaded into the dataset. Now, all you have to do to change the data is click on the cell and type in your changes. Once you've made your changes, click on the "Save Changes to Disk" button to save the changes to disk. Here's the code that does the job:
procedure TForm2.BitBtn1Click(Sender: TObject);
begin
try
form1.q.SaveToFile('savedata.xml', pfXML);
finally
showmessage('File saved');
end;
end;
The code calls the "savetofile" method to save the data to the file. You 'll also notice the "pfxml" parameter within that call. It basically ensures that the data is saved in XML format.
Next: Applying Changes to the Data >>
More Delphi-Kylix Articles
More By Leidago
