java course | learn java | java tutorial | java j2ee course java installation

HTTPS Configuration In Wildfly 9.0.0 Red Hat server

2016-06-27T22:30:00.000-07:00

Step 1: Add below tag in your web.xml

<security-constraint>
    <user-data-constraint>
        <transport-guarantee>CONFIDENTIAL</transport-guarantee>
    </user-data-constraint>
</security-constraint>

Step 2: Create a keystore using java keytool

1. open your Command Prompt

2. run below command

> keytool -genkey -alias javacourseblog -keyalg RSA -keystore E:\javacourseblog/keystore.jks -validity 360

You will show the simmiler result. It will ask for the Passwords, first name, last name , organizations and other information. Please fill the correct information in it and choose password very carefully.

Then open your wildfly's standalone.xml and add

below tag in your <security-realms> tag

<security-realm name="SslRealm">
    <server-identities>
        <ssl>
            <keystore path="keystore.jks" relative-to="jboss.server.config.dir" keystore-password="password" />
        </ssl>
    </server-identities>
</security-realm>

Step 3: Open your wildfly's standalone.xml and add below tag in your <server name> tag

<https-listener name="default-ssl" socket-binding="https" security-realm="SslRealm" enabled-protocols="SSLv2, SSLv2Hello, TLSv1, TLSv1.1, TLSv1.2" />

Step 4: Open your wildfly's standalone.xml and go to your socket-binding-group and replace below tag

<socket-binding name="http" port="${jboss.https.port:8443}" />

with

 <socket-binding name="https" port="${jboss.https.port:443}"/>

Introduction of the Gulp for the begginers

2016-06-06T01:36:00.002-07:00

A front end application required a lot of task from designing the application to deployment application. Some of very common task are watching for any file change , minifying the code,

compiling the code and combining the modular code. Before task runner came to the picture there was few tools to do the job.One of them was google's Closure compiler , which was a

java application. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes code. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

There was many other way to minimize the JavaScript files , but all of them have their own limitations. When writing a big application one need an automatic task runner which can run through all the files compile them and produce a single source code file

When we think about task runner the first two name come in our mind are Gulp and Grunt. Grunt and Gulp both are pretty similar , both works in the nodeJs environment.

Grunt is been around from longer time so the grunt community is big and you will find alot of plugins for the grunt. But there is some pitfalls in Grunt , and gulp started addressing the issue in grunt.

The common issue one face with Grunt is

1. It runs multiple task at one time where as Gulp is design in such a way that it runn one task at a test_no_validator_added_to_plan_with_mandatory_true

2. Grunt can not perform basic task like file watching himself and requires plugin for the search_meta

3. Gulp provides clean code and easy to maintain task.

Prerequisite

Install node.js. Nodejs is availbale for window , ubuntu and mac. Download nodejs from http://nodejs.org/download/

Once Nodejs has installed . Check the version of the nodejs. enter the command

/Users/ashish/Documents/javascourseblog.com/gulp/demo/

cd /Users/ashish/Documents/javascourseblog.com/gulp/demo/
node -v

It must print the version of the node. If its not printing node version try to reinstall nodejs

Check the version of the using

/Users/ashish/Documents/javascourseblog.com/gulp/demo/

npm -v

Now install the gulp

/Users/ashish/Documents/javascourseblog.com/gulp/demo/

npm install -g gulp

This will install gulp globally. -g stands for the global installation of the any npm package

If you get the EACCES error please login using super user. In debian you can use command su.

Now lets go to the project directory using command line and hit the command

/Users/ashish/Documents/javascourseblog.com/gulp/demo/

npm init

Enter the name version description and all other data . If you dont want to be specific press enter enter till the end.

This will create a package.json file inside your project folder.

Now install gulp locally. It is recommended to install gulp locally and globaly both.

/Users/ashish/Documents/javascourseblog.com/gulp/demo/

npm install --save-dev gulp

The flag --save-dev help to save package as dev dependecies in package.json.

It helps in managing the packages for the projectin dev environment and production environment

First task in gulp

create a file gulpfile.js in root of projectand open it and paste these lines in it

Now save the file. And run the command

/Users/ashish/Documents/javascourseblog.com/gulp/demo/

gulp helloWorld

If you want to run all the task you created then you need to create a default task. add these lines in the code

Now run the command

/Users/ashish/Documents/javascourseblog.com/gulp/demo/

gulp

It will first run the default task. We have injected helloWorld as dependent task of the default , So it will run the helloWorld also.

So your final gulpfile.js will look like this

Conclusion

In this article we have seen

1 . Installation of Node and Npm

2. Task managers in front end application

3. Installation of gulp

4. Creating a task in gulp

5. running many task one after another in gulp

12 Interesting facts about front end Web technologies

2015-05-11T02:24:00.001-07:00

1 . By typing this below you can use your browser window as text editor

data:text/html, <html contenteditable="">
</html>

2. By typing below you can quickly run your html without running html file

data:text/html,<h1>
hay, I am html</h1>

3. By typing below in your browser console you can make page editable

document.body.contentEditable='true';
document.designMode='on

4. In mordern browser if you define any element with some Id it create a JS global variable

<div id="IAmaDiv"></div>
console.log(IAMaDiv); // <div id="IAmaDiv"></div>

5. You can pass multiple statement inside if statement without using curly braces

if (confirm("wanna see two alerts?"))
  alert("first"), alert("second");

6. If you want to disable alert in a Html page ,you can type this in console

alert = console.log.bind(console);

7. If you wanna print an array in table form.You can use below in Chrome

var author = [{name: 'ashish', age: 24}, {name: 'Nautiyal', age: 23}];
console.table(author);

8. console.log($0); returns the currently selected element in Chrome

9. monitorEvents(window,'click'); can monitor all the click event on page in google chrome

10. debug(debugThisFunction); will kick on debugger whenever control will execute debugThisFunction

11. Typing keys(window); in console will return an Array of global objects

12 . history.pushState({}, '', "changedurl"); by using this you can change your url bar in browser to something else

Webview in PhoneGap/Cordova or Turn your website into mobile application Cordova/phonegap

2015-05-09T08:33:00.000-07:00

First of all you need to install Phonegap/Cordova in your system and if not installed you can refer to this link https://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html .

I hope you are done with the Cordova/Phonegap thing and now you have a link which will open up a website and you want to convert it into an application.Making an application from a web link in just 10-15 minutes don't you think its amazing.So lets start with it.

If you are familiar with Cordova or Phonegap then you will definitely know about deviceready Event Listener in Cordova/Phonegap. But if not don't worry it a very basic thing you can set up the Cordova/Phonegap thing in your system from the link shared previously.It will guide you completely how to install Cordova in your system and it will also setup one basic project.In that project you will find deviceready Event Listener.In short deviceready is the event which is fired after the cordova file is completely loaded and your application is ready.

You can simply do like this and make your application from the link.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
 // Now safe to use the Codova API
 window.location="http://your.website";
 }
You also need to declare something like this in xml file to tell Cordova that it is safe.
<access origin="http://your.website" subdomains="true"/>

