My Professional Logs

Monday, 30 March 2015

Maven : Creating jar with dependencies

While working with the maven, it is a case that all the dependent jars will not be packed into the jar, whereas in case of war, all the dependent jars wil be packed into web/lib folder. If you want to create a simple jar with all its dependency jars then you need to create uber jar.(Uber means Super, extreme or outstanding). Here are the steps to create uber jar using maven.

Step 1 : Create an assembly xml and put it into your resources folder.

Step 2 : Include assembly.xml in your pom in the plugin-configuration node along with the manifest-mainclass.

Step 3 : Fire mvn assembly:assembly, it will create simple and uber jar in your target folder.

Friday, 13 February 2015

Sencha Touch, ExtJS Offline Docs and GPL Source

Sunday, 25 January 2015

ExtJS5 - Codemirror Integration

Being one of the leading frameworks for RIA, I was expecting ExtJS 5 with an inbuilt code editor. There are some add-ons available for ExtJS3 and ExtJS4 by extending form field base so that they can make it in par with form. But it is more restricted using in that way. We need to compromise with the layout if you are not using it on any other component. Instead we can use a simple hack to make it work seamlessly on any ExtJS components.

Since code mirror requires div or textarea, we can make use of ExtJS' 'box' to get handle of div. Next level complexity comes with form support and layouting. Here is the idea

Create a custom component by extending container of panel(As per requirement)
Use codemirror's configs as configs of custom component
Add following components as items

box : Since it provides a div, we can use it to render code mirror component
field: Add this item to your custom component and make it hidden. Replicate all the changes/actions on this field component whenever there are changes/actions on the codemirror.

Initialize codemiror field 'afterrender' of custom component with the configs that are defined on it.

Form Support

ExtJS form comes with the additional properties like dirty change, load/get/update Record features so that we can load the model into the form and work with it. Whenever we add our custom component to form, form will be able to identify the field item which is the part of our custom component. Since ExtJS form fires every action on our field, we can get the handle form actions.

For example if there is a change event on code mirror, we will be able to find out whether its a dirty or not but how can we tell form that it is dirty? Thats where we bring our field into action. Call setDirty function of field and fire dirty change event from that. Rest will be taken care by form. Sam e applies with the other actions.

Layout Support

Since it is our custom component, we don't need to worry much.

Controlling Size

Code mirror has a pre-configured height(300) in its css and there is a method to set custom height and width. We can pass these values as configs to our custom component and call setSize method of codemirror.

I have tried a custom component with remote validation features. You can find source code at the following location. This is just a prototype code to show how we can make codemirror work with ExtJS without affecting much from its version changes. You can take the idea and customize it as per your needs.

Source can be found @: https://github.com/Balagangadhar/templates/tree/master/extjs5-codemirror-template

Tuesday, 20 January 2015

Selection of Div Content on ExtJS(Select ALL)

Here is a simple code snippet to show data on view with select all enabled container.

Sunday, 11 January 2015

Workaround : Ext JS 5.1.0 checkboxmodel 'deselect' defect

ExtJS 5.1.0 is having a bug in checkboxmodel. While using checkbox model, it is not firing deselect/selection change when the model is 'MULTI' which is a default value.

Use following snippet to make it work.

 selModel: {
          selType: 'checkboxmodel' 
          model : 'SIMPLE'

}

Thursday, 1 January 2015

model Deletion in ExtJS 5

While I was working with ExtJS 5, I faced a problem in deleting a record. 'erase' is a method in ExtJS 5 to delete a model, which is a counter part of 'destroy' method in ExtJS 4. I tried 'erase' method on model to delete it using rest and it was not sending any DELETE request to the server. Here is the sample code snippet

var user = Ext.create('User', {
   extend : 'Ext.data.Model',
   fields : ['id', 'name', 'email'],

   proxy : {
    type : 'rest',
    url : '/users'
   }
  });

user.set('id', '12345');
user.erase();

