pondělí 14. dubna 2008

Ohybanie vizualnych elementov v OBI EE/SE-1 (Změna šíky polí v Dashboard prompt)

Zakaznik mal poziadavok na dashboard, v ktorom sa zadaval kod kreditnej karty cez prompt v dashboarde. Lenze cislo karty je dlhsie ako default dlzka prompt pola (cislo se vejde, ale je zobrazeno pouze prvnich 12 znaku). Co s tym?


OBI EE/SE-1 rozhranie je napisane ako standardna webova aplikacia. Vizualne vlastnosti jednotlivych elementov uzivatelskeho rozhrania su zadefinovane pomocou CSS style sheetov. Takze ked sa nam podari najst CSS, ktory definuje velkost prompt pola, tak ho mozeme zmenit.

Firebug (http://www.getfirebug.com/) je add-on do Firefox prehliadacu, ktory nam dovoluje detailne skumat zdrojovy kod web stranky. Jeho pouzitim dostaneme:



Vidime, ze element input je zadefinovany v subore view.css. Mozeme nechat prehladat directory kde mame nainstalovane OBI EE a najdeme jeho umiestnenie. V zlozke .../res je niekolko directory s predponou “s_” toto su mozne styly, ktore sa daju priradit dashboardu (Settings -> Administration -> Manage Interactive Dashboards | tam si vyberiete jednotlivy dashboard a mozete mu priradit styl). Nasledne budu pouzite CSS a obrazky z daneho directory.

Pri default instalacii a default nastaveni stylu je potrebne zmenit tento css subor:

%ORACLE_BI%/oc4j_bi/j2ee/home/applications/analytics
/analytics/res/s_oracle10/b_mozilla_4/views.css



Najdeme cast kde sa definuje INPUT a pridame:

INPUT {
...
width: 200px;

}

Po zmene budete musiet restartovat server. Niektore typy prehliadacov maju CSS nacachovane a je treba vyprazdnit aj lokalnu cache.

Vysledkom je:



Tento postup ma siroke uplatnenie. Doporucujem si vzdy vytvorit zalohu menenych suborov a intenzivnejsie ohybanie doporucujem poriadne otestovat na VSETKYCH verzia prehliadacov a pratforiem. Kazdy ma totiz tendenciu interpretovat CSS styly trosku inac.


Příspěvek vytvořil a zaslal Peter Hora - nezávislý BI/DW Solution Architekt. Díky! (Požadavek pro řešení této úlohy vznikl na 1. Oracle Czech BI/DW Experts Bootcamp)

Žádné komentáře: