Explanation of the demo source

Quite a few people had inquired about a downloadable version of the vegUI demonstration, so they could look at the code and play around with it - to learn by doing so to say.

Of course i am happy to comply and you may now download the source here.

Introduction

I want to make this quick, as i plan to release a complete tutorial series on building a true vegUI based application over the next couple days.

The demonstration itself is based upon the recently released vegUIClient add-on. The vegUIClient is actually a package including an extended version of the vegUIManager (the client) and a php based backend frame work (the vegUI server framework) named vegUIserve.

Setting it up

After downloading the demo source unpack it's contents to your web directory. Then open the config.php file in the config directory.

This file mainly contains library inclusion and path constants. The path constants are what is interesting to us right now. Actually only the VUIS_PATH_ROOT constant, fix it so it points to your demonstration directory.

For example if you uploaded the demo files to a directory called veguidemo in your webroot then VUIS_PATH_ROOT should be set to


Boom, we're done.. Well almost.

Optionally, if you have access to a mySQL database you can fill out the information in config/db_config.php. If you cannot or do not want to do this you will not be able to get the blog comment editor to work properly.

The tables to be created for the blog comment editor can be found in /modules/comment/tables.sql

After you have created those tables make sure to edit the init.php in the same directory and set the constants VUID_BLOG_COMMENT_TABLE and VUID_BLOG_COMMENT_TABLE_USERS to the names of the tables we just created.

The Directories

The "main" directory holds the php library files of the vegUI back-end framework.

The library "VUIS_Entity.class.php" holds the VUIS_Entity object, its the base object for any other VUIS object, as it provides the functions for error handling, session handling and quick database updates.

On that note any mySQL database communication is handled over the DbCon mysql api (Dbcon.class.php) which has been one of the scripts that has been one of my dearest companions in all the database related PHP projects i worked on. I like to think that i've done a pretty solid job with it.

Then there is a file in there named "VUIS_Userinterface.class.php". This is the class that handles server -> client communication by building XML or bitmask data that is then sent as a response to the client after the client has send an request via AJAX.

The Network Protocol: Client -> Server

In order to communicate with the server the client sends an AJAX request to the execute_script.php script located in the demonstration's root directory. This script can be passed the 'scr' argument (GET or POST) that defines which script will be executed.

The scripts themselves are located in the scripts directory.

For example you will see there is a file in there called "init.script.php", in order to have execute_script.php execute that script you would send a request to it like this:

/execute_script.php?scr=init

Additional parameters can be passed using the & delimiter

Lets take a look at the blog commenting application of the demo for a quick example. When the user clicks the "post comment" button a POST request will be sent via AJAX to execute_script.php with these parameters:

/execute_script.php?scr=blog.comment&username=joe&content=hello world

The actual code that will write the data to the database is located in script/blog.comment.script.php

The Network Protocol: Server -> Client

The vegUI demonstration uses the bitmask type protocol with ui operations. I have explained some of this in the AJAX tutorial series i did a while ago. Basically the protocol used for server -> client communication looks like this:

ui_operation_id|parameter1|parameter2;

Where | delimits one or more parameters for the ui operation and ; delimits multiple ui operations.

Take a look at the top of the VUIS_UserInterface file and you will see various constant definitions starting with VUIS_UIOP_*, those are user-interface operation types. These constants are also defined on the client side and serve as a way for the client and the server to understand each other when the bitmask type protocol is used.

Lets do a little example, say our client application sends an AJAX request, in order to respond to that request a user interface operation will be pushed and rendered in the end.

For example the output of the php script - when it's done - could be something like

1|There was an error;

The client will then interpret that information and see that the user-interface operation type 1 means 'alert' and that the first parameter is supposed to be the text message to be alerted to the screen.

The user-interface

Most of the javascript goodness is located in the ui directory, including the files for the two themes.

Files starting with the prefix "demo" are demo specific libraries that hold the demo applications, like the popup machine and the blog comment editor.

The theme graphics, stylesheets and templates are located in the theme directories named "stylishblue" and "classicdesktop".

It's all modular, baby

Every application you find in the vegui demo is modularly initialized. That means that the menu entry is created modularly and that the application is not built until it is requested (ie when the user clicks a menu entry to start it)

Lets take a look into the module/comment directory. This directory holds the back-end files for the blog comment editor module.

There is a file in there called VUID_BlogComment.class.php, thats the library that contains the BlogComment object which handles comment fetching and comment posting to the database. It extends the VUIS_Entity object and therefor has shared access to the database api, error, session and object cache objects.

The other file of importance is called init.php. You will find this file in every module directory, even if the module itself does not require a back-end library because it does not do any back-end stuff.
That's because in the case of the demonstration that file also makes sure a menu entry is created for the application in the client.

Every time the execute_script.php script is called the vegUI back-end scans the module directory and automatically includes the init.php file for each individual module. Meaning the code inside the file will get executed.

Additionally - in the case of the blog comment editor - it also initializes the VUID_BlogComment module.

I suggest you take a look at the blog.comment scripts in the script directory to see how the object is created and utilized to post and retrieve comments.

In each module directory there also exists a sub-directory called js, which holds the javascript code that gets included by the client when the module needs to be built. So when the user clicks the gutris entry in the vegUI demo menu - assuming the gutris app has not been built yet - the manager will include the /module/gutris/js/builds.js file to construct the application.

Anyways, that's it for now. I could go much more in depth, but ill do that when i release the vegUIClient tutorials, and i figure you guys want to start messing around with the demo source ;)

It's fairly well commented for the most part i think, but there are some areas lacking, so if you have questions feel free to post them as comments to this thread and ill try my best to answer them.

So there you have it, demo source, have fun ;)

Related Posts

• No related posts

---

Your Comment

name:*
email-address:
Are you human?

Comments to this post: (3)

RSS Feed for comments

---

gvpvevpplr
on 19 Jun, 2007 - 17:08:29

Hello! Good Site! Thanks you! mdevkeqpntq

Report this comment

---

dew
on 05 Jul, 2007 - 08:43:18

dew

Report this comment

---

heroine
on 06 Dec, 2007 - 08:07:12

I love it! Thanks!

Report this comment

---

---