Page History

Zmiany w szablonach komponentów

Każda strona w aplikacji czytelnika ma swój adres np.:

http://demo.dl.psnc.pl/dlibra - strona główna, sekcja main w pliku pages.xml

 http://demo.dl.psnc.pl/dlibra/publication/1000 - strona publikacji, sekcja publication w pliku pages.xml

 http://demo.dl.psnc.pl/dlibra/contact?q=library - strona kontakty, sekcja contact w pliku pages.xml

Każda z tych stron jest zdefiniowana w pliku pages.xml poprzez sekcję <page>...</page> np.:

<page name="main

Dodawanie niestandardowych treści...

Przyda się velocity

Dodawanie oraz modyfikacje treści w komponencie

Większość danych wyświetlanych przez aplikacje czytelnika jest pobierana z serwera systemu dLibra. Są to na przykład kolekcje, obiekty cyfrowe, wartości atrybutów itd. Istnieje jednak możliwość, aby dodać własne niestandardowe treści lub zmodyfikować sposób wyświetlania już istniejących w dowolnym miejscu wyświetlanego kodu html.

Przykład: Na stronie "Kontakt" chcemy umieścić obrazek ilustrujący zdjęcie pracowników instytucji.

" layout="home_layout

" inherits="base-page"> - strona główna

<page name="publication" layout="home_layout" inherits="base-page">

- strona publikacji

<page name="contact" layout="home_layout" secure="true" inherits="base-page"> - strona kontaktu

gdzie:

pole name - nazwa sekcji,

pole layout - nazwa layoutu na którym umieszczone będą wszystkie komponenty dla danej strony,

pole inherits - abstrakcyjna sekcja, z której dana strona będzie pobierać komponenty oprócz komponentów własnych (np.: Strona kontaktu jest zdefiniowana w sekcji contact. Zawiera komponent ContactComponent, ale pole inherits ma wartość base-page dlatego strona kontaktu będzie zawierać wszystkie komponenty jakie zostały zdefiniowane dla sekcji base-page również).

Komponenty zdefiniowane są znacznikami

<component name="...">
	<place>...</place>
 	<position>...</position>
</component>

gdzie:

znacznik place - nazwa umiejscowienia w layoucie

znacznik position - pozycja, na której ma być umieszczony komponent w zadanym miejscu(place)

W przypadku ustawienia tego samego pola place dla różnych komponentów należy pamiętać, by ustawić im inną wartość position. W przeciwnym razie tylko jeden komponent zostanie wyświetlony. Przykładowo strona kontaktu jest zdefiniowana w sekcji contact. Wykorzystuje layout o nazwie home_layout. Posiada komponent zdefiniowany nasępująco:

<components>
	<component name="pl.psnc.dlibra.web.comp.pages.components.ContactComponent">
		<place>main</place>
			<position>1</position>
	</component>
</components>

Dodanie nowego komponentu do podstrony

Jeśli uznamy, że chcemy wzbogacić treść naszej strony o własne dane - statyczne lub pobrane za pomocą zdalnego api, możemy utworzyć własny komponent.

Przykład: Chcemy na stronie głównej wyświetlać dane o pogodzie dla anglojęzycznych gości

To oznacza, zawartość komponentu ContactComponent umiejscowionego w pliku

/WEB-INF/components/templates

<div #if($userLanguage != "en") style="display:none" #end id="WeatherComponent"></div>

Tworzymy katalog /style/dlibra/custom/js, a w nim plik WeatherComponent.js z poniższą zawartością(skrypt pobiera dane o pogodzie z zewnętrznego serwisu yahoo i wyświetla je na naszej stronie w wybranym miejscu)

var dlibra = dlibra || {};
dlibra.WeatherComponent = {
	init: function () {
		$.get( "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22poznan%2C%20pl%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function( data ) {
		  var description = data.query.results.channel.item.description.replace("<![CDATA[", "").replace("]]>", "");
		  $('#WeatherComponent').html(description)
		});
	}
}
$(function () {
	dlibra.WeatherComponent.init();
})

