Madhuka

JavaScriptMVC (JMVC)

2011-12-26T22:25:00.000-08:00

It is client-side JavaScript toolset. It is broken down into four sub-projects:

jQueryMX is a collection of useful jQuery libraries that provide the missing functionality necessary to implement and organize large-scale jQuery applications.
StealJS is a "code manager" that keeps your code beautiful and organized while developing and FAST for users in production. dependency management, code cleaning, building, etc.
FuncUnit is a web application testing framework
DocumentJS provides powerful JavaScript documenting capabilities.

Installing JavaScriptMVC

Download the latest JavaScriptMVC. http://javascriptmvc.com/builder.html

Unzip the folder on your file system or web server.
eg: I am hosting in WAMP so I am unzip it in www fodler

We can Verifing the install by going to dirtectory by cmd and type js.

This starts the Rhino JS engine. Type quit() to exit. now enjoy the js with mvc.

Shindig on Windows7 with Tomcat

2011-12-19T21:58:00.000-08:00

Download Apache Shindig from Here (war),

Or you can build it from trunk, I will write on it later post.

System Requirements

Java version: JDK 1.5 or above
As in topic we need Apache Tomcat to do this tutorial.If you do not have tomcat, Download it from here (32-bit/64-bit Windows Service Installer), just install it just by clicking the downloaded setup.

Go to the <Tomcat Directory>\webapps\ folder and delet folder called ROOT

Past the Downloaded ' shindig-server-2.0.0.war' to 'webapps' Directory and rename it as 'ROOT.war'

Start the tomcat as admin, It will create the ROOT folder and here it look like

Go to http://localhost:8080/samplecontainer/samplecontainer.html

Here it look like.

Let is do more in here, later and it is the Hello World to “Apache Shindig”

Do Patch to Carbon product and Debug it

2011-12-13T00:39:00.000-08:00

When you get patch file or if you create patch file for carbon. You need to apply it to the product and debug it. In this post i will explain it

copy the jar file to the <CARBON_SERVER>/repository/components/patches/patch<patchID> and run the carbon server with applying the patches to server by below command

wso2server.bat -DapplyPatches

After the patch applied you can see that patch0000 is created now you can enjoy the patch. But If you want to see the patch is work well as developer. you need have debug

Do debug now

wso2server.bat --debug 8888

Now configure debug congfiguration as below

After that go to debug mode of UI

Then run debug by click debug button in debug mode and go to the place for set break point and duble click on there

we can find the list of break points

Press F6 we can move to next and we can inspect the values

Work complete

make sure you check all the place you did change by debug level.

Better to know JPDA

2011-12-05T02:33:00.000-08:00

Introduction to Java Platform Debugger Architecture (JPDA)

JPDA is a multitiered architecture
It is consists of two interfaces the

JVM Tool Interface (JVMTI)
Java Debug Interface (JDI)

in this architecture we can find Java Debug Wire Protocol and it is for tie back-end and front-end.

The JVM Tool Interface (JVMTI) is a low-level native interface that defines the services a Java virtual machine provides for tools such as debuggers and profilers. JVM TI was introduced in J2SE 5.0 and replaced JVMDI and JVMPI.

The Java Debug Wire Protocol (JDWP) describes the format of debugging information and requests transferred between the process being debugged and a debugger front end, which implements the JDI, such as Eclipse, JBuilder, IntelliJ IDEA, etc. (The program being debugged is often called the debuggee in Sun's JPDA specification)

Terms in JPDA specification

A transport defines how applications access and transmit data between the front end and back end
A connector is a JDI abstraction used to establish a connection between a debugger application and a target VM.

Let is try some real work

Open eclipse and create java project

and java class (Here is my class)

class Test {

    public static void main(String str[]) {
        int x=10;
        System.out.println("X ="+x);

}
}

Then make jar file from this (Right Click and go to Export and select file type as jar)

Now we copy that jar file to remote machine or same machine, and start that jar with debug mode. The simple Java application can act as a debug server or client. Depending on the configuration, you can choose either Socket Attach or Socket Listen connection type in Eclipse.

Target VM acts as debug server

In here we invokes the Java application on the remote side, acts as a debug server, and listens for a socket connection on port 8000. The target VM will be suspended until the debugger connects.

C:\Users\Madhuka\workspace\jars>java -Xdebug -Xrunjdwp:transport=dt_socket,server=y,address="8000" -jar MyTest.jar
Listening for transport dt_socket at address: 8000

Start Eclipse using the remote launch configuration and specify the target VM address of the remote application. by click
Run > Debug Configurations

Double-click the Remote Java Application in the Eclipse menu.

Set break points and Click the Eclipse Debug button

do some code change and see that debug is work well

System.out.println("X ="+ ++x); do the change in debugger mode. We can debug it still we did not save the change

Next post I will explain debugging real world product with patching.

PuTTy

2011-11-30T10:28:00.001-08:00

I just need know new things so I join a team called Build. To do some release for my company. So I just got email like this with some file

and command

“ssh -p2233 -i /home/jhona/Downloads/Mykey/id1_rsa home1@run1.usa1.max.net”

We know this to used in Ubuntu. But How to do this windows. That is why we need PuTTY

What is PuTTY?

PuTTY is an SSH and telnet client, developed originally by Simon Tatham for the Windows platform. PuTTY is open source software that is available with source code. Name of PuTTY remind me a one thong 'tty', 'tty' is the name for a terminal in the Unix tradition. PuTTY's development dates back to early 1999

Features of PuTTY better to know

The storing of hosts and preferences
Control over the SSH encryption
Command-line SCP(Secure copy) and SFTP (Secret File Transfer Protocol, Secure FTP) clients
IPv6 support
Self-contained executable
Public-key authentication

Dowload it from Here

In here You find Many Applications better to know
which App for what?

PuTTY - the Telnet and SSH client itself;
PSCP - an SCP client, i.e. command-line secure file copy;
PSFTP - an SFTP client, i.e. general file transfer sessions much like FTP;
PuTTYtel - a Telnet-only client;
Plink - a command-line interface to the PuTTY back ends;
Pageant - an SSH authentication agent for PuTTY, PSCP and Plink;
PuTTYgen - an RSA and DSA key generation utility;
pterm - a standalone terminal emulator.

Let is connect to remote sever buy using putty

By above ssh command I am get the details to add putty

here is in picture mode for better understanding

I got rsa key.By it I can get ppk file from PuTTYgen

Lightweight Model, View, and Controller

2011-11-30T08:12:00.001-08:00

Lightweight Model, View, and Controller from scratch using JQuery.

A simple data flow diagram for this View <=> Controller <=> Model <=> Local Storage<=>AJAX<=> WS<=> Server

The View will only communicate with the Controller, where all of our application logic resides. The Controller will tell the Model when and what data to load. The Model will keep data and manage the AJAX calls to server.

View should only do one thing, and that’s display data and never application logic in here.

What do we need to have in here?
- Showing data to the user,
- Capturing user feedback eg: mouse clicks, text input, drag and drops, touch

The Model is in charge of data and loading data from the server via AJAX and caching that data locally to minimize duplicate AJAX calls for improve the performaces of the site. There are no any UI code and application logic at all.
(We keep track of who is listening to the Model, so we can notify them when important things happen in the Model.)

methods of the Model can be called by the Controller for to request data.

Controller will have application logics. View and Model will notify listeners when something happened and Controller is that listener. Simple it is Controller’s job to listen to all of the events going on in the Model and the View.

Why is that listener functions is important?
These listener functions make it incredibly simple keep the view 100% in sync with the state of the Model.

Lets do some coding in action in Later Post

Second MVC for HTML5

2011-11-28T03:05:00.001-08:00

I am not going to write something that on MVC that we learn in and out but I will point out some new look to it. Few days ago, I used to see a diagram in office where I was seating down something like this.

I just see some lightweight Model, View, and Controller in java script. Normally we do some MVC for server side some way it look like this.

But in first above diagram it has second MVC. I have work in some local storage and offline email system in HTML5 some months ago. How would it look like if we added HTML5 for this.

It will be full HTML5 web. This will give more capabilities for in actions in HTML5 such offline running, local storages and with it this will boost the speed.

TouchEvents for Smart Phones and Tabs

2011-11-15T04:17:00.001-08:00

I am doing some html5 web application today, So I was looking touch events for web page. Here I will blog what I learnt on it.
Today lot of people browser internet mainly from smart phones and tabs.They usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers.Touching enable sophisticated applications, web developers need a way to handle these events not only the touch now it implies multi-touch even.
Apple introduced their touch events API in iOS 2.0, Touch Events version 2 by W3C and Android has been catching up to this now.
I will point out useful techniques to develop touch-enabled applications.
TouchEvent objects that can occur are:

touchstart
Sent when a finger for a given event touches the surface.
touchmove
Sent when a given event moves on the surface.
touchend
Sent when a given event lifts from the surface.
touchcancel
Sent when the system cancels tracking for the touch.

How to make it in action
lets do simple html page and test this touch events

<!DOCTYPE html>
<html>
    <head>    
        <title>Touch Me</title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript" src="magictouch.js"></script>
        </head>
    <body onload="myTuchOn()">
        <canvas id="canvas" width="300" height="300" style="top:0px; left:0px; width: 300px; height: 300px;"></canvas>
        <object id="tuio" type="application/x-tuio">
            Plugin was not found
        </object>
    </body>
</html>

now write function myTuchOn() with this event listeners

canvas = document.getElementById('canvas');

                canvas.addEventListener('touchend', function() {
                    console.log('touch end');
                });

                canvas.addEventListener('touchmove', function(event) {
                    console.log('touch move');
                    event.preventDefault();
                });

                canvas.addEventListener('touchstart', function(event) {
                    console.log('touch start');                

                });

Each touch event includes three lists of touches:

touches: a list of all fingers currently on the screen in array of touch
targetTouches: a list of fingers on the current DOM element.
changedTouches: a list of fingers involved in the current event.

I will update 'touchstart' event

 canvas.addEventListener('touchstart', function(event) {
                    console.log('touch start');
                    myTouches = event.touches;
                    console.log('touch count' + myTouches.length);
                    var i, len = myTouches.length;
                    for( i = 0; i < len; i++) {
                        var touch = myTouches[i];
                        var px = touch.pageX;
                        var py = touch.pageY;
                        console.log('Touch at ' + px + ',' + py);
                    }

                });

Lets run it and check is it work?

Here I will touch web page with one finger and move and get it up.

Here I touch with 3 fingers and still it work fine..

Be read for more
These lists consist of objects that contain touch information such as identifier, target, coordinates and rotationAngle

Multi-paging from jQuery Mobile

2011-11-13T20:54:00.001-08:00

If you did not try hello world with jQuery mobile here is link to make hello world to it, Hello world with jQuery Mobile. Here I will post on multi paging and transition in pages with page transition events in this post.

Basic that we need to know
A single HTML document can contain multiple 'pages'
Divs with a data-role of "page" with unique ID
When we click a link, the framework will look for an internal 'page' with the ID and transit to it.(Because of this it's not possible to an anchoring.)

       1: <div data-role="page" id="homePage">

       2:     <div data-role="header">

       3:         <h1>Home Page</h1>

       4:     </div><!-- /header -->

       5:     <div data-role="content">

       6:         <p>

       7:             <a href="#aboutPage">About Page</a>

       8:         </p>

       9:     </div><!-- /content -->

      10: </div><!-- /page -->

      11: <!-- Start of second page -->

      12: <div data-role="page" id="aboutPage">

      13:     <div data-role="header">

      14:         <h1>About Page</h1>

      15:     </div><!-- /header -->

      16:     <div data-role="content">

      17:         <p>

      18:             <a href="#homePage">Home Page</a>

      19:         </p>

      20:     </div><!-- /content -->

      21: </div><!-- /page -->

In Here we have Ajax navigation for page Titles even

data-title="Page Title"

in data role page. It automatically updated to match the data-title of the page currently in view

Page transitions

jQuery Mobile framework includes a set of six CSS-based transition.

By default, the framework applies the right to left slide transition. To set a custom transition effect, add the data-transition attribute to the link.

<a href="#aboutPage" data-transition="pop">About Page with POP</a>

We can create custom CSS-based transitions

eg: normally page slide happen from right to left. So i need to make it other vise.

       1: <style>

       2:             

       3:     .slide.in {

       4:         -webkit-transform: translateX(0);

       5:         -webkit-animation-name: slideinfromleft;

       6:     }

       7:  

       8:     .slide.out {

       9:         -webkit-transform: translateX(-100%);

        -webkit-animation-name: slideouttoright;

    }

  

    @-webkit-keyframes slideinfromright {

        from { -webkit-transform: translateX(100%); }

        to { -webkit-transform: translateX(0); }

    }

    @-webkit-keyframes slideouttoleft {

        from { -webkit-transform: translateX(0); }

        to { -webkit-transform: translateX(-100%); }

    }

    /*reverse*/

    .slide.in.reverse {

            -webkit-transform: translateX(0);

            -webkit-animation-name: slideinfromleft;

        }

  

        .slide.out.reverse {

            -webkit-transform: translateX(100%);

            -webkit-animation-name: slideouttoright;

        }

  

        @-webkit-keyframes slideinfromleft {

            from { -webkit-transform: translateX(-100%); }

            to { -webkit-transform: translateX(0); }

        }

  

        @-webkit-keyframes slideouttoright {

            from { -webkit-transform: translateX(0); }

            to { -webkit-transform: translateX(100%); }

        }

  

</style>   



It is so, easy now i need to controle the time.

The CSS for jQuery Mobile defines the default easing and duration in the following rules.

Let make slow move

.in, .out {

   -webkit-animation-timing-function: ease-in-out;

   -webkit-animation-duration: 2500ms;

   }

Page transition events

We can get triggers before and after these transitions.

pagebeforeshow

pagebeforehide

pageshow

pagehide

eg:

       1: <script>

       2:         $( 'div' ).live( 'pageshow',function(event, ui){

       3:           console.log('page hide: '+ ui.prevPage.attr('id'));

       4:         });

       5:  

       6:         $( 'div' ).live( 'pagehide',function(event, ui){

       7:           console.log('page show: '+ ui.nextPage.attr('id'));

       8:         });

       9:         

      10:         

      11:         </script>

Add multi-tenancy for IS

2011-11-07T22:59:00.001-08:00

I am making this post for who never ever see wso2 IS or manager. (To build branch and build in critical time)

Build C:\WSO2\Branches\products\manager\1.5.1>

build “C:\WSO2\Branches\products\is\3.2.1>”

Unzipping Products

go to “C:\WSO2\Branches\products\is\3.2.1\modules\distribution\service\target” and get

"wso2stratos-is-1.5.1.zip” and zip it

I will unzip it in “F:\WSO2 Product\IS3.2.1-services\wso2stratos-is-1.5.1”

In “C:\WSO2\Branches\products\manager\1.5.1\modules\distribution\service\target” will have “wso2stratos-manager-1.5.1.zip” and unzip it in “F:\WSO2 Product\New\wso2stratos-manager-1.5.1”

Run Both servers at once

F:\WSO2 Product\New\wso2stratos-manager-1.5.1\repository\conf in this directory you will find “carbon.xml” in there you will make change “offset” tag value to 1

Run server

‘F:\WSO2 Product\New\wso2stratos-is-1.5.1\bin\wso2server.bat’ click this bat in linux ‘wso2server.sh’ for

same “F:\WSO2 Product\New\wso2stratos-manager-1.5.1\bin\wso2server.bat” for wso2stratos-manager

https://localhost:9443/carbon/admin/index.jsp?loginStatus=true

https://localhost:9444/carbon/admin/index.jsp

So far so Good, both are running OK,

Now we will try to add multi-tenancy support for WSO2 Identity Server

Now get the feature multi-tenancy from wso2stratos-manager

‘F:\WSO2 Product\New\wso2stratos-manager-1.5.1\repository\components\plugins’ This is the place that for us to pick the jars. Let is pick what we need,

org.wso2.carbon.tenant.dispatcher-1.5.1.jar
org.wso2.carbon.tenant.mgt-1.5.1.jar
org.wso2.carbon.tenant.mgt.core-1.1.0.jar
org.wso2.carbon.tenant.mgt.stub-3.2.0.jar
org.wso2.carbon.tenant.mgt.ui-1.5.1.jar

lets find the missing jar for my task

stratos-is-1.5.1\bin>wso2server.bat –DosgiConsole

Start server with osgi

osgi> ss tenant

stratos-is-1.5.1\bin>wso2server.bat -DosgiConsole

Bundle id is 275

osgi> start 275

“org.osgi.framework.BundleException: The bundle could not be resolved. Reason: Missing Constraint: Import-Package: org.wso2.carbon.b
illing.mgt.services; version="0.0.0"

Let is go to ‘\wso2stratos-manager-1.5.1\repository\components\plugins’ and find this jar and install billing jar and start it,

like this way we can find the missing jar for our task.

Here is list of jar that I found

· antlr-2.7.7.wso2v1.jar
· antlr-runtime-3.1.1.wso2v1.jar
· axis-1.4.0.wso2v1.jar
· drools-5.0.1.wso2v1.jar
· janino-2.5.15.wso2v1.jar
· joda-time-1.6.0.wso2v1.jar
· json-1.0.0.wso2v1.jar
· jsr94-1.1.0.wso2v1.jar
· kaptcha-2.3.0.wso2v1.jar
· mvel2-2.0.10.wso2v1.jar
· mysql_connector_java_5.1.10_bin_1.0.0.jar
· org.wso2.carbon.account.mgt-1.5.2.jar
· org.wso2.carbon.account.mgt.stub-3.2.2.jar
· org.wso2.carbon.account.mgt.ui-1.5.2.jar
· org.wso2.carbon.activation-1.5.1.jar
· org.wso2.carbon.billing.core-1.5.2.jar
· org.wso2.carbon.billing.mgt-1.5.2.jar
· org.wso2.carbon.business.messaging.paypal.integration.core-3.2.0.jar
· org.wso2.carbon.common-1.5.2.jar
· org.wso2.carbon.email.sender-1.5.2.jar
· org.wso2.carbon.keystore.mgt-1.1.0.jar
· org.wso2.carbon.payment.paypal-1.5.1.jar
· org.wso2.carbon.redirector.servlet-1.1.0.jar
· org.wso2.carbon.redirector.servlet.stub-3.2.0.jar
· org.wso2.carbon.redirector.servlet.ui-1.1.0.jar
· org.wso2.carbon.register.ui-1.5.2.jar
· org.wso2.carbon.rule.core-3.2.0.jar
· org.wso2.carbon.rule.engine.drools-3.2.0.jar
· org.wso2.carbon.rule.engine.jsr94-3.2.0.jar
· org.wso2.carbon.rule.server-3.2.0.jar
· org.wso2.carbon.rulecep.adapters-3.2.0.jar
· org.wso2.carbon.rulecep.commons-3.2.0.jar
· org.wso2.carbon.stratos.common.stub-3.2.2.jar
· org.wso2.carbon.task-3.2.0.jar
· org.wso2.carbon.tenant.mgt-1.5.2.jar
· org.wso2.carbon.tenant.mgt.core-1.1.0.jar
· org.wso2.carbon.tenant.mgt.stub-3.2.0.jar
· org.wso2.carbon.tenant.mgt.ui-1.5.2.jar
· org.wso2.carbon.tenant.reg.agent.client-1.1.0.jar
· org.wso2.carbon.tenant.reg.agent.stub-3.2.0.jar
· org.wso2.carbon.tenant.register.stub-3.2.2.jar
· org.wso2.carbon.theme.mgt-1.1.0.jar
· org.wso2.carbon.theme.mgt.stub-3.2.0.jar
· org.wso2.carbon.theme.mgt.ui-1.5.2.jar
· org.wso2.carbon.throttling.agent-1.5.2.jar
· org.wso2.carbon.throttling.agent.stub-3.2.0.jar
· org.wso2.carbon.upgrade-1.1.0.jar
· org.wso2.carbon.usage-1.5.2.jar
· org.wso2.carbon.usage.meteringqueryds.stub-3.2.0.jar
· org.wso2.carbon.usage.meteringsummarygenerationds.stub-3.2.0.jar
· org.wso2.carbon.usage.summary.generator-1.5.2.jar
· org.wso2.carbon.validate.domain-1.5.2.jar
· org.wso2.stratos.identity.dashboard.ui-1.5.2.jar
· org.wso2.stratos.identity.login.ui-1.5.2.jar
· org.wso2.stratos.manager.services.mgt-1.1.0.jar
· quartz-1.6.0.wso2v2.jar
· synapse-commons-2.1.0.wso2v4.jar
· synapse-core-2.1.0.wso2v4.jar
· synapse-extensions-2.1.0.wso2v4.jar
· synapse-tasks-2.1.0.wso2v4.jar

Here is that tenant osgi bundle start well

https://10.100.3.31:9443/carbon/

go to browser and check for it,

Username:admin

Password :admin

Here we can see ‘Multitenancy’ in main slider bar

Before going more we need some configuration file from manager

Copy the related configuration files from stratos-manager home\repository\conf to IS-home\repository\conf dir

adding New Tenant

Here it work!!

If you feel you need more good looking in here added resource files with themes by adding

stratos-manager home\resources to to IS-home\ resources

Building WSO2 Branch 3.2.2, Where all others are committing to it

2011-10-31T03:41:00.001-07:00

I was building branch where normally that easy to make, But I need to build 3.2.2 that is releasing soon. So all of them were committing to it. So it was breaking lot of time. But truly this help to learn lot in pom.xml and maven.

I was getting Build error on the way, In here I was missing some UI.jar

In there I move to

‘C:\WSO2\Branches\components\identity\org.wso2.carbon.identity.relyingparty.ui\3.2.2’

get up from there. (not make do svn from particular 2 root level, if so error will increase) better get root svn up, But in such time better to try to svn up only particular place because lot of changes happening to it,

Try to build form break point

Above one was some far simple one. Some time, It say build issue when I try to make it say I have fix some in services stub then I try it say some in dependencies. so I have to move particular place and make it.

eg:

to the miss file place get update?

by the name of the jar we can find the dir of that missing jar

It have never org.wso2.carbon:org.wso2.carbon.reporting.api:jar:3.2.2 so I go to “C:\WSO2\Branches\components\reporting\org.wso2.carbon.reporting.api”

get svn up

then build WSO2 Carbon - Reporting API

finally this make it work.

Start your Android Tab by CMD

2011-10-25T05:19:00.001-07:00

I am doing some html5 web app developments and I need to check some work in Android Tab, But I do not have one. I testing all in my iphone 4. It is really OK,

I love command prompt a lot, in windows (Normally other do not like it much, cmd teach me a lot). even I like linux terminal, It do all for me.:)

I will tell you make Android Emulator on CMD. I am in windows 7.

You shuld need Android SDk and manger for this http://developer.android.com/sdk/index.html
Download it,

go to 'Android\android-sdk\tools' in my one 'C:\Program Files (x86)\Android\android-sdk\tools' by cmd

and type "emulator -avd <name>" eg:

emulator -avd Phone

wow, It loaded!!

play with it,

Here is phone too

Note:

Where is this Phone that I am calling, It was create before hand and it is reside in my PC at “C:\Users\Madhuka\.android\avd”

To make Android Phone go to start --> type 'SDK' go to Android SDk Manager

in there go to Virtual Devices--> click new and have what type you need.
enjoy it.

HTML5 in Mobile Devices??

2011-10-24T04:55:00.001-07:00

HTML5, core technology of the Internet, provides mobile device users richer web applications and improved usability with providing common in smartphone-optimized mobile web applications. HTML5 adds many new syntactical features. Ian Hickson of Google is the editor of HTML5.
Before making coding in application. We need look around more. I have done HTML5 web application for email system with offline capability. Again I got a chace to work on HTML5. HTML5 can be evolution of the web some of time as I think.

So I have been asked lot of question from around me.

Mainly,

“What are features of HTML5 that make mobile application strong?”

yAP, HTML5 capabilities in mobile devices.( Mobile Web Metrics Report H2/2011 )

GeolocationAPI
offline web application
WebStorage
CSS3 Selectors
Video / audio support
Advanced forms
2D animations

HTML5 promises to push the capabilities of web applications to the point of making web apps as engaging as Flash applications and as integrated with the device as mobile applications.

Frameworks for app development

jQuery Mobile, It is built on jQuery.
Sencha Touch, is the first HTML5 framework for mobile devices http://www.sencha.com/products/touch/demos/
jQTouch, This framework is heavy on the CSS. http://jqtouch.com/
SproutCore http://www.sproutcore.com/
M-Project, use of jQuery with features like offline support http://the-m-project.net/

Platform

WorkLight is a mobile application platform with frameworks such as PhoneGap, Sencha Touch and JQuery, http://www.worklight.com/
MobileNationHQ http://www.mobilenationhq.com/

This all in Tech work,
I never forget to see what is my users are wish to see.
so Master Question is

Mobile Users Prefer Browsers over Apps?

[resource URL: http://www.emarketer.com/Article.aspx?R=1008010]

Yap, Users are know getting in to it,

For even Me, I used to read news on mobile native apps. But with google news I shift it to web application mode.
It is nice look and more user friendly than app.

Let us begin to work!! with HTML5 mobile and PC application.

Building Carbon Branch from Windows 7

2011-10-21T04:06:00.001-07:00

Introduction

WSO2 is the lean enterprise middleware company, delivering the only complete open source enterprise SOA middleware stack ....read more http://wso2.org/

Things to be needed

tortoise http://tortoisesvn.net/
Maven 2.2.1 http://maven.apache.org/download.html
Sun Java Development Kit 1.6 http://www.oracle.com/technetwork/java/javase/downloads/index.html

Download them from link and install them in to windows

Are you need help to setup Maven?
Here it is http://madhukaudantha.blogspot.com/2011/09/installing-maven-in-windows-7.html
make sure you got maven 2.x.x

Install java, set java path

such as

JAVA_HOME to java jdk dir
and PATH TO java bin dir

Setup SVN in windows

If you do not have sub version control (svn) in your windows 7

you can download TortoiseCVS http://www.tortoisecvs.org/download.shtml and install it.
or you preferred cmd work (standalone command line Subversion package) like slik http://www.sliksvn.com/en/download/ . In Slik we have to give PATH in environment variable ‘C:\Program Files\SlikSvn\bin’

Now go to the place where do need to make check out carbon. In My case I need it in ‘C:\WSO2\Carbon’. Go to the particular place and right click on the mouse go to ‘svn checkout’

then give the URL for Repo in wso2 carbon branch repo url is

‘https://svn.wso2.org/repos/wso2/branches/carbon/3.2.0’

Let increase java heap size to avoid such below errors

set MAVEN_OPTS=-Xmx2048m -Xms512m -XX:MaxPermSize=512m -XX:ReservedCodeCacheSize=1024m

You can set this environment variable

Then go to branch directory and type

mvn clean install

Enjoy you meals and play some games in this time because it will take time. but look in to PC randomly to check is there any brakes in building.

some time you need ‘3.2.2’ version to build rather than default one.

If so go to ‘C:\WSO2\Branches\patch-releases\’ (Where you get wso2 carbon branch) in this directory we can find the version you need, I need 3.2.2

so make, We need maven clean install so type

mvn clean install

Tips for building

if it say can’t delet a file then go to dir type this with file name

del filename.extension

if It stop on particular place start from there. (eg: start from abdera-il8n)

mvn clean install –Dmaven.test.skip=true -rf :abdera-i18n

Some time you do not need test, so skip by this

mvn clean install -Dmaven.test.skip=true

to build offline

mvn clean install –o

Windows to Linux Bridge,

2011-10-17T05:12:00.001-07:00

I am currently working on a machine tat has Ubuntu 11 and windows 7. I need to get some file from Ubuntu with going to it (restarting)
Here is DiskInternals Linux Reader that I used for it. Linux Reader is 100% free application.

This program make bridge between Windows and Ext2/Ext3/Ext4, HFS and ReiserFS file systems. Program provides for read-only access and does not allow you to make records in file system partitions. I can get save that folder or file to my windows and can do edit need. It will not affect the work of Linux later.

Download it http://www.diskinternals.com/download/Linux_Reader.exe

I am looking in to Linux file from windows 7

Getting Linux files in to windows 7

It is very simple work.

Hello world with jQuery Mobile

2011-10-11T21:49:00.001-07:00

jQuery Mobile is touch-friendly web UI developmentframework by the jQuery project team. It is compatibale with a wide variety of smartphones and tablets. It is compatible with other mobile app frameworks and platforms such as PhoneGap. It is having Dual license GPL or MIT. It gives High Quality on iOS from version 3.1.3, Symbian S60 v5.0, Symbian UIQ v3.2, BlackBerry OS 6.0, Android v1.5, Windows Mobile v7.0 and webOS 1.4.1 by Native Mobile browser support.

jQuery Mobile relies on HTML5 data-* attributes to support the various UI elements, transitions, and page structure. They are silently discarded by browsers that don't support them.

Let us write Hello World with jQuery Mobile
Download jQuery Mobile from http://jquerymobile.com/download/

Here is header section of html file

<head>
    <title>jQuery Mobile </title>
    <link href="jquery.mobile/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="jquery.mobile/jquery-1.6.4.min.js"></script>
    <script src="jquery.mobile/jquery.mobile.min.js"></script>
</head>

HTML head section we load three jQuery Mobile components:

jQuery Core library — The core jQuery library
jQuery Mobile library — The mobile-specific part of the jQuery framework
jQuery Mobile CSS — The CSS that defines the core jQuery Mobile UI elements

Here is body section

Defining a page block <div data-role="page">

Note:
<div data-role="page" id="page1">
The id attribute is necessary only if local multiple page blocks reside on the same HTML file document.

The next couple of code listings show how to define the different header, content, and footer sections of the page.

Here is full code,

<html>
    <head>
    <title>jQuery Mobile </title>
   <link href="jquery.mobile/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
   <script src="jquery.mobile/jquery-1.6.4.min.js"></script>
   <script src="jquery.mobile/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="header" data-theme="a">
        <h1>The title</h1>
    </div>

<div data-role="content">
        <p>The content</p>
    </div>

<div data-role="footer">
        <h4>The Footer</h4>
    </div>
</div>

</body>
</html>

Host it even in local server and test it, Here I am testing from iPhone 4.

Shifting from Maven 3 to 2

2011-10-04T21:41:00.000-07:00

I was building WSO2 carbon trunk (maven 3) and carbon branch (maven 2) so here i will post how do this shifting in Ubuntu

Download Maven 2.2 from here http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-2.2.1-bin.tar.gz

$ tar -xzvf apache-maven-2.2.1-bin.tar.gz
…. this command will unpacks Maven

$ sudo mkdir /usr/local/apache-maven/maven2
… creates a maven sub-folder in the usr/local/ folder

$ sudo cp -R apache-maven-2.2.1 /usr/local/apache-maven/maven2
…. copies extraced Maven files to the new sub-folder.

Add the Maven 2 PATH variables to the environment file.
$ sudo gedit /etc/environment
… to edit the environment file.

Two changes required:
Firstly add the following lines.
JAVA_HOME="/usr/lib/jvm/java-6-sun-1.6.0.26"
M2_HOME=”/usr/local/apache-maven/maven2/apache-maven-2.2.1″
MAVEN_HOME=”/usr/local/apache-maven/maven2/apache-maven-2.2.1″
M2=”/usr/local/apache-maven/maven2/apache-maven-2.2.1/bin”

Secondly change the top line for PATH. It should look like this:

PATH=”/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/apache-maven/maven2/apache-maven-2.2.1/bin”

Let is check the Installation of maven 2,
Logout:
Log back in to the above user

check the maven version $ mvn –version

October 4 to iPhone 5?4s?

2011-10-02T20:10:00.001-07:00

October 4 is expected to be only the announcement date of the new iPhone. October 14 is the one you’ll want to put aside for queuing outside your nearest Apple store. If Apple uses the announcement, then October 14 or 15 could see the new iPhone reach the first consumers.

- Posted using BlogPress from my iPhone4

Location:Jayantha Mallimarachchi Mawatha,Colombo,Sri Lanka

Installing Maven in windows 7

2011-09-26T22:01:00.001-07:00

1. Download MAVEN http://maven.apache.org/
2. Unzip it and rename it to ‘maven’
3.Set environmental variables JAVA_HOME to your Java environment, MAVEN_HOME to the directory you uncompressed, to do it on command prompt type this (Assume Ant is installed in E:\maven\.)
set MAVEN_HOME=E:\maven
set JAVA_HOME=D:\Program Files\Java\jdk1.6.0_03
set PATH=%PATH%;%MAVEN_HOME%\bin
In windows 7 you can go to Control Panel\All Control Panel Items\System or right click on Computer and then to “Advance system setting”
-Choose Advanced Tab
-Press Environtmen Variables Button
-In the System Variables, click New Button
Give the Variable Name:MAVEN_HOME Give the Value: E:\maven Click OK

Then,we’ll add new MAVEN_HOME path,
And Click again on New Button if you do not have ‘path’ Variable in there, if so select it and edit as
Give the Variable Name:path Give the Value D:\Program Files\Java\jdk1.6.0_03\bin;%MAVEN_HOME%\bin Click OK
4. Check wheter MAVEN works correctly or not.
In the command prompt, type:
mvn-version
I got Apache Maven 3.0.3
what on you?

Old days in Rhino

2011-09-18T02:49:00.000-07:00

I try some old days in Rhino, I am going to blog on Rhino (JavaScript for Java). Rhino converts JavaScript scripts into java classes. it works as compiler as well as interpreter. Stable release 1.7R3 was in May 9, 2011.

What is Rhino?
Rhino is an open source JavaScript engine. It is developed entirely in Java and managed by the Mozilla Foundation.

How to setup it in Ubuntu 11?

download rhino http://www.mozilla.org/rhino/download.html
unzip it and go in to that Folder by terminal
In there run js.jar file by typeing 'java -jar js.jar'
Type print("Hello world")

yap, it work!!

Pre-conference Tutorials on WSO2 Con 2011

2011-09-12T11:52:00.001-07:00

I participated Pre-conference Tutorials on WSO2 Con 2011, today (12/09/2011). I followed track 3 in there and those Pre-conference Tutorials happen at Taj Samudra Hotel, in Colombo, Sri Lanaka

it was good experience for me, It remind me Microsoft TechEd 2010, Sunmicro summit that was happen 5 or 6 years ago.

Here are some I went and there were four more, but I pick below tracks and it was matched to me.

'Introduction to OSGi'

was done by Project Manger, Sameera Jayasoma & Pradeep Fernando.
The need for OSGi and issues in Jar
OSGi concepts around the Module layer
Lifecycle layer and Services layer
Tooling support for OSGi and domos of them
Service listeners

(I will write about OSGi in later)

'Introduction to the WSO2 Carbon Platform'

was done by Afkham Azeez, Director of Architecture, WSO2 and Supun Malinga
An overview of the WSO2 Carbon architecture
The advantages of a modular framework
Platform capabilities
A comprehensive demo on adding component is created, plugged into the platform

There were good lunch and teas also.

Back to Ubuntu with WSO2

2011-09-06T23:32:00.000-07:00

I just start on ubuntu machine as I walked in to WSO2. So Here I will write some simple basic ubuntu teminal commands codes that I am using and some of work I did to ubuntu to my stlye.

Maximize, Minimize and Close

I have the habit of using Maximize, Minimize and Close buttons in Right Corner, so I have to change default windows button layout of Ubuntu 11.04.

Open gconf-editor (hit ALT+F2 and enter ‘gconf-editor’)
Go to apps -> Metacity -> General and select button layout field
Change the default value in to 'menu:maximize,minimize,close'

Then I check for java, sure It is not there yet, because machine is new one. Then I open Terminal (CTRL+ALT+T) and type javac, opss. it is not there
so i used this command to install java.

sudo apt-get install openjdk-6-jdk
java -version

Using Putty from Windows to Linux Server

2011-08-25T07:37:00.001-07:00

I think it is important to know how how with Putty, truly it is not big work, But know is important. There fore I am write this.

I am in windows 7 machine and my remote server is linux server so I have to transfer my files to it.

Passing a file to server by

pscp C:/wamp/www/offlineAPI5.1/OfflineAPI5.5-readingImages.zip

sh@192.248.15.237:/home/shalika/localStorage/version5.1

I can not do it to all my files so here is the way to pass the folder

PSCP -r C:/wamp/www/offlineAPI5.1 shalika@192.248.15.237:/home/shalika/localStorage/version5.1

MPJ Express in Multicore Configuration

2011-06-20T11:42:00.001-07:00

MPJ Express is a message passing library that be can be used by the application developers to develop and execute parallel Java applications on compute clusters or network of computers.MPJ Express can be configured in two ways:

Multicore Configuration: This configuration is used by developers who want to execute their parallel Java applications on multicore or shared memory machines (laptops and desktops).
Cluster Configuration: This configuration is used by developers who want to execute their parallel Java applications on distributed memory platforms including clusters and network of computers.

Now we will try some, first develop parallel applications on desktops/laptops using multicore configuration and then take the same code to distributed memory platforms including clusters. First setup this in PC. I having windows 7 and here is the steps.

Pre-requisites
Java 1.5 (stable) or higher (I have java 1.6)

Download MPJ Express and unpack it.
2. Set MPJ_HOME and MPJ_PATH environmental variables. Right-click My Computer->Properties->Advanced tab->Environment Variables and export the following system variables (User variables are not enough)
Set the value of MPJ_HOME = c:\mpj (assuming mpj is in c:\
Append the c:\mpj\bin directory to the MPJ_PATH variable

Then go to MPJ bin folder and right click on “installmpjd-windows.bat” and run as administrator.

For : Run “ %MPJ_HOME%/bin/installmpjd-windows.bat”

After that go to Control-Panel->Administrative Tools->Services-> MPJ Daemon and start the service.

Open note pad and add below code and save as “HelloWorld.java”

import mpi.*;

public class HelloWorld {

public static void main(String args[]) throws Exception {

MPI.Init(args);

int me = MPI.COMM_WORLD.Rank();

int size = MPI.COMM_WORLD.Size();

System.out.println("Hi I am from <"+me+">");

MPI.Finalize();

}

open CMD in the file (“HelloWorld.java”) dir and type “javac -cp .;%MPJ_HOME%/lib/mpj.jar HelloWorld.java” to compile the file

Use “mpjrun.bat -np 4 HelloWorld” to excute the file

give no of proceess to run and see the results

Now You know simple MPJ Express works…

Reading REST from DOM

2011-06-19T07:58:00.001-07:00

In our server REST web services return XML (eXtensible Markup Language). XML Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information. So Here we also getting XML from our web services.

Here is example that I am getting when I request my inbox from our REST ful web services

The XMLHttpRequest object is used to exchange data with a server (REST web services) behind the scenes.

The XMLHttpRequest object can:

Update a web page without reloading the page (getting new data to user site no reloading)
Request data from a server after the page has loaded (asking new emails from REST web services)
Receive data from a server after the page has loaded (User is in box new email receiving, no reloading )
Send data to a server in the background (boosting all our web features)

So it leads me to used XMLHttpRequest to my module also.

The XML DOM defines a standard way for accessing and manipulating XML documents.The XML DOM views an XML document as a tree-structure.All elements can be accessed through the DOM tree. XML DOM content (text and attributes) can be modified or deleted, and new elements can be created. The elements, their text, and their attributes are all known as nodes.Here are some common XMLHttpRequest Object Methods

Method	Description
abort()	Stops the current request
getAllResponseHeaders()	Returns complete set of headers (labels and values) as a string
getResponseHeader("headerLabel")	Returns the string value of a single header label
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])	Assigns destination URL, method, and other optional attributes of a pending request
send(content)	Transmits the request, optionally with postable string or DOM object data
setRequestHeader("label", "value")	Assigns a label/value pair to the header to be sent with a request

All modern browsers have a built-in XML parser.An XML parser converts an XML document into an XML DOM object - which can then be manipulated with a JavaScript.The following code fragment parses an REST web services resturn my recently recive email in my Inbox (XML document) into an XML DOM object:

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http:localhost:8081/DBmail/Madhuka/INBOX1.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

XMLHttpRequest Object Properties

Once a request has been sent, scripts can look to several properties that all implementations have in common, shown in below Table and all properties are read-only.

because I did call the my above method in Java script so in browser console we will call the JS method and try some XML http Request object properties

readyState : Object status integer:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

status is 4 it means complete

onreadystatechange Event handler for an event that fires at every state change

responseText String version of data returned from server process

responseXML DOM-compatible document object of data returned from server process

status Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK"

statusText String message accompanying the status code

Now I think we have good idea on XMLHttpRequest object to get Inbox email list xml to local storage in HTML5.

Common Language Runtime and Java Virtual Machine

2011-06-07T10:33:00.001-07:00

The Common Language Runtime (CLR - virtual machine for .NET) and the Java Virtual Machine (JVM) share similar architectures, but there are lots of differences.

Both the CLR and the JVM manage an internal heap of memory that is used for allocations. Both VMs's heap are allocate memory from the operating system. The JVM places a fixed upper limit on the heap size. If the JVM heap growing beyond that limit, and no garbage can be collected and an OutOfMemoryError is thrown. The CLR has upper limit on the heap size. The CLR heap maximum size will be dependent on how much memory can be allocated from the operating system.

When we looking on releasing allocated memory JVM is that it does not release allocated memory back to the operating system for the rest of the lifetime of the process. The CLR, on the other hand, will release allocated memory back to the operating system if it is no longer needed.

Using email as RESTful in DOM

2011-05-23T09:21:00.001-07:00

I want to read such xml

<DBMAIL>
<Function>FolderList</Function>
<Status>Sucess</Status>
<FolderList>
<folder>INBOX</folder>
<folder>SENT</folder>
<folder>OUTBOX</folder>
<folder>TRASH</folder>
</FolderList>
<Untagged>Recent Flag List</Untagged>
</DBMAIL>

here is the Javascripte that I used for it

function readFolders(){
             
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","xml/folderlist.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
}

here I doing this in browser console

xmlDoc

to get the value of in xml

xmlDoc.getElementsByTagName("Function")[0].childNodes[0].nodeValue;

How get nested one it easy too

xmlDoc.getElementsByTagName("folder")

this will return array

how to get that value only?

x[0].childNodes[0].nodeValue

iPhone Web Apps Tutorial (part 1)

2011-05-17T23:57:00.001-07:00

All the hardcore Objective-C developers have been having a hard time writing apps for the iPhone. I too read a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.

But I now i was doing HTML5 offline project so I was thinking make web app for my iPOd. it is easy than creating web page.

About the App

The icon needs to be 57px x 57px.

The iPhone will round the corners of us icon, create a dropshadow, and add a shine to whatever icon we use.

It should be in PNG or JPG format.

The startup screen needs to be 320px x 460px and should also be in PNG or JPG format.

Note:
This is mobile app development so even though we are caching our stuff, it’s still a smart idea to keep our file sizes small then app run more faster.

A screen size of 320px x 460px. When we are in web mode, it has a screen size of 320px x 356px. This can affect the user interface of your offline HTML5 app.

Lets this OUT

code :

<!DOCTYPE html>
<html manifest="tetris.manifest">
<head>

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="iphon_icon.png"/>

    <link rel="apple-touch-startup-image" href="startup.png" />
    <link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">

    <title>offline Apps</title>
</head>
<body>
   <h1>Madhuka </h1>
   <h1>iPhone App</h1>
   <h1> Testing </h1>
</body>
</html>

There’s proprietary Apple markup on our HTML5 page. A brief explanation of each:

apple-mobile-web-app-capable: This is another tip-off that we want to be an offline app.

apple-mobile-web-app-status-bar-style: This hides the status bar, and nav bar when the app is offline.

apple-touch-icon:This is the pointer to the image that want to be the icon.

apple-touch-startup-image: This is a url pointing to the startup image.

Here is app running on iPod 4G…..

App is running in Browser

Here is our Web app (ipod have round the corners of us icon, create a dropshadow, and add a shine to our icon)

Here is our start up screen that we created

Here is HTML codes… you can add for you need.

Creating, Customizing XML with Ruby and Builder

2011-05-15T06:00:00.001-07:00

Recently, I needed to generate some xml for a rails 2.3 app. What was supposed to be a fast and easy, turned out to take much longer than expected. After all, rails already provides

respond_to do |format|
      format.html # index.html.erb
      format.xml { render :xml => @emails }
    end

It is return some this

<emails type="array">
<email>
<created-at type="datetime">2011-05-15T06:22:07Z</created-at>
<id type="integer">1</id>
<mailfrom>max</mailfrom>
<mailto>john</mailto>
<subject>hello Drive</subject>
<updated-at type="datetime">2011-05-15T06:52:40Z</updated-at>
</email>
</emails>

i only need ‘from’ not ‘mailfrom’ name tag in xml as well as i am not needing 'typeof' anttribute in xml

so how to achieve, is simple thanks to rails

In 'emails_controller.rb' you have to do below update in method 'index' as below

app/controllers/emails_controller.rb

def index
@emails = Email.all

    respond_to do |format|
      format.html # index.html.erb
    format.xml # index.xml.builder
    end
end

Secondly, we need to create an 'xml.builder' file, in this case, "index.xml.builder". Inside the xml.builder view, we have access to an ‘xml’ object that is used to generate the xml.

In '\app\views\emails' director create new file called "index.xml.builder" and here is it's contain

xml.emails do
@emails.each do |email|
    xml.email do
      xml.to email.mailto
      xml.from email.mailfrom
      xml.subject email.subject
    end
end
end

Here is my out put in XML

woow... it is simple than another in REST.. :)

Access-Control-Allow-Origin in Rails

2011-05-15T03:03:00.001-07:00

Here I am write post where I was stuck in my project for 1/2 hour, I want to connect WEBrick server REST web service and Apache Web server XMLHttpRequest to REST. Normally it is easy but When I call this I got error

xmlhttp.open("GET","http://localhost:3000/emails/1.xml",false);

//”http://localhost:3000/emails/1.xml” is REST server XML and it is called my “http://localhost:8081/DOM/test2.html”

Introduction

These restrictions prevent a client-side Web application running from one origin from obtaining data retrieved from another origin, and also limit unsafe HTTP requests.

Here is message on my web page in Apache

and still WEBrick has it XML ok

So Here I write how I over come this.

I have problem with sending XHR requests from different domains. So the solution is to setup response headers: Access-Control-Request-Method, Access-Control-Allow-Origin.

headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Request-Method'] = '*'

for in rails
app/application_controller.rb file to add below

after_filter :set_access_control_headers

def set_access_control_headers
headers['Access-Control-Allow-Origin'] = 'http://localhost:8081/'
headers['Access-Control-Request-Method'] = '*'
end

Apache now access that xml and viewing in that site

Creating Custom Rails Routes

2011-04-23T06:20:00.001-07:00

last post I wrote simple work on customizing rails routes now we will play more. It is easy and fun and more use full

this my main page and url is http://localhost:3000/mailheaders it is not cool URL for main page so how to change it.

open you config/routes.rb file in ROR project and add following to do it

map.connect('madhuka', {:controller => "mailheaders", :action => "index"})

woow.. it done.

so I need to change the url places in working on it

http:/ host/controller/action? params

eg: http://localhost:3000/message/givesentmessage?to=aaa

and lets change it as you wish (I am put params in url in midle)

http:/ host/controller/params/action

add this to routes.rb file

map.connect('messages/:to/giveMessages/', {:controller => "message", :action => "givesentmessage"})

woooww….. it is easy and very useful!!

Custom routes definition in ROR

2011-04-23T05:42:00.001-07:00

Today I was working on rest web services and I was need some custom routes definition. my project is rails project

http://localhost:3000/message/givesentmessage?to=aaa

but I need to pass parameters in URL with out ‘?’ marking such as

http://localhost:3000/message/givesentmessage/aaa.xml

to do in ROR open your open config/routes.rb file and add the following routing:

map.connect ':controller/:action/:to.:format'

now it will work even

http://localhost:3000/message/givesentmessage/aaa.xml

Where ‘aaa’ is the record ids. In the controller you have access to these ids via the params variable.

to = params[:to]

HTML5 Local Storage–Part 2

2011-04-22T05:25:00.001-07:00

Here is Storage interface and below I am doing this particle in browser console

interface Storage {
  readonly attribute unsigned long length;
  DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any value);
  deleter void removeItem(in DOMString key);
  void clear();
};

