C O N F I D E N T I A L 29-Apr-15 1 Basic Development Training Morgan.L Jan 5th 2010

C O N F I D E N T I A L 29-Apr-15 2 Agenda Coding Style Principles Of Object Oriented Design How to use CSS Framwork - Yaml How to use Struts2 How to use Spring How to use Maven

C O N F I D E N T I A L 29-Apr-15 3 Java Coding Style Java Coding Style URL: How to use CheckClipse for Java Coding Web Coding Style

C O N F I D E N T I A L 29-Apr-15 4 Principles Of Object Oriented Design (OCP) The OpenClosedPrincipleOpenClosedPrinciple (DIP) The DependencyInversionPrincipleDependencyInversionPrinciple (ISP) The InterfaceSegregationPrincipleInterfaceSegregationPrinciple (LSP) The LiskovSubstitutionPrincipleLiskovSubstitutionPrinciple

C O N F I D E N T I A L 29-Apr-15 5 Browser Vs. Layout Engine BrowserLayout Engine IETrident FirefoxGecko SafariWebkit ChromeWebkit OperaPresto

C O N F I D E N T I A L 29-Apr-15 6 Browser Incompatible issues – UI Display The 3 month calendar tools display as red cross in Inventory Management page. (MKV) ?

C O N F I D E N T I A L 29-Apr-15 7 Browser Incompatible issues – UI Display Data grid display on creating landing page (SM) IE8: Safari Firefox 3 IE 8

C O N F I D E N T I A L 29-Apr-15 8 Browser Incompatible issues – UI Behavior Create button doesn't work in promotion creation page on MKV FSI site

C O N F I D E N T I A L 29-Apr-15 9 Browser Incompatible issues – UI Behavior There are scroll bars around "Set Page Size" button in "Full Budget" page (MV) Firefox 3 IE 8

C O N F I D E N T I A L 29-Apr Browser Market Share (October, 2009)

C O N F I D E N T I A L 29-Apr Browser Usage Share of Our Production MKV Browser UsageSM Browser Usage * The Browser Usage Data is collected from the access log of wyndham.starcite.com

C O N F I D E N T I A L 29-Apr Browser Market Share by Version (October, 2009) Browser VersionTotal Market Share Microsoft Internet Explorer % Microsoft Internet Explorer % Microsoft Internet Explorer % Firefox % Firefox % Safari % Chrome % Microsoft Internet Explorer Compatibility Mode2.42% Firefox % Opera 10.x1.10% Opera 9.x1.04% * Only listed the browser versions with market share>1%

C O N F I D E N T I A L 29-Apr Trend of Browser Usage Share IE still have the most of users but the its usage share is declining. Firefox is the 2nd popular browser and its usage share is increasing. Safari has stable usage share, it has windows version now. Google Chrome is a brand new browser but its usage share is increasing rapidly and takes the market place of Opera. Opera10 released recently, the new version is great but not popular as before. Netscape has passed, please forget it.

C O N F I D E N T I A L 29-Apr Test Scope - IE IE 6, IE7 and IE8 have nearly same usage rate so far. There are many incompatible issues among the multi-versions of IE. IE 5.5 and earlier versions of IE has very few usage share now (<0.1% totally). IE 8IE 7IE 6IE 5.5 and earlier Fully Test Not Test

C O N F I D E N T I A L 29-Apr Test Scope - Firefox Firefox 3.5 has nearly 60% share in total Firefox usage. Firefox user is willing to upgrade to new version. There are few incompatible issues among the multi-versions of Firefox. Firefox 2.0 and earlier version of Firefox has few usage share now (<2% totally). Firefox 3.5Firefox 3.0Firefox 2.0 and early Fully TestNot Test

C O N F I D E N T I A L 29-Apr Test Scope - Other Safari is the top browser for Mac users. Safari has windows version now Chrome has nearly same layout engine as Safari (Webkit). Opera has few usage share now (about 2% totally). SafariChromeOpera and Others Ad hoc TestNot Test

C O N F I D E N T I A L 29-Apr Test Tools – IETester IETester allows you to test web pages on multi-versions of IE in the same process -

C O N F I D E N T I A L 29-Apr Test Tools – Firefox Portable Edition Firefox Portable Edition is standalone application with full-feature of Firefox. Different version of Firefox Portable Edition can work on same computer, thus we can test web pages in different versions of Firefox on same computer More information -

C O N F I D E N T I A L 29-Apr Dev Tips – CSS Support Trident (IE)Gecko (Firefox)Webkit (Safari & Chrome)Presto (Opera) CSS CSS2.1Mostly CSS3SlightPartial More Information :

