Ample i XUL – Programowanie GUI w języku XUL za pomocą darmowego frameworku JavaScript o nazwie Ample

Ample to darmowy i otwarty framework oparty o język JavaScript. Ma bardzo wiele ciekawych możliwości niedostępnych w innych tego typu projektach. Jedną z tych funkcjonalności jest wsparcie dla języka XUL. XUL to zgodny z XML język to opisu interface’u użytkownika stworzony przez firmę Mozilla, który jednak nie zdobył, przynajmniej na razie, większej popularności.

Poniżej zaprezentuje jak umieścić na stronię przykładowy komponent za pomocą XUL. Szerszy opis wszystkim dostępnych komponentów XUL można znaleźć na stronie projektu, w dziele Reference dotyczącym XUL (link: tutaj) lub po ściągnięciu framework’u w folderze z przykładami (./Ample/examples/languages/xul).

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <head>
        <script type="text/javascript" src="ample/runtime-dev.js"></script>
        <script type="text/javascript" src="ample/languages/xul/xul.js"></script>
        <link type="text/css" href="ample/languages/xul/themes/default/style.css" rel="stylesheet"/>
    </head>
 
    <body>
        <script>ample.open()</script>
            <xul:menubar>
                <xul:menu label="File">
                    <xul:menupopup>
                        <xul:menu label="New">
                            <xul:menupopup>
                                <xul:menuitem label="Normal Text" />
                                <xul:menuitem label="HTML Page" />
                            </xul:menupopup>
                        </xul:menu>
                        <xul:menuitem label="Open..." />
                        <xul:menuseparator />
                        <xul:menuitem label="Exit" />
                    </xul:menupopup>
                </xul:menu>
            </xul:menubar>
        <script>ample.close()</script>
    </body>
</html>

W efekcie na stronie pojawi się nam proste menu, które po rozwinięciu wygląda jak poniżej.

Menu w Ample XUL

Przeanalizujmy teraz co powyższy kod zawiera. Po pierwsze linia deklaracji przestrzeni nazw.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Często jest to pomijane w przypadku (X)HTML, ale tutaj nie możemy tego pominąć. Najważniejsza jest druga część tej deklaracji, która mówi, iż przestrzeń xul należy właśnie do języka XUL. Dalej mamy dołączenie wymaganych plików.

<script type="text/javascript" src="ample/runtime-dev.js"></script>
<script type="text/javascript" src="ample/languages/xul/xul.js"></script>
<link type="text/css" href="ample/languages/xul/themes/default/style.css" rel="stylesheet"/>

Dołączamy kolejno główną bibliotekę Ample (tutaj w wersji deweloperskiej – jest jeszcze zwykła bez sufiksu -dev), plugin do obsługi języka XUL oraz styl CSS dekorujący elementy XUL. Dalej mamy tag otwierający i zamykający definicję w XUL.

<script>ample.open()</script>
<script>ample.close()</script>

Jest to jedna z 3 metod dołączania definicji interface’u XUL. Pozostałe są opisane na stronie projektu w dziale Tutorials (link: tutaj). Ta metoda jest preferowana ze względu na możliwość indeksowania SEO. W końcu, mam też sam GUI opisany w XUL. Najpierw deklaracja całego paska menu.

<xul:menubar>
</xul:menubar>

W pasku menu możemy umieszczać poszczególne rozwijane menu. Tutaj jedno o nazwie File.

<xul:menubar>
    <xul:menu label="File">
    </xul:menu>
</xul:menubar>

W owym menu umieszczamy element, który ma się rozwinąć po kliknięciu w menu.

<xul:menubar>
    <xul:menu label="File">
        <xul:menupopup>
        </xul:menupopup>
    </xul:menu>
</xul:menubar>

Wewnątrz tego elementu umieszczamy kolejne pozycje – ewentualnie rozdzielone separatorem.

<xul:menubar>
    <xul:menu label="File">
        <xul:menupopup>
            <xul:menuitem label="Open..." />
            <xul:menuseparator />
            <xul:menuitem label="Exit" />
        </xul:menupopup>
    </xul:menu>
</xul:menubar>

Możemy również zagnieździć menu, tak aby pozycja w menu rozwijała się w kolejne menu. Tutaj takie zagnieżdżone menu ma nazwę New i zawiera rozwijany element, który to zawiera dwie pozycje.

<xul:menubar>
    <xul:menu label="File">
        <xul:menupopup>
            <xul:menu label="New">
                <xul:menupopup>
                    <xul:menuitem label="Normal Text" />
                    <xul:menuitem label="HTML Page" />
                </xul:menupopup>
            </xul:menu>
            <xul:menuitem label="Open..." />
            <xul:menuseparator />
            <xul:menuitem label="Exit" />
        </xul:menupopup>
    </xul:menu>
</xul:menubar>