Each Storage object is associated with a list of key/value pairs when it is created.

The length attribute must return the number of key/value pairs currently present in the list associated with the object.

The key(n) method must return the name of the nth key in the list. (Thus, adding or removing a key may change the order of the keys, but merely changing the value of an existing key must not.)

The getItem(key) method must return a structured clone of the current value associated with the given key.

The setItem(key, value) method must first create a structured clone of the given value.

The removeItem(key) method must cause the key/value pair with the given key

The clear() method must atomically cause the list associated with the object to be emptied of all key/value pairs.

localStorage.length

localStorage.key(0)

localStorage.getItem("name1")

localStorage.removeItem("name1")

HTML5 Local Storage

2011-04-22T04:36:00.001-07:00

HTML5 localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer.

let try it out.

From JavaScript code, we will access HTML5 Storage through the localStorage object on the global window object. Before we use it, we will detect whether the browser supports it.

function supports_html5_storage()
{ 
    if (typeof(localStorage) == 'undefined' )      
              {        
                         alert('Your browser does not support HTML5 localStorage. Try upgrading.');   
              } else     
             {   
                       alert('Your browser support HTML5 localStorage.');       
             }
}

          
To detect we can used Modernizr.js even. Then create simply form in HTML

<form name="testform">
<input type="text" name="name" placeholder="key"/>
<input type="text" name="value" placeholder="value" />
<input type="button" name="button" value="Store" onClick="storeInLocal(this.form)"/> 
<input type="button" name="button" value="Support test" onClick="supports_html5_storage()"/>
</form>

