Copyright ©  2007 KOMIX s.r.o.  Martin Ptáček , KOMIX s.r.o. Praha Best Practices p ro tvorbu Webových aplikací
Obsah prezentace User Experience Webdesign HTML, CSS a JavaScript Stripes Framework Otázky a odpovědi
<ul><li>User Experience ( UX ) </li></ul><ul><ul><li>Uživatelský prožitek </li></ul></ul><ul><ul><li>Kvalita zážitku uživa...
<ul><li>Pou žitelnost – jednoduchost ovládání </li></ul><ul><ul><li>Krásnější = Použitelnější ? </li></ul></ul><ul><li>Des...
<ul><li>Zaměřte se na uživatele a jeho potřeby </li></ul><ul><ul><li>Přizpůsobte se cílům uživatele. </li></ul></ul><ul><l...
<ul><li>Inspirujte se existujícími aplikacemi –  Používejte je </li></ul><ul><ul><li>YouTube, twitter, LinkedIn, Gmail, Fa...
<ul><li>Wireframing </li></ul><ul><ul><li>První a současně jedna z nejdůležitějších částí procesu tvorby designu. </li></u...
<ul><li>Mockup </li></ul><ul><ul><li>Zaměřen na vizuální stránku. Obsahuje veškeré grafické prvky, typografii a ostatní pr...
<ul><li>Brainstorming ( „burza nápadů“ ) </li></ul><ul><ul><li>Skupinová technika zaměřená na generování co nejvíce nápadů...
<ul><li>Neotvírejte odkazy do nového okna </li></ul><ul><ul><li>Uživatel si sám určí jak a kam chce obsah odkazu otevřít. ...
Webdesign UI Best Practices – Mluvte s uživatelem srozumitelně
<ul><li>http://www. smashingmagazine . com /2009/06/23/10- ui -design- patterns - you - should - be - paying - attention -...
<ul><li>Hover Controls </li></ul><ul><ul><li>Zobrazujte přípustné akce či operace až po najetí na konkrétní záznam. </li><...
<ul><li>http://www. smashingmagazine . com /2008/12/15/10- useful - techniques -to- improve - your -user-interface- design...
<ul><li>Minimalizujte složitost UI </li></ul><ul><ul><li>http://www. smashingmagazine . com /2009/10/07/ minimizing - comp...
<ul><li>http://www. smashingmagazine . com /2009/01/19/12- useful - techniques -for- good -user-interface-design- in - web...
<ul><li>Dodržujte strukturu webové aplikace  </li></ul><ul><ul><li>/css  </li></ul></ul><ul><ul><li>/js  </li></ul></ul><u...
<ul><li>Používejte správný DocType </li></ul><ul><ul><li>http://www. klikzone . cz /sekce- html /seznam- html - tagu / doc...
<ul><li>Omezte použití HTML tag  <img> </li></ul><ul><ul><li>Všechny obrázky definujte jako CSS background </li></ul></ul>...
<ul><li>Pokud to lze používejte vždy relativní odkazy </li></ul><ul><ul><li>HTML, CSS a JavaScript </li></ul></ul><ul><ul>...
<ul><li>Nepoužívejte inline style  < div   style = &quot;width:20px;&quot; > Text </ div > </li></ul><ul><li>Zpřehledněte ...
<ul><li>CSS Framework </li></ul><ul><ul><li>LESS CSS  http:// lesscss . org / </li></ul></ul><ul><ul><ul><li>http://www. s...
<ul><li>Dodržujte základní pravidla pro psaní JavaScript </li></ul><ul><ul><li>Rozdělte JavaScript na více souborů </li></...
<ul><li>Inspirujte se použitými JavaScript knihovnami </li></ul><ul><ul><li>/WEB-INF/js </li></ul></ul><ul><ul><li>control...
<ul><li>Minimalizujte počet HTTP requestů </li></ul><ul><ul><li>Pack CSS, Pack JavaScript, Compress </li></ul></ul><ul><ul...
<ul><li>Zak ázání použití cache pro  JSP  a  Action </li></ul><ul><ul><li>web.filter.DefaultFilter </li></ul></ul><ul><ul>...
<ul><li>package  web.extensions </li></ul><ul><ul><li>ActionContextImpl.java </li></ul></ul><ul><ul><li>ActionResolutionIm...
<ul><li>package  web.helper.resolution </li></ul><ul><ul><li>DocumentResolution.java </li></ul></ul><ul><ul><li>JsonResolu...
<ul><li>Standardní </li></ul><ul><ul><li>Definition: </li></ul></ul><ul><ul><ul><li><%@   taglib   prefix = &quot;c&quot; ...
<ul><li>WEB-INF/template/value/PoznamkaValue.jsp </li></ul><ul><li><%@   page   language = &quot;java&quot;   contentType ...
<ul><li>Používejte tag  < stripes:format >  pro formátování hodnot </li></ul><ul><ul><li>Používá definované Formatter tříd...
<ul><li>404.jsp ,  500.jsp  a  401.jsp </li></ul><ul><ul><li>< error-page > </li></ul></ul><ul><ul><li>< error-code > 404 ...
<ul><li>Nepoužívejte anotaci  @Session </li></ul><ul><li>Vytvo řte jedno místo, které bude vstupem pro získávání všech hod...
<ul><li>Umožněte uživatelům používat  Back  v prohlížeči </li></ul><ul><ul><li>Používejte  RedirectResolution  po odeslání...
Otázky a odpovědi <ul><li>Otázky ? </li></ul>
Děkuji za vaši pozornost Martin Ptáček [email_address] +420 225 989 981 KOMIX s.r.o. Holubova 1, 150 00 Praha 5 www.komix.cz
Upcoming SlideShare
Loading in...5
×

