DHTMLX to biblioteka widgetów GUI JavaScript, która służy do tworzenia dynamicznych aplikacji sieciowych. Udostępniana jest na licencji GNU General Public License oraz na komercyjnych. Architektura jej jest modułowa co oznacza, że pozwala na używanie oddzielnych elementów lub na łączenie ich w jeden plik JavaScript.
Charakteryzuje się wspomnianą strukturą modułową. Oznacza to, że każdy składnik jest oddzielną i samowystarczalną jednostką, które mogą być stosowane samodzielnie tak by zapewnić określoną część aplikacji, przykładowo: wybór daty czy menu katalogów. Dzieje się tak pomimo tego, że elementy interfejsu API pozwalają na organizowanie ich we wspólnym układzie wspomnianego interfejsu. Cała kolorystyka interfejsu i jej komponenty mogą być dostosowywane za pomocą SkinBuilder, który odpowiada za generowanie niezbędnych plików CSS oraz obrazów. Biblioteka znajduje się zupełnie po stronie klienta. Może być zatem używana z dowolnym językiem back-endu czy bazą danych.
Biblioteka udostępnia ponad 20 konfigurowalnych widgetów, które pomagają proramistom budować różnego rodzaju interfejsy oraz profesjonalnie prezentować dane. Istnieje wiele elementów sterujących i ciekawych funkcji, które sprawiają, że aplikacje są przyjazne dla użytkownika. Możemy wymienić:
- dynamiczne wykresy JavaScript;
- komponenty złożone i makro - ułatwiają programistom osiągnięcie pewnego celu znacznie łatwiejszego, komponenty makro zawierają bogatą funkcjonalność wyboru i są przydatne do pracy z dużymi zbiorami danych i systemami plików (np. Gantt, DataSelector, Arkusz SpreadSheet, Planista);
- rozwiązania po stronie serwera – służą do ładowania i zapisywania danych w programach Java, .Net, PHP (np. magazyn danych, procesor danych, zimna fuzja);
- komponenty nawigacyjne - pozwalają użytkownikowi tworzenie na nich elementów umożliwiających nawigację np. menu czy karty, oprócz tego zapewniają przekierowanie do powiązanych stron lub wykonywanie określonych czynności na danych i elementach (np. pasek boczny, pasek narzędzi, menu, faborek);
- komponenty danych - umożliwiają wyświetlanie danych na określonym typie na stronie, dodatkowo zarządzają przestrzenią przeznaczoną na ich dane i zapewniają funkcjonalność dostępu i konfiguracji (np. wykres, DataView, TreeGird, TreeView, krata, lista);
- układy- odpowiadają za poprawną organizację strony internetowej i definiują ogólny wygląd, możemy dzięki nim organizować treść w kolumnach i wierszach poprzez dzielenie ich na grupy oraz jednoczesne sterowanie przez nawigację lub animację (np. akordeon, karuzela, tabulator, popup);
- elementy zorientowane na formę – to takie elementy, które zapewniają przydatne narzędzia do tworzenia i przetwarzania form oraz interakcji z użytkownikami (np. redaktor, formularz, suwak, Combo, kalendarz, narzędzie do wybierania koloru).
Przykładowy kod w DHTMLX
DHTMLX Przykład #1
/** index.html file */
<script>
dhtmlxEvent(window,"load",function(){
var layout = new dhtmlXLayoutObject(document.body,"2U");
layout.cells("a").setText("Contacts");
layout.cells("b").setText("Contact Details");
layout.cells("b").setWidth(500);
var menu = layout.attachMenu();
});
menu.setIconsPath("icons/");
menu.loadStruct("data/menu.xml");
</script>
/** menu.xml file */
<?xml version="1.0"?>
<menu>
<item id="fTop" text="File"> //1st item
<item id="ftNWin" text="New Window"/> //1 sub-item
<item id="ftPrint" text="Print" enabled="false" imgdis="printer.png"/>
<item id="fts0" type="separator"/>//'separator' splits level in 2 parts
<item id="ftQuit" text="Quit"/>
</item>
<item id="eTop" text="Edit" enabled="false"/> //2nd item
<item id="hTop" text="Help" enabled="false"/> //3rd item
</menu>
DHTMLX Przykład #2
/** index.html file */
<script>
dhtmlxEvent(window,"load",function(){
var layout = new dhtmlXLayoutObject(document.body,"2U");
layout.cells("a").setText("Contacts");
layout.cells("b").setText("Contact Details");
layout.cells("b").setWidth(500);
var menu = layout.attachMenu();
menu.setIconsPath("icons/");
menu.loadStruct("data/menu.xml");
var toolbar = layout.attachToolbar();
});
toolbar.setIconsPath("icons/");
toolbar.loadStruct("data/toolbar.xml");
</script>
/** toolbar.xml file */
<?xml version="1.0"?>
<toolbar>
<item id="newContact" type="button" img="add_contact.gif"/>
<item id="delContact" type="button" text="Delete" img="delete_contact.gif"/>
<item id="sep01" type="separator"/>
<item id="help" type="button" text="Help"/>
</toolbar>