Now in case if the internet connection in the mobile is not working and you run the above code it will not work.But there is also a solution for this.

In Cordova /PhoneGap we have a plugin for checking network connection just install the plugin from your command line window by running this command

cordova plugin add cordova-plugin-network-information

After this add some code to check your internet connection type

function checkConnectionType() {
      var networkState = navigator.network.connection.type;
      var states = {};
      states[Connection.UNKNOWN] = 'Unknown connection';
      states[Connection.ETHERNET] = 'Ethernet connection';
      states[Connection.WIFI]   = 'WiFi connection';
      states[Connection.CELL_2G] = 'Cell 2G connection';
      states[Connection.CELL_3G] = 'Cell 3G connection';
      states[Connection.CELL_4G] = 'Cell 4G connection';
      states[Connection.NONE]   = 'No network connection';
      return networkState;
    }

Now you can add logic to do something in case of no internet connection.

function onDeviceReady(){
   var networkState = checkConnectionType();
       /*load local files if there is not network connection */
    if (networkState == Connection.NONE) {
        window.location="open some other local file like sorry no internet connection";
       } else {
         window.location="http://your.website";
       }
    }

Or you can also open a native Cordova/Phonegap alert in case of no internet connection like this.

function onDeviceReady(){
    var networkState = checkConnectionType();
      /* load local files if there is not network connection */
        if (networkState == Connection.NONE) {
           navigator.notification.alert('Oops! Sorry No internet connection');
         } else {
           window.location="http://your.website";
          }
      }

This is my first one hope you will like it and fell free to ask any questions.

Cordova Contact API example with AngularJS and Onsen UI

2014-11-19T03:32:00.002-08:00

This tutorial is divide into three parts.

Designing the template with onesen ui
cordova contact plugin
rendering the contact with angularl

First we will design the layout in onsen UI for the application.So first we will create a page holder. Onsen UI provides <ons-navigator> component to serve this purpose.As the page holder is created by <ons-navigator>.Now lets create a page by using <ons-page>.One thing i would like to clear before proceeding ahead <ons-page> should be used as root element of the page. The whole page will be encapsulated within <ons-page>.We want to show the contact image to right side and the contact information to left side.For doing this lets create a row by using <ons-row align="center">. Now devide this row into two columns by using <ons-col>.As we have now two equally devide layouts at the center.

Now lets create the placeholder for the contact information by using simple <div> component.Now lets add a button at the end to envoke some method. For creating a button in onen UI we need <ons-button> component. Lets add this component just before where page gets close i.e. before </ons-page>. So the final template of the app will be


<ons-navigator>
    <ons-page>

          <h3></h3>
          <ons-row align="center">

              <div class="Demo">
            <ons-col>
               

               <div class="Demo">
              </div>
              <hr />
               

               <div class="Demo">
               </div>
               <hr />
               

              <div class="Demo">
              </div>
            </ons-col>

            <ons-col>

          <ons-button ng-click="pickAcontact()">Pick contact</ons-button>
               
              </div>
            </ons-col>
          </ons-row>

</ons-navigator>

    </ons-page>

Now our template is ready lets quickly add some css rules.


.item {

      padding: 10px;

      line-height: 1;
    }

      background-color: #ccc;
    .item-thum {

      height: 50px;
      width: 50px;

    .item-title {
      border-radius: 4px;
    }

      font-weight: 500;
      font-size: 15px;
    }
    .item-desc {

      line-height: 1.3;
      font-size: 14px;
      color: #666;
      margin: 4px 0 0 0;

      font-size: 12px;
      padding: 0 30px 0 0;
    }
    .item-label {
      color: #999;
      float: right;

      overflow: hidden;
    }
    .col {
      border: 1px solid #ccc;
      background: #fff;
      padding: 4px;

      padding: 8px;
      color: #999;
    }

    .page__content {
      background-color: #f6f6f6;
    }

    h3 {

    
      color: #666;

      font-size: 17px;

}

Now lets jump to the contact plugin of the cordova.First add the plugin by using "cordova plugin add org.apache.cordova.contacts" command. once the plugin is added into the application we can move ahead with this plugin . Lets quickly check whether plugin installed correctly by using cordova plugin ls.it will list the all installed plugin.

Cordova provide navigator.contacts.pickContact api to access the contact from contact list. navigator.contacts.pickContact takes two arguments first a success callback or a error callback.


   navigator.contacts.pickContact(function(contact){
    // contact can accessed here

   }).
   },function (err){

    //error callcback

So now lets play with angularJS.First of all define app ,module. Now create a controller. I have created a controller "AppController".Now create a method pickAcontact and bind this to button we created while designing the layouts by using ng-click directive.Now inside this methode call the pickContact api and on the success callback of the api add the result to $scope.contact. which we will use in the template. Now come cak to template and make data binding.The final html will be.


<ons-navigator>
    <ons-page>

          <h3></h3>
          <ons-row align="center">

              <div class="Demo">
            <ons-col>

              </div>
                {{ contact.name.formatted }}
              <hr />

                {{ contact.emails[0].value }}             
               <div class="Demo">
                {{ contact.phoneNumbers[0].value }} 

                {{ contact.addresses[0].postalCode }} <br />
               </div>
               <hr />
               <div class="Demo">

                {{ contact.addresses[0].streetAddress }} <br />
                {{ contact.addresses[0].locality }} <br />
                {{ contact.addresses[0].region }} <br />

              <div class="Demo">
                {{ contact.addresses[0].country }}
              </div>
            </ons-col>

            <ons-col>

          <ons-button ng-click="pickAcontact()">Pick contact</ons-button>
                <img ng-src = "{{contact.photos[0].value}}" />
              </div>
            </ons-col>
          </ons-row>
    </ons-page>

  </ons-navigator>

Come back to controller , after assigning the contact value to $scope.contact call the $scope.$apply() , $scope.$apply(); will let the angular know there has been some changes made in values.

AngularJS ui-router tutorial from scratch - Part 1

2014-09-01T23:43:00.000-07:00

AngularJS is very powerful framework and provide the solution for almost every challenge without integrating any outside libraries. Angular UI library is broken in many parts so you can pick the feature and include only that in your angularJS application.

But still we can add libraries and make the angular application more powerful.

ui-router is one of most powerful ui library of the angularJS . Instead for just providing the url route it plays with the state. ui-router provide many extra and more powerful feature. We can have nested views , multiple views on one page or the multiple view wich have common controller .

INSTALLATION : For installing ui-router in your application you can install it through the bower

$ bower install angular-ui-router --save

and then include the it in your HTML file

<script src="phoneCatApp/bower_components/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>

you can save the source code from the GITHUB .

For using the ui-route you need to ui-router as a dependency in your module

<html ng-app="phoneCatApp">

<head>

<script src="script/angular.js"></script>

<!-- Include the ui-router script -->

<script src="script/angular-ui-router.min.js"></script>

<script>

    // ...and add 'ui.router' as a dependency

    var phoneCatApp= angular.module('phoneCatApp', ['ui.router']);

  </script>

</head>

<body>

</body>

</html>

If you used ng -router then you most probably came across the ng-view directive . So here instead of using the ng-view we use ui-view ,the views will get change inside this ui-view

<div ng-controller="mainController">

<div ui-view="">

</div>

</div>

Now we will write the config of the app for routing . It is very simmiler to the ng-route but instead of playing upon $routeProvider we deal with $stateProvider.

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('first', {

url: '/first',

templateUrl: 'template/first.html',

controller :firstController

})

});