C O N F I D E N T I A L 29-Apr Dev Tips – CSS Selector supported by IE CSS SelectorIE 6IE 7IE 8 * selectorYes > selectorNoYes + selectorNoStaticYes ~ selectorNoYes [attr] selectorNoYes Multiple classesYes :before and :afterNo Yes :hoverLink OnlyYes :activeLink OnlyNoYes :first-childNoStaticYes :first-line and :first-letterYes :focusNo Yes [See Example - CSS Support.htm ]

C O N F I D E N T I A L 29-Apr Dev Tips – Image Format Support Browser JPEG GIF PNG ChromeYes FirefoxYes OperaYes SafariYes IEPartial YesPartial Internet Explorer does not support progressive display of progressive JPEG. Internet Explorer supports PNG images but is unable to correctly display images with gamma correction or color correction. Versions of Internet Explorer prior to version 7 are unable to correctly display images with alpha channel (for transparency) without additional coding. More information -

C O N F I D E N T I A L 29-Apr Dev Tips – JavaScript (DOM) Support Browser DOM 1 DOM 2 DOM 3 ChromeYes FirefoxYes OperaYes SafariYes IEPartial No Internet Explorer 5 and above has its own event registration model and its own style sheets model, but these are incompatible with DOM 2. More information -

C O N F I D E N T I A L 29-Apr Dev Tips – Doctype VS Layout Mode Browser has different layout mode by using different doctype – Standard mode (strict mode) – Quirk mode – Almost Standards Mode IE box mode Using doctype declaration to choose layout mode Recommended doctype for standard mode – HTML 4.01 Strict – XHTML 1.1 [See Example - Box Model VS. Doctype]

C O N F I D E N T I A L 29-Apr Dev Tips – Using Stylesheet Using stylesheet can help dev – Easily to maintain layout control in one place – Easily to troubleshoot browser incompatible issues Don’t use inline css and html attribute to control layout and display

C O N F I D E N T I A L 29-Apr Dev Tips – Using Stylesheet Using stylesheet can help dev – Easily to maintain layout control in one place – Easily to troubleshoot browser incompatible issues Don’t use inline css and html attribute to control layout and display

C O N F I D E N T I A L 29-Apr Dev Tips – Layout with Div Using instead of to control layout in JSP template – Simplify your template structure to avoid coding problem – Easy for troubleshooting

C O N F I D E N T I A L 29-Apr Dev Tips – Use a CSS Reset CSS Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. Recommended CSS Reset – Yahoo's developer reset - – MeyerWeb reset -

C O N F I D E N T I A L 29-Apr Dev Tips – CSS Rules Case Sensitive Apply Margins and Padding to All elements (CSS reset can do this job) Don’t that begin a name of classes and IDs with a hyphen or underscore (IE6 don’t support this kind of name) Don't use min-height/max-height/min-width/max-width – IE 6 don’t support this attribute – See this example for IE8 bug - IE 8 Overflow Bug with Max-width and Max- height Use list ( ) for lineup content Use "Margin: 0 auto" to center Layouts (see example - Center with Margin.htm) Hack Less

C O N F I D E N T I A L 29-Apr Dev Tips – CSS Hack Conditional Comments Selectors Hack Attribute Hack

C O N F I D E N T I A L 29-Apr Dev Tips – CSS Hack - Conditional Comments -->

C O N F I D E N T I A L 29-Apr Dev Tips – CSS Hack – Selector Hack IE 6 – * html {} IE 7 and below – *:first-child+html {} * html {} IE 7 only – *+html {} IE 7 and modern browsers only – html>body {} Modern browsers only (not IE 7) – html>/**/body {}

C O N F I D E N T I A L 29-Apr Dev Tips – CSS Hack – Attribute Hack IE 6 – {_color: blue } IE 7 and below – {*color: blue; } Everything but IE6 – {color/**/: blue } IE 6-8 – {color: blue\9; } IE 7-8 – { color/*\**/: blue\9; } IE 8 – { color: blue;\ }

C O N F I D E N T I A L 29-Apr Dev Tips – Using JavaScript Framework Popular JavaScript framework has great compatibility for popular browsers Recommended JS Framework – Jquery ( ) – Dojo (

C O N F I D E N T I A L 29-Apr Troubleshooting Tools – IE Developer Toolbar

C O N F I D E N T I A L 29-Apr Troubleshooting Tools – Firebug

C O N F I D E N T I A L 29-Apr Troubleshooting Tools – Safari Web Inspector

C O N F I D E N T I A L 29-Apr Resources QuirksMode.org - CSS Differences in Internet Explorer 6, 7 and internet-explorer-6-7-and-8/ internet-explorer-6-7-and-8/

C O N F I D E N T I A L 29-Apr Q & A ? msn: