[{"data":1,"prerenderedAt":794},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002F2013-06-12-synchronous-injection-of-styles-to-ui-binder":406,"\u002Fblog\u002F2013-06-12-synchronous-injection-of-styles-to-ui-binder-surround":783},[4,8,39,52,264,310,319,380,397],{"title":5,"path":6,"stem":7},"Notes","\u002Fnotes","1.notes\u002Findex",{"title":9,"path":10,"stem":11,"children":12,"page":30},"Architecture","\u002Fnotes\u002Farchitecture","1.notes\u002Farchitecture",[13,17,31,35],{"title":14,"path":15,"stem":16},"API Management","\u002Fnotes\u002Farchitecture\u002Fapi-management","1.notes\u002Farchitecture\u002Fapi-management",{"title":18,"path":19,"stem":20,"children":21,"page":30},"Data","\u002Fnotes\u002Farchitecture\u002Fdata","1.notes\u002Farchitecture\u002Fdata",[22,26],{"title":23,"path":24,"stem":25},"ERD","\u002Fnotes\u002Farchitecture\u002Fdata\u002Ferd","1.notes\u002Farchitecture\u002Fdata\u002Ferd",{"title":27,"path":28,"stem":29},"SCWD","\u002Fnotes\u002Farchitecture\u002Fdata\u002Fscwd","1.notes\u002Farchitecture\u002Fdata\u002Fscwd",false,{"title":32,"path":33,"stem":34},"Microservices","\u002Fnotes\u002Farchitecture\u002Fmicroservices","1.notes\u002Farchitecture\u002Fmicroservices",{"title":36,"path":37,"stem":38},"OAuth","\u002Fnotes\u002Farchitecture\u002Foauth","1.notes\u002Farchitecture\u002Foauth",{"title":40,"path":41,"stem":42,"children":43,"page":30},"Archive","\u002Fnotes\u002Farchive","1.notes\u002Farchive",[44,48],{"title":45,"path":46,"stem":47},"Google Web Toolkit","\u002Fnotes\u002Farchive\u002Fgwt","1.notes\u002Farchive\u002Fgwt",{"title":49,"path":50,"stem":51},"Jekyll","\u002Fnotes\u002Farchive\u002Fjekyll","1.notes\u002Farchive\u002Fjekyll",{"title":53,"path":54,"stem":55,"children":56,"page":30},"Development","\u002Fnotes\u002Fdevelopment","1.notes\u002Fdevelopment",[57,74,112,149,226,239,260],{"title":58,"icon":30,"path":59,"stem":60,"children":61,"page":30},"IDE","\u002Fnotes\u002Fdevelopment\u002Fide","1.notes\u002Fdevelopment\u002FIDE",[62,66,70],{"title":63,"path":64,"stem":65},"Jetbrains IDE","\u002Fnotes\u002Fdevelopment\u002Fide\u002Fjetbrains","1.notes\u002Fdevelopment\u002FIDE\u002Fjetbrains",{"title":67,"path":68,"stem":69},"NVIM","\u002Fnotes\u002Fdevelopment\u002Fide\u002Fnvim","1.notes\u002Fdevelopment\u002FIDE\u002Fnvim",{"title":71,"path":72,"stem":73},"tmux","\u002Fnotes\u002Fdevelopment\u002Fide\u002Ftmux","1.notes\u002Fdevelopment\u002FIDE\u002Ftmux",{"title":75,"path":76,"stem":77,"children":78,"page":30},"Algo","\u002Fnotes\u002Fdevelopment\u002Falgo","1.notes\u002Fdevelopment\u002Falgo",[79,83,87,91,95],{"title":80,"path":81,"stem":82},"Algorithms","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Falgorithms","1.notes\u002Fdevelopment\u002Falgo\u002Falgorithms",{"title":84,"path":85,"stem":86},"Data Structures","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fdata_structures","1.notes\u002Fdevelopment\u002Falgo\u002Fdata_structures",{"title":88,"path":89,"stem":90},"Kata","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fkata","1.notes\u002Fdevelopment\u002Falgo\u002Fkata",{"title":92,"path":93,"stem":94},"O-notation","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fo-notation","1.notes\u002Fdevelopment\u002Falgo\u002Fo-notation",{"title":96,"path":97,"stem":98,"children":99,"page":30},"Sorting","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting",[100,104,108],{"title":101,"path":102,"stem":103},"Buble Sort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fbublesort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fbublesort",{"title":105,"path":106,"stem":107},"Merge Sort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fmergesort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fmergesort",{"title":109,"path":110,"stem":111},"Quicksort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fquicksort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fquicksort",{"title":113,"path":114,"stem":115,"children":116,"page":30},"DataStructures","\u002Fnotes\u002Fdevelopment\u002Fdata_structures","1.notes\u002Fdevelopment\u002Fdata_structures",[117,121,125,129,133,137,141,145],{"title":118,"path":119,"stem":120},"ArrayList","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Farray_list","1.notes\u002Fdevelopment\u002Fdata_structures\u002Farray_list",{"title":122,"path":123,"stem":124},"Arrays","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Farrays","1.notes\u002Fdevelopment\u002Fdata_structures\u002Farrays",{"title":126,"path":127,"stem":128},"HashSet","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fhash_set","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fhash_set",{"title":130,"path":131,"stem":132},"LinkedList","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Flinked_list","1.notes\u002Fdevelopment\u002Fdata_structures\u002Flinked_list",{"title":134,"path":135,"stem":136},"PriorityQueue","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fpriority_queue","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fpriority_queue",{"title":138,"path":139,"stem":140},"Stack","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fstack","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fstack",{"title":142,"path":143,"stem":144},"TreeSet","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Ftree_set","1.notes\u002Fdevelopment\u002Fdata_structures\u002Ftree_set",{"title":146,"path":147,"stem":148},"Vector","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fvector","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fvector",{"title":150,"path":151,"stem":152,"children":153,"page":30},"Java","\u002Fnotes\u002Fdevelopment\u002Fjava","1.notes\u002Fdevelopment\u002Fjava",[154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222],{"title":155,"path":156,"stem":157},"Bit Operations","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fbit-operations","1.notes\u002Fdevelopment\u002Fjava\u002Fbit-operations",{"title":159,"path":160,"stem":161},"Cheatsheet","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fcheatsheet","1.notes\u002Fdevelopment\u002Fjava\u002Fcheatsheet",{"title":163,"path":164,"stem":165},"Clean Code","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fclean-code-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fclean-code-presentation",{"title":167,"path":168,"stem":169},"Java Datasource","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fdata-sources","1.notes\u002Fdevelopment\u002Fjava\u002Fdata-sources",{"title":171,"path":172,"stem":173},"Dependency Injection","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fdependency-injection-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fdependency-injection-presentation",{"title":175,"path":176,"stem":177},"Java SE","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjava-standard-edition","1.notes\u002Fdevelopment\u002Fjava\u002Fjava-standard-edition",{"title":179,"path":180,"stem":181},"Java Memory Model","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjmm","1.notes\u002Fdevelopment\u002Fjava\u002Fjmm",{"title":183,"path":184,"stem":185},"JPA","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjpa","1.notes\u002Fdevelopment\u002Fjava\u002Fjpa",{"title":187,"path":188,"stem":189},"Keywords","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fkeywords","1.notes\u002Fdevelopment\u002Fjava\u002Fkeywords",{"title":191,"path":192,"stem":193},"Maven","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fmaven","1.notes\u002Fdevelopment\u002Fjava\u002Fmaven",{"title":195,"path":196,"stem":197},"Spring AOP","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-aop-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-aop-presentation",{"title":199,"path":200,"stem":201},"Spring Boot","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-boot","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-boot",{"title":203,"path":204,"stem":205},"Spring Core","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-core-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-core-presentation",{"title":207,"path":208,"stem":209},"Spring Data","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-data","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-data",{"title":211,"path":212,"stem":213},"Spring JDBC","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-jdbc","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-jdbc",{"title":215,"path":216,"stem":217},"Spring MVC","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-mvc-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-mvc-presentation",{"title":219,"path":220,"stem":221},"Spring Security","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-security","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-security",{"title":223,"path":224,"stem":225},"Testing","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Ftesting","1.notes\u002Fdevelopment\u002Fjava\u002Ftesting",{"title":227,"path":228,"stem":229,"children":230,"page":30},"Js","\u002Fnotes\u002Fdevelopment\u002Fjs","1.notes\u002Fdevelopment\u002Fjs",[231,235],{"title":232,"path":233,"stem":234},"JavaScript","\u002Fnotes\u002Fdevelopment\u002Fjs\u002Fjava-script","1.notes\u002Fdevelopment\u002Fjs\u002Fjava-script",{"title":236,"path":237,"stem":238},"NodeJS","\u002Fnotes\u002Fdevelopment\u002Fjs\u002Fnode-js","1.notes\u002Fdevelopment\u002Fjs\u002Fnode-js",{"title":240,"path":241,"stem":242,"children":243,"page":30},"PowerPlatform","\u002Fnotes\u002Fdevelopment\u002Fpower_platform","1.notes\u002Fdevelopment\u002Fpower_platform",[244,248,252,256],{"title":245,"path":246,"stem":247},"Power Apps","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-apps","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-apps",{"title":249,"path":250,"stem":251},"Power Automate","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-automate","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-automate",{"title":253,"path":254,"stem":255},"Power BI","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-bi","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-bi",{"title":257,"path":258,"stem":259},"Sharepoint","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fsharepoint","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fsharepoint",{"title":261,"path":262,"stem":263},"Python","\u002Fnotes\u002Fdevelopment\u002Fpython","1.notes\u002Fdevelopment\u002Fpython",{"title":265,"path":266,"stem":267,"children":268,"page":30},"Devops","\u002Fnotes\u002Fdevops","1.notes\u002Fdevops",[269,273,277,281,285,289,293,297,306],{"title":270,"path":271,"stem":272},"Containers","\u002Fnotes\u002Fdevops\u002Fcontainers","1.notes\u002Fdevops\u002Fcontainers",{"title":274,"path":275,"stem":276},"Curl","\u002Fnotes\u002Fdevops\u002Fcurl","1.notes\u002Fdevops\u002Fcurl",{"title":278,"path":279,"stem":280},"GCP","\u002Fnotes\u002Fdevops\u002Fgcp","1.notes\u002Fdevops\u002Fgcp",{"title":282,"path":283,"stem":284},"GIT","\u002Fnotes\u002Fdevops\u002Fgit","1.notes\u002Fdevops\u002Fgit",{"title":286,"path":287,"stem":288},"Jenkins","\u002Fnotes\u002Fdevops\u002Fjenkins","1.notes\u002Fdevops\u002Fjenkins",{"title":290,"path":291,"stem":292},"Kubernetes","\u002Fnotes\u002Fdevops\u002Fkubernetes","1.notes\u002Fdevops\u002Fkubernetes",{"title":294,"path":295,"stem":296},"Linux","\u002Fnotes\u002Fdevops\u002Flinux","1.notes\u002Fdevops\u002Flinux",{"title":298,"path":299,"stem":300,"children":301,"page":30},"Os","\u002Fnotes\u002Fdevops\u002Fos","1.notes\u002Fdevops\u002Fos",[302],{"title":303,"path":304,"stem":305},"MAC OS","\u002Fnotes\u002Fdevops\u002Fos\u002Fmacos","1.notes\u002Fdevops\u002Fos\u002Fmacos",{"title":307,"path":308,"stem":309},"WSL","\u002Fnotes\u002Fdevops\u002Fwsl","1.notes\u002Fdevops\u002Fwsl",{"title":311,"path":312,"stem":313,"children":314,"page":30},"Hardware","\u002Fnotes\u002Fhardware","1.notes\u002Fhardware",[315],{"title":316,"path":317,"stem":318},"Keyboard","\u002Fnotes\u002Fhardware\u002Fkeyboard","1.notes\u002Fhardware\u002Fkeyboard",{"title":320,"path":321,"stem":322,"children":323,"page":30},"Homelab","\u002Fnotes\u002Fhomelab","1.notes\u002Fhomelab",[324,328,337,350],{"title":325,"path":326,"stem":327},"Proxmox","\u002Fnotes\u002Fhomelab\u002F_-proxmox-1","1.notes\u002Fhomelab\u002F_ proxmox 1",{"title":329,"path":330,"stem":331,"children":332,"page":30},"Cloudflare","\u002Fnotes\u002Fhomelab\u002Fcloudflare","1.notes\u002Fhomelab\u002Fcloudflare",[333],{"title":334,"path":335,"stem":336},"Cloudflare Workers","\u002Fnotes\u002Fhomelab\u002Fcloudflare\u002Fworkers","1.notes\u002Fhomelab\u002Fcloudflare\u002Fworkers",{"title":338,"path":339,"stem":340,"children":341,"page":30},"HomeAssistant","\u002Fnotes\u002Fhomelab\u002Fhome_assistant","1.notes\u002Fhomelab\u002Fhome_assistant",[342,346],{"title":343,"path":344,"stem":345},"EspHome debugger","\u002Fnotes\u002Fhomelab\u002Fhome_assistant\u002Fesphome-debugger","1.notes\u002Fhomelab\u002Fhome_assistant\u002Fesphome-debugger",{"title":347,"path":348,"stem":349},"GIT integration","\u002Fnotes\u002Fhomelab\u002Fhome_assistant\u002Fgit-integration","1.notes\u002Fhomelab\u002Fhome_assistant\u002Fgit-integration",{"title":325,"path":351,"stem":352,"children":353},"\u002Fnotes\u002Fhomelab\u002Fproxmox","1.notes\u002Fhomelab\u002Fproxmox",[354,358,362,365,369,373,377],{"title":355,"path":356,"stem":357},"Issue: TASK ERROR: Device \u002Fdev\u002Fdri\u002Fcard1 does not exist","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fissue_task_error_device_dev_dri_card1_does-not-exist","1.notes\u002Fhomelab\u002Fproxmox\u002FIssue_TASK_ERROR_device_dev_dri_card1_does not exist",{"title":359,"path":360,"stem":361},"Mount USB Drive To LXC Container","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fmount-usb-drive-to-lxc-container","1.notes\u002Fhomelab\u002Fproxmox\u002FMount USB drive to LXC container",{"title":325,"path":363,"stem":364},"\u002Fnotes\u002Fhomelab\u002Fproxmox\u002F_-proxmox","1.notes\u002Fhomelab\u002Fproxmox\u002F_ proxmox",{"title":366,"path":367,"stem":368},"ARR","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Farr","1.notes\u002Fhomelab\u002Fproxmox\u002Farr",{"title":370,"path":371,"stem":372},"Auto login via SSH from Proxmox UI","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fauto_login_via_ssh_from_proxmox_ui","1.notes\u002Fhomelab\u002Fproxmox\u002Fauto_login_via_ssh_from_proxmox_ui",{"title":374,"path":375,"stem":376},"Installation","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fdokploy","1.notes\u002Fhomelab\u002Fproxmox\u002Fdokploy",{"title":290,"path":378,"stem":379},"\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fkubernetes","1.notes\u002Fhomelab\u002Fproxmox\u002Fkubernetes",{"title":381,"path":382,"stem":383,"children":384,"page":30},"Leadership","\u002Fnotes\u002Fleadership","1.notes\u002Fleadership",[385,389,393],{"title":386,"path":387,"stem":388},"Leader Toolbox","\u002Fnotes\u002Fleadership\u002Fleader-toolbox","1.notes\u002Fleadership\u002Fleader-toolbox",{"title":390,"path":391,"stem":392},"Enterprise Project Structure","\u002Fnotes\u002Fleadership\u002Fproject-doc-structure","1.notes\u002Fleadership\u002Fproject-doc-structure",{"title":394,"path":395,"stem":396},"Scrum template","\u002Fnotes\u002Fleadership\u002Fscrum-template","1.notes\u002Fleadership\u002Fscrum-template",{"title":398,"path":399,"stem":400,"children":401,"page":30},"Products","\u002Fnotes\u002Fproducts","1.notes\u002Fproducts",[402],{"title":403,"path":404,"stem":405},"BigQuery","\u002Fnotes\u002Fproducts\u002Fgcp-big-query","1.notes\u002Fproducts\u002Fgcp-big-query",{"id":407,"title":408,"authors":409,"badge":409,"body":410,"date":773,"description":774,"extension":775,"image":409,"meta":776,"navigation":778,"path":779,"seo":780,"stem":781,"__hash__":782},"posts\u002F2.blog\u002F2013-06-12-Synchronous-injection-of-Styles-to-UI-Binder.md","UI Binder GWT Styles",null,{"type":411,"value":412,"toc":771},"minimark",[413,417,420,429,432,456,459,506,509,512,518,521,526,560,563,568,587,590,615,618,627,630,639,642,647,686,689,744,747,767],[414,415,416],"p",{},"Often when using UI Binder in your GWT project you would like to stylize your app with CSS. There are two ways of doing this a) by adding CSS attribute directly in DOM element or b) by using Client Bundle.",[414,418,419],{},"#Add CSS attribute",[414,421,422,423],{},"Please check reference guide: ",[424,425,426],"a",{"href":426,"rel":427},"https:\u002F\u002Fdevelopers.google.com\u002Fweb-toolkit\u002Fdoc\u002Flatest\u002FDevGuideUiCss",[428],"nofollow",[414,430,431],{},"To add class attribute to any GWT element you need to use DOM static helper method. For example:",[433,434,439],"pre",{"className":435,"code":436,"language":437,"meta":438,"style":438},"language-java shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","Button b = new Button();\nDOM.setElementAttribute(b.getElement(), \"id\", \"my-button-id\")\n","java","",[440,441,442,450],"code",{"__ignoreMap":438},[443,444,447],"span",{"class":445,"line":446},"line",1,[443,448,449],{},"Button b = new Button();\n",[443,451,453],{"class":445,"line":452},2,[443,454,455],{},"DOM.setElementAttribute(b.getElement(), \"id\", \"my-button-id\")\n",[414,457,458],{},"Then in CSS file that you must add to the hosted page:",[433,460,464],{"className":461,"code":462,"language":463,"meta":438,"style":438},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","#my-button-id { \n    font-size: 100%; \n}\n","css",[440,465,466,483,500],{"__ignoreMap":438},[443,467,468,472,476,479],{"class":445,"line":446},[443,469,471],{"class":470},"sMK4o","#",[443,473,475],{"class":474},"sbssI","my-button-id",[443,477,478],{"class":470}," {",[443,480,482],{"class":481},"sTEyZ"," \n",[443,484,485,489,492,495,498],{"class":445,"line":452},[443,486,488],{"class":487},"sqsOY","    font-size",[443,490,491],{"class":470},":",[443,493,494],{"class":474}," 100%",[443,496,497],{"class":470},";",[443,499,482],{"class":481},[443,501,503],{"class":445,"line":502},3,[443,504,505],{"class":470},"}\n",[414,507,508],{},"Although it works it has some disadvantages. Lets talk now about another option.",[414,510,511],{},"#Client Bundle",[414,513,422,514],{},[424,515,516],{"href":516,"rel":517},"https:\u002F\u002Fdevelopers.google.com\u002Fweb-toolkit\u002Fdoc\u002Flatest\u002FDevGuideClientBundle#CssResource",[428],[414,519,520],{},"Let’s define CSS file in project as resource without attaching it to the hosted page:",[414,522,523,491],{},[440,524,525],{},"MyStyle.css",[433,527,529],{"className":461,"code":528,"language":463,"meta":438,"style":438},".innerLayout {\n    background-color: black;\n}\n",[440,530,531,543,556],{"__ignoreMap":438},[443,532,533,536,540],{"class":445,"line":446},[443,534,535],{"class":470},".",[443,537,539],{"class":538},"sBMFI","innerLayout",[443,541,542],{"class":470}," {\n",[443,544,545,548,550,553],{"class":445,"line":452},[443,546,547],{"class":487},"    background-color",[443,549,491],{"class":470},[443,551,552],{"class":481}," black",[443,554,555],{"class":470},";\n",[443,557,558],{"class":445,"line":502},[443,559,505],{"class":470},[414,561,562],{},"Lets define it’s interface:",[414,564,565,491],{},[440,566,567],{},"MyStyle.java",[433,569,571],{"className":435,"code":570,"language":437,"meta":438,"style":438},"interface MyStyle extends CssResource {\n    String innerLayout();\n}\n",[440,572,573,578,583],{"__ignoreMap":438},[443,574,575],{"class":445,"line":446},[443,576,577],{},"interface MyStyle extends CssResource {\n",[443,579,580],{"class":445,"line":452},[443,581,582],{},"    String innerLayout();\n",[443,584,585],{"class":445,"line":502},[443,586,505],{},[414,588,589],{},"And resources that contains styles:",[433,591,593],{"className":435,"code":592,"language":437,"meta":438,"style":438},"interface MyResources extends ClientBundle {\n    @ClientBundle.Source(value = \"MyStyle.css\")\n    MyStyle style();\n}\n",[440,594,595,600,605,610],{"__ignoreMap":438},[443,596,597],{"class":445,"line":446},[443,598,599],{},"interface MyResources extends ClientBundle {\n",[443,601,602],{"class":445,"line":452},[443,603,604],{},"    @ClientBundle.Source(value = \"MyStyle.css\")\n",[443,606,607],{"class":445,"line":502},[443,608,609],{},"    MyStyle style();\n",[443,611,613],{"class":445,"line":612},4,[443,614,505],{},[414,616,617],{},"Now we can use it in our application:",[433,619,621],{"className":435,"code":620,"language":437,"meta":438,"style":438},"Style style = GWT.\u003CResources> create(MyResources.class).style();\n",[440,622,623],{"__ignoreMap":438},[443,624,625],{"class":445,"line":446},[443,626,620],{},[414,628,629],{},"Very often we want to use style immediately so we must assure that styles are already injected to the application:",[433,631,633],{"className":435,"code":632,"language":437,"meta":438,"style":438},"StyleInjector.inject(style.getText(), true);\n",[440,634,635],{"__ignoreMap":438},[443,636,637],{"class":445,"line":446},[443,638,632],{},[414,640,641],{},"What can can we do now with such style name? We can use it as in the previous example or it can be passed to UI Binder:",[414,643,644,491],{},[440,645,646],{},"MyWidget.java",[433,648,652],{"className":649,"code":650,"language":651,"meta":438,"style":438},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cui:UiBinder xmlns:ui=\"urn:ui:com.google.gwt.uibinder\" xmlns:g='urn:import:com.google.gwt.user.client.ui'>\n    \u003Cui:with field='style' type='....Style' \u002F>\n    \u003Cg:HTMLPanel>\n        \u003Cdiv class=\"{style.innerLayout}\">Text\u003C\u002Fdiv>\n    \u003C\u002Fg:HTMLPanel>\n\u003C\u002Fui:UiBinder>\n","xml",[440,653,654,659,664,669,674,680],{"__ignoreMap":438},[443,655,656],{"class":445,"line":446},[443,657,658],{},"\u003Cui:UiBinder xmlns:ui=\"urn:ui:com.google.gwt.uibinder\" xmlns:g='urn:import:com.google.gwt.user.client.ui'>\n",[443,660,661],{"class":445,"line":452},[443,662,663],{},"    \u003Cui:with field='style' type='....Style' \u002F>\n",[443,665,666],{"class":445,"line":502},[443,667,668],{},"    \u003Cg:HTMLPanel>\n",[443,670,671],{"class":445,"line":612},[443,672,673],{},"        \u003Cdiv class=\"{style.innerLayout}\">Text\u003C\u002Fdiv>\n",[443,675,677],{"class":445,"line":676},5,[443,678,679],{},"    \u003C\u002Fg:HTMLPanel>\n",[443,681,683],{"class":445,"line":682},6,[443,684,685],{},"\u003C\u002Fui:UiBinder>\n",[414,687,688],{},"There is much more effort using Client Bundle approach so why it’s better way? It depends what do you mean by better, but this allows you to according to the guide for:",[690,691,692,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741],"ul",{},[693,694,695],"li",{},"Validate CSS during compilation",[693,697,698],{},"Mimific and optimize output",[693,700,701],{},"Leverage GWT compiler",[693,703,704],{},"Different CSS for different browsers, automatically",[693,706,707],{},"Static evaluation of content",[693,709,710],{},"Basic CSS Modularization",[693,712,713],{},"Via dependency-injection API style",[693,715,716],{},"Widgets can inject their own CSS only when it’s needed",[693,718,719],{},"BiDi (Janus-style?)",[693,721,722],{},"CSS image strips",[693,724,725],{},"“Improve CSS”",[693,727,728],{},"Constants",[693,730,731],{},"Simple expressions",[693,733,734],{},"Runtime manipulation (StyleElement.setEnabled() handles many cases)",[693,736,737],{},"Compile-time class-name checking (Java\u002FCSS)",[693,739,740],{},"Obfuscation",[693,742,743],{},"Also when developing big project this allows to to keep resources clean and in right place.",[414,745,746],{},"#References",[690,748,749,755,761],{},[693,750,751],{},[424,752,753],{"href":753,"rel":754},"http:\u002F\u002Fwww.gwtproject.org\u002Fdoc\u002Flatest\u002FDevGuideClientBundle.html",[428],[693,756,757],{},[424,758,759],{"href":759,"rel":760},"https:\u002F\u002Fcode.google.com\u002Fp\u002Fgoogle-web-toolkit\u002Fwiki\u002FCssResource",[428],[693,762,763],{},[424,764,765],{"href":765,"rel":766},"https:\u002F\u002Fplus.google.com\u002Fu\u002F0\u002F+StefanoPulze\u002Fposts\u002FHEnf4qqChB7?cfem=1",[428],[768,769,770],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":438,"searchDepth":452,"depth":452,"links":772},[],"2013-06-12","Synchronous injection of Styles to UI Binder","md",{"layout":777},"post",true,"\u002Fblog\u002F2013-06-12-synchronous-injection-of-styles-to-ui-binder",{"title":408,"description":774},"2.blog\u002F2013-06-12-Synchronous-injection-of-Styles-to-UI-Binder","4n1Fz2-7IrzteBZBLqVy5aJ_8pM_8z0OGed3GT5uAW8",[784,789],{"title":785,"path":786,"stem":787,"description":788,"children":-1},"Instalacja artefaktu w zdalnym repozytorium Mavena","\u002Fblog\u002F2012-02-07-deploy-artifacts-to-the-repository","2.blog\u002F2012-02-07-deploy-artifacts-to-the-repository","Prezentacja sposobu instalacji artefaktu w zdalnym repozytorium z użyciem pluginu wagon",{"title":790,"path":791,"stem":792,"description":793,"children":-1},"ExtJS project","\u002Fblog\u002F2014-02-14-extjs-project-with-netbeans","2.blog\u002F2014-02-14-ExtJs-project-with-Netbeans","Introduction to ExtJS framework with Netbeans IDE",1788257054780]