template templateUrl and templateProvider

These three are used for setting the views .You can use any of them according to your needs .

template - template is a string of HTML content or a function that returns HTML
templateUrl - templateUrl is a string of a URL path to a template or a function that returns a URL path string
templateProvider - templateProvider is a function that returns an HTML content string

Controller

controller is used to bind the controller to the view. Which can operate over the view

url

This work very simmiler to the ng-route but have many upgrades in it .Which we will discuss in future.

How to route ?

1 . ui-sref

ui-sref work smiler to the href but it have more capability . It takes the stateName as the the parameter .

<a  ui-sref="first">First</a>

2 . $state.go

If you want to change the view from controller then you need to use $state.go . The syntax is

go(to, params, options)

$state.go('first') will take it to first state.
$state.go('^') - will take it to a parent state
$state.go('^.sibling') - will take it to a sibling state
$state.go('.child.grandchild') - will take it to grandchild state

This is the first part of ui-router. I will discuss many other parts in next series of it.

Promises in JavaScript: What are they and How to use them?

2014-07-20T20:57:00.002-07:00

Asynchrony is unavoidable in any platform these days. Asynchrony doesn’t just help the servers to serve their clients better but it also maximizes effective utilization of the resources. JavaScript is no exception.

In recent times, use of asynchronous programming became very important as the expectations out of the software systems that we are writing is went up drastically. And even some of the browser APIs like Indexed DB work on an asynchronous model.

Traditional way of handling asynchronous tasks is the callback model. As the asynchronous tasks are handled by a separate thread or a separate process in some cases, the main program using the asynchronous task doesn’t know when the operation is going to be finished. So, we attach a callback function to the asynchronous task and the attached method would be called when the task is done.Though this approach looks good for upto a chain of one or two asynchronous tasks, it makes the code less readable when we have 3 or more async operations that depend on the result of the previous

operation. Following is an example of such scenario:

Promises: What are they and How to use them?

firstAsyncOperation.onOperationCompleted = function(

if(operationObject.state == “success”){

var secondAsyncOperation = secondAsyncFunction(operation.resultData);

  secondAsyncOperation.onOperationCompleted = function(){

   if(secondAsyncOperation.state == “success”){

     var thirdAsyncOperation = thirdAsyncOperation();

      thirdAsyncOperation.onOperationCompleted = function(){

       if(thirdAsyncOperation.state == “success”){


       }


      };


    }

      };

}else {

//May be some other async operation to handle error case
}

};

That might look beautiful with nice switch between the curly braces and parentheses, but it becomes difficult to manage such code blocks. It becomes really painful when you have to write such blocks multiple times in your code. Promise is a pattern created to solve this issue. Rest of the article speaks about the pattern of promises and how to use them to address this kind of issue.

What is Promise ?

A promise is an object that holds an asynchronous operation. At any given point of time, the object is in one of the three states:

• Pending: When the asynchronous operation is still going on

• Success: When the async operation is successfully completed

• Failed: When the async operation is completed but failed

The promise specification doesn’t tell how to implement a promise, but it says what should be implemented. According to the specification, any promise implementation should have a then callback that accepts two callbacks: one for success and the other for failure. Some implementations (such as Q) also accept a third callback that is invoked when the operation is in progress.

A typical asynchronous operation handled by a Q promise looks like:



asyncOperationObject.then(successCallback, errorCallback, inProgressCallback);

function successCallback(data){
     //----------
     //----------

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

    }

function failureCallback(error){

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

 }


 function inProgressCallback(info){

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

 //---------- 
 }

In general, we pass in anonymous functions as callbacks to the then method. The syntax is shown below:




asyncOperationObject.then(function (data){
//--------
//--------
}, function (error){
//----------
//----------

}, function (info){
//----------
//----------

});

One can include or ignore the callbacks depending upon the need. In most of the scenarios, we ignore the in-progress callback. It can be used to show when there is a need to show a progress bar to indicate the current state.

Chaining Promises

The very first thing we saw in this article is, how dangerous the callback model is for chaining async operations. The best part about the promises is that, the then method also returns a promise object.

This means, we can return another then on the return object.




asyncOperationObject.then(function(data){

   return data;

  }, function(error){

    console.log(error);

  })

  .then(function(data){

    return data

  }, function(error){

    console.log(error);

  })

  .then(function(data){

   return data;

  }, function(error){

   console.log(error);

  });

Though the above operation is chained,it still looks flat. It is very easy to manage such operations as well. More than everything, it is easy to read the subsequent then blocks.

Conclusion:

Understanding promises is very crucial these days. It is an important pattern to be followed in every JavaScript heavy application. There are several implementations of promises, including Q, jQuery’s deferred API, Angular’s $q (inspired from Q), RSVP, when.js and so on. Promises got a place in the ES6 specification as well. It is already implemented in latest versions of many of the major browsers.

Happy promising!

About Author :

Name :S Ravi
Twitter : https://twitter.com/SRavi_Kiran
Bio: Software Professional, Passionate about Microsoft technologies, Blogger, Love to pass time with Music and Cricket

AngularJs $apply $digest in Detail With Error Handeling

2014-06-02T22:03:00.004-07:00

The best practice to change the value of bindings is $apply . What $apply actually does ? it update the bindings of the page and notify the value has changes . it calls $digest internally and return the promise. Almost whole angular binding run inside $digest.

 $scope.$apply('foo = "bar"');

//or

 $scope.$apply(function(scope) {
scope.foo = 'bar';
});

//or

 $scope.$apply(function(){
$scope.foo = 'bar';
 });

I was trying to change the scope value with ng-click . And i kept getting a error . Error: $apply already in progress.
If you are also facing the same error I found two solution for it
First Solution : you can put the putAsafeApply method , which wil check the status of the $apply .

$scope.putAsafeApply = function(fn) {
var status = this.$root.$$phase;
if(status == '$apply' || status == '$digest') {
 if(fn && (typeof(fn) === 'function')) {
 fn();
 }
 } else {
this.$apply(fn);
}
};

$scope.$$phase or $scope.$root.$$phase will return "$digest" or "$apply" if a $digest or $apply is in progress. I believe the difference between these states is that $digest will process the watches of the current scope and it's children, and $apply will process the watchers of all scopes.

So now we have putAsafeApply method and we can use it where ever we want to use instead of $apply.

$scope.putAsafeApply(function() {
 $scope.foo = 'bar';
});

Second Solution : It is simpler then the first one .You can use the $apply inside the $timeout function without delay.

$timeout(function(){
$scope.foo = 'bar';
})

$timeout(callback) will wait until the current digest cycle (if any) is done, then execute your code, then run at the end a full $apply which will call $digest internally as explained earlier .