Then create storeInLocal() with passing form to it as parameters to it.

function storeInLocal(form){
        if (typeof(localStorage) == 'undefined' ) {    
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {    
try 
{    
localStorage.setItem(form.name.value,form.value.value); 
} 
catch (e) {                    
alert('Quota exceeded!'+e); //data wasn't successfully saved due to quota exceed so throw an error        
}

}
}

Here is clearing Local storage in browser in below

and button for that in form too.

function clearLocal(){

localStorage.clear();

}

here is data in local data bases.

in Next post I will explain on retrieving them.

Change the Value of an Element

2011-03-06T11:22:00.001-08:00

In the DOM, everything is a node. Element nodes do not have a text value.

The text of an element node is stored in a child node. This node is called a text node.

Change the Value of a Text Node

eg:

to=xmlDoc.getElementsByTagName("to")[0].childNodes[0];

to.nodeValue=madhuka@gmail.com;

Change the Value of an Attribute

In the DOM, attributes are nodes. Unlike element nodes, attribute nodes have text values.

I am using the setAttribute() method for it

x=xmlDoc.getElementsByTagName('email');

x[0].setAttribute("eid","e0");

x[1].setAttribute("eid","e1");

and also we can change it by nodeValue property too…

enjoy DOM and XML play..

Play with XML DOM

2011-03-06T11:03:00.001-08:00

Here i will write on how to get the Value of an Element in XML DOM.

The getElementsByTagName() method returns a node list containing all elements with the specified tag name.

eg:

xmlDoc.getElementsByTagName("emails")[0];

here is chrome console screen shoot of that

by changing the “i” you specified the email element

xmlDoc.getElementsByTagName("email")[i];

In the DOM, everything is a node. Element nodes does not have a text value.

The text of an element node is stored in a child node. This node is called a text node. Therefore we must get the value of the child node (text node).

The childNodes property returns a list of child nodes. The <emails> element has three child node and passing prams you get the particular childNode

xmlDoc.getElementsByTagName("email")[1].childNodes;

xmlDoc.getElementsByTagName("email")[1].childNodes[0];

in that child node (<from>) has another single childNode and it is text node.

The nodeValue property returns the text value of the text node

xmlDoc.getElementsByTagName("email")[1].childNodes[1].childNodes[0].nodeValue;

xmlDoc.getElementsByTagName("from")[1].childNodes[0].nodeValue

in console you can see the deferent color of emelent and value.

Now we will get the Value of an Attribute

The getAttribute() method returns an attribute value.

The following code retrieves the text value of the "eid" (email ID) attribute of the first <email> element:

xmlDoc.getElementsByTagName("email")[0].getAttribute("eid");

Nodes in DOM

2011-03-06T10:28:00.001-08:00

The DOM defines a standard by W3C (World Wide Web Consortium) for accessing documents like HTML and XML

A DOM (Document Object Model) defines a standard way for accessing and manipulating documents.

The XML DOM views an XML document as a tree-structure and all elements can be accessed through the DOM tree. Their content and attributes.
The HTML DOM defines a standard for accessing and manipulating HTML documents

here is java script code on that DOM

msg="<emails><email eid=\"1\"><to>madhuka@max.com</to><from>bhagya@max.com</from><subject>hi, I wrote the blog post</subject></email><email eid=\"2\"><to>max@max.com</to><from>Gihan@max.com</from><subject>hi, sir I was testing</subject></email></emails>";

The root node in the XML above is named <emails> and All other nodes are contained within <emails>.

The root node holds two <email> nodes.

The first <email> node holds three nodes: <to>, <from> and <subject>. Each of them contain one text node.

NOTE

<to>madhuka@max.com</to>

The element node <to>, holds a text node with the value "madhuka@max.com".

"madhuka@max.com" is not the value of the <to> element. It is text node Value.

XMLHttpRequest

2011-03-06T06:26:00.001-08:00

I need XMLHttpRequest work for my project, so I think it also has value to be post on blog. therefore I am writing this post on it. I will give example on them also.

First I will talk about some HTTPRequest and its issues . The problem in HTTPRequest is that with each HTTP connection, a new page is reloaded. All the elements of the page are broken down and recreated each time while the user waits for the network and waits for the page to redraw. Its incredibly inefficient, slow, and not much fun for the user.But when we need new data for our application, we can make a network request for that data in the background using an XMLHttpRequest call.

The XMLHttpRequest object can:

Update a web page without reloading the page
Request data from a server after the page has loaded
Receive data from a server after the page has loaded
Send data to a server in the background

Lets go to real world of development of them

All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object and IE5 and IE6 use an ActiveX Object.

lets check it support your browsers (My browser is Chrome). Here i am typing my on browser console.

oK, I is supporting.

<script type="text/javascript">

if (window.XMLHttpRequest) 

{// code for IE7+, Firefox, Chrome, Opera, Safari 

xmlhttp=new XMLHttpRequest(); 

} 

else 

{// code for IE6, IE5 

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

} 

</script>

Now we can parse an XML string into an XML DOM object and test it.

   1:  <html xmlns="http://www.w3.org/1999/xhtml">

   2:  <head>

   3:  <title>Create XML DOM object</title>

   4:  <script language="javascript">

   5:  msg="<emails><email><to>madhuka@max.com</to><from>bhagya@max.com</from><subject>hi, I wrote the blog post</subject></email></emails>";

6:

   7:  if (window.DOMParser)

   8:    {

   9:    parser=new DOMParser();

  10:    xmlDoc=parser.parseFromString(msg,"text/xml");

  11:    }

  12:  else // Internet Explorer

  13:    {

  14:    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

  15:    xmlDoc.async="false";

  16:    xmlDoc.loadXML(txt);

  17:    }

  18:  </script>

  19:  </head>

20:

  21:  <body>

  22:  </body>

  23:  </html>

now we test that object go to our page and it console and type xmlDoc then you will get xml document as below. We just create XML DOM object by XML string. it is easy.

isn’t it?

Thunderbolt I/O technology

2011-02-24T10:05:00.001-08:00

Thunderbolt is a revolutionary I/O technology that supports high-resolution displays and high-performance data devices through a single, compact port.

Thunderbolt began at Intel Labs with a simple concept.It gives you access to a world of high-resolution displays and high-speed peripherals with one compact port. That’s because Thunderbolt is based on two fundamental technologies: PCI Express and DisplayPort.

Thunderbolt also provides 10 watts of power to peripherals. Thunderbolt is based on DisplayPort technology, the video standard for high-resolution displays, any Mini DisplayPort display plugs right into the Thunderbolt port. To connect a DisplayPort, DVI, HDMI, or VGA display, just use an existing adapter.

USB 2.0: 480 Mbps
FireWire 800: 800 Mbps
Express Card: 2.5 Gbps
USB 3.0: 5 Gbps
Thunderbolt: 10 Gbps

With 10 Gbps of throughput in both directions, Thunderbolt I/O technology lets you move data to and from peripherals up to 20 times faster than with USB 2.0 and more than 12 times faster than with FireWire 800.

Client-side Storages with HTML 5

2011-02-24T06:05:00.001-08:00

Today I will point out Client side storage feature. There are several reasons to use client-side storage.

We can make our app work when the user is offline, possibly sync'ing
It make app to performance booster (instead of waiting for it to download again)
It is easier programming model, with no server infrastructure required

The technologies for local storages are:

Web Storage: it provides a key-value mapping (present implementations only support string-to-string mappings)
Web SQL Database: it gives us all the power of SQL relational database.
Indexed Database: This is somewhere in between Web Storage and Web SQL Database. Like Web Storage, it's a straightforward key-value mapping, but it supports indexes like those of relational databases
File Access: It is an API for reading file content in JavaScript (There are also proposals underway for file writing capabilities)

Lets check the Browser support

here is code for test that I am going to use

function browserSupport(){
console.log("Indexed Database: " + window.mozIndexedDB);
console.log("Web SQL Database: " + window.openDatabase);
console.log("Web Storage: " + typeof(localStorage));
console.log("File Access: " + window.FileReader);
}

1. Lets check this in chrome

No indexed Database support (but it was supporting some months ago)

2. Now I will try in Firefox

It is support indexed Database but not SQL data bases yet.

3. Now try with Safari

No Indexed Databases and file Access

4. Now I will test in IE

only it is web storage

5. Final try it out with Opera

it is not supporting for indexed and file API

Here is full results

	Chrome	Firefox	Safari	Opera	IE
Web Storage	yes	yes	yes	yes	yes
Indexed DB		yes
Web SQL DB	yes			Yes
File Access	yes	yes

So all of browser support Web Storage with (key/Value)

Enable the debugging menu in safari 4 in Windows 7

2011-02-23T10:27:00.001-08:00

I need the “debugging menu” of web browsers so I was need in safari,

1. Go to dir where you have install safari in you PC (Windows 7)

eg: D:\Program Files\Utilities\Safari

2. Then in that dir you have to type

Safari.exe executable: /enableInternalDebugMenu

3. For disabling it

Safari.exe executable: /disableInternalDebugMenu

simple and Sweet, there some other ways to… but this one also easy as I think than changing “Preferences.plist”.

Nokia's Windows Phone 7 concept revealed!

2011-02-11T20:02:00.001-08:00

This is the first image you'll see anywhere of the early fruit of Microsoft and Nokia's budding new partnership.We have it on good authority that the Technicolor phones on show are conceptual devices produced by the two companies.

"Recently, the Polish designer Michal Bonikowski and Rafal Pilat has designed a Nokia Windows Phone 7 concept phone, this Nokia concept phone looks like the HTC WP7 smartphone, which use the magnesium alloy body and has a 4.0-inch touchscreen display, a 8 megapixels camera as well as run the Windows Phone 7 system"

Here are some cool Nokia Windows Phone 7 concepts, thanks to EagleEye.

Nokia's new design -- the shape of these handsets is somewhere between its recent N8 and C7 Symbian devices and there is, as usual for Nokia, a choice of sprightly colors. The trio of keys adorning the new concept's bottom give away its Windows Phone 7 ties, but also remind us that the N8 and E7 are highly unlikely to receive any WP7 upgrade love. The best part about this whole discovery, however, might be that it confirms Steve Ballmer's assertion that the engineers of both companies have "spent a lot of time on this already." So, who else is excited about owning an Engadget-blue Microkia device

Cookies vs HTML5 Local Storages

2011-02-10T06:55:00.001-08:00

now I am working on email project with HTML5 local storage, So these post will be for introduction for HTML5 local storages.

When we start talking local storages in web applications cookies will be first word that come to my mind few yesra ago, later google gears, but now it is HTML5. Cookies were invented early in the web’s history, and indeed they can be used for persistent local storage of small amounts of data.

slowing down your web application by transmitting the same data over and over in HTTP request.
sending data unencrypted over the internet (without SSL)
are limited to about 4 KB of data

if you need

a lot of storage space
on the client
that persists beyond a page refresh
and isn’t transmitted to the server (unless you go out of your way to send it manually)

answer is HTML5.

here is simple code for checking HTML5 Local storages in browser

function supports_html5_storage(){
if (typeof(localStorage) == 'undefined' ) {

alert('Your browser does not support HTML5 localStorage. Try upgrading.');

}

else
{

alert('Your browser support HTML5 localStorage.');
}

}

Is PC a Boy or a Girl?

2011-02-05T02:40:00.001-08:00

Today I went to my face book I found this on one of my friend’s (Prabath ayya) post

“Is Your Computer a Boy or a Girl?
It’s pretty easy to find out what gender your computer is.
Follow the instructions.
1) Open your notepad
2) Type or copy paste: CreateObject("SAPI.SpVoice").Speak"I love you"
3) Save as computer_sex.vbs
4) Run the file.
If you hear a male voice, congratulations, you have a boy if woman’s, well, it’s a girl.
I have a baby girl :)
What about you? ”

