Putting it together – Yeoman, AngularJS, Bootstrap, Grunt, Jasmine, Karma

After going through Front-End JavaScript Framework course at Coursera.org, I decide to present something in our Lunch & Learn next week. In order to re-enforce my knowledge, I’ve built two small proof of concept web applications using technologies listed above – AngularJS application using task runners. With Yeoman, I was able to build/deploy really quickly without thinking too much about the dependencies.

Front end technology has been evolved so much and it is a mind boggling to select which JavaScript framework I want to use for my web application. Even keeping it up is very challenge. Of course, there is good old Java template engine (JSP), but it is not the technology that you’d create a Sing Page Application with.

Here is the presentation done by Prezi and two projects in the Github (PoC2, PoC3). PoC3 README.md contains step by step guidance along with the source code. I am planning to enhance these projects into Cloud base applications such as IoT management dashboard in the near future.

 

 

Advertisements

AngularJS from Code School

Experience

I wanted to have a quick understanding about the AngularJS. I tried to watch some of Videos from egghead.io, but it is difficult to start something with a limited availability (let’s say 1-1.5 hour weekday and 4-10 hours in weekends). So I have been putting AngularJS off on my To-do list for a while and I came across the AngularJS from the Code School sponsored by Google. I thought this was a good opportunity to jump in and learn AngularJS. Normally free course from the Code School is very simple and short, but this course covers all important concept about the AngularJS.

I started to take the first lesson from Monday and spend 1-2 hours/day until Thursday and finally completed on Sunday afternoon. Along the video, I had to make notes for a lab. Hands-on lab was pretty good and it reinforced the learning the concept. I can now explore more about the AngularJS and try to have a pet project to keep that knowledge alive.

I highly recommend this free tutorial if you want to grab an idea about the AngularJS in a short period of time.

My Notes

Directive

  • Directive is a marker on HTML tag that tells Angular to run or reference some Javascript code.
<body ng-controller="StoreController">
function StoreController(){}

Controllers

  • Controllers are where we define our app’s behavior by defining functions and values.
  • Controller must be capital.
  • ng-controller directive with Controller name and keyword “as” and name a variable.
  • Scope of the controller is only inside if DOM element.
  • ng-show directive can use as a conditional based on the value. Ng-show default is false if
  • ng-hide directive can be used.
  • It seems nested div with tags are not working.
  • ng-repeat directive used to iterate array

Filters

  • Formatting with filters {{ data | filter:options}}
  • Date : {{‘1388123412323′ | date:’MM/dd/yyy @ h:mma’}}
  • Upppercase & lowercase
  • limitTo. Character display limit or loop item #
  • orderBy : with – decending. Without – ascending order.
  • <img src= …> tag tries to load the image before angular tag tries to do something.
  • Use <img ng-src directive. <img ng-src=”{{product.images[0]}}” />

Tabs

  • ng-click=”tab = 1″
  • Like {{tab}} expression, expression define a 2 way Data Binding. This means Expressions are re-evaluated when a property changes.
  • ng-init allows to evaluate an expression in the current scope.
  • ng-class directive takes the active tab and assign appropriate css class.
  • ng-class=”{ active:tab ===1}” => active is name of the class to set, tab===1 expression to evaluate if true, set class to “active”, otherwise nothing.
  • Use Panel Controller to consolidate the logic and move things out of html
  • ng-controller=”PanelController as panel”
  • ng-init=”tab = 1″ replaced inside of js. This.tab = 1;

Form

  • ng-submit allows us to call a function when the form is submitted.

Validation

  • Turn off default html validation – “novalidate” in the form.
  • Mark the form element with “required”.
  • {{reviewForm.$valid}} – form name and reference to $ built in element.
  • Preventing the submit – only submit if reviewForm.$valid is true.
  • Source before typing email
<input name="author"… class="ng-pristine ng-invalid">
Source after typing, with invalid email
<input name="author"… class="ng-dirty ng-invalid">
Source after typing, with valid email
<input name="author"… class="ng-dirty ng-valid">