2010 Best Practices pro tvorbu Webových aplikací

1,434

Published on

Best Practices, Tips and Tricks, Tvorba webových aplikací, User Experience, WebDesign, HTML, CSS, JavaScript, Stripes

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,434
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "2010 Best Practices pro tvorbu Webových aplikací"

  1. 1. Copyright © 2007 KOMIX s.r.o. Martin Ptáček , KOMIX s.r.o. Praha Best Practices p ro tvorbu Webových aplikací
  2. 2. Obsah prezentace User Experience Webdesign HTML, CSS a JavaScript Stripes Framework Otázky a odpovědi
  3. 3. <ul><li>User Experience ( UX ) </li></ul><ul><ul><li>Uživatelský prožitek </li></ul></ul><ul><ul><li>Kvalita zážitku uživatele při interakci z určitým designem (klika, auto, lednice, webová stránka, aplikace, systém atd.) </li></ul></ul><ul><ul><li>UX je „konkurenční výhoda“ </li></ul></ul><ul><ul><li>UX Designer </li></ul></ul><ul><li>http://www. smashingmagazine . com /2010/10/05/ what - is -user- experience -design- overview - tools - and - resources / </li></ul><ul><li>http://konference. dobryweb . cz / ux / cs / </li></ul>User Experience Co je User Experience?
  4. 4. <ul><li>Pou žitelnost – jednoduchost ovládání </li></ul><ul><ul><li>Krásnější = Použitelnější ? </li></ul></ul><ul><li>Design </li></ul><ul><ul><li>Cílem designu je co nejúčelněji propojit funkční a estetickou složku navrhovaného produktu. </li></ul></ul><ul><ul><li>Design není jen to jak produkt vypadá ale i to jak funguje. </li></ul></ul><ul><li>První dojem </li></ul><ul><ul><li>Estetika, Obal prodává </li></ul></ul><ul><ul><li>Na vytvoření prvního dojmu na webu stačí méně než 1 vteřina </li></ul></ul><ul><li>http://www. smashingmagazine . com /2010/10/05/ what - is -user- experience -design- overview - tools - and - resources / </li></ul><ul><li>http://konference. dobryweb . cz / ux / cs / </li></ul>User Experience Co ovlivňuje uživatelský požitek?
  5. 5. <ul><li>Zaměřte se na uživatele a jeho potřeby </li></ul><ul><ul><li>Přizpůsobte se cílům uživatele. </li></ul></ul><ul><li>Usnadněte uživatelům učení </li></ul><ul><ul><li>Známé, jednoduché UI prvky, konzistentní design a dobrá navigace. </li></ul></ul><ul><li>Nezdržujte uživatele </li></ul><ul><li>Sdělujte informace ne data </li></ul><ul><ul><li>Mluvte k uživatelům srozumitelně ať nemusí dumat nad tím, co jim vlastně chcete sdělit. </li></ul></ul><ul><li>Testujte na uživatelích </li></ul><ul><ul><li>Nepřeceňujte vlastní úsudek a testujte na skutečných uživatelích. </li></ul></ul><ul><li>Doveďte nejdůležitější funkce k dokonalosti </li></ul><ul><li>http://www. smashingmagazine . com /2010/10/05/ what - is -user- experience -design- overview - tools - and - resources / </li></ul><ul><li>http://konference. dobryweb . cz / ux / cs / </li></ul>User Experience Best Practices
  6. 6. <ul><li>Inspirujte se existujícími aplikacemi – Používejte je </li></ul><ul><ul><li>YouTube, twitter, LinkedIn, Gmail, Facebook …. </li></ul></ul><ul><ul><li>InvoiceMachine, Fakturoid </li></ul></ul><ul><ul><li>http://www. tripwiremagazine . com /2010/05/15- best - sites -to- find - useful - online - web -2.0- applications . html </li></ul></ul><ul><li>Čtěte specializované publikace </li></ul><ul><ul><li>http://www. smashingmagazine . com / </li></ul></ul><ul><ul><li>http:// blog .filosof. biz / category / webdesign / </li></ul></ul><ul><ul><li>http:// designshack .co. uk / articles / css / holiday - wish -list-15- web -design- books - youll - want -for- christmas </li></ul></ul>Webdesign Dívejte se kolem sebe
  7. 7. <ul><li>Wireframing </li></ul><ul><ul><li>První a současně jedna z nejdůležitějších částí procesu tvorby designu. </li></ul></ul><ul><ul><li>Efektivní při komunikaci se zákazníkem. </li></ul></ul><ul><ul><li>Snadné zapracování změn. </li></ul></ul><ul><li>Wireframe ( „drátěný model“ ) </li></ul><ul><ul><li>Definuje textový i grafický obsah, rozmístění funkčních prvků, navigaci a ujasňuje funkce. </li></ul></ul><ul><ul><li>Není grafickým návrhem, nepoužívá barvy ! </li></ul></ul>Webdesign Navrhujte, kreslete a prototypujte
  8. 8. <ul><li>Mockup </li></ul><ul><ul><li>Zaměřen na vizuální stránku. Obsahuje veškeré grafické prvky, typografii a ostatní prvky stránky. </li></ul></ul><ul><ul><li>Velmi blízký finálnímu řešení. </li></ul></ul><ul><ul><li>Většinou v podobě obrázku. </li></ul></ul><ul><li>Prototype </li></ul><ul><ul><li>Polofunkční aplikace s uživatelským rozhraním (HTML/CSS). </li></ul></ul><ul><li>http:// sixrevisions . com /user-interface/ website - wireframing </li></ul><ul><li>http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/ </li></ul>Webdesign Navrhujte, kreslete a prototypujte
  9. 9. <ul><li>Brainstorming ( „burza nápadů“ ) </li></ul><ul><ul><li>Skupinová technika zaměřená na generování co nejvíce nápadů na dané téma. </li></ul></ul><ul><li>Pozvěte ty, kteří mají co k danému tématu říci a o jejichž názor stojíte. </li></ul><ul><li>Pozvěte ty, kteří se navzájem znají. </li></ul>Webdesign Provádějte B rainstorming
  10. 10. <ul><li>Neotvírejte odkazy do nového okna </li></ul><ul><ul><li>Uživatel si sám určí jak a kam chce obsah odkazu otevřít. </li></ul></ul><ul><li>Uživatelé raději scrolují nežli klikají </li></ul><ul><li>Používejte záložky pro navigaci </li></ul><ul><li>Využívejte modální okna </li></ul><ul><li>Komunikujte s uživatelem (Feedback) </li></ul><ul><ul><li>Feedback Message </li></ul></ul><ul><ul><ul><li>Dejte najevo uživateli že akce se provedla v pořádku (Growler). </li></ul></ul></ul><ul><ul><ul><li>Provádějte klientské validace (LiveValidation) </li></ul></ul></ul>Webdesign UI Best Practices
  11. 11. Webdesign UI Best Practices – Mluvte s uživatelem srozumitelně
  12. 12. <ul><li>http://www. smashingmagazine . com /2009/06/23/10- ui -design- patterns - you - should - be - paying - attention -to/ </li></ul><ul><li>Progressive Disclosure </li></ul><ul><ul><li>Zobrazujte pouze informace významné pro konkrétní akci uživatele. Ostatní informace zobrazujte až na vyžádání. </li></ul></ul><ul><li>Breadcrumbs </li></ul><ul><ul><li>Zlepšení/zpřehlednění navigace </li></ul></ul><ul><li>Steps Left </li></ul><ul><ul><li>Vícekrokové vyplňování dat (wizard) </li></ul></ul>Webdesign UI Best Practices
  13. 13. <ul><li>Hover Controls </li></ul><ul><ul><li>Zobrazujte přípustné akce či operace až po najetí na konkrétní záznam. </li></ul></ul><ul><li>Clear Primary Action </li></ul><ul><ul><li>Pokud je více tlačítek u formuláře, vždy dejte uživateli najevo, která akce je ta hlavní (primární). </li></ul></ul><ul><li>Required Field Marker </li></ul><ul><ul><li>Označte uživateli povinná pole na formuláři. </li></ul></ul>Webdesign UI Best Practices
  14. 14. <ul><li>http://www. smashingmagazine . com /2008/12/15/10- useful - techniques -to- improve - your -user-interface- designs / </li></ul><ul><li>Using contrast to manage focus </li></ul><ul><ul><li>Méně důležité informace zobrazujte s menším kontrastem. </li></ul></ul><ul><li>Using color to manage attention </li></ul><ul><ul><li>Použijte barvy pro zvýraznění chybných, problémových či jinak důležitých informací. </li></ul></ul><ul><li>White Space indicates relationships </li></ul><ul><ul><li>Různé použití mezer mezi jednotlivými elementy umožňuje zpřehlednit související informace. </li></ul></ul>Webdesign UI Best Practices
  15. 15. <ul><li>Minimalizujte složitost UI </li></ul><ul><ul><li>http://www. smashingmagazine . com /2009/10/07/ minimizing - complexity - in -user- interfaces / </li></ul></ul><ul><li>Používejte CAPTCHA s rozvahou </li></ul><ul><ul><li>„ Completely Automated Public Turing test to tell Computers and Human Apart“ </li></ul></ul><ul><ul><li>http:// webdesignledger . com / tips / why - you - should -stop- using - captchas </li></ul></ul><ul><li>Umožněte uživatelům bookmarkovat vaše stránky </li></ul>Webdesign UI Best Practices
  16. 16. <ul><li>http://www. smashingmagazine . com /2009/01/19/12- useful - techniques -for- good -user-interface-design- in - web - applications / </li></ul><ul><li>http://www. smashingmagazine . com /2009/09/24/10- useful - usability - findings - and - guidelines / </li></ul><ul><ul><li>Most Users Do Scroll </li></ul></ul><ul><ul><li>Blue is the Best Color for Links </li></ul></ul><ul><li>http://www. slideshare . net / lukew / web - form -design- best - practices </li></ul><ul><ul><li>Form Labels Work Best Above Field </li></ul></ul><ul><li>http://www.h1.cz/kniha-10x10 </li></ul>Webdesign UI Best Practices
  17. 17. <ul><li>Dodržujte strukturu webové aplikace </li></ul><ul><ul><li>/css </li></ul></ul><ul><ul><li>/js </li></ul></ul><ul><ul><li>/images </li></ul></ul><ul><ul><ul><li>/button </li></ul></ul></ul><ul><ul><ul><li>/tabs </li></ul></ul></ul><ul><ul><ul><li>atd… </li></ul></ul></ul><ul><ul><li>/WEB-INF </li></ul></ul><ul><ul><ul><li>/template </li></ul></ul></ul><ul><ul><ul><li>/tld </li></ul></ul></ul><ul><ul><li>* .jsp </li></ul></ul><ul><li>Smysluplně pojmenovávejte jednotlivé resources </li></ul>HTML, CSS a JavaScript Dodržujte standardní strukturu webové aplikace Neve řejné šablony a includes
  18. 18. <ul><li>Používejte správný DocType </li></ul><ul><ul><li>http://www. klikzone . cz /sekce- html /seznam- html - tagu / doctype . php </li></ul></ul><ul><li>Dodržujte strukturu stránky </li></ul><ul><ul><li>http://www. smashingmagazine . com /2009/06/18/10- ways -to- make - your - site - accessible - using - web - standards / </li></ul></ul><ul><li>Začněte používat HTML5 </li></ul><ul><ul><li>http://www. onextrapixel . com /2010/11/15/ useful -html5- code - snippets - you - can -use- today / </li></ul></ul><ul><ul><li>http://www. smashingmagazine . com /2010/09/23/html5- the - facts - and - the - myths / </li></ul></ul>HTML, CSS a JavaScript HTML Best Practices
  19. 19. <ul><li>Omezte použití HTML tag <img> </li></ul><ul><ul><li>Všechny obrázky definujte jako CSS background </li></ul></ul><ul><li>Vytvářejte HTML emailové zprávy </li></ul><ul><ul><li>http://www. vdotmedia . com / blog /9- best - practices -for-email-design/ </li></ul></ul><ul><li>Tvořte webové stránky pro tisk </li></ul><ul><ul><li>http://www. smashingmagazine . com /2007/02/21/ printing - the - web - solutions - and - techniques / </li></ul></ul><ul><li>Používejte Firebug a naučte se používat Photoshop </li></ul>HTML, CSS a JavaScript HTML Best Practices
  20. 20. <ul><li>Pokud to lze používejte vždy relativní odkazy </li></ul><ul><ul><li>HTML, CSS a JavaScript </li></ul></ul><ul><ul><li>JSP a Action </li></ul></ul><ul><li>V případě absolutních odkazů použijte proměnnou definovanou v taglibs.jsp </li></ul><ul><li>< c:set var = &quot;ctx&quot; value = &quot; ${pageContext.request.contextPath} &quot; /> </li></ul><ul><li>Pozor na mapování kontextů při použití web proxy </li></ul><ul><ul><li>URL Rewriting Module </li></ul></ul><ul><li>Pozor tag <stripes:form> generuje absolutn í odkaz </li></ul><ul><ul><li>Vytvořte vlastní tag </li></ul></ul>HTML, CSS a JavaScript Pozor na používání absolutních odkazů
  21. 21. <ul><li>Nepoužívejte inline style < div style = &quot;width:20px;&quot; > Text </ div > </li></ul><ul><li>Zpřehledněte CSS soubory </li></ul><ul><ul><li>Rozdělte CSS na více souborů – použijte @import </li></ul></ul><ul><ul><li>Komentujte CSS , Kombinujte pravidla, pou žívejte několikanásobné CSS třídy </li></ul></ul><ul><ul><li>http:// net . tutsplus . com / tutorials / html - css - techniques /30- css - best - practices -for- beginners / </li></ul></ul><ul><li>Použijte Reset CSS </li></ul><ul><ul><li>common.css </li></ul></ul><ul><ul><li>http:// sixrevisions . com / css / the - history - of - css - resets / </li></ul></ul>HTML, CSS a JavaScript CSS Best Practices
  22. 22. <ul><li>CSS Framework </li></ul><ul><ul><li>LESS CSS http:// lesscss . org / </li></ul></ul><ul><ul><ul><li>http://www. smashingmagazine . com /2010/12/06/ using - the - less - css - preprocessor -for- smarter -style- sheets / </li></ul></ul></ul><ul><ul><li>SASS http:// sass - lang . com / </li></ul></ul><ul><li>100 CSS Tips and Tricks </li></ul><ul><ul><li>http:// sixrevisions . com / css /100- exceedingly - useful - css - tips - and - tricks / </li></ul></ul>HTML, CSS a JavaScript CSS Best Practices
  23. 23. <ul><li>Dodržujte základní pravidla pro psaní JavaScript </li></ul><ul><ul><li>Rozdělte JavaScript na více souborů </li></ul></ul><ul><ul><li>Komentujte </li></ul></ul><ul><ul><li>http:// google - styleguide . googlecode . com / svn /trunk/ javascriptguide . xml </li></ul></ul><ul><li>Použijte JavaScript Framework </li></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li>JQuery </li></ul></ul><ul><ul><li>Ext JS </li></ul></ul><ul><ul><ul><li>Příklady použití Ext JS pro tabulky </li></ul></ul></ul>HTML, CSS a JavaScript JavaScript Best Practices
  24. 24. <ul><li>Inspirujte se použitými JavaScript knihovnami </li></ul><ul><ul><li>/WEB-INF/js </li></ul></ul><ul><ul><li>controllers.js </li></ul></ul><ul><ul><ul><li>LoggerController (using blackbird.js), IndicatorController (using cvi_busy_lib.js), GrowlerController (using growler.js), FormClearController, CheckBoxController </li></ul></ul></ul><ul><ul><li>table-controller.js, tabs-controller.js, form-controller.js, carousel.js, autocomplete-controller.js, datepicker.js </li></ul></ul><ul><ul><li>window-controller.js </li></ul></ul><ul><ul><li>layoutmanager.js, panedivider.js </li></ul></ul><ul><ul><li>livevalidation.js, livevalidation-helpers.js ( using jsdate_util.js ) </li></ul></ul><ul><ul><li>tree-navigator-controller.js ( using xdhtmltree.js ) </li></ul></ul>HTML, CSS a JavaScript JavaScript Best Practices
  25. 25. <ul><li>Minimalizujte počet HTTP requestů </li></ul><ul><ul><li>Pack CSS, Pack JavaScript, Compress </li></ul></ul><ul><ul><li>Použijte Web Resource Optimizer for Java (wro4j) </li></ul></ul><ul><ul><ul><li>Merge, Pack, CSS Variable, LessCSS framework support … </li></ul></ul></ul><ul><ul><ul><li>http:// code . google . com /p/wro4j </li></ul></ul></ul><ul><li>Použijte techniku CSS Sprites </li></ul><ul><ul><li>http:// css - tricks . com / css - sprites / </li></ul></ul>HTML, CSS a JavaScript Optimalizujte
  26. 26. <ul><li>Zak ázání použití cache pro JSP a Action </li></ul><ul><ul><li>web.filter.DefaultFilter </li></ul></ul><ul><ul><li>response.setHeader( &quot;Cache-Control&quot; , &quot;no-cache, no-store&quot; ); //HTTP 1. 1 </li></ul></ul><ul><ul><li>response.setHeader( &quot;Pragma&quot; , &quot;no-cache&quot; ); //HTTP 1.0 </li></ul></ul><ul><ul><li>response.setDateHeader( &quot;Expires&quot; , 0); </li></ul></ul><ul><li>Definice cache pro CSS , JavaScript a Images </li></ul><ul><ul><li>web.filter.CacheFilter </li></ul></ul><ul><ul><li>response.setHeader( &quot;Cache-Control&quot; , </li></ul></ul><ul><ul><li>&quot;post-check=3600, pre-check=43200, max-age=14400, must-revalidate&quot; ); //HTTP 1. 1 </li></ul></ul><ul><ul><li>response.setHeader( &quot;Pragma&quot; , &quot;&quot; ); //HTTP 1.0 </li></ul></ul><ul><ul><li>response.setDateHeader( &quot;Expires&quot; , new Date().getTime() + 14400 * 1000); </li></ul></ul><ul><li>http://www. jakpsatweb . cz / clanky / caching - tutorial - czech - translation . html </li></ul>Stripes Používejte Filtry pro nastavení HTTP hlaviček
  27. 27. <ul><li>package web.extensions </li></ul><ul><ul><li>ActionContextImpl.java </li></ul></ul><ul><ul><li>ActionResolutionImpl .java </li></ul></ul><ul><ul><li>ConverterFactoryImpl .java , FormatterFactoryImpl .java </li></ul></ul><ul><ul><ul><li>DateConverter .java </li></ul></ul></ul><ul><ul><ul><li>DoubleConverter .java </li></ul></ul></ul><ul><ul><ul><li>DateFormatter .java </li></ul></ul></ul><ul><ul><li>LocalePickerImpl .java </li></ul></ul><ul><ul><li>LocalizationBundleFactoryImpl .java </li></ul></ul><ul><ul><li>InvocationInterceptor .java </li></ul></ul><ul><ul><li>ExceptionHandlerImpl .java </li></ul></ul>Stripes Vytv ářejte vlastní Extensions
  28. 28. <ul><li>package web.helper.resolution </li></ul><ul><ul><li>DocumentResolution.java </li></ul></ul><ul><ul><li>JsonResolution .java </li></ul></ul><ul><ul><li>XMLResolution.java </li></ul></ul><ul><ul><li>CloseWindowResolution.java </li></ul></ul><ul><ul><li>AutocompleteResultResolution.java </li></ul></ul>Stripes Vytv ářejte vlastní implementace Resolution
  29. 29. <ul><li>Standardní </li></ul><ul><ul><li>Definition: </li></ul></ul><ul><ul><ul><li><%@ taglib prefix = &quot;c&quot; uri = &quot;http://java.sun.com/jsp/jstl/core&quot; %> </li></ul></ul></ul><ul><li><%@ taglib prefix = &quot;fmt&quot; uri = &quot;http://java.sun.com/jsp/jstl/fmt&quot; %> </li></ul><ul><li>... </li></ul><ul><li>Vlastní </li></ul><ul><ul><li>ElFunctions.java </li></ul></ul><ul><ul><li>WEB-INF/tld/app.tld </li></ul></ul><ul><ul><li>Definition: </li></ul></ul><ul><li><%@ taglib prefix = &quot;app&quot; uri = &quot;/WEB-INF/tld/app.tld&quot; %> </li></ul><ul><ul><li>Using: </li></ul></ul><ul><ul><ul><li>${ app :isDueDate( record.date )} </li></ul></ul></ul>Stripes Používejte Tag Library
  30. 30. <ul><li>WEB-INF/template/value/PoznamkaValue.jsp </li></ul><ul><li><%@ page language = &quot;java&quot; contentType = &quot;text/html; charset=utf-8&quot; pageEncoding = &quot;utf-8&quot; %> </li></ul><ul><li><%@ include file = &quot;/WEB-INF/template/taglibs.jsp&quot; %> </li></ul><ul><li><%-- </li></ul><ul><li>Poznamka Value </li></ul><ul><li>[value] </li></ul><ul><li>--%> </li></ul><ul><li>< stripes:layout-definition > </li></ul><ul><li>< c:if test = &quot; ${ not empty value} &quot; > </li></ul><ul><li>< span class = &quot;cvalue yellow&quot; title = &quot; ${value} &quot; >< b > A </ b ></ span > </li></ul><ul><li></ c:if > </li></ul><ul><li></ stripes:layout-definition > </li></ul>Stripes Používejte šablony Pojmenování a umístění Popis šablony
  31. 31. <ul><li>Používejte tag < stripes:format > pro formátování hodnot </li></ul><ul><ul><li>Používá definované Formatter třídy </li></ul></ul><ul><ul><li>WEB-INF/component/dueDate.jsp </li></ul></ul><ul><ul><li>< stripes:layout-definition > </li></ul></ul><ul><ul><li>< c:choose > </li></ul></ul><ul><ul><li>< c:when test = &quot; ${! empty value && visible == true && projectx:isDueDate(value)} &quot; > </li></ul></ul><ul><ul><li>< span class = &quot;cvalue red&quot; > </li></ul></ul><ul><ul><li> < stripes:format value = &quot; ${value} &quot; /> </li></ul></ul><ul><ul><li> </ span > </li></ul></ul><ul><ul><li></ c:when > </li></ul></ul><ul><ul><li>< c:otherwise > </li></ul></ul><ul><ul><li>< stripes:format value = &quot; ${value} &quot; /> </li></ul></ul><ul><ul><li></ c:otherwise > </li></ul></ul><ul><ul><li></ c:choose > </li></ul></ul><ul><ul><li></ stripes:layout-definition > </li></ul></ul>Stripes Používejte tag <stripes:format>
  32. 32. <ul><li>404.jsp , 500.jsp a 401.jsp </li></ul><ul><ul><li>< error-page > </li></ul></ul><ul><ul><li>< error-code > 404 </ error-code > </li></ul></ul><ul><ul><li>< location > /404.jsp </ location > </li></ul></ul><ul><ul><li></ error-page > </li></ul></ul><ul><ul><li>Implementujte vlastní ExceptionHandlerImpl.java </li></ul></ul><ul><ul><ul><li>V případě neodchycené výjimky směruje na 500.jsp </li></ul></ul></ul>Stripes Implementujte vlastní chybové stránky
  33. 33. <ul><li>Nepoužívejte anotaci @Session </li></ul><ul><li>Vytvo řte jedno místo, které bude vstupem pro získávání všech hodnot uchovávaných v Session </li></ul><ul><ul><li>Vlastní implementace ActionContext Impl </li></ul></ul><ul><ul><li>public SessionAttrs getSessionAttrs() { </li></ul></ul><ul><ul><li>SessionAttrs attrs = (SessionAttrs) getRequest().getSession() </li></ul></ul><ul><ul><li>.getAttribute( &quot;sessionAttrs&quot; ); </li></ul></ul><ul><ul><li>if (attrs == null ) { </li></ul></ul><ul><ul><li>//create and set default values </li></ul></ul><ul><ul><li>attrs = new SessionAttrs(); </li></ul></ul><ul><ul><li>getRequest().getSession().setAttribute( &quot;sessionAttrs&quot; , attrs); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>return attrs; </li></ul></ul><ul><ul><li>} </li></ul></ul>Stripes Best practices pro použití HTTPSession
  34. 34. <ul><li>Umožněte uživatelům používat Back v prohlížeči </li></ul><ul><ul><li>Používejte RedirectResolution po odeslání formuláře </li></ul></ul><ul><li>Využívejte JSON (JavaScript Object Notation) </li></ul><ul><ul><li>http://www. json . org / json - cz . html </li></ul></ul><ul><ul><li>Odlehčený formát pro výměnu dat </li></ul></ul>Stripes Další principy
  35. 35. Otázky a odpovědi <ul><li>Otázky ? </li></ul>
  36. 36. Děkuji za vaši pozornost Martin Ptáček [email_address] +420 225 989 981 KOMIX s.r.o. Holubova 1, 150 00 Praha 5 www.komix.cz

×