Home   Demos   Sample Applications   Download   Forums   Articles   About

Lollygag Demos — Database Access

Using the DataServices.config File

Lollygag enables you to display and modify database data without writing any code. Lollygag is compatible with any database server that has a .NET Framework provider including Microsoft SQL Server, Oracle, and MySQL.

When building a Lollygag application, you expose database data from your Web server by creating a DataServices.config file. A DataServices.config file contains one or more <dataService> tags that are used to describe the data services available from your Web server. For example, the following DataServices.config file exposes the contents of a database table named Movies through a data service named svcMovies.

DataServices.config

<?xml version="1.0" encoding="utf-8" ?> <dataServices xmlns="http://lollygagframework.com/dataservices" defaultConnectionStringName="conMovies"> <dataService id="svcMovies"> <sqlCommand type="select" sql="SELECT id, title, description FROM Movies" allowAnonymous="true" /> </dataService> </dataServices>

Notice that the <dataService> tag includes a <sqlCommand> tag. A data service can represent multiple commands. For example, it can represent commands for selecting, inserting, and deleting data.

The data service in the listing above contains a single <sqlCommand> that retrieves all of the records from the Movies database table. The sqlCommand element supports the following attributes:

  • type
    Represents the type of the command. Typical values are select, insert, delete, update. Custom values can also be used.
  • sql
    Represents the SQL command to execute. This can be the name of a stored procedure when the useStoredProcedure attribute has the value true.
  • useStoredProcedure
    Represents whether the sql attribute is the name of a stored procedure.
  • allowAnonymous
    Represents whether or not anonymous uses can execute this command. By default, only authenticated users can execute any command.
  • roles
    Represents a comma-delimited list of roles. If the roles attribute is present, only members of the listed roles can execute the command.
  • primaryKeys
    Represents a comma-delimited list of primary keys. Set this attribute when you want to preserve state when using client-side widgets.

Using the dataview Widget

The dataview widget is the main widget in the Lollygag framework for displaying database data. The dataview widget uses templates to display data. For example, the dataview in the following code sample displays the title column from the Movies database table.

ShowMovies.xml Try It!

<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/xsl" href="/lollygagSite/lollygagframework/0_1/lollygag.xsl"?> <lolly:application title="Hello World" xmlns="http://www.w3.org/1999/xhtml" xmlns:data="http://lollygagframework.com/data" xmlns:lolly="http://lollygagframework.com/core"> <data:dataview dataServiceId="svcMovies"> <data:template> <h1>{{title}}</h1> <p> {{description}} </p> </data:template> </data:dataview> </lolly:application>

Notice that the dataview includes a dataServiceId attribute. This attribute causes the dataview to retrieve its data from the svcMovies data service which is defined in the DataServices.config file.

Notice, furthermore, that the dataview includes a <data:template> tag. The template is used to format each record returned from the data service. A template can include any HTML tags that you please. A template also can contain any other widget from the Lollygag framework (including nested dataview widgets).

You'll notice that the template in the code above includes the special expression {{title}}. This expression automatically gets replaced with the value of the title column. You can place any JavaScript that you want within the double curly braces. For example, if you need to format each title, then you can call a JavaScript format function that you have defined in the application's JS file.

Displaying Bulleted Lists

The dataview widget is very flexible. You can use the widget to format data in a variety of different ways. For example, by taking advantage of the dataview widget's containerTag and itemContainerTag attributes, you can use the dataview widget to easily display a bulleted list of database items as the following code sample illustrates.

ShowMovies.xml Try It!

<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/xsl" href="/lollygagSite/lollygagframework/0_1/lollygag.xsl"?> <lolly:application title="Hello World" xmlns="http://www.w3.org/1999/xhtml" xmlns:data="http://lollygagframework.com/data" xmlns:lolly="http://lollygagframework.com/core"> <data:dataview dataServiceId="svcMovies" containerTag="ul" itemContainerTag="li"> <data:template> {{title}} </data:template> </data:dataview> </lolly:application>

Using Triggers with a dataview

You can associate a dataview with a data source widget that includes triggers. Triggers cause the data source to automatically fetch new data. Triggers are used to associate multiple widgets on a page.

For example, the following Lollygag application includes both a textbox and dataview widget. When you change the text in the textbox, the database data displayed by the dataview widget changes. The textbox is a trigger for the data source associated with the dataview widget.

ShowMovies.xml Try It!

<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/xsl" href="/lollygagSite/lollygagframework/0_1/lollygag.xsl"?> <lolly:application title="Hello World" xmlns="http://www.w3.org/1999/xhtml" xmlns:data="http://lollygagframework.com/data" xmlns:lolly="http://lollygagframework.com/core"> <lolly:textbox id="txtTitle" autoChange="true"/> <br /> <br /> <data:dataview dataSourceId="srcMovies" containerTag="ul" itemContainerTag="li"> <data:template> {{title}} </data:template> <data:template type="empty"> No matching movies </data:template> </data:dataview> <data:datasource id="srcMovies" dataServiceId="svcMatchMovies"> <data:parameter fieldName="title" elementId="txtTitle" propertyName="value" /> <data:trigger elementId="txtTitle" eventName="changed" /> </data:datasource> </lolly:application>

Notice that the dataview widget also includes a second template. This second template is used when no data is returned from the data source.

More Demos