/ContactComponent.vm jest renderowana w pliku /WEB-INF/layouts/templates/home_layout.vm w pętli:

#foreach( $comp in $main)
	$!{comp.RenderedTemplate}
#end

Każdy komponent składa się z trzech elementów:

• klasy Javowej (np. pl.psnc.dlibra.web.comp.pages.components.IndexSearchComponent),
• pliku szablonu(plik szablonu nazywa się tak samo jak klasa Javowa np. IndexSearchComponent.vm),
• plików z różnymi wersjami językowymi (np. IndexSearchComponent_xx.xml).

W wersji 6.0 wszystkie komponenty znajdują się w archiwum dcore-webapp-components-6.x.x.jar (znajduję się on : /WEB-INF/lib). Klasa Javowa znajduję sie w katalogu odpowiadającym jej nazwie pakietowej (w tym wypadku /pl/psnc/dlibra/web/comp/pages/components/ ) natomiast pozostałe pliki komponentu - w głównym katalogu tego archiwum.

Istnieje możliwość "przykrycia" domyślnych plików z archiwum JAR (dcore-webapp-components-6.x.x.jar) własnymi zmienionymi plikami. W tym celu najlepiej wypakować pliki szablonów, które mają być zmienione do odpowiedniego katalogu. W przypadku plików *.vm jest to katalog /WEB-INF/components/templates, natomiast dla plików językowych *.xml jest to katalog /WEB-INF/components/resources.

Tak wypakowane pliki można zmieniać i zmiany w nich "nadpiszą" oryginalną zawartość plików pozostawionych w archiwum jar. Zmiany w plikach *.vm będą widoczne natychmiastowo po ich zapisaniu. Zmiany w plikach *.xml będą uwzględniane również natychmiastowo, pod warunkiem, że pliki te były już wypakowane przy starcie serwera Tomcat.

Dodatkowo w niektórych szablonach komponentów używane są makra, zdefiniowane w pliku components_library.vm lub layout_library.vm. Plik components_library.vm znajduje się w archiwum dcore-web-components-6.x.x.jar. Własne makra oraz zmodyfikowane makra powinny zostać umieszczone adekwatnie w plikach /WEB-INF/components/templates/custom_library.vm lub /WEB-INF/layout/custom_templates/custom_layout_library.vm). Zmiany w tych plikach również powinny być uwzględniane zaraz po ich zapisaniu pod warunkiem, że edytowane przez nas makro było już dostępne przy starcie serwera Tomcat.

Dodawanie oraz modyfikacje treści w komponencie

Większość danych wyświetlanych przez aplikacje czytelnika jest pobierana z serwera systemu dLibra. Są to na przykład kolekcje, obiekty cyfrowe, wartości atrybutów itd. Istnieje jednak możliwość, aby dodać własne niestandardowe treści lub zmodyfikować sposób wyświetlania już istniejących w dowolnym miejscu wyświetlanego kodu html.

Przykład: Na stronie "Kontakt" chcemy umieścić obrazek ilustrujący zdjęcie pracowników instytucji.

1. Otwieramy stronę "Kontakt", sprawdzamy w pasku adresu nazwę dla strony kontakt np. dla adresu: https://example.com/dlibra/contact?language=pl nazwą strony w aplikacji czytelnika będzie contact.
2. Otwieramy plik /WEB-INF/pages.xml i odnajdujemy linię <page name="contact" layout="home_layout" secure="true" inherits="base-page">. W tej sekcji mamy wszystkie dostępne komponenty dla strony contact. Nas interesuje jedyny komponent ContactComponent. Sekcja contact oprócz swoich komponentów wykorzystuje również komponenty z sekcji base-page(ale tam nie chcemy robić żadnej zmiany). Sekcja dla strony głównej np.: https://example.com/dlibra/ nazywa się main(tutaj również nie chcemy robić zmian w tym wypadku). Do innych zmian może się przydać wiedza, że nasza strona contact jest oszadzona w szablonie home_layout. W szablonie tym możemy również dokonywać zmian. Znajdziemy go w katalogu: /WEB-INF/layout/templates. Przed modyfikacją należy zrobić jego kopię.
3. Rozpakowujemy archiwum /WEB-INF/lib/dcore-webapp-components-6.0.0.jar. Po rozpakowaniu kopiujemy plik ContactComponent.vm do katalogu /WEB-INF/components/templates
4. Od tego czasu możemy wykonać dowolne zmiany w pliku ContactComponent.vm. Zmiany będą miały wpływ na wyświetlaną treść na stronie "Kontakt". Po usunięciu ContactComponent.vm z katalogu /WEB-INF/components/templates nasze zmiany znikną i nastąpi powrót do domyślnego wyświetlania treści.
5. W ContactComponent.vm szukamy dowolnego miejsca, w którym chcielibyśmy dodać obrazek i umieszczamy interesujący fragment html np.: <img src="example.com/pracownicy.png" />

