Thursday, June 20, 2013

JPA-Hibernate - Inheritance - Mapped Superclass

Most of the time, when we are developing an application we will use the concept called Inheritance, there will be a chance, where we need to abstract out the common properties to a separate class and extend it in our current class. Lets see how we are going to achieve this in hibernate or jpa.

Below is the initial entity (class), before we apply our inheritance, This entity(class) has three columns (properties), let say property id and name will be used
considerably throughout my application, in many entity (class), so lets abstract out the id and name from the Expense (entity) to new class name Base.

@Entity
@Table(name="Expense")
public class Expense 
{
 
 @Id
 @Column(name="ID")
 @GeneratedValue
 private int id;
 
 @NotBlank(message = "Name should not be empty")
 @Column(name="NAME")
 private String name; 

  
 @NotBlank(message = "Amount should not be empty")
 @Column(name="Amount")
 private double amount;
}
Here i have abstracted out id and name from the Expense entity and moved it to a separate class name Base,
and have the Expense entity extends Base, and i have annotated the Base class with @MappedSuperclass, note, the Base class is not an entity.

A class designated as a mapped superclass has no separate table defined for it. Its mapping information
is applied to the entities that inherit from it. An entity may inherit from a superclass that provides persistent entity state and mapping information, but which is not itself an entity. Mapping information can be overridden in such subclasses by using the AttributeOverride and AssociationOverride annotations

@MappedSuperclass
public class Base 
{
 
    @Id
    @Column(name="ID")
    @GeneratedValue
    private int id;
 
    @NotBlank(message = "Name should not be empty")
    @Column(name="NAME")
    private String name;
}


@Entity
@Table(name="Expense")
public class Expense extends Base
{

    @NotBlank(message = "Amount should not be empty")
    @Column(name="Amount")
    private double amount;
}

Happy Programming ...!!!

Wednesday, June 5, 2013

How to create Form Panel and add it to Window in Ext Js

FormPanel provides a standard container for forms. It is essentially a standard Ext.panel.Panel which automatically creates a BasicForm for managing any Ext.form.field.Field objects that are added as descendants of the panel.Creating a form starts with instantiating an object of FormPanel. Like any Ext component, the constructor accepts the configuration of the component you are creating. Now, let’s get our hands dirty with the code.

Below is the basic FormPanel, which just has only the FormPanel, it doesn't contain any Form Fields
var mf = new Ext.FormPanel( {  
 //frame: true,
 title: 'Add Medicine',
 cls: 'my-form-class',
 width: 350,
 height: 350
});

When you add the above code to your window, it will just show a blank panel inside the window like below screen shot

Lets how to add the Panel to the Window. To add the Panel, we need to create Window first. Below is the source code to create an Window and add the Panel to it. Here we have created an Window using new Ext.Window. If you look at the source you can see an attribute called items, which will holds the list of components to be added in the window, here we have added the FormPanel mf to the window. You can add any number of components to the Window. win.show() at the end is to render the window, which makes it visible in the browser.

var win = new Ext.Window(
{
    id:'myWindow',
    title:'Med Panel',
    width:900,
    height:500,
   //layout:'fit',
    items:[mf]
});
win.show();


Now lets how we can add the Form fields to the Form Panel. We can create components using the keyword "new" and the component we need to instantiate, the way above where we have created teh Window and FormPanel, or we can create them through configuration objects using the property "xtype". So for adding a TextField, we have to use "Ext.form.TextField" or using xtype:'textfield'. Lets see how we can add textfields using both mechanism to the Form Panel.

var desc = new Ext.form.TextField({
     name: 'description',
     fieldLabel: 'Description'
     
    });


var mf = new Ext.FormPanel( {  
 //frame: true,
 title: 'Add Medicine',
 cls: 'my-form-class',
 width: 350,
 height: 350,
 items: [
          {
  xtype: 'textfield',
  fieldLabel: 'Medicine Name',
  name: 'name',
  allowBlank : false
   },
          {
         xtype: 'textfield',
         fieldLabel: 'Company',
         name: 'companyName',
         allowBlank : false
          },
   desc
 ]
});

var win = new Ext.Window(
{
    id:'myWindow',
    title:'Med Panel',
    width:900,
    height:500,
   //layout:'fit',
    items:[mf]
});
win.show();

If you look at the above code, we have just added an new property called items to the FormPanel, compared to previous code at the top. Where we have defined two defined textfield using the xtype, and added on textfiled. That's it, you have created the FormPanel and added it to the Window, if you run the above code, you can see the Textfields shown up in the FormPanel, below is the screen shot, how it will look in the browser.



Happy Programming ...!!!