.ng-invalid.ng-dirty{
border-color : #FA787E;
}

.ng-valid.ng-dirty{
border-color : #78FA89;
}
  • Angular validates email, url, number, specify min, max.

Custom directives

  • ng-include => specify name of the file to include. Name of the file with single quote because it is meant to be a variable name. Interesting thing is that it load the html file and once loaded with javascript, it fetches ng-included file as an Ajax request.
  • Custom directive will do the same thing with some additional code. Why write a Directive instead?
  • Directive allows you to write HTML that expresses the behavior of your application. Basically, directive embedded in the HTML can tell much of the story what it is trying to do.
  • Template-expanding Directives are the simplest:
  • Define a custom tag or attribute that is expanded or replaced.
  • Can include Controller logic if needed.
  • Directives can also be used for :
  • ○ Expressing complex UI
  • ○ Calling events and registering event handlers
  • ○ Reusing common components
  • To make a custom directive, need to define it inside of app.js
app.directive('productTitle', function(){
return{
//Configuration object defining how your directive will work
restrict: 'E', // type of directive E for Element use 'A' for Attriibute
templateUrl: 'product-title.html' // Url of a template
};
});
  • Dash in HTML translates to camelCase in JS <product-title> to ‘productTitle’
  • Custom directive can have other directive inside. <product-description ng-show=”tab.isSet(1)”></product-description>
  • Attribute vs. Element Directives : Attribute being embedded in html tag and element being independent tag.
  • ○ Don’t use self-closing tag for custom tags
  • ○ Use Element Directives for UI widgets
  • ○ Attributes Directive for mixin behaviors like a tooltip
  • Directives allow you to write better HTML. Allow readers to understand the behavior and intent from just HTML. Likely using custom directives to write expressive HTML.
  • Element example

• Controller directive

app.directive('productGallery',function(){
return{
restrict: 'E',
templateUrl: 'product-gallery.html',
controller: function(){
this.current = 0;
this.setCurrent = function(imageNumber){
this.current = imageNumber || 0;
};
},
controllerAs: 'gallery'
};
});

Module

  • Group directive or other types of javascript functions into a new module.
  • New module can be referenced in a parent module, new module js file needs to be referenced in html.

Services

  • Angular provides various services; $http, $log, $filter
  • $http({method: ‘GET’, url: ‘/proudcts.json’});
  • $http.get(‘/products.json’, {apiKey: ‘myApiKey’});
  • Dependency Injection – service name in array, service name as an argument. Ultimately services are injected in the controller.
app.controller('SomeController', ['$http', function($http){
var store = this;
store.products = [];
$http.get('/products.json').success(function(data){
store.products = data;
});
}]);
  • More than 1 service example
app.controller('SomeController', ['$http', '$log', function($http, $log){

}]);
  • Besides get(), post(), put(), delete()
$http.post('/path/to/resource.json', {param: 'value' });
$http.delete('/path/to/resource.json');
  • Other HTTP method using config
$http({method: 'OPTIONS', url: '/path/to/resource.json'});
$http({method: 'PATCH', url: '/path/to/resource.json'});
$http({method: 'TRACE', url: '/path/to/resource.json'});

 

Building RESTful WebService/Client using WildFly 8.0.0 Final, RESTEasy, and Maven Deployment

WildFly 8.0.0 Final was released recently. For a new project, I had to convert a legacy WebService into RESTful WebService using RESTEasy on JBoss Application Server. Not only converting RPC style JAX-WS WebService (Axis2-1.3), but I have to convert Ant base build/deployment process to Maven. My experience around RESTful WebService was around Jersey and Maven experience was limited before this project. As for my first step, I built a small prototype using WildFly + RESTEasy + Maven combination based on JEE7. There are several tutorials & resources that I could find in the internet, but it was difficult find a complete example. JBoss RESTEasy API and Java EE 7 tutorial have good reference and sample codes. However, I had difficult time finding the best practice based on my requirement. Most of the internet resources are either out of date or too simple for what I need to achieve. Also, most of examples are contained within the Eclipse environment, so considering deployment on a remote server was additional challenge . Eventually, I put things together and share my experience. 

