Bar chart's item info Gesture not passing the selected bar/item to the show Event

A normal requirement, is that when a particular item is selected/tapped in the chart, we display its information or do some activity.

We had a similar requirement and had decided to use the iteminfo Gesture. However when the show event was handled, the correct item information of the selected item was not passes correctly to the handler. We can do that, by overriding the gesture: Have shown, how to get the selected object below, implementation will depend on the requirement.

 Ext.define('AppName.override.chart.interactions.ItemInfo', {  
   override: 'Ext.chart.interactions.ItemInfo',  
   onGesture: function (series, item) {  
        var me = this,  
       panel = me.getPanel();  
     me.item = item;  
         var chart = me.getChart(),  
       chartXY = chart.getEventXY(series);  
     var chartitem= chart.getItemForPoint(chartXY[0], chartXY[1]);  
         console.log(item);  
         console.log(chartitem);  
     /*me.fireEvent('show', me, item, panel);  
     Ext.Viewport.add(panel);  
     panel.show('pop');  
     series.setAttributesForItem(item, { highlighted: true });  
     me.sync();*/  
     return false;  
   }  
 });  

Sencha Touch Build error : touch/src/event/publisher/Dom.js? 404 (Not Found)

I was working on a touch app with version 2.3.0 and Sencha Cmd version 3.1.2.342 and it was using Architect version: 2.2.3

Recently, I had  to migrate the app to use Architect version : 3.0.4.
Had to solve few bugs to get it working. The following bug was one of them that occurred while creating the production build:
Sencha Touch Build error : touch/src/event/publisher/Dom.js? 404 (Not Found)

This mainly occurs if Touch Gestures have been used. Like we had something like this in the app used:
eventPublishers: {
        touchGesture: {
            recognizers: {
                tap: {
                    xclass: 'Ext.event.recognizer.Tap',
                    moveDistance: 35//This was adjusted from the default 8
                }
            }
        }
    }

With the Previous Architect and Cmd version, when we manually built the app using Cmd, we never recieved an error for the production build.

When you try build with Architect 3, you will get this error in which case you have to add the following classes in the requires:


'Ext.event.recognizer.*',
'Ext.event.publisher.*'

Hibernate basic configuration and a simple project

Having worked on the back-end for a long time, It was time for me to re-visit some of the back-end stuff and revise the work done. While I was doing that I decided to jot down things for further use :).

Spring-Hibernate are one of the best frameworks currently used for Web-services development. We will start by getting to know Hibernate first, followed by Spring and a complete integration in the later posts.

In the early days of Java Programming developers accessed databases/performed operations using the built in classes provided by the java.sql.* package. Problems with this was we had a lot of connections that were not Freed up. We then had Connection Pools which solved the problem of connection management, but still there was a lot of code for sql queries/result set parsing,etc. After which we had Hibernate into picture.

With Hibernate it became easy to perform database operations.Hibernates manages the state  of objects and developers need not worry on when to read/write from a database. Hibernate is an opensource, light weight ORM -object Relational Mapping tool

To describe in short of where hibernate comes into picture, you can refer the below diagram:

The main elements of Hibernate Architecture include: Session, SessionFactory,Tranaction,ConnectionProvider,Transaction,TransactionFactory

To create a Hibernate Project we need to follow some basic steps:
1. We will create the Persistent class
2. Create a mapping file for the Persistent
3. Create the configuration file
4. Create a class which will retrieve/store the Persistent Objects

The jar's required for hibernate would be: cglib,log4j,slf4j,commons,dom4j,etc.
A complete set can be downloaded at: download all hibernate jars

We will begin by creating a simple Persistent class say Employee:

Employee.java

 package com.sample.models;   
 public class Employee {   
 private int id;   
 private String firstName,lastName;   
 public int getId() {   
   return id;   
 }   
 public void setId(int id) {   
   this.id = id;   
 }   
 public String getFirstName() {   
   return firstName;   
 }   
 public void setFirstName(String firstName) {   
   this.firstName = firstName;   
 }   
 public String getLastName() {   
   return lastName;   
 }   
 public void setLastName(String lastName) {   
   this.lastName = lastName;   
 }   
 }   

Now, create the mapping file: employee.hbm.xml

 <?xml version='1.0' encoding='UTF-8'?>   
 <!DOCTYPE hibernate-mapping PUBLIC   
  "-//Hibernate/Hibernate Mapping DTD 3.0//EN"   
  "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">   
  <hibernate-mapping>   
  <class name="com.sample.models.Employee" table="Employee">   
   <id name="id">   
    <generator class="assigned"></generator>   
   </id>   
   <property name="firstName"></property>   
   <property name="lastName"></property>   
  </class>   
  </hibernate-mapping>   

Create configuration file hibernate.cfg.xml

 <?xml version='1.0' encoding='UTF-8'?>   
 <!DOCTYPE hibernate-configuration PUBLIC   
      "-//Hibernate/Hibernate Configuration DTD 3.0//EN"   
      "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">   
 <hibernate-configuration>   
   <session-factory>   
     <property name="hbm2ddl.auto">update</property>   
     <property name="dialect">org.hibernate.dialect.Oracle9Dialect</property>   
     <property name="connection.url">jdbc:oracle:thin:@localhost:1521:xe</property>   
     <property name="connection.username">system</property>   
     <property name="connection.password">oracle</property>   
     <property name="connection.driver_class">oracle.jdbc.driver.OracleDriver</property>   
   <mapping resource="employee.hbm.xml"/>   
   </session-factory>   
 </hibernate-configuration>   

