Getting started with Web 2.0 using Wakanda

The Web 2.0 trend has invaded all devices connected to internet; PC ,Tablet ,Phone ...etc, The power of Web 2.0 is the fact that is based on HTML5 (Canvas, Video, Web Workers, Geolocalisation, ..etc), JavaScript and CSS, all those technologies are supported by the majority of devices and browsers. 

Wakanda is the open source platform that has come to make the development of Web 2.0 applications very easy, using HTML5, CSS, 'JavaScript on Client Side and on Server Side', and the NoSQL database. Concerning the SQL database Wakanda Team are now working on SQL connectors MySQL, SyBase, SQL Server ..., Cloud, Collaborative development, Globalisation and many other features would be available in the future versions.

So start using Wakanda Today, means becoming an expert the next year :). 

Wakanda (the NoSQL DataBase of Wakanda Server) could be used with other platform  ; 4D, Python, ...etc, using the REST HTTP API and JSON/RPC ,and for phones and tablets: PhoneGap, Sencha (Web App for mobile :Android, Blackberry, IOS ,...etc), KendoUI  (rich UI widget API by Telerik), and other popular jQuery libraries. 

Background

Learn my first article which explain the reasons why Web developers could find Wakanda very easy click here. Requirements: System requirements ,and for developers who needs to use Wakanda on Windows XP refer to this thread:  Wakanda in Windows XP 

Motivations 

Some reasons you might want to use Wakanda for Web 2.0 development are: Wakanda is Free so you don't need to buy a license to use it, all your code will be in one language JavaScript Client side, Server side, and query in DataStore. You don't need to know HTML5, CSS3 and JavaScript. You have a reach documentation and an active community for your help , also The NoSQL Database used in Wakanda can found an item queried from a billion objects in a matter of milliseconds... etc 

For more reasons refer to this page: Top Ten reasons to use Wakanda.

Forum link.

Using the code 

To use the code provided with this article you should download and install a Wakanda All in one DEV version download. Wakanda Studio and Wakanda Server should be in the same folder, after that download the solution provided with the article unzip it , now go to folder that contains Wakanda and execute the Wakanda Studio Wakanda Studio.exe. Click on File, Open Solution and go to the unziped folder , double click the .WaSolution file.

1) Open Solution

 2) Browse to the solution file ( the unzipped file that you downloaded )

and double click Company-Employees.WaSolution file. 

4) Confirm the use of the server.

5) Open the Show Data.html file Company-Employees/WebFolder/show data.html: 

6) run the page  by clicking on this button:

7) now, enjoy using the sample as described in the video in the top of this page. 

Developing Companies-Employees project  

In this part of my article, I'll not show you how to display "Hello World" :p as many introduction to platform do, but I was thinking that giving you a video that explain the use of Wakanda Studio to create an application and also in overview of toolbar and extensions of this IDE will be more useful and more simple.  

Wakanda is a Model-Driven platform, so The phases to develop Web 2.0 application using Wakanda are:

Now those videos will show you how to develop the Companies-Employees sample:

How to develop the Companies-Employees sample shown in the video.

How to develop the Companies-Employees sample shown in the video: Part 2.

Understanding the code

The code used on search

This is an example of querying a datasource, so in this code we search the company which its name begin with the letter typed in the text field by the user of our project.

 Collapse | Copy Code

textField7.keyup = function textField7_keyup (event)
{
    var companyName = $$("textField7").getValue();
    sources.company.query('name = :1 order by name', { params: [companyName + "*"]});
};

To get the text typed in the text field and assigned it to the variable. $$('WidgetName') is the template to get the widget object using in Wakanda:

 Collapse | Copy Code

var companyName = $$("textField7").getValue();

To query on a company sources we use the query() method and we give it as a argument the criteria of our search :  

 Collapse | Copy Code

sources.company.query('name = :1 order by name', { params: [companyName + "*"]}); 

P.S : "*" is the wild character in Wakanda platform, the old one was "@". 

The oder code which is used on Filldata.js file is :

 Collapse | Copy Code

documentEvent.onLoad = function documentEvent_onLoad (event)
{
    $$('dialog1').closeDialog();
    $$('container2').hide();
};

In the load event of the page, we hide the container which include the form used to create a new employee using the hide() method ( # show() ), also we close the dialog that show the photo of the employee.

As you have seen, we have used only many lines of simple and understandably code, and all the work was done using drag and drop and parameters.  

Tricks

Trick 1

To debug the code using in Client side, for example Filldata.js file you should put this string "debugger;" in the place where you need to stop your code, It has the role of breakpoints  

 Collapse | Copy Code

textField7.keyup = function textField7_keyup (event)
{
    var companyName = $$("textField7").getValue(); 
    debugger;
    sources.company.query('name = :1 order by name', { params: [companyName + "*"]});
};

so using firebug or Google chrome inspecting element feature, you could access this code in evaluate the variables and objects.  

Trick 2

If the server don't run due to some errors in the JavaScript code of the project, you could avoid this issue by going to the WaSettings file of your solution for example Companies-Employees. WaSettings and uncheck the checkBox of "Stop loading Solution if a project fails".

References

• For questions, help, feature request or other needs: Wakanda Forum
• For more YouTube channels: Wakanda Soft, Greg's Wakanda
• Facebook: WakandaSoft

Thanks to all Wakanda team for the great job.