Jak dostanu nový element vedle loga bez zásahu do template?

Jak dostanu nový element vedle loga bez zásahu do šablony?

Obavy ze zásahu do šablony jsou občas přehnané. Stejně tak je tomu i v tomto případě, kdy nejde o destruktivní ideologii. Řešení není úplně jednoduché – vedle loga by se nemělo nic umisťovat a na to i APEX myslí, ale občas mají klienti jiné představy. Krom toho, že APEX na to není připraven, je tu ještě další věc:

  • Pokud zvolíte Logo Type jako logo, stačí vám vložit jen image link, který se doplní jako src do definice <img src="#IMAGE_LINK#" />
  • Když zvolíte Logo Type jako text, musíte sice napsat celý ručně, ale ještě k tomu se obsah vloží do definice navigace…

Ale jak najít kompromis? Jednoduše – napište si ručně HTML toho, co tam vlastně chcete mít.

1
2
3
4
  <img src="#APP_IMAGES#my_logo.png" style="float: left;" />
  <span class="my_content" style="">
    #MY_PERSONAL_CONTENT#
  </span>

A nyní to rozeberme: podle <img src="#IMAGE_LINK#" /> chceme mít tedy čistý #IMAGE_LINK#. Ale aby nám zakončení nevyhodilo jako html na stránku za logo ještě samotné '" />', musíme vytvořit ještě pseudo content (tato povinnost závisí na potřebě – pokud však uvnitř máme kaskádu a párové tagy, je to nezbytné pro správné zakončení!).

Pseudo content může být libovolný html tag – mně k těmto účelům korektně poslouží třeba <a>

1
<a class="pseudo" style="display: none" />

Výsledkem je tedy před samotným parsováním toto:

1
2
3
4
5
  <img src="#APP_IMAGES#moje_logo.png" style="float: left;" />
  <span class="muj_button" style="">
    #MY_PERSONAL_CONTENT#
  </span>
  <a class="pseudo" style="display: none" />

Výsledkem po odtrhnutí APEX ready logo src mi zůstává následovné:

1
2
3
4
5
  #APP_IMAGES#moje_logo.png" style="float: left;" />
  <span class="
muj_button" style="">
    #MY_PERSONAL_CONTENT#
  </span>
  <a class="
pseudo" style="display: none" />

Pro lepší přehlednost v APEXu není špatný nápad použít vytváření substitution strings, a pak to do loga zavolat třeba jen &APP_LOGO. A nebo pro ještě lepší přehlednost nechat rozparsované: &APP_LOGO_IMG. &APP_LOGO_ITEM. &APP_LOGO_PSEUDO.

Aktualizace pro APEX 19.2

V aktualizaci APEXu na verzi 19.2 si vývojáři tuto absenci uvědomili a zareagovali. Nyní lze v sekci Shared Components (nebo v Theme Rolleru na rozhraní) přepnout nastavení loga. Na výběr jsou možnosti „Image“ / „Text“ / „Image and text“ / „Custom HTML“.

Prvky jsou při volbě „Custom HTML“ defaultně nastavené jako display: inline-flex a v našem výše uvedeném případě pak tedy do této možnosti stačí dodat požadované HTML:

1
2
3
4
<img src="#APP_IMAGES#my_logo.png" style="float: left;" />
<span class="my_content" style="">
#MY_PERSONAL_CONTENT#
</span>

Pozor, Možnosti definice loga lze přepínat na rozhraní v Theme Rolleru, ale nelze specifikovat „Custom HTML“ – to musí být zvoleno uvnitř aplikace v „Shared Components“ -> „User Interface“, v sekci „Logo“.

Vladimír Opolský

Oracle APEX developer, HTML, CSS, JavaScript, jQuery, PL/SQL...

Komentáře

avatar
  Odběr  
Upozornit na

Můžeme Vám s něčím poradit?

S vývojem aplikací v APEXu, Javascriptem, ...

Váš dotaz bude zveřejněn, jakmile na něj jeden z našich expertů odpoví. Vaši e-mailovou adresu nikde uvádět nebudeme.

Vyplňte prosím požadovaná pole.