Requirement

  • JDK 1.7 u51
  • Eclipse Keploer
  • WildFly 8.0.0 Final
  • Maven 3.1.1
  • RESTEasy 3.0.6 – comes with WildFly.

Objective

  1. Create a RESTful WebService using RESTEasy deploy to WildFly using Maven.
  2. Prototype should have a WebService and client.
  3. Build a web page that can be exposed by calling a WebService client.
  4. Retrieve a list of object by passing a list of String as a parameter.
  5. Application uses a single properties file fed from pom file based on environment profile. Assuming DEV/TEST/PROD environments are running on WildFly 8.0.0.
  6. Prototype will be deployed to WildFly standalone server. For this reason, portability wasn’t considered in this prototype.

pom.xml

  • WildFly plugin added
  • Two profiles are created ‘development’ and ‘prod’ to simulate different environment.
  • ${project.version} is a maven project property
  • ${maven.build.timestamp} is a special variable in maven
  • Most of JBoss specific jars are defined as ‘provided’ scope.

application.properties

environment=${env}
build_version=${build_version}
build_date=${timestamp}
build_number=${build_number}
student.restws.url=${student.restws.url}

After “mvn package -P development” command application.properties are populated as below.

environment=development
build_version=0.0.1-SNAPSHOT
build_date=2014-03-30 19:29:52
build_number=00001
student.restws.url=http://localhost:8080/RestWebServiceTest/rs/json

 web.xml

  • I wanted to prefix the RESTful WebService URL with ‘rs’, so I can differentiate normal Web Application from the WebService.

WebService Challenges

I need to retrieve a list of object based on user selected strings from list box. This list box has about 100 of items and there is a possibility that user can select “All” from the list box. There seem to be two ways of doing this : Convert string collection to JSON or comma delimited single string, use @PUT instead of @GET if string collection is too long. @PUT is for update, but I can safely pass the parameter in the body rather than URL as a @QueryParam. Also, I came across another way of doing this by passing long string parameter in the Header, but I couldn’t find an example code to follow. Especially, building WebService client passing long string to Header.

 

WebService Client

JAX-RS 2.0 defines client API, which makes it much easier to develop client side. I always felt developing RESTful WebService Client side is difficult because of different implementations use different classes/methods although underneath principle is the same.

Deployment

mvn clean compile package -P development wildfly:deploy-only

Source Code

https://github.com/mjtoolbox/RestWebServiceTest

Conclusion

I felt importance of RESTful WebService becomes bigger and bigger. It is due to modern Web Application development is moving away from server side generated front end pages. For this reason, I feel I need to improve hands on experience and understand the details. Some of learning points from this experience.

  • New JAX-RS 2.0 spec in JEE 7 made client side development easier. At least defines a standard way of implementation.
  • Working on the latest technology requires time and patient : much of the configuration resources are based on the old version.
  • Haven’t handled the security. Need to expand that later post.

 

 

 

 

 

Creative, Serious and Playful Science of Android Apps – Coursera course experience

When I was waiting for an Android Course in November, a friend of mine told me about this playful Android course. I always wanted to put my hands on Android development but higher priority work always take precedence because no Android project at work.

Experience

The course focused on the beginners in first half and second half was little bit advanced topics. The videos are fun to watch, especially, a professor with a British accent was very animated. Especially last video, he posted geeky music video made by him!

There are few points I’d like to remember from this course.

  • Finding my phone driver wasn’t fun in the beginning. I don’t know why it is so hard to find Galaxy S2 phone driver.
  • Better emulator. I remember I had first emulator installed few years ago on my old work laptop. It was so slow at that time. It is not lightening speed, but much better than before and workable.
  • One thing I’ve noticed, actual phone works much better. Of course, a phone has its own CPU and no need to depend on laptop’s CPU.
  • Stop Eclipse, kill adb.exe and restart Eclipse if Emulator or my phone do not work.
  • No luck running xxhdpi base emulator.
  • In general, Activity, Intent, Fragment are straight forward. However, playing around the layout is very tedious and time consuming work. It will take lots of time to make things look right.
  • This course focused on hands-on work rather than spending time on theory, so it was fun to work on various assignments. However, there is no extension of assignment and mid-January to early February was particularly hard because of the other Android course overlapped with this course.