so it is interesting I think to more about this

Now I will say how to make your PC girl or Boy as you like, update you “computer_sex.vbs” by open it by right click

Set VObj = CreateObject("SAPI.SpVoice")
   with VObj
       Set .voice = .getvoices.item(0)
       .Volume = 100
       .Rate = 7
   end with

VObj.Speak "<pitch middle='-25'>" & "Hello how is you"

pitch -25 male and to pitch 25 female

control volume and rate (specking speed)

If you don’t know how to run this file?

open cmd in windows try this …… enjoy you PC voice

Do you know about “HTML5 Web Sockets” ?

2011-02-04T10:07:00.001-08:00

I was doing my project on web email system that I am going to use HTML 5 for it. I found new HTML5 Web Sockets. It is interesting so here I am going to write this post on it.

I will be explaining what techniques that we have been used to simulate server push until now and simple define HTML5 web sockets.

Directional work until now
Until now, the web has been one directional.(web pages could only send a request to a web server, and not the other way around)

AJAX entering to the web
2005, AJAX came to world and web developers quickly adopted techniques to simulate a request from server to client known as polling. There are two types of polling,

short polling
long polling

Short polling is implemented by making a request to the web server every few seconds or so to see if data has changed. If it has, the web server will respond with the new data. Otherwise, it will respond with a blank message.

