Tuesday, 19 June 2018

ToDo Sample Application Using AngularJS


ToDo Application Using AngularJS :

Building a sample ToDo application with option to add/delete and mark it as completed using following below technologies

 Angular 1.5.8, 
 HTML5,
 JavaScript,
 bootstrap 3.3.6,
 JAX-RS 2.0,
 EJB 3.2,Hibernate
 Mysql 8.0,
 Maven 3.0.3,
 Payara,
 Micro payara

For source code, download it from below github link
https://github.com/sameencse/TodoApp

Payara domain configuration:
===================
Add the below configuration

 <jdbc-connection-pool driver-classname="com.mysql.cj.jdbc.Driver" datasource-classname="com.mysql.jdbc.Driver" name="MysqlPool" res-type="java.sql.Driver">
      <property name="password" value="root"></property>
      <property name="databaseName" value="ngp"></property>
      <property name="serverName" value="127.0.0.1"></property>
      <property name="user" value="root"></property>
      <property name="portNumber" value="3306"></property>
      <property name="url" value="jdbc:mysql://localhost:3306/ngp?useSSL=false"></property>
    </jdbc-connection-pool>
 <jdbc-resource pool-name="MysqlPool" jndi-name="jdbc/todo"></jdbc-resource>
 
 <resource-ref ref="jdbc/todo"></resource-ref>
 
 Download payara micro:
 Command to Deploy on payara micro
 
 D:\server> java -cp "C:\Tools\MySQL\mysql-connector-java-8.0.11.jar;D:\server\payara-micro-4.1.2.174.jar" fish.payara.micro.PayaraMicro --deploy "C:\To
ols\project\todo-apps-ui\target\todo-apps-ui-1.0-SNAPSHOT.war" --domainConfig D:\server\domain.xml
 
 
Note: download  both the mysql-connector-java-8.0.11.jar & payara-micro-4.1.2.174.jar and modify the domain.xml file to add the JDBC connection pool


Mysql Database Setup:
===================

create database ngp;
use database ngp;

create table todo_items 
( id int PRIMARY KEY AUTO_INCREMENT,
name varchar(50) not null,
description varchar(200),
todo_date date, 
status varchar(20) not null);



DB Connection Details:
=======================
URL: jdbc:mysql://localhost:3306/ngp
Username: root
Password: root
port :3306



Sunday, 8 April 2018

Arrays in Javascript


Arrays are used to store multiple values in a single variable.

Example :

var list=["apple","banana","grapes"];

As you can see the above example, values are placed inside the brackets and separated by comma(,)

even you can initialize the empty values

var list=[];

Accessing the items in Array :

       index       values
          0            apple
          1            banana
          2            grapes


 Let say , user want to access the banana item in an array then all i need to do is pass in the index value of the item I am interest in:

var selectedItem=list[1];




Adding Item to an array:


  • push
  • unshift


The push method is called directly on your array and pass the data you want to add it.
The above item will get added to your end of the arrays.

list.push("mango");

result: 

       index       values
          0            apple
          1            banana
          2            grapes
          3            mango


If you want to add the items at the beginning of the list then use the below method
list.unshift("watermelon");

result :
     index          values
          0          watermelon
          1            apple
          2            banana
          3            grapes
          4            mango

Removing items from an array:

to remove the items from an array use pop or shift method,its just the reverse of push or unshift.


var remItem=list.pop();

or 

var remFirstItem=list.unshift();


The pop method will the last item from an array and unshift method is used to remove the first item of an array.

Both the method will remove the item from an array and it will return the values of an array.




Thursday, 12 October 2017

How to retrieve Client's Timezone in GWT

  • Let say Application is hosted at one place whose time zone is 'A'
  • User can login any where from the world whose time zone is 'B'
  • So the server where the application is hosted should know the time zone of the user access
To retrieve the client browser time zone ,use GWT DateTimeFormat

 DateTimeFormat.getFormat("ZZZZ").format(new Date())

The above method will give the browser time zone.

There is one more way to retrieve the time zone is to use JSNI

private native int getClientOffsetTimeZone() /*-{
    return new Date().getTimezoneOffset();
}-*/;

Note that the getTimezoneOffset() method returns the time difference between UTC time and local time in minutes,
For example,
 If your time zone is GMT+2, -120 will be returned
 If your time zone is GMT-2, +120 will be returned

Monday, 22 February 2016

Coder Vs Programmer

Coder:


