VegUIClient - Part 1 - The Setup

This is the start of a tutorial series that hopefully will shed some light on how to work with the vegUIClient/vegUIServe add-on to build a real web application.

If you have done all the original vegUI tutorials - which i highly recommend before you proceed with this tutorial - you will hopefully remember tutorial #18 which focused on writing a small module for the vegUI framework.

In the case of the mentioned tutorial this was a small calculator application. While this might go through as a web-application it didn't touch on issues like network communication and having a back-end to work with vegUI.

Basically the vegUIClient add-on provides two frameworks. One there is the frontend framework object called vegUIClient, which is an extended vegUIManager that had some functions added that allow it to handle network communication with the vegUIServe backend.

vegUIServe is the php-based back-end that comes with the vegUIClient package. It provides a modular environment that can handle sessions, MYSQL API, errors and communication with the client.

As vegUI is completely modular so is the vegUIserve framework. Meaning you can easily create module objects that will be loaded dynamically, but more about that later on.

Originally i wanted to make this tutorial about a full fledged web application, but instead i will split those topics up and post them in individual stand-alone tutorials.

This tutorial will mostly deal with creating a module for the front end and the back end and network communication. We will create a little text editor that can load the contents of a file from the server as well as save any changes to the content to the server again.

I decided to split this tutorials in many smaller parts in order to make it easier to read and also to not make you feel overwhelmed, as this will be a tad more complex than the other tutorials.

I sincerely hope that you will learn something from this and that it will give you some ideas.

I prepared a download-able version of the script that we will create that you can download here and use as reference material: client_tutorial.tar.gz or client_tutorial.zip

In the end it should look something like this (click to enlarge):

Preparing your development environment

Before we get to the coding part we need to set up our project. If you have not done so yet, please go download the latest vegUIclient release. You dont need to download the vegUI framework individually as the client already contains the latest version of that :).

Unpack the contents of the downloaded package into an empty directory on your web server. Once that is done go into the config directory.

This holds all the config files for the vegUIserve backend. Right now were interested in config.php specifically. It holds all the path variables by which the libraries, scripts and modules will later be found and included.

You only need to change the value of the VUIS_PATH_ROOT constant. It should point to the base vegUIclient dir, that means if you extracted the vegUIClient files into a directory called "veguiclient" that exists in the document root directory of the webserver you would set the constant to


The application we are creating wont need mysql, but if it would you would set the connection data up in the config/db_config.php file.

Good, that's that, we're properly configured for now.

Open your favorite web browser and navigate to the web address that points to your vegUIclient setup. If everything went as planned you should be presented with a black screen that holds some server information.

This is just the server info module, which is an example module i put together for the vegUIclient release and we will get rid of it in a bit.

The directory structure

The ui directory holds all the front-end related files. Inside you will find two directories called 'compressed' and 'commented'. The compressed directory holds the vegUI framework, the vegUIClient library and the server-info module in their compressed forms, meaning they have had all their unnecessary white-space and all comments removed.

The actualy vegUIclient library is called vegui.client.class.js, so dont confuse it with vegui_client.js, which i will explain in the next paragraph ;).

There are also three other files in there, called compile.bat, compile.sh and vegui_client.js. The compile.* files are windows and linux scripts that allow you to recompile all the vegui modules in the directory into a single file called vegui_client.js.

To add or remove files simply open the compile file that corresponds with your operating system (bat = windows) and remove or add files before running it.

The commented directory is the same, but all files in there are commented and properly formated and the commented directory is the place you want to do you work it :).

If you go outside of the ui directory for a second and open up index.php you will find a line in there that looks like this:



In order to use the commented library instead of the compressed one - since we will do all the magic in the commented directory - simply change the 'compressed' part of that line into 'commented'.



You can mess around with javascript compression once your stuff is running in commented mode, so dont worry about that right now.

Alright, back to the ui directory for a bit. There are two more files in there we want to check out. First there is a file called ui.css, this is the stylesheet file that holds all the css classes / rules we will use when theming our application.

Secondly there is a file called templates.js, in this file we will construct and theme the templates for the widgets of our application.

Okay, back out, and into the main directory. The main directory is the heart of the vegUIserve frame-work and holds all its core libraries.

VUIS_Entity.class.php

Library file that holds the VUIS_Entity object. The VUIS (VegUIServe) Entity should be the core object of every VUIS module as it provides shared access to the MYSQL API, error and session handling.

VUIS_UserInterface.class.php

Library file that holds the VUIS_UserInterface object. Probably a tad of a misleading name, but this object handles the communication of the server with the client by constructing output that the user-interface (the client) can understand, interpret and act upon.

elmer_functions.php

Poorly documented collection of functions that has been part of my projects for 5-6 years now.

DbCon.class.php

MYSQL API object

Let's go back into the config directory for a moment, because there's some files in there you dont know about yet.

They're called custom_config.php and custom_config2.php. The first is included before all the vegUIserve library files are included and second is included after all the vegUIserve files are included :D.

Next is the module directory, this is were the module related back-end stuff goes. Right now it should have one sub-directory called serverinfo. It holds 2 files. One is a library file called VUIS_ServerInfo.class.php which holds the ServerInfo object and the other is called init.php.

The init.php file is included automatically the back-end and holds the code that initializes the module and makes sure it's library is included and made create-able by the framework.

I suggest you check their contents quickly, but we will get more in depth on this later on.

The last directory is called 'script'. The script system is the way the front end will communicate with the backend. In order to send a request to the backend that request is first send to a php script called execute_script.php which is located in the vegUIclient root directory.

execute_script.php then calls the defined (by a GET or POST parameter called 'scr') script which should be located in the script directory.

For example, right now there should be a file called update_serverinfo.script.php located in the script directory. This script handles the server information display/update that you saw when you opened the vegUIclient web address in your browser.

We will get way more in depth on this, but what basically happens is that the client sends a request to execute_script.php that looks like this:

execute_script.php?scr=update_serverinfo

The backend then does it's stuff and sends a response to the client that contains the updated server info and a request to rewrite that to the screen, which the client then acts on.

I think i covered everything, and this should be a solid introduction, next part of this tutorial series is coming up tomorrow, where we will remove the serverinfo module and start the construction of our web application.

Related Posts

• VegUIClient - Part 2 - Building the application front-end
• VegUIClient - Part 3 - Building the application back-end

---

Your Comment

name:*
email-address:
Are you human?

Comments to this post: (1)

RSS Feed for comments

---

notvegu
on 28 Sep, 2007 - 21:45:03

testcomment

Report this comment

---

---