drawback : there is a higher rate of server requests and an overhead in CPU usage on the web server and need network bandwidth for this messages for each second.

Long polling is implemented by making a single request to the web server and keeping the connection open until the data has changed, at which point the web server sends back a response.

draw back: server still has to check if the data has changed every few seconds.
it needs to send headers for every request and every response.

HTML5 web socket?
HTML5 Web Sockets will single handedly revolutionize web technologies. HTML5 will be the first HTML specification to support client side web sockets. In other words, when data changes on the web server, the web server can send a request to client, eliminating the need for polling.

Angry Birds Move

2011-01-31T09:09:00.001-08:00

Yesterday I was playing “ Angry Birds' creators Rovio ” and it is great game. Angry Birds' creators Rovio have announced that a new edition of the game will be a tie in with a Hollywood animated film.

Angry Birds RIO , due for release in March, will feature characters from the movie RIO, made by the same people as Ice Age.

The new game will have 45 levels.

In it the birds travel to Brazil to try and rescue two new friends, Blu and Jewel, a pair of tropical birds who are the main stars of the film.

Finnish developers Rovio said Angry Birds RIO would "pair the physics-based gameplay of the original with unique twists based on the highly-anticipated film."

C++ for Beginners

2011-01-27T00:26:00.001-08:00

Here I am writing quick and simple learn way for C++.

Functions

Using functions we can structure our programs in a more modular way,

type name ( parameter1, parameter2, ...) { statements }

eg:

// add function example
#include <iostream>

using namespace std;

int add (int a, int b)
{
int c;
c=a+b;
return (c);
}

int main ()
{
int result;
result = add (2,3);
cout << "The result is " << result ;
system("PAUSE");
return EXIT_SUCCESS;

}

Simple ‘C’ function

2010-12-16T03:26:00.001-08:00

A function is a module or block of program code which deals with a particular task.

function will make code
reusable
it stop be mixing on coding
It avoid repeating parts of the programming coding

let make our add_integer to function and run it.

here is modified code, Blue color text show the changes we did to our previous code.

#include<stdio.h> // standard input output header file
#include<conio.h>
main()
{
int a,b;

printf("enter any number");
scanf("%d",&a); // or cin >> a
printf("enter any number");
scanf("%d",&b);
Add_Two_Integers(a,b);
Add_Two_Integers(12,23);
getch();

}

Add_Two_Integers(a,b) /* Add a and b */

int a,b;

{ int c;

c = a + b;
printf ("\n%d",c);

}

here it is in running

Add Two Integer by ‘C’

2010-12-16T03:11:00.001-08:00

Here i will explain about C code for add two given integer by user.

Every C program must have a main() function.
Program will be in starting curly bracket { and } ending curly bracket.
Then we define variables, here we need 3 variables integer variables a,b & c. C will hold result value.
printf() function will print a message.
scanf() function is used to input a value from the keyboard. (Value input by the keyboard will be stored in variable 'a' and second value will be sotred in 'b')
we have used %d format string. %d is for integer means we have to input a integer from the keyboard.
Format Strings:
%d - integer
%f - float
%c – character

+ is an arithmetic operator
getch() statement is a get character statement. It pause the output until user presses a key from the keyboard.

here is c coding for that

#include<stdio.h> // standard input output header file
#include<conio.h>
main()
{
int a,b,c;

printf("enter Integer:");
scanf("%d",&a); // or cin >> a
printf("enter Integer:");
scanf("%d",&b);
c=a+b;
printf("%d",c);
getch();
}

Code is running……

C programing in windows 7

2010-12-16T02:54:00.001-08:00

hi, today I got call from my friend and I asked about “c” Programing so I think to write small “C hello world” program in Windows 7.

C is a computer programming language developed in 1972 by Dennis Ritchie for use with the Unix operating system. C was designed for implementing system software but it is also widely used for developing portable application software.

I can give more details on C later, Let Us Code it,

We can use lot of ways to code I will used windows cmd as I am prefer all the time.

1. Click Start, point to All Programs, Microsoft Visual Studio 2010, and Visual Studio Tools, and then click Visual Studio 2010 Command Prompt.

2. Go to the directory you need to create you C program by the command prompt. (eg: cd dir/dir1/cproject)

3. Then type notepad hello.c and press ENTER. (hello is program name), Click Yes to create a file.

4. In opened Notepad, type the below codes and save it.

#include <stdio.h>

int main(void)
{
printf("Hello to C program.\n");
return 0;
}

5. In the command prompt, type cl hello.c and press ENTER.

The cl.exe compiler generates an executable program, hello.exe.

here is file that are generated

6. To run hello.exe, type hello and press ENTER.

The program displays this text and exits:

7. To close command prompt type exit

So you can try more C code now….

You can use “Dev c++” IDEs for C programming even.

Create Simple Form in ROR and Retrieving

2010-11-19T03:31:00.001-08:00

hi, I was try some ROR simple way to me and I found another simple way for forms, But there can be more simple ways for this,

Here is my practice at this time

find.html.erb

<% form_for :search, :url => { :action => "dotags" } do |f| %>
   <%= f.error_messages %>
   First name: <%= f.text_field :sname %><br />

    <%= f.submit 'Search' %>
<% end %>

search_controller.rb

def dotags

#get our params

      @mytest = (params[:search][:sname])
       print("sname"+@mytest.to_s)

end

Radio buttons on ROR

2010-11-18T22:15:00.001-08:00

it is very simple work again putting Radio Button in ruby on rails. But I suffer about 2 hours for it. Radio buttons are import to in where user have to select one of a thing in list, Such as Gender

so here is the way to make it. in view file it is look like

<% form_for(@profile) do |f| %>

<p>
    <%= f.label :gender %><br />
    <%= radio_button :profile, :gender, "Male"   %> male
    <%= radio_button :profile, :gender, "Female" %> female
</p>

note

<%= radio_button(object_name, method, tag_value, options) %>label