Summary

It was a great course! I got to play with music and pictures on the Android App. Most importantly, I had so much fun with this course! I am also taking Programming Mobile Applications for Android Handheld Systems now (started in January). The Playful Android course helped me a lot as I am working through Labs in this course. My goal is building an application that can be shared and used by close friends and family.

MongoDB for Node.js developers – Course Experience

10Gen – MongoDB company offers free courses. In March 2013, I downloaded and configured MongoDB on my machine.  At that time, I knew 10Gen offers free courses of their product, but didn’t have a chance to get onto it. In August, I started MongoDB for Node.js developer course. The course was 7 weeks duration with estimated 5 hours per week commitment. This week was Final Exam week and I just completed my final exam. I have my own best practices and some regrets that I’d like to share.  For anybody who wants to understand the NoSQL and how it is different from traditional RDBMS, I highly recommend this course. Only thing is that you will need to know basics of Node.js. At least Javascript. There is a MongoDB for Java developer couse, but weekly commitment is double the Node.js course (10 hours per week).

Course

Course material covers the main concept of MongoDB using Node.js driver and Mongo Shell. Someone without Node.js experience will likely having a hard time doing a homework, but most of home works are generally not too difficult to complete. Forum is pretty well maintained and staffs are pretty good at responding. Week 5, 6 focused on aggregation and shard, so not so much Node.js was discussed. I found the week 2 was the most difficult week. Not only so much knowledge, but also length of videos. Somebody in the forum wrote that he spent 15 hours to do the homework. I spent about 10 hours of watching videos and completed the homework. Sometimes, instructor explained the concept and ran his own Mongo shell really fast, so I had to rewind the video several times to understand the concept and do my own Mongo shell run side by side. Even though some homeworks uses Node.js and need to run code in Node.js, I felt more comfortable doing the same thing in the Mongo shell. Maybe because it gives me a result right away without starting Node.js. Also, lecture always uses Mongo shell to explain the concept.

Best Practice & Regrets

One thing I did well was taking a note from the video lecture and run my own command right after the concept is introduced. By doing this way, it took twice longer than just watching video lecture, but it paid back later during the final exam week. I just simply reviewed my notes and sample code from the note instead of searching for MongoDB manual.  I started to take a note from week 4. I didn’t think about this practice because of very well documented MongoDB manual. During the final exam, I felt I really need to refresh my memory in a short period of time and wish I had a note from earlier weeks.

Looking ahead

So now what? Course is over and I know how to use MongoDB including configuring replication environment. This opens up a perfect opportunity for me to experiment MongoDB with Hadoop. Next week or so, I will solidify my understanding of MongoDB and start to explore more options how Enterprise programming uses MongoDB in the real world. I will analyze real world situation when to use MongoDB and focus on why MongoDB is better in that situation.

Summary

NoSQL is a buzz word in a modern web development. MongoDB is one of the well known NoSQL DB and I believe it has its own place in the application development. With many years of RDBMS experience, using MongoDB requires a paradigm shift. No table relationship, no join. Just document itself represents the state of data. The syntax didn’t bother me so much because of JSON experience (I read an article complaining about MongoDB ruining JSON structure), but there are several things that requires strong mental notes :  Schema design, index strategy, and choosing a shard key in replication environment.

It was interesting 7 weeks with MongoDB and hope to identify my own unique usage of MongoDB in the real world project.

Standford Startup Engineering online course – week1, 2 summary & experience

Standford Starup Engineering

Strategy