Coder is some one who does a routine job and works very hard. Even works as per the client requirements and meets the deadline.Coder will follow the instruction and guidelines blindly.
Will use lot of If else statement Without using any design patterns .


Programmer:


Programmer is the one who works very smart. Programmer works in a best possible way to deliver the client requirement. Programmer will not work blindly. Will use Design patterns and principles with new innovative thoughts.Be a programmer not a coder.

This is sample Video which explains about the difference between Coder Vs Programmer (which is taken from youtube).




Tuesday, 9 February 2016

GWT Tutorial:: FAQ on Module Descriptor

GWT Module Descriptor:

GWT Module is a configuration file which is used to configure the GWT application.
It contain with the file extension *.gwt.xml.
* is the name of the application and this file should be reside inside the project's root.
For Example If the project name is MyApp then the Module name will be MyApp.gwt.xml.

Below is the sample example which will explain about the Module Descriptor,

<?xml version="1.0" encoding="utf-8"?>
<module rename-to='MyApp'>
   <!-- inherit the core web toolkit stuff.  -->
   <inherits name='com.google.gwt.user.user'/>

   <!-- inherit the default gwt style sheet. -->
   <inherits name='com.google.gwt.user.theme.clean.Clean'/>

   <!-- specify the app entry point class. -->
   <entry-point class='com.example.client.MyApp'/>

   <!-- specify the paths for translatable code (the below folders get complied to JS)  -->
   <source path='client'/>
   <source path='shared'/>

   <!-- specify the paths for static files like html, css etc. -->
   <public path='...'/>
   <public path='...'/>

   <!-- specify the paths for external javascript files -->
   <script src="js-url" />
   <script src="js-url" />

   <!-- specify the paths for external style sheet files  -->
   <stylesheet  src="css-url" />
   <stylesheet  src="css-url" />

</module>


Even More then one entry point class can be defined in Module Descriptor which will be executed one by one.
GWT provides this default themes
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<inherits name="com.google.gwt.user.theme.chrome.Chrome"/> 
<inherits name="com.google.gwt.user.theme.dark.Dark"/>

Thursday, 27 August 2015

Reduce Compilation time for GWT 2.5

A ‘normal’ build is one where you get 6 basic permutations, one for each category of browser. These have been selected by the GWT team as related enough to always treat as the same.
These browsers are:

·         Firefox, all versions
·         All Webkit browsers (Safari, Chrome, Android Browser, etc)
·         IE6 and IE7
·         IE8
·         IE9 (and IE10)
·         Opera9

It is possible to collapse all properties to decrease the amount of time spend compiling a module for testing/development purposes by adding the following:

<collapse-all-properties />

Which result in taking less time for compilation , no matter how many permutations you had configured before this line, only one file will be created. This is especially handy for very fast builds or cases where you want to keep the build size small but still it will works for all the browser which we have configured.


Monday, 20 April 2015

Classic Dev Mode(GWT) Will not support in Latest Chrome Browser

As per the GWT Announcements (Release note 2.6),
  •  GWT Development Mode will no longer be available for Chrome sometime in 2014, so we improved alternate ways of debugging. There are improvements to Super Dev Mode, asserts, console logging, and error messages.
  • So Lunching the Application in Chrome Newer Version with Classic Dev Mode is Disabled, because they have disabled NPAPI Plug-in in Chrome Newer Version. Now it’s time to use Super Dev Mode.
SuperDev mode as default in GWT 2.7:

The Main feature in GWT 2.7 is SuperDev mode(SDM), with Dev mode now deprecated. You use the browser’s built in debugger and don’t need to use any browser plugins. With SDM, all of your debugging happens right inside your browser, making it easier to debug mixed Java/Javascript code. If you are familiar with Super Dev Mode in 2.6, you will also notice that you no longer need any bookmarklets to enable/recompile when using Super Dev Mode, the code is recompiled automatically when you reload the page.


Other Workaround to Launch the Apps in Chrome Newer Version With Classic Dev Mode is to Enable NPAPI Flag, Follow the Below Steps
 
1.Open New Tab and Enter chrome://flags/#enable-npapi
 
2.Enable this Enable NPAPI Mac, Windows
 
3.Then bottom of the page click "Relunch" button.
 
**NPAPI  is scheduled to be removed from Chrome(version 45) in September 2015 and this workaround will be supported up to chrome 44 version only.

CSS Selectors

  CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style There are 3 different types of CSS selectors ...