isn’t it simple?

Would you like to know if your mobile is original or not?

2010-11-17T04:03:00.001-08:00

Press the following on your mobile *#06# and the-international mobile equipment identity number appears. Then check the 7^th and 8^th numbers:

IF the Seventh & Eighth digits are

02 or 20 this means your cell phone was assembled in Emirates which is very Bad quality

IF the Seventh & Eighth digits are
08 or 80 this means your cell phone was manufactured in Germany which is fair quality

IF the Seventh & Eighth digits are
01 or 10 this means your cell phone was manufactured in Finland which is very Good

IF the Seventh & Eighth digits are
00 this means your cell phone was manufactured in original factory which is the best Mobile Quality

IF the Seventh & Eighth digits are 13 this means your cell phone was assembled inAzerbaijan which is very Bad quality and also dangerous for your health

Do you Know this Champs Networking Month?

2010-11-15T18:18:00.000-08:00

If you Don’t know champs Networking Month, It is for you then!!

Sri Lanka’s largest and ever growing undergraduate student technical community, “Microsoft Student Champs” has broaden it’s horizons over the last few months. Since been commenced in 2005, it has been an active community. But from the number of community members, it didn’t had large quantities in the beginning. No worries! we do only count on quality more than the quantity. Champs only concern about encouraging members to be active in the society for their own betterment and for the goodness of fellow members. But year-by-year number grew rapidly.

In the initial stage champs was formed by Microsoft with the participation of students from University of Colombo and University of Moratuwa. But we didn’t want to keep the benefits only to us. So, since then champs community has reached 13 other universities and institutes in the country (and some others planning to get onboard soon !) We have been to several universities across the country to host our meetings and workshops. In the shortest form, we are planning to give the benefits of the champs community for other interested people. Our effort is not only to share the benefits, but we want to have good relationships with all the university students to see whether there any way to help each other .
Taking that effort another step forward, we have commence this November as the “Champs Networking Month”.
What is the networking month? Well, this is not only about giving a chance to other enthusiasts who is so much passionate about the technology to get onboard. But what we are primarily targeting is, to getting networked with other university undergraduate societies in the country.
Not only technical societies! It might be any student society or a club which intend to do something for the fellow students and for the community. Of course, we will have lots to share and lots to learn from each other. By the end of the networking month, we hope to improve our connections among the Sri Lankan undergraduate societies and to get in touch with them to see how we can finally help our country as young-talented graduates.
For further details visit champs web site and Facebook page.

File Uploading using RoR on Windows 7

2010-11-04T10:39:00.001-07:00

I did code on ROR in two months, but now i need to do some project by ROR and my development OS is windows 7.
I have a requirement web site visitors to upload a file on our server. Rails makes it very easy to handle this requirement so I select ROR for this,

let us try it out.

C:\test>rails upload
C:\test> cd upload
C:\test\upload> mkdir upload\public\data

Creating Model

We have to create a "DataFile" model.

> ruby script/generate model DataFile

then create a method called "save" in upload/app/models/data_file.rb

class DataFile < ActiveRecord::Base
def self.save(upload)
    name = upload['datafile'].original_filename
    directory = "public/data"
    # create the file path
    path = File.join(directory, name)
    # write the file
    File.open(path, "wb") { |f| f.write(upload['datafile'].read) }
end
end

Creating Controller

Let's create a controller for our upload project:

> ruby script/generate controller Upload

After that we open upload/app/controllers/upload_controller.rb file and save the following code:

class UploadController < ApplicationController
def index
     render :file => 'app\views\upload\uploadfile.html.erb'
end
def uploadFile
    post = DataFile.save( params[:upload])
    render :text => "File has been uploaded successfully"
end
end

Creating View

Finally we will create a view file app/views/upload/uploadfile.html.erb

<h1>File Upload</h1>
<% form_tag({:action => 'uploadFile'},
:multipart => true) do %>
<p><label for="upload_file">Select File</label> :
<%= file_field 'upload', 'datafile' %></p>
<%= submit_tag "Upload" %>
<% end %>

OK,
Finally run the project

> ruby script/server

Check the folder …\upload\public\data for the uploaded file.

Woow, it is Work out…

Career Guidance in ICT, plus Mobile application development

2010-10-27T23:51:00.001-07:00

Yesterday, I did Career Guidance in ICT that Organized by Sri Lanka Foundation Institute. I did session ‘Developing Simple Mobile Applications’.

I briefed about Mobile application development

“Mobile application development is the process by which applications are developed for small low-power handheld devices such as personal digital assistants, enterprise digital assistants or mobile phones. These applications are either pre-installed on phones during manufacture, or downloaded by customers from app stores and other mobile software distribution platforms.”

This was the path for the session on that day

› Introduction on about Mobile application development
› Platform and Environment
› Platform development environment
› J2me Hello world (Demo)
› Windows Phone 7 application (Demo)

Links for download these IDE’s

Here is the link for downloading net beans for j2ME: http://netbeans.org/downloads/start.html?platform=windows&lang=en&option=java

Expression Blend 4 Release Candidate (RC) is available for download here. http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Editors/Microsoft-Expression-Blend.shtml

Visual Studio 2010 Express is available for download here. http://www.microsoft.com/express/Downloads/

Here is that j2ME Hello world code

HiMidlet.java

package hello;

import javax.microedition.midlet.*;

import javax.microedition.lcdui.*;

public class HiMidlet extends MIDlet {

private Display display;

private Form form;

public void startApp() {

form = new Form("Sri Lanka Foundation");

String msg = "Hello to j2ME";

form.append(msg);

display = Display.getDisplay(this);

display.setCurrent(form);

}

public void pauseApp() {

}

public void destroyApp(boolean unconditional) {

}

Here the links to download project file

J2me Application: http://rapidshare.com/files/427559037/HelloICT.zip

Windows phone 7 Application: http://rapidshare.com/files/427563269/hiwp7.zip

Here is jar application for j2me: http://rapidshare.com/files/427563269/hiwp7.zip

C# application using Command Line

2010-10-24T12:12:00.001-07:00

Hi, I used to cmd and programming ID in different programming languages, So I will tell how to do C# Application in command line.

Microsoft’s .NET SDK ships with a command line compiler called csc.exe. It can be executed from within the DOS prompt.

1. Open note pad and enter below code and save it as ‘HelloWorld.cs’

// HelloWorld.cs

// -------------

using System;

class HelloWorld

{

public static void Main()

{

Console.WriteLine("Hello World");
}

}

NOTE::

'‘using System;’defines the namespace System.
"class HelloWorld” declares our class named HelloWorld.
Line “public static void Main()” defines the Main() method, which is considered as a entry point for all C# programs.
“WriteLine()” method of the Console class and prints "Hello World" as output.
Now move to compiling the code by using a C# compiler. I assume you are using the compiler which ship with .NET SDK. (I am on .NET 4)

you have to give the following command at the DOS prompt as shown in the figure given below

csc HelloWorld.cs

( If you have installed Mono C# Compiler then you should compile the above program using the following command: mcs HelloWorld.cs )

NOTE::

If there are any errors and warnings, the compiler will display them during the above process. You have to go through all those messages and correct them preferably by going back to the source code. As explained earlier, C# is a case sensitive language and hence even if you miss a semicolon or a comma, the compiler will throw error messages. If there are no errors and warnings your screen would look like as shown in the figure given above.

To view the output of the above program, you have to supply the name of the assembly (HelloWorld.exe) at the DOS prompt.

For example, you have to give the following command for executing the above program.

HelloWorld

The output will be as shown in the figure given below

Using ID as Visual studio is really Ok, but it will be great when you know cmd (Command prompt commands) also can do them,You will be smart programmer.

Drag and Drop in C# (WPF)

2010-10-15T11:01:00.001-07:00

Today I started working on C# project again for my friend, So I have to polish my C# canvas knowledge back

Lets Crete simple Drag and Drop in C# (WPF), Create WPF project in VS 2010.

Here i create a simple drag able object based on a Thumb

Lets create the most simplest shape template Ellipse ball.

<Window.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="ball">
                <Ellipse Width="60" Height="30" Fill="Blue"/>
            </ControlTemplate>
        </ResourceDictionary>
    </Window.Resources>

here is the updated you XAML file.

<Window x:Class="Dragging.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="ball">
                <Ellipse Width="60" Height="30" Fill="Blue"/>
            </ControlTemplate>
        </ResourceDictionary>
    </Window.Resources>

   
    <Grid>
        <Canvas Name="myCanvas">
            <Thumb Name="myThumb" DragDelta="onDragDelta" Canvas.Left="0" Canvas.Top="0" Template="{StaticResource ball}"/>
        </Canvas>
    </Grid>
</Window>

Our Thumb element needs actually one event handler for the basic drag support implementation – "onDragDelta"

void onDragDelta(object sender, DragDeltaEventArgs e)
       {
           Canvas.SetLeft(myThumb, Canvas.GetLeft(myThumb) + e.HorizontalChange);
           Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) + e.VerticalChange);
       }

Press F5

Hello World with Apache Axis2

2010-10-11T04:50:00.001-07:00

Lets develop a Web service with an operation which will echo a string value under Axis 2.

1. Create Folder called ‘Server’

2. In sever folder create ‘SimpleService.java’

/**
* The service implementation class
*/
public class SimpleService {

public String echo(String value) {
return value;
}
}

3. In sever folder create new folder name it as ‘META-INF’

4. In that ‘META-INF’ folder create ‘services.xml’

<service>
	<parameter name="ServiceClass" 
          locked="false">SimpleService</parameter>
	<operation name="echo">
		<messageReceiver class="org.apache.axis2.rpc.receivers.RPCMessageReceiver"/>
	</operation>    
</service>


NOTE:

Within the "service" element there should be a parameter specifying the service implementation Java class.

<parameter name="ServiceClass" locked="false">SimpleService</parameter>

The second child element of the "service" element "operation" element describes the operation and the message receiver that is to be used for that operation. Hence we set it to "echo":

<operation name="echo">

Axis2 provides a MessageReceiver based on Java reflection and the "messageReceiver" element declaring that org.apache.axis2.rpc.receivers.RPCMessageReceiver should be used.

<messageReceiver class="org.apache.axis2.rpc.receivers.RPCMessageReceiver"/>

5. In sever folder create another new folder name it as ‘temp’

6. Open command  prompt in sever folder. (Shift + Right Click mouse)

7. Now compile the SimpleService.java class and move the SimpleService.class file to the temp directory.

javac SimpleService.java -d temp/

8. Create a META-INF directory within the "temp" directory and copy the service.xml file into the META-INF directory. Change directory to the "temp" directory and use the "jar" command as follows to create the service archive named SimpleService.aar.

jar -cvf SimpleService.aar *

9. Using Axis2 with Tomcat to host start tomcat go to ‘http://localhost:8080/axis2/axis2-admin/’ user name ‘admin’ password ‘axis2’ then upload your ‘SimpleService.aar’ in ‘\Server\temp’ directory

then click to ‘upload’

10.  then Go to ‘http://localhost:8080/axis2/services/SimpleService?wsdl’

DONE.

අපි ගියෝ, infotel ප්‍රදර්ශනය පැත්තේ

2010-10-10T23:57:00.001-07:00

තොරතුරු තාක්ෂණය වෙනුවෙන්ම පවත් වන infotel ප්‍රදර්ශනය ලංකවේ මෙම් මස පලමු සතියේ පැවැත් විය. මේහි තේමාව වුයේ “සංවර්ධනයට තොරතුරු තාක්ෂණය” යි.මේවර පැවැත්වුයේ infotel දසවන සරණියයි.