In the preceding function call, will not be any XHR request with 'DELETE' method as we expect, if you are using ExtJS-5.1.0. In ExtJS 4, if there is any change in the ID property, it calls a function(changeId) that does house keeping of a model hence, model's phantom becomes false whereas in ExtJS5, user.set('id','12345') will not change user's phantom to false(When we create model using Ext.create, default phantom value will be true). Since it is a phantom record(new record), it will not call any 'DELETE' request.

Here is a simple hack to handle this problem. We hope there will be a fix in their future releases.

user.set('id','12345');
user.commit(); // user.phantom becomes false
user.erase();

user.set('id','12345');
user.phantom = false; //Make phantom as false manually
user.erase();

Saturday, 13 September 2014

Spring MVC Test cases with Annotated Beans Using Mockito

Annotations make java developer's life easy and also it feels like annotation based classes are complex for unit testing. But in reality it is quite simple. There are couple of ways through which you can test autowired/spring based classes.

Method 1:
You can use AnnotationConfigApplicationContext to load application context. Instantiate application context, register annotated classes and test your methods. Here is the sample code

Method 2:
Even though preceding method is an easiest way to test annotation based spring classes, if your test case becomes complex and if you want to mock actual request etc, you better move to mocking framework instead of basic one. I have used mockito with spring-test to mock actual requests with spring beans. Here is the sample code

In the above sample code we have used spy to mock real objects, if you just want to mock it you can use mock annotation instead of spy.

For this you need mockito and spring-test jars. Following are the minimal poms for the both respectively.
<dependency>
<groupId>org.mockito</groupId>
<artifactId>mockito-core</artifactId>
<version>1.9.5</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>4.0.0.RELEASE</version>
<scope>test</scope>
</dependency>

Here is the complete code with both the testing methodologies.
spring-test-template using mockito

Wednesday, 10 September 2014

Extjs 4 : Delegating Events

Though ExtJS supports excellent event handling mechanism, sometimes we may want to handle custom events on some HTML components. For example if you want to handle hyperlink click whereas hyperlink is embedded in html code(using html tag or xtemplate), then you may need to delegate events to the component that you have created using 'delegate'. You can use simple hack to handle this.

Create HTML text using html tag or xtemplate.
Assign classname/id to the component to which you want to attach an event.
Attache event to the Ext body and delegate to the specific class/id show in below.
Make sure that class name or id is unique.

Here is the fiddle to fiddle around with it.
Sample snippet

Friday, 29 August 2014

ExtJS4 Dynamic Grid

In the MV* patterns, model refers to the fixed state of content. If state changes then the benefit that comes out of this model is trivial. Some times it could be a case that model is dynamic, in such a case ExtJS grid should be constructed dynamically. Here is how the sample code goes...

ExtJS4 grid has a method called reconfigure which takes store and columns as input arguments and restructures grid. These columns and store depends on the field data which a part of model. Since model is dynamic lets create field data dynamically along with the actual data and send it to the server.

Here is the structure from server

Thursday, 21 August 2014

ExtJS4: Missing HasOneInstance While Decoding JSON

Sometime ExtJS plays dumb role in throwing exceptions. It ignores exceptions instead of handling them, especially while dealing with associations.

Whenever ExtJs loads data throw proxy into model, it decodes json data into respective models including associations. In case of hasMany association it creates <association-name>Store and in case of hasOne association, it creates <association-name>HasOneInstance store and decodes data into corresponding stores.

But here are some cases where ExtJS may miss these conversions without throwing any error.

If your association name is in camel case and if you have defined its association with its basic properties like type and model, then ExtJs generates rest of the properties by default. While generating default properties it converts camel case text into lower case and associate it to the association.

For example if you have defined a hasOne association as follows,

associations: [{ type: 'hasOne', model: 'homeAddress' }]

It generates association_key as homeaddress (converts camel case into lower case) and maps this key with the json object which will be in camel case. Because of mismatch in name, it doesn't create homeAddressHasOneInstance object in the parent object.

If you don't use association's model explicitly and miss its inclusion in controller then ExtJS doesn't complain about the model and store conversion will not happen for that association.