Basic Development Training

1. Basic Development Training Morgan.L Jan 5th 2010

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

3. Java Coding Style • Java Coding Style URL: http://geosoft.no/development/javastyle.html • How to use CheckClipse for Java Coding • Web Coding Style

4. Principles Of Object Oriented Design • (OCP) The OpenClosedPrinciple • (DIP) The DependencyInversionPrinciple • (ISP) The InterfaceSegregationPrinciple • (LSP) The LiskovSubstitutionPrinciple

5. Browser Vs. Layout Engine

6. Browser Incompatible issues – UI Display The 3 month calendar tools display as red cross in Inventory Management page. (MKV) ?

7. IE8: Browser Incompatible issues – UI Display Data grid display on creating landing page(SM) IE 8 Safari Firefox 3

8. Browser Incompatible issues – UI Behavior Create button doesn't workin promotion creation page on MKV FSI site

9. Browser Incompatible issues – UI Behavior There are scroll bars around "Set Page Size" button in "Full Budget" page(MV) IE 8 Firefox3

10. Browser Market Share (October, 2009)

11. Browser Usage Share of Our Production SM Browser Usage MKV Browser Usage * The Browser Usage Data is collected from the access log of wyndham.starcite.com

12. Browser Market Share by Version (October, 2009) * Only listed the browser versions with market share>1%

13. 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.

14. 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).

15. 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).

16. 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).

17. Test Tools – IETester • IETester allows you to test web pages on multi-versions of IE in the same process - http://my-debugbar.com/wiki/IETester/HomePage

18. 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 - http://portableapps.com/apps/internet/firefox_portable

19. Dev Tips – CSS Support • More Information : • http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS) • http://www.quirksmode.org/css/contents.html

20. Dev Tips – CSS Selector supported by IE [See Example - CSS Support.htm ]

21. Dev Tips – Image Format Support • 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 - http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)

22. Dev Tips – JavaScript (DOM) Support • 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 - http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(ECMAScript)

23. 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 modehttp://css.maxdesign.com.au/listamatic/about-boxmodel.htm • Using doctype declaration to choose layout modehttp://hsivonen.iki.fi/doctype/ • Recommended doctype for standard mode • HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> [See Example - Box Model VS. Doctype]

24. 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

25. 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

26. Dev Tips – Layout with Div • Using <div> instead of <table> to control layout in JSP template • Simplify your template structure to avoid coding problem • Easy for troubleshooting

27. 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 - http://developer.yahoo.com/yui/reset/ • MeyerWeb reset - http://meyerweb.com/eric/tools/css/reset/index.html

28. 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 (<ul><ol>) for lineup content • Use "Margin: 0 auto" to center Layouts (see example - Center with Margin.htm) • Hack Less

29. Dev Tips – CSS Hack • Conditional Comments • Selectors Hack • Attribute Hack

30. Dev Tips – CSS Hack - Conditional Comments <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]><link href="ie_only.css" rel="stylesheet" type="text/css"><![endif]--> <!--[if lt IE 7]><link href="ie_6_and_below.css" rel="stylesheet" type="text/css"><![endif]--> <!--[if !lt IE 7]> <link href="recent.css" rel="stylesheet" type="text/css"><!--<![endif]--> <!--[if !IE]>--><link href="not_ie.css" rel="stylesheet" type="text/css"><!--<![endif]-->

31. 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 {}

32. 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;\ }

33. Dev Tips – Using JavaScript Framework • Popular JavaScript framework has great compatibility for popular browsers • Recommended JS Framework • Jquery (http://jquery.com/) • Dojo (http://www.dojotoolkit.org/)

34. Troubleshooting Tools – IE Developer Toolbar

35. Troubleshooting Tools – Firebug

36. Troubleshooting Tools – Safari Web Inspector

37. Resources • QuirksMode.org - http://www.quirksmode.org/ • CSS Differences in Internet Explorer 6, 7 and 8 - http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

38. Q & A ? Email: samuel.liu@starcite.com msn: lxf520@hotmail.com