PhoneGap / Cordova Unzip Plugin for android

2014-05-29T23:18:00.001-07:00

While developing A phoneGap application i faced a problem in unzipping a folder. I downloaded a folder in zip from server using FileTransfer API.
I searched a lot for UnZIP plugin of phone gap but did not find any one the net . Than i started writing a fresh cordova plugin for unzipping

There is few prerequisite before using this plugin
Node.js and Cordova CLI or PhoneGap's CLI

Installation : 1 . Open Your terminal and go to your project directory
2 . Enter this command

phonegap  plugin add https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin.git

or If you using cordova

cordova  plugin add https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin.git

or you can download the plugin from Git repo Manually

https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin.git

3 .I Assume you downloaded the plugin manually from git repo

Copy the com folder inside the src folder under your android project

4 .Copy ExtractZipFile.js file inside your www folder and make its reference in index.html

5 . Open res/xml/config.xml file from your project and paste the line

   <feature name="ExtractZipFile">
                       <param name="android-package" value="com.phonegap.plugin.ExtractZipFile.ExtractZipFilePlugin"/>
               </feature>

<plugin name="ExtractZipFile" value="com.phonegap.plugin.ExtractZipFile.ExtractZipFilePlugin" />

or Usage :

function extractOK(status)
{
    console.log("extractOK");
}

function extractError(error)
{ 
    console.log("extractError "+error);
}


function extractFile(zipfile)
{
    console.log("Extracting "+ zipfile);
    extractZipFile.unzip(zipfile, extractOK, extractError);
}

Get the file reference and pass as parameter in function extractFile(zipfile) . And you are done with extractFile

Git Repo Link : https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin

Knowledge Optimization and Knowledge Sharing in Java Technology

2014-05-23T08:54:00.000-07:00

Information is crucial to the organizations and individuals as it helps them to protect their data, wealth as well as assets but often there has been the challenge of sharing this data with others for them to exploit it to their advantage and any other intended purpose. As a result of this therefore, there is need to allocate more resources and time to the sharing of this information by the different people. Governments, individuals as well as corporate and organizations therefore have set out to come up with better ways of enhancing the sharing of their data in the information systems. One better way of doing this is through the sharing of the knowledge through the Java Technology and software.

Consistency in publishing of the blog posts
Although patterns of publishing of blog posts with regards to the regularity with which they are done are determined by the nature of the content and the idea of the blog site, it should be done as often as possible. Often the successful way to attract and maintain visitors to a site could be through regular publishing of quality content for the blog site which will not only appeal to the visitors but also keep them coming back to the site. Attracting more people will widen the scope of the search of the website on the search engines as well as improve the rank of the website in the search engines and this will improve the visitors to the website as well.
Maintaining the visitor numbers high to the website can also achieved through other strategies such as inclusion of survey or polls done on a frequent regular basis like daily or weekly. This could also be done alongside inclusion of a visitor’s book in the website as a strategy to improve and notice the guest frequency.
Keep the visitors interested by asking questions related to the blog post
The development of questions relevant to the particular blog post will always keep the visitors asking more about the topic of discussion. This will also ensure their involvement as they will attempt to respond to the question in the comments section. Their contribution not only improves the content of the website but may also highlight the challenges especially with regards to products or services for a business, advertisement or sales promoting or related website.
Networking
This is especially relevant when done with other blogs which are directly related to the area of interest of the website. It provides users of other sites a direct link to your website from the other site. Inclusion of links to the website in comment sections of other blogs which are dealing with related fields could also be a good strategy to improve visitor frequency in the site.
Inclusion of sharing button or option in the site also allows the users as well as visitors to share information that they find useful or relevant to the site. This will also allow them to spread the links of the bog by sharing them on social media as well as through their personal emails. Use of handles such as twitter, Facebook which allow for instant feedback is also good for the promotion of the site as well as attracting more users.
Quality content
Successful implementation of the java technology as a tool of sharing information will heavily hinge on the content that is being shared. When the content is short, precise and to the point then it is likely to appeal to many people rather than a redundant, long and boring content that is discouraging to read. Sharing of information that is useful and healthy for people will ensure that they read and want to read more the content associated or being passed through the Java technology. However much any content is shared and optimized across the different mediums and channels for consumption by the users, it will not be able to do much or achieve much with regards to impact if the content is not acceptable by the readers.
Avoid duplication of content
When the content being shared is one that has been duplicated and lack originality, it tends not to appeal to the readers and this may perhaps affect the consumption of the content and the general perception of the contents with regards to the reliability of the java technology as a source of information. It is therefore critical to avoid the duplication of content that is especially to be passed on to the people through the java technology.
Avoid issues of copyright
Any content that is to be passed on through the java technology should be able to be shared without any challenges especially with regards to issues of copyright. Most of the copyright issues have to do with the plagiarism of content without the author’s knowledge or permission or even acknowledging the author. Hence therefore there is need to prevent the issues of plagiarism or any other issues that may lead to copyright law suits and such.
Content should be content specific
When content is said to be specific this implies that is should be precise so that it only highlight the key point and remains within the scope of the subject of interest. Redundancy tends to arise because of the inclusion of irrelevant content which does not even relate or touch on the subject of interest in any way.
Avoid promotional content
Such technology is supposed to pass knowledge and not be used as forums to do promotion of other products and services. Therefore this should be avoided at all cost as it may lead to disregard of the content being shared even if it is relevant and worth reading.
Create links and addition share buttons
Inclusion of links and share buttons are necessary to allow for further sharing of the knowledge especially through the social sites. This could also be extended and done on the email so that the information can be channeled out as much as possible.

Author’s Bio: He is a writer by profession. He contributes articles and blogs on travelling, education, technology, fashion and shopping. He has good knowledge in all writing field. He helps the student’s any papers to buy from custom essay writers.
Google+ profile

Show loading screen in Phonegap app over inAppBrowser

2014-02-13T04:27:00.000-08:00

The trick is very simple for showing the loading screen in phonegap application.You Just need to call activityStart function of the notification.

For hiding the loading screen in phonegap just call activityStop function.

The loading screen is very helpful while making Ajax call or while using the inappbrowser.It is really useful when loading the external link in inappbrowser.It is useful because you can not create a loading screen through your HTML in client side if you are loading the external link.Because inappbrowser overlay on the application.You can show the loading screen when loadstart events fire in Inappbrowser hide it when loadstop events fire.

Here is an example of loading screen with inappbrowser.

This phonegap loading screen only works with the android .And if you will touch the screen The loading screen will get hide.

FaceBook Login Logout using cordova 3.3.0 cli.

2014-01-27T23:31:00.000-08:00

In recent past i faced a lot problem in setting up the cordova facebook plugin with cli 3.3.0.After a lot of search i found it is typo from cordova.I am here sharing the easiest steps to setting up cordova facenook plugin using cordova cli 3.3.0 .

How to set up the Facebook plugin With cordova 3.3.0 cli for android ?

before Setting Facebook plugin with cordova 3.3.0 you have to setup these

Prerequisite :

