Accessing Actian PSQL Data from a JavaScript Application
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Accessing Actian PSQL Data from a
JavaScript Application
JavaScript is the predominant scripting language use to create intelligent Web sites. With it,
you can create applications that can run on multiple platforms, including mobile devices that are
not possible using the standard PSQL API Client libraries. Such applications can still use PSQL
as the data repository, even from mobile devices.
If you want to create a Web-based application that uses JavaScript to access data in a PSQL
database, you need both a server and a client piece. Creating both pieces is not hard. Very
quickly, I created a basic JavaScript application that retrieves data from the PSQL sample
database DEMODATA. This article outlines the steps that I used as explained in the following
sections:
Understanding Open Data Protocol and JayData
Setting Up the Environment
Creating the OData Producer
Creating the JavaScript Application (the OData Consumer)
Concluding Remarks
Understanding Open Data Protocol and JayData
I implemented the server piece to take advantage of the Open Data Protocol, or OData. For the
JavaScript application, I used an open source package called JayData that supports OData.
More about JayData in the section Creating the JavaScript Application (the OData Consumer).
Let’s look first at OData since it is the mechanism that allows data access.
OData is a Web based protocol from Microsoft released under the Microsoft Open Specification
Promise. It is designed to access data from a variety of sources in a standardized manner.
OData is built on top of existing standards, such as HTTP, Atom Publishing Protocol (Atompub),
and JavaScript Object Notation (JSON). OData client libraries exist for devices that support
various access methods, including JavaScript. The client libraries abstract the details of OData
and allow you to create JavaScript applications. (Visit the OData website
(http://www.odata.org/) for more information on the protocol, libraries, and so forth.)
An OData solution is similar to traditional client/server architectures. In OData terms, a server is
called a “producer” and a client is called a “consumer.” So, your JavaScript solution requires
both a producer and a consumer.
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
1
Setting Up the Environment
I used two separate machines to implement the JavaScript solution:
A development machine on which to create the JavaScript application. I used a system
with Visual Studio 2010 (you could also use Visual Studio 2012) running on Windows 7.
This system will also need the PSQL Client installed.
A server machine (the data producer) with Internet Information Services (IIS) 8 or IIS 7
installed. I experimented with both Windows Server 2008 with IIS 7 and Windows
Server 2012 with IIS 8. This machine was also running PSQL Vx Server.
Creating the OData Producer
I cover this in a separate article. See Creating an OData Producer Using WCF and IIS if you
want to create a producer step by step. Or, you may prefer to start with the finished product of
that article, which is available in the download archive file ODataIISProducer.zip. Note that
you need to modify the producer by supplying the IP address or hostname of your PSQL Vx
Server. The next section on creating the JavaScript application assumes that you are using the
Visual Studio producer from ODataIISProducer.zip.
Creating the JavaScript Application (the OData Consumer)
These are the steps to create a simple JavaScript application. I used the JayData Library,
which provides OData support. (To find out more about JayData, visit their website
www.jaydata.org.)
(Alternately, if you want, you can skip the following steps and just jump in and start
experimenting with the finished product of this article. The finished product is available in the
archive download file ODataJavaScript.zip. You will need to make a few changes to suit your
environment. For example, see step 7 for where to specify the database connection
information.)
1. Open the Visual Studio solution in the archive download file ODataIISProducer.zip.
2. Download the JayData package by using the NuGet package manager in Visual Studio:
a) Open the package manager console. From the menu bar select Tools > Library
Package Manager >Package Manager Console.
b) Type the following command at the PM> prompt: Install-Package JayData
Messages display concerning the installation of jQuery, datajs, and JayData. Here is
what the output of the command looked like for me:
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
2
If you have not used the package manager before, you may be first prompted to update
it. Go ahead and do so if prompted.
Also, you may download different versions than I did because the package manager will
install the latest versions.
Notice the new items added to the solution. In the screen snap below, I indicate them by
the red rectangles.
3. Now, for the magic! Use the JayData JaySvcUtil.exe to create the plumbing that
enables access to the PSQL DEMODATA database. Open a command prompt,
navigate to the Scripts subdirectory of your project, and type the following:
..\JaySvcUtil.exe -m http://192.168.126.151/PervasivePSQL/Demo
Data.svc/$metadata -n DemoData -o demodata.js
Ensure that you substitute the server name or IP address of the machine running the
OData Producer (see Creating the OData Producer).
After executing the command, my screen looked like the following:
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
3The JayData website refers to this step as creating a client context.
The command also creates a demodata.js file in the Scripts subdirectory of the project. I
included that file in the project download file, odatajavascript.zip.
4. Now you are ready to start writing JavaScript. Right-click on the project name in the
Solution Explorer pane and selected Add > New Item. In the dialog, select Web as the
template type and HTML Page. I named the page index.htm.
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
45. Write your JavaScript application in the skeletal index.htm document. I placed the
following code before the tags. .
OData.defaultHttpClient.enableJsonpCallback = true;
// The next block of code creates the connection to the OData provider,
which allows access to the DEMODATA database
var demodata = new DemoDataService.DemoDataEntities({
name: 'oData',
// FIXME! Change the IP address below to the IP Address or hostname of your
IIS server!
oDataServiceHost: 'http://
192.168.126.151/PervasivePSQL/DemoData.svc'
});
// The GetAllRooms() function retrieves all of the rooms from the DEMODATA
Rooms table. It is the equivalent of SELECT * FROM Rooms
function GetAllRooms() {
// The next statement places all of the rooms into an array
var roomsList = demodata.Rooms.toArray();
var roomsInfo;
$.when(roomsList, $).then(function (roomsList) {
var tableHeader = " Building Number Type Capacity
";
var tableFooter = " ";
var roomsInfo = tableHeader;
// The next block of code iterates through the list of rooms retrieved from
the provider and constructs the HTML to display the list on the application
Web page
roomsList.forEach(function (classroom) {
var item = "@building @roomnum @roomtype @capacity "
.replace("@building", classroom.Building_Name)
.replace("@roomnum", classroom.Number)
.replace("@roomtype", classroom.Type)
.replace("@capacity", classroom.Capacity);
roomsInfo = roomsInfo + item;
});
roomsInfo = roomsInfo + tableFooter;
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
5document.getElementById("pvswheading").innerHTML = "Rooms at
Pervasive University";
document.getElementById("pvswrooms").innerHTML = roomsInfo;
});
};
// The GetRoomsCapacity() function retrieves a list of rooms with a minimum
capacity as specified on the application Web page
function GetRoomsCapacity() {
input = document.getElementById("fieldmincapacity").value;
if (isNaN(input)) {
alert(input + " is not a valid number");
return;
}
mincapacity = parseInt(input);
// The next block of code is equivalent to SELECT * FROM Rooms WHERE
capacity >= ORDER BY capacity
var roomsList = demodata.Rooms
.filter(function (room) { return room.Capacity
>= mincapacity })
.orderBy(function (room) {return room.Capacity})
.toArray();
$.when(roomsList, $).then(function (roomsList) {
var tableHeader = " Building Number Type Capacity
";
var tableFooter = " ";
var roomsInfo = tableHeader;
roomsList.forEach(function (classroom) {
var item = "@building @roomnum @roomtype @capacity "
.replace("@building", classroom.Building_Name)
.replace("@roomnum", classroom.Number)
.replace("@roomtype", classroom.Type)
.replace("@capacity", classroom.Capacity);
roomsInfo = roomsInfo + item;
});
roomsInfo = roomsInfo + tableFooter;
document.getElementById("pvswheading").innerHTML = "Rooms at
Pervasive University with a minimum capacity of " + mincapacity;
document.getElementById("pvswrooms").innerHTML = roomsInfo;
});
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
6};
6. I placed the following between the tags close to the bottom of the
index.htm file. This code is the user interface of the Javascript application that calls the
functions described in step 5.
Sample Javascript Rooms Application
Show All Rooms: All
Rooms
Rooms with a Minimum Capacity:
Get
7. Before you deploy the solution, verify that the IP Address or hostname used by the
solution specifies the correct location. This is especially important if you have
downloaded the Visual Studio solutions instead of following these steps.
The first place is the index.htm file. Look for the following snippet:
var demodata = new DemoDataService.DemoDataEntities({
name: 'oData',
// FIXME! Change the IP address below to the IP Address or hostname
of your IIS server!
oDataServiceHost: 'http://
192.168.126.151/PervasivePSQL/DemoData.svc'
});
Change the IP address to the IP address or hostname of your IIS server.
The second place is the web.config file. Within the tags, you will
see the connection string for the PSQL Client ADO.NET connection. Find the Host=
property and change the hostname or IP address to that of your PSQL Vx Server.
8. Now deploy the solution to IIS. I’m not going to go into any detail on this step. There
are countless settings in IIS that are customizable to your environment and are beyond
the scope of this paper. Also, there are multiple ways to deploy the solution depending
on your environment.
In general, however, here are the common steps:
Publish the files to IIS.
Convert the solution to an application.
Ensure that the solution has file permissions, user permissions, configured user, and
so forth, configured properly.
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
79. Run the application in a Web browser. In my browser, I supplied the
http:///PervasivePSQL/ as the URL.
The JavaScript application running in your browser looks like this:
As you can see, it is a very simple application that has two options. The first option lists
all rooms in the DEMODATA Room table. The other option is to show only the rooms
with a minimum capacity. Here is a partial view of the output if you click All Rooms:
If I enter a minimum capacity of 65 and click Get, the start of the output looks like the
following:
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
8Concluding Remarks
I have demonstrated one possible method for enabling JavaScript applications to have access
to a PSQL Vx Server database. This creates the possibility for creating applications that can
run on multiple platforms, including mobile devices that are not possible using the standard
PSQL API Client libraries. It is worth your time to look into JayData further, because it has
many other features built in for easier querying and caching of data, as well as integration of
some user interface libraries.
Jan D., Principal Software Development Engineer, Actian Corporation
©2013 Actian Corporation. All rights reserved. Printed in the U.S.A. Actian is a trademark of Actian Corporation in the United States
and in other countries. All other trademarks, trade names, service marks, and logos referenced herein belong to their respective
companies.
9You can also read