Dodanie nowego komponentu do podstrony

Jeśli uznamy, że chcemy wzbogacić treść naszej strony o własne dane - statyczne lub pobrane za pomocą zdalnego api, możemy utworzyć własny komponent.

Przykład: Chcemy na stronie głównej wyświetlać dane o pogodzie dla anglojęzycznych gości

1. W katalogu /WEB-INF/components/templates tworzymy plik WeatherComponent.vm z poniższą zawartoscią

   Code Block
   title WeatherComponent.vm
   <div #if($userLanguage != "en") style="display:none" #end id="WeatherComponent"></div>

   
   

2. Tworzymy katalog /style/dlibra/custom/js, a w nim plik WeatherComponent.js z poniższą zawartością(skrypt pobiera dane o pogodzie z zewnętrznego serwisu yahoo i wyświetla je na naszej stronie w wybranym miejscu)

   Code Block
   language js title WeatherComponent.js linenumbers true
   var dlibra = dlibra || {}; dlibra.WeatherComponent = { init: function () { $.get( "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22poznan%2C%20pl%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function( data ) { var description = data.query.results.channel.item.description.replace("<![CDATA[", "").replace("]]>", ""); $('#WeatherComponent').html(description) }); } } $(function () { dlibra.WeatherComponent.init(); })

   
   

3. Edytujemy plik /WEB-INF/layout/templates/home_layout.vm i tuż przed zamknięciem znacznika body dodajemy nasz skrypt

   Code Block
   title home_layout.vm
   <script src="${homepageUrl}/style/dlibra/custom/js/WeatherComponent.js" type="text/javascript"></script> </body>

4. Dodajemy komponent WeatherComponent na stronę główną. W tym celu w pliku /WEB-INF/pages.xml szukamy sekcji main odpowiadającej stronie głównej. Wewnątrz components dodajemy kolejny komponent

   Code Block
   language xml title pages.xml
   <page name="main" layout="home_layout" inherits="base-page"> <actions> <action name="ChangeLanguageAction"/> <action name="LogoutAction"/> </actions> <components>

	<script src="${homepageUrl}/style/dlibra/custom/js/WeatherComponent.js" type="text/javascript"></script>
</body>

<page name="main" layout="home_layout" inherits="base-page">
	  	<actions>
  			<action name="ChangeLanguageAction"/>
  			<action name="LogoutAction"/>
  		</actions>
		<components>
			<component name="pl.psnc.dlibra.web.comp.pages.components.LatestEditionsComponent">
				<place>topSplit</place>
				<position>1</position>
			</component>
			<component name="pl.psnc.dlibra.web.comp.pages.components.NewsComponent">
				<place>topSplit</place>
				<position>2</position>
			</component>
			<component name="pl.psnc.dlibra.web.comp.pages.components.WeatherComponent">
				<place>main</place>
				<position>1</position>
			</component>
			<component name="pl.psnc.dlibra.web.comp.pages.components.CollectionsPresentationComponent">
				<place>main</place>
				<position>2</position>
			</component>
			<component name="pl.psnc.dlibra.web.comp.pages.components.PopularEditionsComponent">
				<place>main</place>
				<position>3</position>
			</component>
			<component name="pl.psnc.dlibra.web.comp.pages.components.RecommendedComponent">
				<place>main</place>
				<position>4</position>
			</component>
		</components>
</page>

Na naszej stronie ukaże się pogoda w naszym mieście dla anglojęzycznych gości

Przykładowy komponent pogody
Image Removed

Usunięcie komponentu z podstrony

Może się zdarzyć, że administrator biblioteki cyfrowej zdecyduje się na usunięcie niektórych komponentów z różnych powodów. Komponent można usunąć w dwojaki sposób:

• poprzez zakomentowanie go w pliku /WEB-INF/pages.xml (bezpieczniej, bo zawze możemy dany komponent przywrócić)
• poprzez usunięcie go z pliku /WEB-INF/pages.xml

Przykład: Decydujemy się na schowanie komponentu z obiektami najpopularniejszymi, które są wyświetlane na stronie głównej, żeby spopularyzować obiekty ostatnio dodane.

1. Otwieramy plik /WEB-INF/pages.xml i szukamy sekcji main zawierającej wyświetlane komponenty na stronie głównej. Okalamy komentarzem <!-- <conponent>...</component> --> komponent PopularEditionsComponent jak w pliku przedstawionym poniżej.

   Code Block
   title pages.xml
   <page name="main" layout="home_layout" inherits="base-page"> <actions> <action name="ChangeLanguageAction"/> <action name="LogoutAction"/> </actions> <components> <component name="pl.psnc.dlibra.web.comp.pages.components.LatestEditionsComponent"> <place>topSplit</place> <position>1</position> </component> <component name="pl.psnc.dlibra.web.comp.pages.components.NewsComponent"> <place>topSplit</place> <position>2</position> </component> <component name="pl.psnc.dlibra.web.comp.pages.components.CollectionsPresentationComponent"> <place>main</place> <position>1</position> </component> <!--<component name="pl.psnc.dlibra.web.comp.pages.components.PopularEditionsComponentLatestEditionsComponent"> <place>main<<place>topSplit</place> <position>3<<position>1</position> </component>--> <component name="pl.psnc.dlibra.web.comp.pages.components.RecommendedComponentNewsComponent"> <place>main<<place>topSplit</place> <position>4<<position>2</position> </component> </components> </page>

Ustawienie komponentu w layoucie

Każdy komponent ma swoje ściśle określone miejsce w layoucie strony. Informację o tym, w którym konkretnie miejscu layoutu znajduje się dany komponent możemy sprawdzić w pliku pages.xml. Tam możemy również wskazać inne miejsce wyświetlania się komponentu.

Przykład: Decydujemy się przenieść komponent z aktualnościami w zupełnie inne miejsce na stronie głównej.

1. Otwieramy plik pages.xml
2. Szukamy sekcji main, w której zawarte są komponenty znajdujące się na stronie głównej.
3. Odczytujemy nazwę layoutu z pola layout. Domyślna nazwa layoutu dla strony ma wartość home_layout.
4. W sekcji main odszukujemy interesujący nas komponent z aktualnościami

   <component name="pl.psnc.dlibra.web.comp.pages.components.WeatherComponent"> <place>main</place> <position>1</position> </component> <component name="pl.psnc.dlibra.web.comp.pages.components.CollectionsPresentationComponent"> <place>main</place> <position>2</position> </component> <component name="pl.psnc.dlibra.web.comp.pages.components.PopularEditionsComponent"> <place>main</place> <position>3</position> </component> <component name="pl.psnc.dlibra.web.comp.pages.components.

   NewsComponent, któremu chcemy przypisać nowe położenie w layoucie home_layout. Miejsce dla naszego komponentu z aktualnościami odczytujemy z pola place. Domyślnie będzie to wartość topSplit. Kolejność sprawdzamy w polu position i domyślnie będzie to wartość 2. Pierwszym komponentem wyświetlanym w miejscu topSplit jest komponent z ostatnio dodanymi obiektami.

5. Modyfikujemy wartość pola place wewnątrz danych komponentu pl.psnc.dlibra.web.comp.pages.components.NewsComponent. Wartość place zmieniamy na myPlace, a wartość position zmieniamy na 1.

   Code Block
   language xml title pages.xml
   <component name="pl.psnc.dlibra.web.comp.pages.components.NewsComponent"> <place>myPlace</place> <position>1</position> </component>

6. Otwieramy plik /WEB-INF//layout/templates/home_layout.vm i w nim umieszczamy poniższy kod w dowolnym miejscu.

   Code Block
   language xml title home_layout.vm
   #foreach( $comp in $myPlace) $!{comp.RenderedTemplate} #end

   Spowoduje to, że na stronie głównej wyświetlą się wszystkie komponenty, których pola place mają wartość myPlace. W tym nasz komponent z aktualnościami.

Modyfikacja oraz dodawanie komunikatów językowych

Każdy komunikat w aplikacji czytelnika jest wyświetlany w formie wielojęzycznej. Oznacza to, że w zależności od wyboru języka strony, komunikat będzie się wyświetlać w innym języku.

Przykład: W stopce chcemy zawrzeć klauzulę: "Wszelkie prawa zastrzeżone".

W pliku /WEB-INF/layout/templates/parts/footer.vm dodajemy nowy wpis

<span class="footer__bottom--text">$res.get('Home.Copyright.clause')</span>

<entry key="Home.Copyright.clause">Wszelkie prawa zastrzeżone</entry>

<entry key="Home.Copyright.clause">All rights reserved</entry>

$res.get('MyComponent.MyInfo')

1. RecommendedComponent"> <place>main</place> <position>4</position> </component> </components> </page>

    

   Musimy pamiętać aby pozostałym komponentom, których miejsce(place) także jest main nadać wyższą pozycję(position) - tak, żeby żaden komponent nie miał tej samej pozycji.

    

2. Na naszej stronie ukaże się pogoda w naszym mieście dla anglojęzycznych gości

   Przykładowy komponent pogody
   Image Added

Usunięcie komponentu z podstrony

Może się zdarzyć, że administrator biblioteki cyfrowej zdecyduje się na usunięcie niektórych komponentów z różnych powodów. Komponent można usunąć w dwojaki sposób:

• poprzez zakomentowanie go w pliku /WEB-INF/pages.xml (bezpieczniej, bo zawze możemy dany komponent przywrócić)
• poprzez usunięcie go z pliku /WEB-INF/pages.xml

Przykład: Decydujemy się na schowanie komponentu z obiektami najpopularniejszymi, które są wyświetlane na stronie głównej, żeby spopularyzować obiekty ostatnio dodane.

1. Otwieramy plik /WEB-INF/pages.xml i szukamy sekcji main zawierającej wyświetlane komponenty na stronie głównej. Okalamy komentarzem <!-- <conponent>...</component> --> komponent PopularEditionsComponent jak w pliku przedstawionym poniżej.

   Code Block
   title pages.xml
   <page name="main" layout="home_layout" inherits="base-page"> <actions> <action name="ChangeLanguageAction"/> <action name="LogoutAction"/> </actions> <components> <component name="pl.psnc.dlibra.web.comp.pages.components.LatestEditionsComponent"> <place>topSplit</place> <position>1</position> </component> <component name="pl.psnc.dlibra.web.comp.pages.components.NewsComponent"> <place>topSplit</place> <position>2</position> </component> <component name="pl.psnc.dlibra.web.comp.pages.components.CollectionsPresentationComponent"> <place>main</place> <position>1</position> </component> <!--<component name="pl.psnc.dlibra.web.comp.pages.components.PopularEditionsComponent"> <place>main</place> <position>3</position> </component>--> <component name="pl.psnc.dlibra.web.comp.pages.components.RecommendedComponent"> <place>main</place> <position>4</position> </component> </components> </page>

Ustawienie komponentu w layoucie

Każdy komponent ma swoje ściśle określone miejsce w layoucie strony. Informację o tym, w którym konkretnie miejscu layoutu znajduje się dany komponent możemy sprawdzić w pliku pages.xml. Tam możemy również wskazać inne miejsce wyświetlania się komponentu.

Przykład: Decydujemy się przenieść komponent z aktualnościami w zupełnie inne miejsce na stronie głównej.

1. Otwieramy plik pages.xml
2. Szukamy sekcji main, w której zawarte są komponenty znajdujące się na stronie głównej.
3. Odczytujemy nazwę layoutu z pola layout. Domyślna nazwa layoutu dla strony ma wartość home_layout.
4. W sekcji main odszukujemy interesujący nas komponent z aktualnościami pl.psnc.dlibra.web.comp.pages.components.NewsComponent, któremu chcemy przypisać nowe położenie w layoucie home_layout. Miejsce dla naszego komponentu z aktualnościami odczytujemy z pola place. Domyślnie będzie to wartość topSplit. Kolejność sprawdzamy w polu position i domyślnie będzie to wartość 2. Pierwszym komponentem wyświetlanym w miejscu topSplit jest komponent z ostatnio dodanymi obiektami.

5. Modyfikujemy wartość pola place wewnątrz danych komponentu pl.psnc.dlibra.web.comp.pages.components.NewsComponent. Wartość place zmieniamy na myPlace, a wartość position zmieniamy na 1.

   Code Block
   language xml title pages.xml
   <component name="pl.psnc.dlibra.web.comp.pages.components.NewsComponent"> <place>myPlace</place> <position>1</position> </component>

6. Otwieramy plik /WEB-INF//layout/templates/home_layout.vm i w nim umieszczamy poniższy kod w dowolnym miejscu.

   Code Block
   language xml title home_layout.vm
   #foreach( $comp in $myPlace) $!{comp.RenderedTemplate} #end

   Spowoduje to, że na stronie głównej wyświetlą się wszystkie komponenty, których pola place mają wartość myPlace. W tym nasz komponent z aktualnościami.

Modyfikacja oraz dodawanie komunikatów językowych

Każdy komunikat w aplikacji czytelnika jest wyświetlany w formie wielojęzycznej. Oznacza to, że w zależności od wyboru języka strony, komunikat będzie się wyświetlać w innym języku.

Przykład: W stopce chcemy zawrzeć klauzulę: "Wszelkie prawa zastrzeżone".

1. Szukamy pliku, w którym umieszczone są informacje na samym dole strony. Analizując plik /WEB-INF/layout/templates/home_layout.vm dowiemy się, że za wyświetlanie stopki jest odpowiedzialny plik /WEB-INF/layout/templates/parts/footer.vm.

2. W pliku /WEB-INF/layout/templates/parts/footer.vm dodajemy nowy wpis

   Code Block
   language xml title footer.vm collapse true
   <span class="footer__bottom--text">$res.get('Home.Copyright.clause')</span>

   
   Odwołanie $res.get('Home.Copyright.clause') będzie wyświetlać naszą klauzulę w różnych językach. Niezbędne jest ich zdefiniowanie.

   
   

3. Otwieramy plik /WEB-INF/layout/resources/layout_pl.xml i dodajemy tłumaczenie dla języka polskiego

   Code Block
   title layout_pl.xml
   <entry key="Home.Copyright.clause">Wszelkie prawa zastrzeżone</entry>

4. Otwieramy plik /WEB-INF/layout/resources/layout_en.xml i dodajemy tłumaczenie dla języka angielskiego

   Code Block
   title layout_en.xml
   <entry key="Home.Copyright.clause">All rights reserved</entry>

5. Komunikaty, które chcielibyśmy wyświetlać w komponentach zapisujemy do plików plików /WEB-INF/components/resources/WEBAPP_{język}.xml. Następnie w plikach komponentów (np. MyComponent.vm) odwołujemy się do tłumaczeń jak poniżej:

   Code Block
   title MyComponent.vm
   $res.get('MyComponent.MyInfo')

Podmiana istniejących obrazków (logo)

Aplikacja czytelnika oprócz obrazków dynamicznych(np. miniaturki obiektów cyfrowych) wyświetla obrazki statyczne(np. logo). Te drugie można wymieniać na swoje. Zaleca się by wymienić obrazki na obrazki o takich samych wymiarach. Jeśli nowe obrazki mają inne wymiary należy przetestować wyświetlanie takiego obrazka w różnych widokach i w różnych przeglądarkach: dla komputera stacjonarnego, tabletu i telefonu komórkowego.

Przykład: Wymieniamy domyślne logo dlibry na własne.

1. W celu dokonania podmiany wystarczy, że namierzymy ścieżkę pod którą leży nasz stary obrazek i na jego miejscu wkleimy inny. Aby sprawdzić ścieżkę do obrazka najlepiej jest się posłużyć przeglądarką Google Chrome.
2. Otwieramy stronę główną naszej biblioteki klikamy prawym przyciskiem myszki w obrazek i z menu kontekstowego i wybieramy zbadaj. Wyświetli się nam okienko z zaznaczonym elementem w kodzie html. Będzie to element img. Sprawdzamy jaką wartość ma atrybut src tego elementu i w ten sposób odczytujemy ścieżkę do pliku na naszym serwerze. Np wartość src="https://moja-biblioteka/style/dlibra/default/img/logos/logo.svg" wskazuje na ścieżkę /sciezka/do/mojej/aplikacji/czytelnika/style/dlibra/default/img/logos/logo.svg

Modyfikacje css

Style, z których korzysta aplikacja czytelnika znajdują się w katalogu /styles/dlibra/default/css/. Istnieje możliwość nadpisania istniejących styli lub dodania nowych. Najopdpowiedniejszym do tego miejscem jest plik /styles/dlibra/default/css/custom.css

Podmiana istniejących obrazków (logo)

Aplikacja czytelnika oprócz obrazków dynamicznych(np. miniaturki obiektów cyfrowych) wyświetla obrazki statyczne(np. logo). Te drugie można wymieniać na swoje. Zaleca się by wymienić obrazki na obrazki o takich samych wymiarach. Jeśli nowe obrazki mają inne wymiary należy przetestować wyświetlanie takiego obrazka w różnych widokach i w różnych przeglądarkach: dla komputera stacjonarnego, tabletu i telefonu komórkowego.

Przykład: Wymieniamy domyślne logo dlibry na własne.

1. W celu dokonania podmiany wystarczy, że namierzymy ścieżkę pod którą leży nasz stary obrazek i na jego miejscu wkleimy inny. Aby sprawdzić ścieżkę do obrazka najlepiej jest się posłużyć przeglądarką Google Chrome.
2. Otwieramy stronę główną naszej biblioteki klikamy prawym przyciskiem myszki w obrazek i z menu kontekstowego i wybieramy zbadaj. Wyświetli się nam okienko z zaznaczonym elementem w kodzie html. Będzie to element img. Sprawdzamy jaką wartość ma atrybut src tego elementu i w ten sposób odczytujemy ścieżkę do pliku na naszym serwerze. Np wartość src="https://moja-biblioteka/style/dlibra/default/img/logos/logo.svg" wskazuje na ścieżkę /sciezka/do/mojej/aplikacji/czytelnika/style/dlibra/default/img/logos/logo.svg

Modyfikacje css

Style, z których korzysta aplikacja czytelnika znajdują się w katalogu /styles/dlibra/default/css/. Istnieje możliwość nadpisania istniejących styli lub dodania nowych. Najopdpowiedniejszym do tego miejscem jest plik /styles/dlibra/default/css/custom.css

Zmiany w szablonach komponentów

Każda strona w aplikacji czytelnika ma swój adres np.:

http://demo.dl.psnc.pl/dlibra - strona główna, sekcja main w pliku pages.xml

 http://demo.dl.psnc.pl/dlibra/publication/1000 - strona publikacji, sekcja publication w pliku pages.xml

 http://demo.dl.psnc.pl/dlibra/contact?q=library - strona kontakty, sekcja contact w pliku pages.xml

Każda z tych stron jest zdefiniowana w pliku pages.xml poprzez sekcję <page>...</page> np.:

<page name="main" layout="home_layout" inherits="base-page"> - strona główna

<page name="publication" layout="home_layout" inherits="base-page"> - strona publikacji

<page name="contact" layout="home_layout" secure="true" inherits="base-page"> - strona kontaktu

gdzie:

pole name - nazwa sekcji,

pole layout - nazwa layoutu na którym umieszczone będą wszystkie komponenty dla danej strony,

pole inherits - abstrakcyjna sekcja, z której dana strona będzie pobierać komponenty oprócz komponentów własnych (np.: Strona kontaktu jest zdefiniowana w sekcji contact. Zawiera komponent ContactComponent, ale pole inherits ma wartość base-page dlatego strona kontaktu będzie zawierać wszystkie komponenty jakie zostały zdefiniowane dla sekcji base-page również).

Komponenty zdefiniowane są znacznikami

<component name="...">
	<place>...</place>
 	<position>...</position>
</component>

gdzie:

znacznik place - nazwa umiejscowienia w layoucie

znacznik position - pozycja, na której ma być umieszczony komponent w zadanym miejscu(place)

W przypadku ustawienia tego samego pola place dla różnych komponentów należy pamiętać, by ustawić im inną wartość position. W przeciwnym razie tylko jeden komponent zostanie wyświetlony. Przykładowo strona kontaktu jest zdefiniowana w sekcji contact. Wykorzystuje layout o nazwie home_layout. Posiada komponent zdefiniowany nasępująco:

<components>
	<component name="pl.psnc.dlibra.web.comp.pages.components.ContactComponent">
		<place>main</place>
			<position>1</position>
	</component>
</components>

To oznacza, zawartość komponentu ContactComponent umiejscowionego w pliku /WEB-INF/components/templates/ContactComponent.vm jest renderowana w pliku /WEB-INF/layouts/templates/home_layout.vm w pętli:

#foreach( $comp in $main)
	$!{comp.RenderedTemplate}
#end

Każdy komponent składa się z trzech elementów:

• klasy Javowej (np. pl.psnc.dlibra.web.comp.pages.components.IndexSearchComponent),
• pliku szablonu(plik szablonu nazywa się tak samo jak klasa Javowa np. IndexSearchComponent.vm),
• plików z różnymi wersjami językowymi (np. IndexSearchComponent_xx.xml).

W wersji 6.0 wszystkie komponenty znajdują się w archiwum dcore-webapp-components-6.x.x.jar (znajduję się on : /WEB-INF/lib). Klasa Javowa znajduję sie w katalogu odpowiadającym jej nazwie pakietowej (w tym wypadku /pl/psnc/dlibra/web/comp/pages/components/ ) natomiast pozostałe pliki komponentu - w głównym katalogu tego archiwum.

Istnieje możliwość "przykrycia" domyślnych plików z archiwum JAR (dcore-webapp-components-6.x.x.jar) własnymi zmienionymi plikami. W tym celu najlepiej wypakować pliki szablonów, które mają być zmienione do odpowiedniego katalogu. W przypadku plików *.vm jest to katalog /WEB-INF/components/templates, natomiast dla plików językowych *.xml jest to katalog /WEB-INF/components/resources.

Tak wypakowane pliki można zmieniać i zmiany w nich "nadpiszą" oryginalną zawartość plików pozostawionych w archiwum jar. Zmiany w plikach *.vm będą widoczne natychmiastowo po ich zapisaniu. Zmiany w plikach *.xml będą uwzględniane również natychmiastowo, pod warunkiem, że pliki te były już wypakowane przy starcie serwera Tomcat.

Dodatkowo w niektórych szablonach komponentów używane są makra, zdefiniowane w pliku components_library.vm lub layout_library.vm. Plik components_library.vm znajduje się w archiwum dcore-web-components-6.x.x.jar. Własne makra oraz zmodyfikowane makra powinny zostać umieszczone adekwatnie w plikach /WEB-INF/components/templates/custom_library.vm lub /WEB-INF/layout/custom_templates/custom_layout_library.vm). Zmiany w tych plikach również powinny być uwzględniane zaraz po ich zapisaniu pod warunkiem, że edytowane przez nas makro było już dostępne przy starcie serwera Tomcat.