JdK
Apache Ant
Node.js and NPM
Git
Cordova 3.3.0 CLI

Once you installed all the above properly.Open your command prompt and go to your project directory and run this command

you will see the screen like above after running the command . You have created a cordova project.Change your directory to facebookTutorial

Now you are inside cordova project which you just created .Run the below command.

Now you installed facebook plugin in your cordova project. But if you will run the command cordova plateform add android it will get failed and ask you to putt appid and appname.

For removing this error locate the folder \plugins\com.phonegap.plugins.facebookconnect inside your projectfolder.

Open The plugin.xml file from \plugins\com.phonegap.plugins.facebookconnect folder and find the lines

Modify it to

Where value is your app id and your app name.

Run the command cordova platform add android . The screen similar to below will appear.

Now you have installed facebook plugin and created android project.
Now we will see how to get login to facebook through cordova facebook plugin ?

Now open the index.html file from your projectfolder/www in your favorite editor. And delete everything from this .

You have a Blank index.html file.Write some dom elements inside your body Tag

Your Dom structure is ready . Now Make reference of cordova.js ,cdv-plugin-fb-connect.js and facebook-js-sdk.js

Now come to your <script></script> portion and check the cordova facebook and cdv agent are included properly inside your project

Write event handler function for login logout and status change.

Its time to initialize FB sdk now. Here i am initializing it with device ready event

Once the fb is initialize we can make login to facebook through our application.Here the function for log in

For the Logging out

For getting the login status here is the code snipet

Once all this done run the command

Your Application will be launch in your emulator.Here are few screenshots of emulator.

Hope you enjoyed reading this.If any doubt i am open to answer .Feel free to ask and do't forget to share with your friends

Fork me on GitHub

Offline App Capability In HTML5

2014-01-21T06:27:00.001-08:00

Html5 Offline Apps

Offline app capability in HTML5 bought all the power to store data offline .When we talks about offline people ask offline means without internet ? First take the term ONLINE first . online and Web are kind of synonyms.

So why the term Offline is getting use for web technology . The offline here means run the webpage from file:// uri. But hang on it does not mean the web page will never get connected to server.The term offline will make more sense if we will take it like the web page could survive at the server downtime.There are various apps who connects the cloud server and survives at downtime. Gmail Mobile app and gmail offline are examples

In the Older time devs used the technique like cookies,Plugin Based Storage for storage. But the era of HTML5 bought more power to the client side for storage.

. You can check the application for online/offline using navigator.onLine(). And it works everywhere in latest browser even in IE also.

You can also listen the events for it using.