For connecting your application with the database, you will need to specify an SQL dialect. All the dialects are defined in the org.hibernate.dialect package.

For postgress you can use: org.hibernate.dialect.PostgreSQLDialect
Create a class which will save/ get these objects:

 package com.samples.service;  
 import org.hibernate.Session;  
 import org.hibernate.SessionFactory;  
 import org.hibernate.Transaction;  
 import org.hibernate.cfg.Configuration;  
 public class DataManager {  
 public static void main(String[] args) {  
   //creating configuration object  
   Configuration cfg=new Configuration();  
   cfg.configure("hibernate.cfg.xml");//populates the data of the configuration file  
   //creating seession factory object  
   SessionFactory factory=cfg.buildSessionFactory();  
   //creating session object  
   Session session=factory.openSession();  
   //creating transaction object  
   Transaction t=session.beginTransaction();  
   Employee e1=new Employee();  
   e1.setId(111);  
   e1.setFirstName("snehal");  
   e1.setLastName("vetal");  
   session.persist(e1);//persisting the object  
   t.commit();//transaction is commited  
   session.close();  
   System.out.println("successfully saved");  
 }  
 }  

If you run the above class, you should be able to save the Employee object and retrieve data.

This was a very simple example to just start using hibernate. There are many things to explore like inheritance mapping,collection mapping, association mapping, transaction mapping, HQL etc.
If I get free time, will keep updated on cleaner ways to integrate Spring and Hibernate and any tips.
You should be able to find a lot of resources on the web for both and once the base architecture for a app is ready, its pretty easier to implement new Persistence Objects and maintain them, webservices are easier to code faster with Spring.

Let's see a few more examples in the next posts.

Angular Js from the basic

     There are numerous frameworks in the market for mobile/web apps. Along with Sencha Touch/EXTJs, Angular Js is also become popular. Both have their pros/cons,which we shall discuss once we grasp Angular.

The Angular Js documentations and the tutorial itself is great for anybody to learn Angular js. All those who know Flex, and are quite familiar with the UI principles in general, learning AngularJs will not be that difficult. It's just a matter of syntax and knowing the available directives. You have to be good at Templates :).

A typical angular js app looks like:

<html lang="en" ng-app=""></html>
<head></head> ..
..
<!--incude css --> <script --="" src="...path to angluar js source"> </head> <body> </body> </html>

Understanding the ng-app directive is very important. It basically flags that element to be the root of our app. When you include the Angular source, after the entire containing html is downloaded, Angular js will search for the ng-app directive and will bootstrap the app with that element as the root of the app.

Basically bootstrapping the app consists of 3 steps:

1. Injector for Dependency Injection is created

2. Injector creates the root scope

3. Angular compiles the DOM starting at the ngApp root directive

This entire process is explained in the Angular Js tutorial and is the basis for learning it. Once the Basics are clear the framework is easier to grasp :)...

Hope we all enjoy developing in Angular js. Will come back with great tips and shortcuts in a few weeks, once I get a thorough grasp over the framework.

GIT

GIT is easy to learn and fast Source Code Management System. While using it, although I needed help for certain commands. Found a very good blog for the same: http://www.codeproject.com/Articles/457305/Basic-Git-Command-Line-Reference-for-Windows-Users

HTML 5

HTML 5 is a new standard to deliver great UI's. It includes animations,videos,rich GUI's etc

The Page structure is different in HTML 5 with additions of new tags viz: header,nav,article,section,sidebar,footer.

As I kept working on various projects, got to learn a lot of things for HTML 5 some listed below:

SVG and Canvas:
SVG stands for scalable vector graphics. It is light weight and renders faster. SVG is text based graphical language.

Canvas is an area where you can draw graphics.
Using SVG you can draw something and later manipulate, where browser will re-render it. When you use a Canvas, you can only draw but not modify some portion of it. Hence Canvas is much faster, since there is no overhead of remembering something.

Column Layout:
HTML 5 supports the new column layout. You can have huge text divided into 3-5 and more columns.
css style column-count can be used.:

-moz-column-count:5; /* Firefox */
-webkit-column-count:5; /* Safari and Chrome */
column-count:5;

column-rule can be used to draw line between columns:

-moz-column-rule:5px outset #ccffff; /* Firefox */
-webkit-column-rule:5px outset #ccffff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;

Similarly we have column-gap, etc

HTML 5 also supports server sent Events:

Many times there are needs where we need to continuously fetch data from the server. In this case using a pull model is good, but it consumes a lot of network bandwidth and also the server is loaded.

So a PUSH notification kind of solution is much better.

var source = new EventSource("//some jsp/.net file which will raise events");

we can listen to events from server:

source.onmessage = function (event){

//code to handle it

}

The content type of the response sent from the server has to be: 'text/event-stream'

The response can contain:

data://actualdata

retry:1000  //retry in 1 sec

event:success://some message

There are many more HTML 5 features that are very useful like Localstorage, application cache,etc which I'll come to details in another post.

Strictness of Javascript

            Although  Javascript warning can be ignored, its a good practice to ensure that your code does not throw any warnings. This also ensures the quality of code. You can set the strict mode in Firefox as:

• Type about:config in Firefox adressbar
• Search word "strict" 
• double click line that says : javascript.options.strict. This should set its value to true.