Zafu: CouchDB and KendoUI (part 1)


I know that Couch is about relaxing and Kendo is about fighting but wikipedia says:

kendo developed under the strong influence of Zen Buddhism.

So, lets practice some meditation about CouchDB, CouchApp, KendoUI in nothing better that a Zafu (meditation seat used in zazen).

CouchDB and KendoUI

Since CouchDB might work as a web server, you might deploy documents into it and get them served to a browser.
For deploying the documents in a CouchDB database, you might use couchapp that in some way allows to synchronize a local folder structure into the database.

Step1: minimum couchapp

Create the following folder structure:

Simple, just one folder (_attachments) containing a file (index.html). The content of index.html is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Zafu: CouchDB and KendoUI</title>

    <!-- Web Page styling -->
    <style type="text/css">
        html {
            font-family: Verdana, sans-serif;
            font-size: 12px;
            background-color: #a9a9a9;
        }
    </style>
</head>
<body>
<div id="window">
    Hello, CouchApp!<br/>
    Hello, KendoUI!
</div>
</body>
</html>

Now, push it into your CouchDB server by running:

couchapp push http://localhost:5984/app1

or if you have to supply a user and password:

couchapp push http://user:password@localhost:5984/app1

NOTE: You should change user and password by the user name and his/her password.

And if I open the URL that couchapp displayed I get…

Realize by the URL that the HTML page is actually being served by CouchDB.

But wait! This is just an HTML page in CouchDB. Where is KendoUI?

Step2: deploying KendoUI inside CouchDB

Go to you _attachments folder and copy KendoUI minimum JavaScript and CSS files:

If we change index.html for using KendoUI window as:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Zafu: CouchDB and KendoUI</title>
    <!-- Kendo UI Web styles-->
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
    <link href="styles/kendo.black.min.css" rel="stylesheet" type="text/css"/>

    <!-- Kendo UI Web scripts-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>

    <!-- Kendo Globalization -->
    <script src="js/cultures/kendo.culture.en-US.min.js"></script>

    <!-- Web Page styling -->
    <style type="text/css">
        html {
            font-family: Verdana, sans-serif;
            font-size: 12px;
            background-color: #a9a9a9;
        }
    </style>

    <!-- Initialize Form Elements -->
    <script type="text/javascript">
        $(document).ready(function () {
            kendo.culture("en-US");
            var window = $("#window").kendoWindow({
                width:"200",
                height:"60px",
                resizable:true,
                title:"Welcome to Zafu!"
            }).data("kendoWindow");
            window.center();
        });
    </script>

</head>
<body>
<div id="window">
    Hello, CouchApp!<br/>
    Hello, KendoUI!
</div>
</body>
</html>

and push it in couchdb using couchapp, I get:

Next posts (here and here) on how to actually get data from CouchDB and the final one about using KendoUI for displaying it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s