HTML Style , CSS properties Browser compatibility

CSS Proprties and Browser compatibility

CSS Properties :

1) content

  Never use content to set background image for div, instead use background-image :
Example 
			



 
.divItem{
    position: absolute;
    top: 12px;
    right: 11px;
    width: 40px;
    height: 40px;
    content: url(../../images/elective.png)
}
 
The above properties works fine in Chrome, but in firefox the image doesn't appear.
.divItem{
    position: absolute;
    top: 12px;
    right: 11px;
    width: 40px;
    height: 40px;
    content: url(../../images/elective.png)
}

2) background-size

.divItem{
    position: absolute;
    top: 12px;
    right: 11px;
    width: 40px;
    height: 40px;
    background-image: url(../../images/elective.png);
    -webkit-background-size: 100%;
    background-size: 100%
}

-webkit-background-size: is specifically for those browsers which support web kit layout rendering engine.
Note : http://en.wikipedia.org/wiki/WebKit






Opera supports 
-o-background-size:
But in latest opera versions, webkit itself is sufficient

3) box-shadow

.divItem{
   border: 1px solid #08c;
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25)
 }

This doesn't works in Firefox,

.divItem
{
   border: 1px solid #08c;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25)
 }


4) border-radius:

.divItem{
    border-radius: 100px;
}

For Firefox and other browsers
.divItem{
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}


5) innerText :
innerText is old style of using in older version of internet explorer.
Instead of using innerText , use textContent or innerHTML, this works fine in all browsers.

User innerHTML Or contentText

 

Introduction to Struts

Struts is an open source web application framework which will be used to develop the web-
based applications. Struts framework was implemented based on 3 popular design patterns.

  • MVC design pattern.
  • Front Controller design pattern.
  • Application Controller design pattern.

MVC design pattern :-

There are 3 layers in MVC Design pattern

I.  Presentation Layer

II.  Controller Layer

III.  Model Layer

Capture1

I Presentation Layer :-

It contains the presentation logic and can be implemented with JSP or with any other presentation frameworks like flex, velocity etc. Struts Presentation Layer contains following components.

1)     JSPs/HTMLs
2)      Struts custom tags
3)      Form Beans
4)      Message Bundles

1)     JSPs/HTMLs:

In struts presentation layer JSPs will be used to display the data to the client and also used to receive the input data from the client.

2)      Struts custom tags:

Apache has implemented various custom tags for the struts based application development and are categorized as follows.

  • Html tag libraries
  • Bean tag libraries
  • Logic tag libraries
  • Tiles tag libraries
  • Template tag libraries
  • Nested tag libraries
  1. Form Beans:

Form bean is a simple java bean styled class which stores the data. When we are writing the form bean java class, the bean class must be a subclass of one of the following.

  • ActionForm
  • DynaActionForm
  • ValidatorForm
  • DynaValidatorForm
  • ValidatorActionForm
  • DynaValidatorActionForm

 

  1. Message Bundles:

Message Bundles are nothing but property files which contain key value pair. Mainly message bundles will be used to achieve i18n (internationalization).

II Controller Layer :-

The Controller portion of the application is focused on receiving requests from the client (typically a user running a web browser), deciding what business logic function is to be performed, and then delegating responsibility for producing the next phase of the user interface to an appropriate View component. Following are the various components which we use in struts controller layer.   

   i)   ActionServlet

   ii)  RequestProcessor

   iii)  Action class

 i) ActionServlet:

ActionServlet is the one and only servlet for the entire struts application which is implemented based on Front controller design pattern and this servlet is loaded during server startup time. ActionServlet is responsible for receiving all incoming request and delegating to RequestProcessor. It also initialize the struts-config.xml file.

 ii)  RequestProcessor

RequestProcessor is responsible for processing all incoming request. It is implemented on Application Controller Design pattern. RequestProcessor is responsible for identifying the incoming action class and its form bean, it is also responsible for managing life cycle of form bean. After getting response, it manages to return to corresponding jsp by using ActionForward.

iii)  Action class

Action Class is the beginning of application’s business logic.

III Model Layer : –

Since there are no predefined components for model layer in struts like presentation layer and controller layer, so struts will not deal with model layer. But struts allows us to make use of any of the following model layer.

i)    Simple JDBC component

ii)   DAO + Hibernate

iii)  DAO + JDBC

iv)  Spring

v)   Web services     etc…

STRUTS FLOW

Capture1flow diagram showing struts flow

Steps for the flow         

  • When we submit the request after entering value in jsp form, request will be submitted to ActionServlet which is configured in web.xml.
  • This ActionServlet is responsible for initializing struts-config.xml and this struts-config.xml file is     configured in web.xml.
  • ActionServlet delegates the request to RequestProcessor
  • RequestProcessor takes the incoming request uri and tries to find the matching <action> tag in struts-config.xml. If no matching action is found, then client will get “cannot retrieve mapping for action”.
  • Once matching action is found for the incoming request uri, then corresponding “name” will be taken and tries to find the corresponding <form-bean> under <form-beans> configuration. If no matching <form-bean> is found then client will get the error called “cannot retrieve definition for form beans”.
  •  Once matching is found, RequestProcessor is responsible for managing form-bean life cycle.
  •  RequestProcessor takes the <action> “type” which is Action java class and create the instance    for the first time. With that Action class instance, execute() method  will be called.
  •  Once execute() method is completed ActionForward will be returned to RequestProcessor with      the forward name associated with the ActionForward object and RequestProcessor will try to  identify corresponding <forward> inside struts-config.xml file.
  •  Once the forward is found then its path will be taken and will be forwarded to the client.
  •   RequestProcessor takes the <action> “type” which is Action java class and create the instance     for the first time. With that Action class instance, execute() method  will be called.
  •  Once execute() method is completed ActionForward will be returned to RequestProcessor with  the forward name associated with the ActionForward object and RequestProcessor will try to  identify corresponding <forward> inside struts-config.xml file.
  •  Once the forward is found then its path will be taken and will be forwarded to the client.