Syntax Highlighter in APEX 4.0 Kolorowanie składni w APEX 4.0

English text below polish

Witam

UWAGA! Z nieznanych mi powodów poniższe rozwiązanie działa tylko na przeglądarce OPERA. W wolnym czasie postaram się to jakoś naprawić. Przepraszam za problemy. 

Ostatnio doprowadzało mnie do wściekłości ciągłe przyklejanie kodu z APEX'a do jakiegoś edytora z kolorowaniem składni. Postanowiłem zaimplementować kolorowanie składni w środowisku developerski APEX 4.0

Przed rozpoczęciem muszę zaznaczyć, że rozwiązanie to wiąże się ze zmianami w źródłach Buldera APEX i może powodować problemy podczas przyszłych aktualizacji APEX. Dodatkowo zaznaczam, że wszystkie zmiany wykonywane są na własną odpowiedzialność.

Po krótkim wyszukaniu oferowanych na rynku rozwiązań (http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors) i sprawdzeniu kilku z nich udało mi się zaimplementować EditArea. Implementacja tego rozwiązania polega na wgraniu odpowiednich plików do katalogu i na serwerze APEX. Następnie należy dokonać edycji strony APEX'a (do tej czynności potrzebny jest dostęp do schematu APEX). Edycja jest prosta i wymaga zmiany kolumny HTML_PAGE_HEADER odpowiadającej za nagłówek HTML. 

Dla mnie najważniejszą sprawą było wprowadzenie edytora na stronę edycji regionu. Sprawdziłem więc jaki ID ma strona i Items trzymający źródło. Numer strony to 4651 natomiast Id itemsa ze źródłem to "F4000_P4651_PLUG_SOURCE".

Wystarczy teraz kolejno

- przegrać pliki z katalogu edit_area tej paczki do wybranego katalogu i. W moim przypadku jest to katalog /i/javascript/sh/

- dodać wpis do hedera strony 4651 u mnie będzie to wyglądało następująco:

UPDATE "APEX_040000"."WWV_FLOW_STEPS" SET HTML_PAGE_HEADER = HTML_PAGE_HEADER||'
<script language="Javascript" type="text/javascript" src="/i/javascript/sh/edit_area_full.js"></script>
<script language="Javascript" type="text/javascript">
// initialisation
editAreaLoader.init({
id: "F4000_P4651_PLUG_SOURCE" // id of the textarea to transform
,start_highlight: true // if start with highlight
,allow_resize: "both"
,allow_toggle: true
,word_wrap: true
,language: "pl"
,syntax: "sql"
});
</script>' WHERE flow_id = 4000 and id = 4651

Po commicie wszystko powinno działać :)

English text

Hello

WARNING ! From not known reasons this solution is working only in OPERA browser. I'll try to fix this. Sorry for the inconvenience.

In last few days I've been dragged to madness by continuously cutting and copying text from source area in APEX to some Syntax Highlighter editor. So I've decided to implement Syntax highlighter in developer side of APEX 4.0

Before I begin i must point it that this solution needs changes in sources of Bulder APEX and can cause problems in case of further updates of the APEX. Additionally notify that I'm not taking responsibility for any damage made by any of this scripts.

After short search of known solutions (http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors) and after checking few oft them I finally manage to implement EditArea. Whole operation needs copying some files to /i/ folder on our APEX server and edit of APEX builder page (for this you need to have access to APEX scheme). Edition of the page is simple - just change of HTML_PAGE_HEADER column. 

For me the most important case is to place the editor on Edit Region page. I've checked ID of this page and Item witch holds the source. Page ID is 4651 and Item id is "F4000_P4651_PLUG_SOURCE".

So knowing that you can: 

- copy files from edit_area catalog in this package to your catalog in /i/ folder. In my case it's /i/javascript/sh/

- add some links to 4651 page header - in my case this looks like:

UPDATE "APEX_040000"."WWV_FLOW_STEPS" SET HTML_PAGE_HEADER = HTML_PAGE_HEADER||'
<script language="Javascript" type="text/javascript" src="/i/javascript/sh/edit_area_full.js"></script>
<script language="Javascript" type="text/javascript">

// initialisation
editAreaLoader.init({
id: "F4000_P4651_PLUG_SOURCE" // id of the textarea to transform
,start_highlight: true // if start with highlight
,allow_resize: "both"
,allow_toggle: true
,word_wrap: true
,language: "pl"
,syntax: "sql"
});
</script>' WHERE flow_id = 4000 and id = 4651

After commit this should work  :)