A long waiting is over. I am more determined to complete this course with following reasons : Potential, Interesting, and Collaborative Learning.  As course title suggested, at the end of course, I need to come up with a HTML 5 enabled mobile application that can bring a potential crowd sourcing.

Technologies in the course are relevant to my current work. Even though applications that I am dealing with are not public facing, certain technologies are relevant and very interesting : AWS, Cloud, Heroku, Node.js, Unix CLI, Git, GitHub, emacs, Bootstrap, Backbone.js, Coffeescript, REST, JSON, NoSQL, BitCoin, Social and payment integration. So many topics that I wanted to master/learn, but hard to get to because of time constraint and lack of systematical approach. For this reason, I thought about collaborative learning. Learn and discuss in a group and maximizing a benefit of peer pressure to keep everyone on the topics and achieve the learning objectives in the end. I have motivated and talented 8 co-workers, who are taking this course together, so it will be perfect time for me to experiment collaborative learning.

Week 1, 2 Experience

Each week’s objectives are clearly defined and lecture slides are very well prepared. Of course, the professor is an entrepreneur himself and very technical. First two weeks topics are sticking to AWS, Cloud, Heroku, Node.js, Git, and Unix commands. Without having in-depth knowledge about Unix command, I don’t have a problem to complete the homeworks. I think having more than 115,000 students from all over the world, professors are having a great challenge. Probably, it can be a learning experience for them by dealing with so many students (big data) and analyze the data in useful ways.

Summary – my notes

FileSystem Basics

  • pwd #Print working directory
  • touch myfile # Create a blank file called myfile
  • ls myfile
  • ls -alrth myfiel # list metadata on myfile
    • -a show you all files, even hidden
    • -l show you hugh amounts of information
    • -r reverse the order of how the files are displayed
    • -t show you the files in the modification time
    • -h ?
  • alias ll=’ls -alrth’ # set up an alias to save typing
  • echo “line1” >> myfile # append via ‘>>’ to a file

There are two ways of see the current value of PATH :

  • env | grep “^PATH”
  • echo $PATH

Read one or more files and print them to standard output

  • cat [options] [files]

Retrieve from remote location

  • wget [url]

Change permission of a file. Total number can be presented as a parameter to allow certain user group with privilege.

  • chmod
    • 400 read by owner
    • 040 read by group
    • 004 read by anybody (other)
    • 200 write by owner
    • 020 write by group
    • 002 write by anybody
    • 100 execute by owner
    • 010 execute by group
    • 001 execute by anybody

Connect to remote machines

  • ssh -i [private key]

Create a single or multiple directories. With -p, create parents if doesn’t exit.

  • mkdir -p [directories]

Remove all

  • rm -rf :
  • rmdir [directory]

Create alias – create a file and add below information.

  • Host awshost1
  • HostName ec2-34-228-105-7.us-west-2.compute.amazonaws.com
  • User ubuntu
  • IdentityFile “~/.ssh/xxkey.pem”

Copy hello.txt from local to remote home

  • scp hello.txt awshost1:~/

Copy ~/foo.txt from remote to local

  • scp awshost1:~/foo.txt .

sudo : Perform following command with super-user (root) capabilities.

sudo apt-get update : download the package lists from the repositories and updates them to get info on the newest versions of packages and dependencies.

Linux has two major ways to install software : Binary packages, Source.

  • Install a Binary package :
  • sudo apt-get install

Binary Package Disadvantages

  • Not able to customize binaries
  • Only old versions are available in binary format

sudo apt-get upgrade : fetch new version of packages existing on the machine if APT knows about these new versions by way of apt-get update.

sudo apt-get dist-upgrade: same as apt-get upgrade, plus it will handle dependencies.

sudo add-apt-repository ppa:chris-lea/node.js : a command which allows us to add a new repository link to the apt sources (/etc/apt/sources.list). Handy to add PPA archives. ppa:<repository-name>

