Creating cool user interfaces in Chisimba using GWT, EXTJS and Netbeans-Part 1.

Tweet

1224 days ago

In this article, I document the steps that I followed when setting up environment for creating user interfaces in Chisimba using Google Web Toolkit (GWT), Ext GWT and Netbeans. This is the first in the series that I will post here.

Requirements:

1. JDK 1.6 or later
    
2. Netbeans 6.8 or later
   
3. GWT SDK 2.0 or later
   
4. Ext GWT 2.1 or later
   
5. Ant 1.7 or later is also necessary to run command line arguments.

 

Getting started

1. Download and unzip the Google Web Toolkit SDK. This contains the core libraries, compiler, and development server that you need to write web applications. On Windows, extract the files from the compressed folder gwt-2.0.0.zip. On Mac or Linux, you can unpack the package with a command like
   
   unzip gwt-2.0.0.zip
    
2. Download the latest Ext GWT release here. Unzip the distro anywhere on your file system, you will need to point to it later in the setup.
3. Download and install Netbeans IDE

Create GWT-EXT Library for Netbeans

1. Run your Netbeans IDE. Go to Tools → Libraries.
   
   

2. Click on New Library button on bottom left of the dialog to create a new library.
   
   

3. In the Library Name field , type Ext-GWT. Leave the Library Type to default. Click OK
   
   

4. The new library will be listed in the library list.
    

5. The new library is still selected, click Add JAR/Folder button on the right hand side of the screen. This should bring the filebroswer. Navigate to the directory you extracted gwt-2.0.0 select and add the following jars:
   
   gwt-api-checker.jar gwt-dev.jar gwt-servlet.jar gwt-soyc-vis.jar gwt-user.jar
   
   

6. Click on the Add JAR/Folder button again, but this time navigate to the folder you extracted gxt-2.1, and select and add gxt.jar file. The Ext-GWT library should now have the required jar files listed.

Now you are ready to create your first project.

Creating your project

In order to use the GWT engine, we will first a create a project using the command line tools that are shipped with GWT. GWT ships with a command line utility called webAppCreator that automatically generates all the files you'll need in order to start a GWT project. We will use these files to create a Netbeans project.

Generate GWT project using command line tools

Using your command line terminal, change directories to the root of gwt-2.0.0 folder. Create a new application called MyWebApp with the command:

webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

If you are using a Mac, you may need to make the script executable. In that case, use the following commands:

chmod u+x webAppCreator

./webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

The webAppCreator script will generate a number of files in MyWebApp/, including some basic "Hello, world" functionality in the class MyWebApp/src/com/mycompany/mywebapp/client/MyWebApp.java. The script also generates an Ant build script MyWebApp/build.xml.

Create Netbeans project

1. In Netbeans IDE, go to File → New Project
2. In Categories, select Java, in Projects, select Java Project with Existing Sources. Click Next.
3. In Project Name, type MyWebApp, and select the project folder of your choice. Click Next.
   
4. Here you add sources to the project. Click Add Folder button, and navigate to the MyWebApp folder you created in earlier section, and select the src folder. Click OK. The sources should be added now. The click Finish to create the project. The project will have errors. Now its time to add the library we created in earlier section.
5. Right click on your MyWebApp project, choose Properties. In the properties window, in Categories, select Libraries. Then on right hand of the window, click on Add Library. Look for Ext-GWT, and add it using Add Library button. Click OK. The errors in your project should disappear now

Running your application

In order to run the project, you need to set the Main class.

1. Right click on you MyWebApp project, select Properties. In the properties window, select Run. Add the following line to the Main Class field

   com.google.gwt.dev.DevMode

2. In the Arguments field, add the following

   -startupUrl MyWebApp.html com.mycompany.mywebapp.MyWebApp

3. In VM options field, add -Xmx256M

4. Your project is ready now. Click Run
   

    

5. Click on Launch Default Brower button to see your skeleton project. Note, since this might be your first time hitting the development mode server, it will prompt you to install the Google Web Toolkit Developer Plugin. Follow the instructions in the browser to install the plugin. Once the Google Web Toolkit Developer Plugin is installed in your browser, navigate to the URL again and the starter application will load in development mode.

    

In the next article, we will expand on our application to use Ext GWT components and see how you can integrate this into Chisimba.

---

Enterprise document management - dms 1.0.0 alpha

Tweet

1234 days ago

This is to announce the first release of enterprise document managenent system. It extends  (and duplicates some of the functionality) of the filemanager module in chisimba. The system is implemented as a module in chisimba, named dms. Its an alpha release . Some of the feautures available are:

1. Folders: Create /rename/ delete folders
2. All uploaded docs are assigned ref nos
3. Admin assigns view/read/write permissions per folder to users
4. Icon preview for files
5. Download of uploaded files, the download link is hidden to avoid illegal donwloads
6. Upload directory outside the webroot folder for security reasons
7. Fileupload manager ...gives upload progress
8. Easy to use 'dolphin' like files explorer developed using ext-gwt.

Most of the code was developed through the KIM internship programme.


  

---

Chisimba Realtime Tools 1.0.2 beta3

Tweet

1257 days ago

Chisimba Realtime Tools  1.0.2 beta3 is here. This is a minor bug-fix release . Here are the main issues addressed:

1. Audio/Video subsystem was crashing sometimes, taking down the whole system with it. Fixed.

2. When a participant is kicked out of the room, there was no notification to the affected user. Fixed.

3. Users could start private chats with themselves. Of course its silly. Fixed

4. Admin could kick him/her-self from the room. Fixed.

5. If a remote desktop viewer is closed when in session, it could not be opened. This has been fixed.

A preview of the  features to come in 1.0.3:

1. Emotion indicators

2. Accurately syn'ced pointers on whatever screen size

3. 24/7 visible whiteboard toolbar

and  bug fixes.

etc.

Recording feature will debut  in 1.1. For downloads and documentation, visit the download page here. Try the demo here

 

 

---

Context tools

Tweet

1260 days ago

These last few days we have been busy setting up and testing context tools. Context tools allow users to easily insert links to chapters and filters into content when creating or editing a chapter/page in KEWL. Filters refer to special tags that allow for the simple embedding, inclusion of external content or parsing of text using BBCode style tags, Wordpress style tags, or Chisimba tags in any content, be it a content chapter or a blog. With filters, you can use functionality of one module to provide content for another. For example, you could use the Wiki module to maintain a blog page. Find full tutorial here. Back to context tools. Fatima was kind enough to prepare a video to demonstrate how to use content tools. The tools work fine in firefox, but we still have issues with IE, for example inserting COLORBOX filter wont work, you have to do it manually. We  just haven't figured out how to programmatically select text in IE, yet. We are using ckeditor 3.0.1.  On to the video:

---

Start of a milestone

Tweet

1263 days ago

Today marks the start of an important milestone: eLearning. We have just started putting up a platform that is going to transform the eLearning experience. The first official test environment is up and running. Its here that the amazing technologies will be pushed to thier limits before being released into production. I will be blogging regularly on the progress, the new feaures we implement, the roadmap etc. For the techies, David Janks did a very nice intro, see the video below:

---