document.body.addEventListener("online", function () {console.log("Now you are online !!!")}

document.body.addEventListener("offline", function () {console.log("Now you are offline !!!!")}

HTML5 bought many features to make application offline .Few Technique to make app offline

1.Application Cache : CACHE MANIFEST file make you able to store the resourse files locally for offline usage.Make a reference of manifest file inside <html> tag.

<html manifest="MyManifest.appcache">.

</html>

The mime type of the manifest must be text/cache-manifest.Manifest file is a simple text file . It looks like this

CACHE MANIFEST

index.html

index.css

index.js

2.Web Storage : Web storage have two sub category. One is persistent called local storage . In local storage we can set a value to a key using localstorage.key="value"

And we can retrieve it later . The other category of web storage is session storage we use it similar but the data gets lost once the browser gets closed .

We can just match the strings using the web storage.Simplicity is for calling the API is good part of this and bad performance is bad part of it.

3.Web SQL Database : Web sql database is a relational database .It has all the power of storing the complex relational database. it is well supported in all mobile browser the performance is really good .It has robustness. And the best part it is really easy to maintain.One have good command over sql can play with it with lot of ease.

4.Indexed database : Indexed Database is a collection of stores of objects . Where you can keep the objects for future use.In indexed Db you don't need to define a schema before like web sql database . In Index db you can have multiple databases and in each database you can have multiple stores.Indexed Database have good search performance and have robustness

How to Make a user friendly Interface for Mobile Platforms?

2013-12-26T22:57:00.000-08:00

We all web Ninja knows the value of USER EXPERIENCE. In mobile platform it requires a different approach to make a better user experience. I am listing few points one must remember while making mobile Interface.

1 .Responsive Web design
2 .The event handing must be touch friendly
3. The Forms must be design in a mobile friendly way .
4. Use appropriate screen pixel densities of images

1. We all know responsive Design is one which adapts the layout on the basis of the screen size. It means the user will have the same EXPERIENCE on mobile as on Desktop while browsing the site.few well known technique for making website responsive are these.

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="main.css" media="screen, handheld" />

<link rel="stylesheet" type="text/css" href="fallback.css" media="screen and (min-width: 40.5em)" />



It means non mobile version and The IE version 9 or less than 9 will use fallback.css. We all knows IE 9 and lower does not support media queries. Not only IE some mobile browser like Symbian Browser (Doesn’t exist though) and BlackBerry older browser also not support the media queries. So Conclusion of this Part is make web design responsive.If you don’t know learn it.

Use Appcache to make website offline available. Believe me it increase user experiences

2. Now let’s jump on the second point event handling. Now days mobile are touch friendly. Apple bought “touch events AP” from ios 2.0 .Android is also catching up with touch events. W3C also making draft on touch event https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html. There are single touch and Multi touch Devices in market. Let’s not focus on multi and single touch devices (It’s another big debate).

So currently there are three basic touch events currently

touchstart: When a DOM element is touched.
touchmove: when a touch is dragged over the DOM element.
touchend: when the touch removed from DOM element.

3. The Forms So one need to handle these events for making website touch friendly .Few things one must remember while approaching for touch friendly devices

1 .Disable the zooming : Preventing the user from zooming will prevent user to scale website.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2.Prevent the scrolling: Few devices like IOS jumps the viewport when the scroll exceed the limits.

document.body.addEventListener('touchmove', function(event) {

event.preventDefault();

}, false);

Now let’s come to Third point make form user friendly. Mobile have on-screen keyboard and its really frustrating to fill the form with this. But thanks to HTML5 which came with new semantic input types and validation. For making form filling mobile friendly on need to follow these two things .

1 .Input Type. There are number of new input type introduced in HTML which invokes relative on-screen keyboard.

The full list of all input types :

url ,tel ,Email , search, Number ,Color , Range , Datetime , datetime-local ,Date, Time , Week ,month

For Example I write < input type=”number” />, the browser will show a numeric onscreen keyboard. Or I write < input type=”Email” /> the on screen keyboard will show alpha numeric keyboard with @ and .com button . So the user will feel it more easy to fill the form

2.Form Validation : Validation of form is very important .It keeps the data clean and improve the user experience . There are two approach one can use for form validation

I . Pattern . Pattern is nothing but a regular expression to validate

<form action="Myform.asp">

Country code: <input type="text" name="Your country_code" pattern="[A-Za-z]{3}" title=" only Three letter country code">

<input type="submit">

</form>

The above example will validate the input field and will allow only 3 character

II. Require : If input field have require attribute the user must fill the field before submitting the form

<input type="text" required name="Your country_code" pattern="[A-Za-z]{3}" title=" only Three letter country code">

III min, max and step: For numeric value specify the minimum maximum value and for the value will increment in slider

<input type="number" id="myNumber" min="10" max="50" step="10" />

IV maxlength : The maxlength attribute for Input type will specify the maximum allowed length of input character

4.Now days there is very wide range of screen pixel densities. Some devices have really very very high resolution display. So first and best suggestion for the optimizing different screen pixels is avoid images as much as you can. Now days there are SVG CSS3 for getting nice interface. And these works fine across the web

But if it is compulsory to use image you can go for these two approach

1. Optimize Single image for multiple platform. You can use one image and optimize it for different devices. But this will affect the performance badly. As user will download the Hidpi image in all browser ,the old browser will render it badly .

2. Multiple Image approach . Use multiple images and decide on the browser capacity which to load .We can use following technique to make the dicision

1 . Javascript
2 .server side Delivery
3. CSS Media Queries

Getting Started with Angular -My first angular program

2013-08-22T21:56:00.001-07:00

getting started with angular.js

Before we start developing in Angular you need to download Angular.js from its official page .It's available in both minfied and normal version .

Structure :

First we will look at the structure of the Angular.

<!doctype html>
<html ng-app>
<body>
...
<script src="angular.js">
</body>
</html>

The first line <!doctype html> is for the browser to make him aware about the page is HTML5 based .

The next tag is <html ng-app> the ng-app means your app will auto bootstrap or auto initialize .You can initialize the app manuallly also .

If you wanna get support on IE 7 or below also write it like this <html ng-app id="ng-app">.

One important thing we wrote the script tag at end of the body tag . The purpose of this is to let dom structure get ready . It is best practis

Now lets develope some thing .

<!doctype html>
<html ng-app>
<head>
<title>My angular first program</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="myMess" placeholder="Type any message here">
<hr>
<h1>it is your message {{myMess}}!</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</body>
</html>

Explanation : <input type="text" ng-model="myMess" placeholder="Type any message here">

Here we are declaring an input text type field .

"ng-model" is Angular API which is responsible for two way data binding (binding view to the model).

It alow you the form validation like you normally does in HTML require ,url,number,email.We will review it in brief in future for now you just understand it is something related to the form

<h1>it is your message {{myMess}}!</h1> : this "{{ }}" is how we write expression in angular.{{myMess}} means the value of [ ng-model="myMess" ] will be get displayed here . This is called two way data binding .

MVC in JavaScript Angular Vs Backbone vs Other

2013-08-20T01:00:00.003-07:00

One technology which did remarkably well in recent year is JavaScript (EcmaScript). From the concept of Oops JavaScript has moved to MVC. JavaScript had libraries like J query which is all about on Dom manipulation . I spend last few months on MVC framework in JavaScript. Before discussing the MVC frameworks of JavaScript lets first understand what MVC actually is in practical.

What Is MVC , Or MV* means actually ?

Various frameworks make able developers to create a flexible way to organizing their code by using the variations of a pattern called MVC (Model-View-Controller). This is what book speaks about MVC.

If you will dig deep MVC. It is divided into three parts

MVC in JavaScript

Models represent the domain-specific knowledge and data in an application. Think of this as being a ‘type’ of data you can model — like a User, Photo or Note. Models should notify anyone observing them about their current state (e.g Views).

Views think of this as User-interface (e.g your markup and templates). Views must be aware about the structure of model but they need not to interact with model directly

Controllers takes the all input from user in the application and update the model. The controller don’t directly communicate the view .

This is how the Model - View – Controller relation is .

Various MVC Frameworks

There are many JavaScript MVC frameworks available like Backbone.js, Knockout.js, Ember.js, Spine.js, Angular.js, Ext.js etc. The Framework which are on too much demand are Backbone.js and angular.js .Both have own positives and negatives. Let’s start reviewing the various MVC in JavaScript.

Backbone.Js - If you are in the down town of JavaScript you must heard its name a lot . This is the one of the most widely used MVC Framework, Backbone is flexible framework. It provide the flexibility to choose the feature which you want to implement and which you don’t .underscore .js is tightly integrated with this . It plays very well with other frameworks .The first and main disadvantage I personally felt with Backbone is the bad documentation even though they improved it a lot but still it is not good enough for beginners. The functional drawback of backbone is it’s don’t provide UI binding. It is a event driven framework.


backbone.js

Angular.js - this is my personal favorite framework .What is best about Angular.js is it is not dependent on any other framework like underscore jquery etc. If its Angular its pure Angular. Angular is a complete solution . In Backbone there you have to implement all the event listeners you need not to write for events listener or event trigger its automatically happens in angular. The both way data binding make it awesome. Angular is heavy .It means you have to type less.
Directives services and provider are good concepts.Directives helps keeps your DOM manipulation code in angular element.It allow app to concern for update only when the data changes by this developer can keep all view logic separate. The.The HTML 5 have a lot of new tags but directive helps you to invent your own html tag.
Filter is another good thing with Angular.Filter filter data before it reaches to the views.It can format data in decimal number,ascending and descending order Filter are similar to the Directives you can keep them standalone.

Service providers are other good feature of angular.Services are something like API which you keep outside from your controller and the service provider expose your controller to the service.It again help Developer to keep controller lightweight and do all heavy lifting out side the MVC.$brodacst and $emit are example of inbuilt services of angular.Emit will send message to all predecessor and broadcast will send message to all successor by definition.But both works pretty same in angular world.

Angular.js

ReactJS - ReactJS is open source JS library by Facebook.ReactJS is not MVC but I am writing about it because people keep comparing Angular with React. Facebook guys created huge buzz on AngularVsReact. React Vs Angular does not make any sense for we guys.Angular is a complete framework on the other-hand React is just the view layer.React provides few functions to present the HTML.All the react output is HTML.
The react component is bundle of HTML and JAVASCRIPT. Their is concept of State and Props.Which comes from inside the component is state .The component save state it in memory.Which pushed in from outside is props.It is impossible to create an App alone on Reactjs

The good part of React:

1.A component lives his life in his life cycle.A component does not bother what other component is doing .Component himself understand what to render and where to render.
2.It is very easy to learn and understand the flow.
3.It always keeps the DOM shadow.It does not do to entire DOM manipulation on data change instead it manipulate the particular DOM.
4.The Flow of Application is easily understandable.

ReactJs

The bad Part of React:

1.There is way to make AJAX call all alone in React i.e. Natwork layer is missing.
2.There is no data layer as well.
3.No promises available

4.Worst of all not enough Documentation

We will discuss more MVC frameworks and definitely Angular 2.0 in detail in future. Stay tuned.

how to write hello world programe in android using phonegap

2013-08-06T23:06:00.000-07:00

In The last blogpost we discused how to set the workspace for the android app developement in phonegap aka cordova.

In this post will write the "Hello world" programe for android using cordova .

So here are the steps for creating your first app in phonegap.

Step 1 : Set your work space as i wrote in last blogpost

Step 2 : Create a www & libs folder inside the Asset folder .

Step 3 : Create a js and css folder inside the www folder .

step 4 : create a index.html file inside the www folder .

Step 5 : Copy the cordova-2.7.0.jar file from downloaded phonegap folder to your projects asset/libs folder.

Step 6 : Right click on the cordova-2.7.0.jar file which you copied into asset/libs folder .A select menu will appear choose the "Buid Path" .And then select "Add To Build Path" .

Step 7 : Now copy the cordova-2.7.0.js file from downloaded phonegap folder to your projects asset/www/js folder.

Step 8 : Now open your index.html file from www folder . I assume you are familiar with web developement . make a reference of cordova-2.7.0.js in your index.html page.

<script src="js/cordova-2.7.0.js" type="text/javascript"></script>

step 9 : Create a main.js file inside js folder . and refrence it in index .html page

<script src="main.js" type="text/javascript"></script>

Step 10: Write inside the body tag of index.html

<p>Hello World </p>

Step 11: Now Save all www folder files and Open the MainActivity.java file which you will found under the src folder.

Step 12: Keep the first line which start with "package" and Remove the all other lines of that file .

Step 13: Copy the following lines in in the file .

import android.os.Bundle;

import org.apache.cordova.*;

public class MainActivity extends DroidGap {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

super.loadUrl("file:///android_asset/www/index.html");

}

}

Step 14:Now save the file . Clean the project . Build the project. Run the application . And you application is done .

Feel free to ask your doubts through comments

How to Use PhoneGap on Linux Ubuntu for Android Application Development ?

2013-05-07T23:34:00.000-07:00

This tutorial will tell the step by step process to Use the PhoneGap in Ubuntu for making native app using web technology like HTML5 ,CSS3 ,JavaScript Etc.

First of all you are needed to set up workspace . The software we will need for this are.

1.eclipse IDE

2.Sdk

3.Phone gap

Download Sdk from here http://developer.android.com/sdk/index.html . Unzip this file into your working directory. This will download two folder Eclipse and Sdk .And you are done with the eclipse and sdk installation. Next thing you need to download the PhoneGap . Download phone gap and unzip it to anywhere in your hard drive . This will download two folder doc and lib . The lib folder is the folder which will come in use for development . The lib file contains folder Android , ios windows etc. As we are discussing here the android open the android folder . And now our workspace is all set for the android app development .

Now you open your eclipse IDE which you Downloaded earlier in the folder adt-bundle-linux-x86-20130219/Eclipse.

Click on the new menu and select Android Application Project. It will lead you to a new window. Fill the "Application name field " with "javacourseblog" and click next.

Keep clicking next until find the Activity name field . Insert Javacourseblog there in Activity name and click finish.

Your file system will look like this

Now find the asset folder under the root folder of your project and create folder by name "WWW".

Now open the folder lib/android which we downloaded earlier.

Copy the XML folder and paste it inside the res folder in your eclipse ide .

Now locate the cordova-2.7.0.jar file inside the lib/android folder and copy it from there and paste it to inside libs which is inside the root folder in eclipse IdE.

Now locate cordova-2.7.0.js file in the lib/android folder and rename it to coredova.js . Then copy it to WWW folder which you created earlier inside the asset folder in Eclipse IDE.

If everything is done your work space is set to develop android app using phonegap and web technology .

getUserMedia Introduction With The simple Source Code

2013-04-24T10:44:00.000-07:00

getUserMedia has came in web by Opera first . Opera called it <Device> which was used to get access to the native hardware like camera and mic of the user pc .

<device type="media" onchange="update(this.data)"></device>

<video autoplay></video>

<script>

function update(stream) {

document.querySelector('video').src = stream.url;

}

</script>

This was the syntax of < device>

Soon after the <device> the WhatWG decided to bring a javascript api named navigator.getUserMedia() . This API is the part of Web RTC which means web real time communication.

function getTheMedia() {

// Note: Opera is unprefixed.

return !!(navigator.mozGetUserMedia || navigator.webkitGetUserMedia ||

navigator.msGetUserMedia || navigator.getUserMedia) ;

}

if (getTheMedia ()) {

// its nice to go!

} else {

alert('your browser is not getUserMedia() enabled ');

}

The getUserMedia ask your permission for accessing your webcam and mic.

The navigator.getUserMedia take the first parameter {audio: true, video: true} and then couple of optional call back .

so the syntax of navigator.getUserMedia look like this.

navigator.getUserMedia({audio: true, video: true}, ifSuccessfull, ifError);

 function ifSuccessfull(stream) {
  // use the stream for further use ...
  }
 
  function error(){
  alert("your browser is not getUsermedia enabled")
  }

getUserMedia enable you to access the hardware like camera and mic without any plugin . After accessing the user media you need to add this to the <video> src .The code will look like the below.

function onFail(e) {

video.src = 'fallbackvideo.webm';

}

function onSuccess(stream) {

video.src = window.URL.createObjectURL(stream);

}

if (!navigator.getUserMedia) {

fallback();

} else {

navigator.getUserMedia(
{audio: true, video: true}
, onSuccess, onFail);

}

Further you can add the css3 filter too it like you can rotate the video .And you can play with this Web Rtc API

Check The simple Demo here

How To Use JavaScript With HTML 5

2013-01-28T05:58:00.002-08:00

HTML 5 is definitely the future of the web. So one must learn how to work on the JavaScript with Html 5.This article gives you the just introduction how to use JavaScript in html 5.

JavaScript moved a lot since Netscape livescript . So the Html . As you all now traditional JavaScript have the DOM selector getElementById , getElementsByTagname,getElementsByClassname. The HTML 5 provide javascript a new function called queryselector .So what does this query Selector does ? Before going into this lets see the syntax of this function.

document.querrySelector(‘idname’);

Let’s see how its work?

If we have a HTML file like this.

<div>

<p id=’Australia’>Melbourne</p>

<p id=’US’>New York</p>

<p id=’Australia’>Sydney</p>

</div>

And now if you use function like document.querySelector(‘australia’).style.color =’red’; in your JavaScript file it will change the color of only first element with the id Australia to red. It means the Melbourne will turn into red and Sydney will not any effect on it.

There is one more function called document.querySelectorAll . If you will use this function like document.querySelectorAll(‘Australia’).style.color =’red’; it will turn all the elements associated with the Australia. It means it will turn Melbourne as we Sydney into red.

how to move a div using javascript

2013-01-24T05:30:00.000-08:00

This tutorial is for how to move a DIV using java script . Here is the example for moving a div by the help of javascript .

You have to make the div position Absolute for older browser . I made the ufo div position absolute for getting the div move using javascript .

<html>
<head>
<style>
#ufo
{
position:absolute;}
</style>
<script>
function initial()
{
document.getElementById('ufo').style.left=200+'px';
document.getElementById('ufo').style.top=200+'px';
}
function right(){
document.getElementById('ufo').style.left=parseInt(document.getElementById('ufo').style.left)-5+'px';
}
function left(){
document.getElementById('ufo').style.left=parseInt(document.getElementById('ufo').style.left)+5+'px';
}
function top(){
document.getElementById('ufo').style.top=parseInt(document.getElementById('ufo').style.top)+5+'px';
}
function down(){
document.getElementById('ufo').style.top=parseInt(document.getElementById('ufo').style.top)-5+'px';
}
</script>
<link rel="stylesheet" href="main.css">
</head>
<body onload="initial()">
<div id = "ufo">
i am a moving dig. bring mouse over me fellas !!!! </div>
<button id="button" onClick="right();">Press here to move left</button>
<button id="button" onClick="left();">press here to move light</button>
<button id="button" onClick="top();">press here to move down</button>
<button id="button" onClick="down();">press here to move up</button>
</body>
</html>

If you wanna get animation using CSS3 in this . Here is the code for CSS3 make some animation .

#ufo
{
position:absolute;
display:block;
margin:auto;
text-align:center;
width:100px;
height:100px;
border:1px solid blue;
-webkit-transform:rotate(20deg);
background:-webkit-linear-gradient(top,yellow,green);
-webkit-border-radius:25px;
-webkit-box-shadow:rgba(110,110,110,.4) -10px 10px 10px;
text-shadow:rgba(110,110,110,.7) -1px 2px 3px;
}
#ufo:hover
{
width:200px;
height:200px;
-webkit-transform:rotate(70deg);
}
#button
{
height:30px;
weight:100px;
-webkit-transform:rotate(350deg);
margin:auto;
background:-webkit-linear-gradient(top,red,yellow);
-webkit-border-radius:25px;
-webkit-box-shadow:rgba(110,110,110,.4) -10px 10px 10px;
}

Any doubt any query related to this comment bellow .

Introduction of JavaScript:

2013-01-18T03:13:00.003-08:00

Many people think java and JavaScript are little different .or the JavaScript is the subset of java. JavaScript is the very different from the java. The JavaScript is the world most misunderstood language. And at the same time you can say JavaScript is most popular computer language of the world. JavaScript is a object oriented language .Initially many thought and said about JavaScript it is not object oriented language it is object based language. JavaScript have objects and it does not have classes like java. JavaScript is more object oriented than java . In JavaScript Objects are more dynamic .Objects are instance of a class in java .Class have more property and behavior in Java .In JavaScript objects are Dynamic collection property. If we have two property of the same name the new property will replace the new name which is more dynamic .The JavaScript have Object literal which creates new objects. As I said before JavaScript is a object oriented language .We will see all the JavaScript object oriented property in future .At the same time JavaScript is a functional language . So we will discuss all about JavaScript here in the JavaCourseBloghttp://javacourseblog.blogspot.in/.

All Php Error Types

2012-12-16T00:44:00.000-08:00

Php error Types :
There are three main type of php errors .The Php error are listed below .

Notice
Warning
Fatal Error

Notice : This php error does't appear on the front end of the website . This appear only on the back end . And does not stop the php script from executing .

Warning : This Php error type is also same as the Notice , does not appear on the front end . This Type of Php error is only on back end . This normally appear when the include file not exist .

Fatal error : This php error type come in picture ,when the php script is wrong like some syntex error . This fatal error appear on the front end and stops the complete error from executing .

All php Error Types :

E_ERROR
E_WARNING
E_PARSE
E_NOTICE
E_CORE_ERROR
E_CORE_WARNING
E_COMPILE_ERROR
E_USER_ERROR
E_USER_WARNING
E_USER_NOTIC
E_STRICT
E_RECOVERABLE_ERROR
E_ALL

Connection between JDBC Driver And MySQL

2012-11-20T00:32:00.001-08:00

This article of java course is explaining the connection between JDBC driver and MySQL in java.

1. First step is downloading of Mysql JDBC driver

Download jdbc mysql driver by clicking here

2.Here is the code to connect JDBC to MySQL

   Class.forName("com.mysql.jdbc.Driver");

Connection connection = null;

  connection = DriverManager.getConnection(
          "jdbc:mysql://hostname:port/dbname","username", "password");

  connection.close();

3 . Lets see the example of connection between JDBC and MySQL

package com.javacourseblog.common;
 
import java.sql.DriverManager;
import java.sql.Connection;
import java.sql.SQLException;
 
public class JDBCchecking {
 
 public static void main(String[] argv) {
 
  System.out.println("::::::::::::::::: Connectining MySQL with JDBC :::::::::::::::::::::::::::");

 
  try {
 
   Class.forName("com.mysql.jdbc.Driver");
 
  } catch (ClassNotFoundException e) {
 
   System.out.println("Find out the MySQL JDBC Driver ..?????????????????????????");
   e.printStackTrace();
   return;
 
  }
 
  System.out.println("MySQL JDBC Driver Registered!");
  Connection connection = null;
 
  try {
   connection = DriverManager
     .getConnection("jdbc:mysql://localhost:3600/javacourseblog",
       "root", "password");
 
  } catch (SQLException e) {
   System.out.println("Your Connection is not working !!!!!!!!!!!!!!!!!!!!!!!!!");
   e.printStackTrace();
   return;
  }
 
  if (connection != null) {
   System.out.println("You have connected your JDBC to the MySQL . now you can work on your Database ");
  } else {
   System.out.println("Sorry Dear you could not make connection. Try again !!!!!!!");
  }
 }
}

4. Now its time to execute the program . .................

Imagine JDBCchecking.java is saved inside the folder c:\java folder, and the MySQL JDBC driver is also stored inside the c:\java ...............................................

C:\java>java -cp c:\java\mysql-connector-java-5.1.8-bin.jar;c:\java JDBCchecking
::::::::::::::::: Connectining MySQL with JDBC :::::::::::::::::::::::::::


MySQL JDBC Driver Registered!
You have connected your JDBC to the MySQL . now you can work on your Database

This is how we execute the java program of Connection between JDBC Driver And 
    MySQL

 
C:\java>

Well guys You are done with the connection of JDBC And MySQL

java swing introduction

2012-11-19T02:16:00.001-08:00

JFC and Swing

JFC is used for the Java Foundation Classes, which provides many features which helps in making graphical user interfaces (GUIs) and in making Java applications more graphically powerfull.

Swing Packages :

Swing API is one of the most powerful API of the java . The flexibility of the swing API make it very broad. The 18 public package forms swing API of the java .Sometimes its very tough to remember these all 18 public package .But as the name of the all packages are same with small difference so a small effort will help you to memorize these all 18 public package . So here is the list :

`javax.accessibility`	`javax.swing.plaf`	`javax.swing.text`
`javax.swing`	`javax.swing.plaf.basic`	`javax.swing.text.html`
`javax.swing.border`	`javax.swing.plaf.metal`	`javax.swing.text.html.parser`
`javax.swing.colorchooser`	`javax.swing.plaf.multi`	`javax.swing.text.rtf`
`javax.swing.event`	`javax.swing.plaf.synth`	`javax.swing.tree`
`javax.swing.filechooser`	`javax.swing.table`	`javax.swing.undo`

Luckily maximum java program uses only few subset of these packages .Maximum program use these two package

javax.swing
javax.swing.event (not necessary)