*PPA (Personal Package Archive) : a special software repository for uploading source packages to be built and published as an A|PT repository by Launchpad or similar application – exclusive to Ubuntu.
*APT (Advanced Packaging Tool) : a free user interface that works with core libraries to handle the installation and removal of software on the GNU/Linux distribution. APT simplifies the software on Unix-like system by automating retrieval, configuration and installation of software packages.
* https://help.ubuntu.com/community/Repositories/CommandLine

#!/usr/bin/env node : Writting an executable scirpt with Node beginss with shebang : #!, followed by the path to a Node executable.

WebSocket Chat application using JEE 7 with Glassfish 4.0

I was interested in WebSocket technology since last year. I have a posting related to WebSocket using Grizzly implementation. Since then, WebSocket becomes a part of JEE 7 release and Glassfish 4.0 with JEE 7 has been released. There are tons of articles that explains what’s changed in JEE 7 and how to start using JEE 7.

Experience

In this posting, I’d like to briefly discuss my experience with WebSocket implementation in JEE 7.

  • Very simple : using @ annotation, I can declare POJO into WebSocket Server/Client Endpoint really easiy.
  • There is a way of creating a WebSocket Server Endpoint without using @ annotation.
  • It seems I can not use both in one project. Programmatic WebSocket implementation overwrites the annotation implementation.
  • WebSocket URI gave me a hard time. After I figure it out, it is obvious. However, when I was in it, I really didn’t see. It took me a while to realize those WebSocket sample codes does not specify the webcontext name. This is critical piece. I was struggled with “undefine” error.
  • ws://domain:port#/webcontext(project name)/serverendpoint

Even though my WebSocket chat application is very simple application, I found it much easier to implement – compare with Grizzly implementation.

Idea

Web is evolving so fast and new ideas are keep pouring out. I think WebSocket will be very useful technology in terms of replacing point to point messaging. Especially, the connection has to be maintained constantly. One application that I used to maintain uses applet to satisfy this requirement. I think replacing an applet with WebSocket will be beneficial.

Resources

I presented this topic to my colleagues in the company Lunch & Learn session. Here is my presentation using Prezi.

Original Prezi Link HERE.

Source Code at GitHub is HERE.

Adding a project to GitHub – things to watch out

Not having much experience with Git, I made a watch out list, so I can refer back later without making a same mistake.

1. Do not add README.md when I create a new repository in GitHub. By adding README.md seems giving me a trouble later on.
2. Know the difference between git add -A vs. git add . (dot) vs. git add -u. Here is the difference.

  • git add -A stages All
  • git add . stages new and modified, without deleted
  • git add -u stages modified and deleted, without new

Below is the Git commands for my reference in the future.

msjo@MSJO-PC ~
$ cd gitrepo

msjo@MSJO-PC ~/gitrepo
$ ls
WebSocketJEE7Demo  WebsocketDemo

msjo@MSJO-PC ~/gitrepo
$ cd websocketjee7demo

msjo@MSJO-PC ~/gitrepo/websocketjee7demo
$ ls
WebSocketJEE7Demo

msjo@MSJO-PC ~/gitrepo/websocketjee7demo
$ touch README.md

msjo@MSJO-PC ~/gitrepo/websocketjee7demo
$ git init
Initialized empty Git repository in c:/Users/msjo/gitrepo/websocketjee7demo/.git
/

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ touch README.md

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git add README.md

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git commit -m "first commit"
[master (root-commit) 4e202d8] first commit
 0 files changed
 create mode 100644 README.md

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git add websocketjee7demo

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git status
# On branch master
# Untracked files:
#   (use "git add ..." to include in what will be committed)
#
#       WebSocketJEE7Demo/
nothing added to commit but untracked files present (use "git add" to track)

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git add -A
warning: LF will be replaced by CRLF in WebSocketJEE7Demo/WebContent/WEB-INF/fac
es-config.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in WebSocketJEE7Demo/WebContent/WEB-INF/gla
ssfish-web.xml.
The file will have its original line endings in your working directory.

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#       new file:   WebSocketJEE7Demo/.classpath
#       new file:   WebSocketJEE7Demo/.project
#       new file:   WebSocketJEE7Demo/.settings/.jsdtscope
#       new file:   WebSocketJEE7Demo/.settings/org.eclipse.jdt.core.prefs
#       new file:   WebSocketJEE7Demo/.settings/org.eclipse.wst.common.component