මේන්න අපිත්……..

මේහි Microsoft තාක්ෂණයන් බේදා ගත් අපි…..

අපි ක්‍රීඩාව අමතක නොකලේමු…..

මේත් අපි, දක්ෂයන් සොයාගයමු…...

ඔබත් තොරතුරු තාක්ෂණයට ඇලුම් කරයිද, එයට අපි අතහිත දෙමු…..

Microsoft Student Champs Workshop at UCSC

2010-09-30T23:23:00.000-07:00

Microsoft Student Champs with the purpose of empowering students with latest technical knowledge and assuming their community responsibilities for helping fellow students, reached University of Colombo School of computing for a single day workshop. Workshop was held at UCSC on 29^th of September 2010 with the participation of more than 200 students.

The event proceeded with two main goals. That is, to give an idea to the students about .Net technologies from an industrial point-of-view, and to motivate young students to take part in the world’s largest student technical competition, Microsoft Imagine Cup!

Keynote speech is done by Mr. Wellington Perera (Director DPE, Microsoft Sri Lanka). He introduce the next year Imagine Cup competition, "Imagine Cup 2011 - New York" and explain the features and behavior of the Visual Studio 2010.

The young students, who were new to the Champs community, were introduced to the Microsoft Student Champs program by Oshan Siriwardena (Microsoft student Ambassador). They were informed about the benefits and the opportunities of this unique and ever growing student program.

Mr. Preethiviraj Kulasingham, a community leader and a expert in SQL Server technologies, conduct a session on SQL Server. He covered the tips and tricks to good data base design and maintaining with SQL Server 2008.

Hasini Adhikari and Chanaka Upendra recently graduated students from UCSC itself and also the winners of the Imagine cup local competition 2010, discussed their experience in the previous Imagine Cup competitions.

Mr. Prabath Fonseka did a presentation about ASP.Net. He covered the basic concepts of ASP.Net technologies and inspired the young programmers to explore new trends in web technologies related to ASP.Net.

Mr. Uditha Bandara, Microsoft Valuable professional for XNA gaming, did a presentation on XNA Games and introduce the audience to XNA game developement.

Using the Web Service Under IIS

2010-09-30T10:48:00.001-07:00

Now we have a Web service (Previous post), and we will create a Web site where you will reference and use the Web service that we created on IIS.

1. Create New Web Application and name it as a 'CalculatorClient'

2.The Web service is a component that you can reference in your application. Therefore, you must create a reference to it. To do that AddWeb Reference.

3.In the URL list, enter the following URL for the Web service, and then click Go:

http://localhost:23660/MyCalculator.asmx (Web service URL)

4. Click Add Reference.

To call the Web service methods

5. Open the Default.aspx page and switch to Design view.

From the Standard group in the Toolbox, drag and drop the following controls onto the page as below.

6. Double-click AddButton to create an event handler for its Click event and update code as below

protected void Button1_Click(object sender, EventArgs e)
 {
     localhost.MyCalculator cal = new localhost.MyCalculator();
     int a = Int32.Parse(TextBox1.Text);
     int b = Int32.Parse(TextBox2.Text);
     Label1.Text = ""+cal.add(a,b);
 }

7. Press CTRL+F5 to run the page.

Creating a Web Service Under the IIS

2010-09-30T08:11:00.001-07:00

Creating a Web Service Under the IIS Root

1. On the File menu, click Create New Web Application. (named it as ‘calculatorWebService’)

To create the Web service

2. In Solution Explorer, right-click the Web site name and then click Add New Item.

3. Click Web Service, and then in the Name box, type ‘MyCalculator’.

Lets create the add methods

4. Add the below code inside the class, after the HelloWorld method.

[System.Web.Services.WebMethod()]
      public double add(int a, int b)
      {
          return (a+b);
      }

To test the Web service

5. In Solution Explorer, click Convert.asmx, and then press CTRL+F5. (The browser shows the methods that are exposed by the Web service)

6. Click add, which invokes that method.(A page appears that prompts you for parameter values for the add method.)

You have finished creating the Web service; the next step is to use it. So next post will be on it.

Consuming the Web Service by Java Client Application

2010-09-28T10:59:00.001-07:00

My last post say how to deploy the web service,
So this post will be on create a client to make use of the web service's add method. Here, client will be a Java class in a Java SE application.

1.Choose File > New Project (Ctrl-Shift-N). Select Java Application from the Java category. Name the project MyWSClient_Application.(default settings then Click Finish)

2.Right-click the CalculatorWS_Client_Application node and choose New > Web Service Client.(default and click Finish)

3.The Projects window displays you can find node for the add method that you created last time.

4.Now open Main.java and then drag the add node above into the ‘// TODO code application logic here’ line. You now see the following:

    public static void main(String[] args) {

try { // Call Web Service Operation
   org.me.calculator.CalculatorWSService service = new org.me.calculator.CalculatorWSService();
   org.me.calculator.CalculatorWS port = service.getCalculatorWSPort();

    //change value of int
    int a = 10;
    int b = 3;
   // TODO process result here
   int result = port.add(a, b);
   System.out.println("Result = "+result);
} catch (Exception ex) {
   // TODO handle custom exceptions here
}
// TODO code application logic here

run and see

Result = 13

you just consume the web service that you created in last post.

September, Monthly Meeting of Microsoft Student Champ community

2010-09-27T05:13:00.001-07:00

Monthly Meeting of Microsoft Student Champ community of September, 2010 was held on 3^rd September at Auditorium, 3rd Floor, DHPL Tower from 4.00 p.m to 6.30 p.m

Country Manager, Microsoft Sri Lanka Sriyan de Silva Wijeyeratne addressed Microsoft Student Champ. He pointed out 21st Century Software Program, Upper coming Microsoft Technologies and Cloud Computing.

Student Presentation was done by Thurupathan Vijayakumar who is Microsoft Student Champ from University Moratuwa and it was about “Cloud Computing with Windows Azure Platform”

Chief Executive Officer, Ridgecrest Financial (Pvt) Ltd, Sanath Fernando did the Industry Presentation on “Entrepreneurship”. He talked about ‘LinkLK’ platform too.

More than 100 University students were presented to this meeting from 10 different universities. Finally we had debut on “Cloud Computing”.

JAX Web Services with Simple Tutorial

2010-09-26T12:16:00.001-07:00

Last Lecture in ‘Distributed Processing’ I have to do Assignment in Web Services. So lets try it out.

Firstly What Are Web Services?

Web services is a distributed application components that are externally available.

You can use them to integrate computer applications that are written in different languages and run on different platforms. Web services are language and platform independent because vendors have agreed on common web service standards.

As I got to know I have to write web service in java and client in C#. First I will try on Web services

I will do try this with JAX-WS Web Services

what is JAX-WS?

Java API for XML Web Services (JAX-WS), JSR 224, is an important part of the Java EE 5 and EE 6 . JAX-WS simplifies the task of developing web services using Java technology. It is providing support for multiple protocols such as SOAP 1.1, SOAP 1.2, XML, and by providing a facility for supporting additional protocols along with HTTP. JAX-WS simplifies web service development and reduces the size of runtime JAR files.

Let us Create JAX_WS on NetBeans ID

1. Choose File > New Project (Ctrl-Shift-N). Select Web Application from the Java Web category or EJB Module from the Java EE category.

2. Name the project ‘MyCalCulatorWS’. Select a location for the project. Click Next.

3. Select your server and Java EE version and click Finish.

Then us Creating a Web Service from a Java Class

4.Right-click the MyCalCulatorWS node and choose New > Web Service.

5. Name the web service CalculatorWS and type org.me.calculator in Package. Leave Create Web Service from Scratch selected.

(Click Finish. The Projects window displays the structure of the new web service and the source code is shown in the editor area)

Adding an Operation to the Web Service

6. Find the web service's node in the Projects window. Right-click that node. A context menu opens.In there Click Add Operation.

7. Now you get 'Add Operation' dialog box, type 'add' in Name and type 'int' in the Return Type drop-down list.

Then click Add and create a parameter of type int named a. Then click Add again and create a parameter of type int called b.
now we see the following:

8. Click OK at the bottom of the Add Operation dialog box.(visual designer now displays the below screen)

9. Click Source and view.

you will find '//TODO write your implementation code here:'
and update it as

int c =a+b;
return c;

here is full code of that file:

package org.me.calculator;

import javax.jws.WebMethod;
import javax.jws.WebParam;
import javax.jws.WebService;

@WebService()
public class CalculatorWS {

//the web service simply receives two numbers and then returns their sum.

    @WebMethod(operationName = "add")
    public int add(@WebParam(name = "a")
    int a, @WebParam(name = "b")
    int b) {
        int c =a+b;
        return c;
    }
}

Deploying and Testing the Web Service

10. Right-click the project and choose Deploy. The IDE starts the application server, builds the application, and deploys the application to the server.

11. In the IDE's Projects tab, expand the Web Services node of the MyCalCulatorWS project. Right-click the CalculatorWS node, and choose ‘Test Web Service’.

12. If you deployed to the GlassFish server, type two numbers in the tester page, as shown below:

The sum of the two numbers is displayed:

Wooww.. we did simple JAX Web Services…. Later (next post) I will say how to create a ‘Consuming the Web Service’.

Introduction to HTML 5

2010-09-12T11:20:00.001-07:00

HTML5 is currently under development and it is the next major revision of the HTML standard.

HTML 5 incorporates features:

Video playback
Canvas element(2D and 3D)
Drag-and-drop
Local SQL Database
Offline storage database (offline web applications)
Document editing
Browser history management
Cross-document messaging
Geolocation

Those features have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight.

HTML5 will reach (World Wide Web Consortium) W3C Recommendation by late 2010.

Ian Hickson, editor of the HTML5 specification, guessed that this would occur in the year 2022 or later. However, many parts of the specification are stable and may be implemented in products

So as SE or Web developer better to have practice on HTML 5

Capturing Photo by Windows 7 phone Camera

2010-09-10T01:59:00.001-07:00

This Post is about How to Create “Windows 7 Mobile Phone” Application For Capturing Photo by Windows phone Camera

1. Create New Project or Add new Project Name it as “Camera” type of Windows Phone Application

2. Open“MainPage.xaml”and Add image and Button as below via drag and drop

here is xaml of it:

   <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <Image Height="523" HorizontalAlignment="Left" Margin="0,0,0,6" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" Width="480" />
            <Button Content="Start Camera" Height="72" HorizontalAlignment="Left" Margin="65,10,0,0" Name="button1" VerticalAlignment="Top" Width="316" />
        </Grid>

3. Give Click event to ‘button1’ by Double click on design View

Here it is “MainPage.xaml.cs”

private void button1_Click(object sender, RoutedEventArgs e)
      {

      }

4. update you Code in MainPage.xaml.cs as below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Tasks;
using System.Windows.Media.Imaging;

namespace Camera
{
    public partial class MainPage : PhoneApplicationPage
    {
        CameraCaptureTask cameraCaptureTask;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;
            cameraCaptureTask = new CameraCaptureTask();
            cameraCaptureTask.Completed += cameraCaptureTask_Completed;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
                        cameraCaptureTask.Show();
        }

        // The Completed event handler. In this example, a new BitmapImage is created and
        // the source is set to the result stream from the CameraCaptureTask
        void cameraCaptureTask_Completed(object sender, PhotoResult e)
        {
           
            if (e.TaskResult == TaskResult.OK)
            {
               
                BitmapImage bmp = new BitmapImage();
                bmp.SetSource(e.ChosenPhoto);
                image1.Source = bmp;
            }
        }
    }
}

5. Press F5 and try it Out