vegUI Tutorials

« Previous Entries

Archive

Next Entries »

vegUI Tutorial 20 - The Taskbar Widget Late, i know. This should be fairly quick though, the taskbar is not a very complicated widget.

First of you need to understand that once you set the Taskbar property of your Manager element to point to a taskbar that windows will automatically be added to the taskbar when they are first build. Of course there a methods to manually add and remove windows from the taskbar as well.

Okay, that out of the way, lets get going. We're going to assign the Taskbar property of the manager right away.


VegUIClient - Part 3 - Building the application back-end In the previous tutorial we successfully built the front-end for our simple editor application.

In this tutorial we will create the back-end part.

Go into the module directory and create a new sub-directory called simple_editor. In this directory create a new file called SimpleEditor.class.php.

This will be the library file for the SimpleEditor module on the back-end side. Open the file and add a new class that extends the VUIS_Entity class. The VUIS_Entity should be used as the base class for any VegUIServe module as it provides shared objects for database access, sessions and error handling.


VegUIClient - Part 2 - Building the application front-end Okay, in the first part of this tutorial series we went over the file structure of the vegUIclient addon and set it up so that we can now build our application on top of it.

First let's define what we will need in terms of widgets.

We will need a window that will perform as our text editor. The window will hold a text-area node that we will use to edit the contents of a file and a button to save the changes. Oh and of course a button to load the current file contents from the server.

For simplicity we will make it so that the window is opened automatically when the site is loaded.


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.


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.


VegUI Tutorial - The Dataset Widget Before we get started let me state that it is very beneficial if you have read the contentbox tutorial and the list tutorial as a lot of code can be simply copied over from those tutorials to this one :).

There is also a live example of this tutorial that can be observed by following this link and any graphics that may be used in this tutorial can be downloaded here.

Okay, let's go...


No bridge found ?! This message is displayed when trying to use the content box's fill_remote() method and no common VegUIBridge object has been initialized beforehand. To fix this issues simply call the init_bridge() method on the manager element before trying to use fill_remote()


Manager.init_bridge();


Applying effects to template elements If you want to apply an effect to a vegUI element that you will use as a template to clone other elements you need to be a little tricky.

Effects do not get cloned nor can they be applied to templates (unbuilt elements). In order to add an effect to a template and then have that effect be "cloned" to any element that is cloned from that template we need to utilize an event.

The best event to use for this issue is the ondock event. The ondock event get's fired when the HTML node controlled by the element is appended to the document - in other words when it becomes visible on the page. The onbuild event would be okay in most cases also, but some effects wont work correctly - such as the shadow effect.


Loading content dynamically In the live demonstration of vegUI i am loading all the windows dynamically. What does that mean? With dynamically i mean they're only loaded and built if they are needed.

I use the include() function of the vegUI manager object to do this. It can include a file that holds javascript code and eval the content in it. For example take a look at the file that i use to build and show the comment editor in the demonstation:

http://demo.vegui.org/module/comment/js/build.js

Since the code is eval'ed in the Manager's include function the this keyword points to the manager itself, which can come in kind of handy. The code in the build.js file checks if there is a child of the manager by the name of BlogComment and if there isnt it themes, builds and shows it. If the child already exists , that means that the comment editor was already themed and built before in which case the script only proceeds to show it.

This is nice when you have bigger web applications and do not want them to load everything at the time the application is loaded as this can cause some longer loading times relative to the size of the application.

Making the Manager the size of the browser window Sometimes you want to create an application that spans the whole browser window - and maybe even resizes with it. It is fairly easy to accomplish that using vegui, we simply have to tinker some with the attributes of manager node.

All we need to do is have our manager node take control of the body instead of building a new element for itself. Well almost.. there are a couple things that we need to do beforehand

Now, if your page only holds the vegui application we will need to make sure the body node itself spans the page. This is because the body node will only be as high as it needs to be, and it ignores absolute positioned elements. Its width will be at 100% but its height will be small unless there are enough static positioned nodes in it that resize it naturally. In order to force 100% height on the body node you can simply set the property via css

« Previous Entries

Show Overview

Next Entries »

---