#       new file:   WebSocketJEE7Demo/.settings/org.eclipse.wst.common.project.f
acet.core.prefs.xml
#       new file:   WebSocketJEE7Demo/.settings/org.eclipse.wst.common.project.f
acet.core.xml
#       new file:   WebSocketJEE7Demo/.settings/org.eclipse.wst.jsdt.ui.superTyp
e.container
#       new file:   WebSocketJEE7Demo/.settings/org.eclipse.wst.jsdt.ui.superTyp
e.name
#       new file:   WebSocketJEE7Demo/WebContent/META-INF/MANIFEST.MF
#       new file:   WebSocketJEE7Demo/WebContent/WEB-INF/faces-config.xml
#       new file:   WebSocketJEE7Demo/WebContent/WEB-INF/glassfish-web.xml
#       new file:   WebSocketJEE7Demo/WebContent/WEB-INF/web.xml
#       new file:   WebSocketJEE7Demo/WebContent/chatWindow.xhtml
#       new file:   WebSocketJEE7Demo/WebContent/js/jquery-2.0.2.min.js
#       new file:   WebSocketJEE7Demo/build/classes/endpoint/MyServerEndpoint.cl
ass
#       new file:   WebSocketJEE7Demo/src/endpoint/MyServerEndpoint.java
#

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git commit -m 'another commit'
[master 385faa3] another commit
warning: LF will be replaced by CRLF in WebSocketJEE7Demo/WebContent/WEB-INF/fac
es-config.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in WebSocketJEE7Demo/WebContent/WEB-INF/gla
ssfish-web.xml.
The file will have its original line endings in your working directory.
 17 files changed, 320 insertions(+)
 create mode 100644 WebSocketJEE7Demo/.classpath
 create mode 100644 WebSocketJEE7Demo/.project
 create mode 100644 WebSocketJEE7Demo/.settings/.jsdtscope
 create mode 100644 WebSocketJEE7Demo/.settings/org.eclipse.jdt.core.prefs
 create mode 100644 WebSocketJEE7Demo/.settings/org.eclipse.wst.common.component

 create mode 100644 WebSocketJEE7Demo/.settings/org.eclipse.wst.common.project.f
acet.core.prefs.xml
 create mode 100644 WebSocketJEE7Demo/.settings/org.eclipse.wst.common.project.f
acet.core.xml
 create mode 100644 WebSocketJEE7Demo/.settings/org.eclipse.wst.jsdt.ui.superTyp
e.container
 create mode 100644 WebSocketJEE7Demo/.settings/org.eclipse.wst.jsdt.ui.superTyp
e.name
 create mode 100644 WebSocketJEE7Demo/WebContent/META-INF/MANIFEST.MF
 create mode 100644 WebSocketJEE7Demo/WebContent/WEB-INF/faces-config.xml
 create mode 100644 WebSocketJEE7Demo/WebContent/WEB-INF/glassfish-web.xml
 create mode 100644 WebSocketJEE7Demo/WebContent/WEB-INF/web.xml
 create mode 100644 WebSocketJEE7Demo/WebContent/chatWindow.xhtml
 create mode 100644 WebSocketJEE7Demo/WebContent/js/jquery-2.0.2.min.js
 create mode 100644 WebSocketJEE7Demo/build/classes/endpoint/MyServerEndpoint.cl
ass
 create mode 100644 WebSocketJEE7Demo/src/endpoint/MyServerEndpoint.java

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git remote add origin https://github.com/mjtoolbox/WebSocketJEE7.git

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$ git push origin master
usage: git credential-cache [options]

    --exit                tell a running daemon to exit
    --reject              reject a cached credential
    --timeout          number of seconds to cache credentials
    --socket        path of cache-daemon socket
    --chain       use  to get non-cached credentials
    --username      an existing username
    --description   human-readable description of the credential
    --unique       a unique context for the credential

Username for 'https://github.com':
Password for 'https://mjtoolbox@github.com':
usage: git credential-cache [options]

    --exit                tell a running daemon to exit
    --reject              reject a cached credential
    --timeout          number of seconds to cache credentials
    --socket        path of cache-daemon socket
    --chain       use  to get non-cached credentials
    --username      an existing username
    --description   human-readable description of the credential
    --unique       a unique context for the credential

To https://github.com/mjtoolbox/WebSocketJEE7.git
 * [new branch]      master -> master

msjo@MSJO-PC ~/gitrepo/websocketjee7demo (master)
$

Conclusion

I can try to use UI tool to make it easier, but I feel that using Git command will enhance my experience in a long run.

Git tutorial from Code School

Code School offers free Git tutorial – 15 minutes. Tutorial covers adding source code to the repository and push the master to origin (remote). Also, it covers how to create a branch and merge back to the trunk. In a short time, learned important commands. Very useful!

Here are commands that I learned from this tutorial.

Summary

Several important concepts.

  • master :   local repository
  • origin : remote repository
  • push -u origin master : push master code to origin and -u remember origin and master, so later I can skip origin master. Just push
  • checkout — file_name : Revert back the source code to when file_name file was committed.
  • branch branch_name : Create a branch with branch_name
  • checkout branch_name : Check out branch_name branch
  • branch -d branch_name : Delete a branch branch_name

 

Configuring JEE7 with GlassFish (4.0-b87) on Eclipse

JEE7 release is just around the corner. Due to JRE security reason, my understanding is the release was postponed until next year. Short summary about Java EE 7 (JSR-342) can be found here and overview can be found here with very cool slide. My interest in WebSocket technology was high since last year. I’ve struggled to create my first WebSocket demo last year – there were many earlier implementation postings, but I had hard time finding newer GlassFish implementation. I learned that WebSocket 1.0 as a part of JEE7 supports method annotations around WebSocket lifecycle methods along with straight method implementations. If you want to know the detail, check this out.

In this posting, I’d like to explain how to set up GlassFish (latest build 4.0-b87) within Eclipse and explain some of troubles that I had. I didn’t want to install OEPE bundle. OEPE gives the whole package and makes it easier to configure, but I had some frustrating experience previously and decide not to go with OEPE.

Pre-Condition

First of all, I had to get rid of previously install GlassFish Plug in and GlassFish Tool in the Eclipse Juno. Click Help > About Eclipse > Install Details and remove any GlassFish related installation. I skipped this step and couldn’t deploy web application from the Eclipse. Symptom was the deployment hangs at 69% and no response from the server in Eclipse. There is a blog about how to clear old version of GlassFish tools in the Eclipse. For details, look at this blog.

Installation & Configuration

Once you are done,

  1. Time to download and install GlassFish 4.0.  Scroll to the bottom and download the latest GlassFish.
  2. Install GlassFish.
  3. Start up Eclipse and make sure you have the latest JDK. At least 7.
  4. Now, it is time to install GlassFish Tool. It seems there are two ways of doing it. In my case, first approach (Preeference > Install/Update > Add Available Software Site) didn’t work well. Site URL is  http://download.java.net/glassfish/eclipse/juno.
  5. Second approach is Help > New Software Install > past above URL.
  6. As soon as you do that, GlassFish Tool and Document will show up and you can install those in the Eclipse.

Coding & Testing

Now, time to code and test. I captured the code from Markus Eisele’s blog. The servlet is demonstrating by print out JSON object from JsonObjectBuilder.

Testing is simple, just start the GlassFish 4.0 and test localhost:8080/JEE7Test/JsonTester

Conclusion

Since I configured GlassFish 4.0 with JEE7, I’d like to modify my WebSocket chat demo using annotations and deploy to GlassFish 4.0. This will be a fun exercise and I will have a chance to read more JEE7 API documents.