Pavel Krivanek has published details of a project he's been working on: SeasideXUL, which uses the Mozilla Foundation's XULRunner and Ajax, with Seaside providing the muscle, and allows developers to create applications with a native look and feel.

Pavel has already used the framework to wrap the OmniBrowser suite of development tools, so allowing Squeak development to take place in the host environment.

The code is downloadable from SqueakSource, and a pre-built image has also been made available which includes the OmniBrowser integration. Pavel has also published a set of screenshots of the "Periodic Table" sample application demonstrating the capabilities of SeasideXUL.

Apparently XUL trees don't have any event handler to intercept scrolling operations so I run the risk to became crazy.

After days spent to find a solution (using google) without result I've tried to use the DOMAttrModified event and amazingly it worked.

First I add a listener to the tree (VisualDiffer adds listeners to left and right trees)

document.getElementById("left-tree").addEventListener("DOMAttrModified",
function(event) { gFolderDiffer.onLeftScroll(event);}, false);

The onScroll simply checks if event.attrName is "curpos" and if it's true the tree has been scrolled by user

onLeftScroll : function(event) { if (event.attrName == "curpos") {
rightTreeView.treebox.scrollToRow(leftTreeView.treebox.getFirstVisibleRow());
}
}

This solution works fine but maybe exists a better way...

I've created MoreKomodo (the original name was UltraKomodo :P ) to add to KomodoEdit the UltraEdit features I need.

Folders and files comparison tools under Gnome are poor so I've decided to create my own differ application based on KomodoEdit for at least three reasons

KomodoEdit is open source

KomodoEdit is XUL based so I can develop re-using my know-how

KomodoEdit is multiplatform (thanks to Mozilla Gecko Engine)

Finally I've finished the first stable version of VisualDiffer, it misses many features but I hope to add them.

Na dołączonej płycie DVD znajdziemy CoreWars oraz dystrybucję Mandriva 2008 Free.

Multimedia w systemie Ola!Dom 6.06
Krzysztof Lichota pokaże, że edycja plików wideo wcale nie jest taka skomplikowana, jak się powszechnie uważa. Razem z artykułem, użytkownik zgra film z płyty, zmieni napisy i język ścieżki dźwiękowej oraz nagra tak przygotowany plik na płytę.

Przegląd systemów zarządzania treścią
Ciężko sobie wyobrazić administrację strony bez CMS'a. Ta publikacja, autorstwa Przemysława Żarneckiego, jest porównaniem ogólnie dostępnych w sieci tego typu systemów. Przedstawia, między innymi PHP Nuke, ThePortal, Xoops i Mambo.

Undervolting pod Linuksem
Tekst przedstawia pojęcie undervoltingu oraz opis uruchomienia go w systemach Linux. Autor artykułu dogłębnie poruszył temat i napisał obszerny poradnik. Czytelnik nie będzie miał problemu z całym procesem.

Opera - idealne połączenie
Jest to publikacja opisująca znaną przeglądarkę internetową - Operę. Autor jednak skupił się na wbudowanym kliencie pocztowym. Pokazał siłę Opera Mail Client (M2), dzięki czemu produkt norweskiej firmy jest potężnym narzędziem do codziennej pracy.

Pozostałe artykuły:

• ClawsMail
• XUL- wieloplatformowy język opisu interfejsu użytkownika, cz.2.
• Scalix - migracja z MS Exchange
• Wojny rdzeniowe
• Warzone 2100 Resurection - strategia czasu rzeczywistego

• XULRunner, Getting Started with XULRunner
• Flickr Uploader, Video

On the same note, if you require a packager, NSIS is the leading choice!!

Many users tell me to add a simple feature, exclude cells having style display: none.

The solution is so straightforward that I could not believe after initial implementation.

You can style an element using CSS selectors

.invisible {
display: none;
}

<span id="invisibleSpan" class="invisible">I'm invisible man</span>

or using the attribute style attribute

<span id="invisibleSpan" style="display : none">I'm invisible man</span>

These two ways can both simply handled using getComputedStyle

var spanElement = document.getElementById("invisibleSpan");
var style = spanElement.ownerDocument.defaultView.getComputedStyle(spanElement, null);
var displayValue = style.getPropertyValue("display");

That's all folks!!

Obviously you can use any CSS attribute not only display.

Pay attention to ownerDocument.defaultView, you should use window.getComputedStyle() but under XUL this doesn't return what you expect.

getComputedStyle can be used in normal unprivileged HTML code, too.

getComputedStyle is a W3C standard and is present on Internet Explorer, Opera and Safari, too.

Little things make developer life easier.

همان طور که می دانید نرم افزارهای امروزی به دلیل رشد سریع پیشرفت های نرم افزاری از یک طرف و تقاضای روز افزون کاربران جهت ارائه ویژگی های جدید از جانب تولید گنندگان نرم افزار، آماج تغییرات زیادی هستند. بنابراین در این بین باید راه حلی جهت حل مقطعی یا دائمی وجود داشته باشد. این راه حل فراهم آوردن امکاناتی از جانب تولید کنندگان اصلی نرم افزار برای کاربران است که طی آن بتوانند به نیاز های خود پاسخ گویند و خود بتوانند قابلیت های برنامه را توسعه دهند. به بیان دیگر می توان از این امکان استفاده نمود و بسته هایی را جهت توسعه برنامه اصلی تولید نمود. عمدتا از این بسته ها تحت عنواین Plug-In، Add-On، Add-In، Extension و... یاد می شود که در رابطه با فایر فاکس بسته های توسعه دهنده به صورت زیر تعریف می شوند:

Extension: افزودنی های کوچکی هستند که قابلیت های فایر فاکس یا Thunderbird را افزایش می دهند. این افزودنی ها می توانند هر چیزی از نوار های ابزار گرفته تا یک ویژگی کاملا جدید را به بدنه برنامه های مذکور اضاف نمایند.

Plug-In: Plug-In ها نیز برنامه هایی هستند جهت افزودن قابلیت های مرورگر فایرفاکس تا مرورگر بتواند محتویات خاصی همچون ویدئو، موسیقی و بازی را عرضه کند. مثالی از این دست فلش پلیر شرکت Adobe ، اکروبات ریدر و نرم افزار ماشین مجازی از شرکت سان است.

Theme: توسط Theme ها می توان ظاهر برنامه های ساخت بنیاد موزیلا را تغییر داد. این به معنی گرافیک و رنگ های جدید می باشد.

در این مقاله تمرکز ما بر روی Extension ها می باشد. حال اجازه دهید تا نگاهی مختصر به چگونگی ساخت این Extension ها داشته باشیم. Extension ها در فایر فاکس توسط زبان Javascript نوشته می شوند. زبانی که این روزها بسیار مورد توجه واقع شده است.

Extension های فایرفاکس به صورت فایل های Zip یا بسته هایی با پسوند XPI (زیپی تلفظ می شود) منتشر می شوند. محتویات در این بسته ها به ترتیب خاصی قرار می گیرند که لازم است این ترتیب به هنگام ساخت Extension های جدید رعایت شود. در ابتدا و به طور کلی این مرحله از کار صرف مهیا سازی محیط توسعه می شود که اولین گام جدی در تولید Extension ها می باشد. برنامه های نوشته شده باید بر طبق این ساختار در بسته قرار گیرند. گام بعدی تولید فایل Install Manifest است. در این فایل، توسعه دهنده بایستی اقدام به درج خصوصیات Extension خود نماید. برای این کار شیوه ای از پیش تعیین شده وجود دارد که مشخص می کند خصوصیات چگونه باید درج شوند. در حقیقت عملیات این مرحله به شناسایی Extension توسط مرورگر فایر فاکس کمک می کند. همان طور که مشخص است اکثرا Extension ها دارای واسط گرافیکی مختص خود هستند که به هنگام نصب یا استفاده از آنها در مرورگر فایر فاکس نمایان می شود. بنابراین باید به هنگام تولید Extension ها واسط مورد نیاز را تهیه کنیم. این کار توسط زبان XUL ( بخوانید زول ) امکان پذیر است.

XUL سر نام عبارت XML User Interface Language است که یک زبان نشانه گذاری واسط کاربر ( User Interface) است. این زبان جهت پشتیبانی از برنامه های ساخت بنیاد موزیلا همانند فایرفاکس و Thunderbird توسعه داده شده است. همانند XIML و 1 UIML این زبان کاربردی از XML است که رابط کاربری را توصیف می کند. از آنجاییکه XUL یک استاندارد عمومی نمی باشد، از دسته ای از استاندارد ها و فن آوری های موجود شامل CSS، Javascript، 2DTD و 3RDF تشکیل شده است که نسبتا فراگیری این تکنیک را برای برنامه نویسانی که دارای تجاربی در امر طراحی وب هستند آسان می کند. شایان ذکر است که خود رابط کاربری مرورگر فایرفاکس توسط این زبان نوشته شده است. در این مرحله قسمت های (Widget ها) مورد نیاز توسط افزودن بلوکی حاوی عناصر مربوط به همراه کنترلگر های رویداد صورت می پذیرد. جهت مشاهده یک نمونه عملی می توانید از مسیر نصب مرورگر فایر فاکس و از پوشه chrome فایل browser.jar را با کمک برنامه WinRAR از حالت فشرده خارج نموده و توسط یک ویرایشگر متن اقدام به مشاهده ساختار فایل browser.xul نمایید. ساختار گرافیکی فایر فاکس در این فایل توصیف شده است. این فایل به گونه ای سازمان یافته است که بتواند تغییرات لازم را در رابط کاربری ، حتی در زمان اجرا اعمال نماید.

بسته های حاوی عناصر تشکیل دهنده رابط کاربری فایرفاکس تحت نام chrome package معرفی می شوند. بنابراین فایل های مبتنی بر زبان XUL نیز جزئی از این بسته می باشد. در همین راستا به دلیل متغیر بودن محل نصب فایر فاکس در سیستم های مختلف توسعه دهندگان موزیلا تصمیم گرفتند که از URI ها ( در اینجا chrome://) سود جویند. پس از اینکه بسته chrome آماده شد نوبت به ثبت آن می رسد. منظور از ثبت فرآیندی است که طی آن به مرورگر اعلام می کنیم که رابط کاربری Extension را شناسایی کند.

در ادامه اقدام به تست Extension خود می نماییم تا از بابت عملکرد صحیح آن اطمینان یابیم. این کار را از طریق ایجاد چندین فایل به خصوص در پوشه Extension که خود در پوشه profile واقع شده است، انجام می شود. بدین ترتیب فایرفاکس پس از اولین اجرا بعد از عملیات مذکور، Extension را یافته و اقدام به نصب آن می کند. اما این هنوز پایان کار نیست و نباید تصور کرد که Extension آماده انتشار است. حال که از بابت عملکرد صحیح Extension مطمئن شدیم نوبت به ایجاد بسته نهایی جهت انتشار می رسد. بسته نهایی با زیپ کردن محتویات ساخته شده بر اساس چیدمانی که در ابتدای این بحث مطرح شد انجام می پذیرد. سپس به راحتی با تغییر نام بسته پسوند آن را با xpi جایگزین می کنیم. حالا بسته شما آماده انتشار است. توضیحات ارائه شده در این بخش تنها شرحی کلی بر چگونگی ساخت Extension های مرورگر فایرفاکس بود. جهت مطالعه جزئیات بیشتر می توانید به آدرس developer.mozilla.org/en/doc/extensions مراجعه کنید. باید گفت که درصد قابل توجهی از Extension های ارائه شده از جانب توسعه دهندگان آنچنان پیچیده نیست که این می تواند سبب ایجاد انگیزه برای توسعه دهندگان نو پا شود تا به جمع توسعه دهندگان موزیلا بپیوندند.

اما پس از بررسی اجمالی نحوه ساخت Extension برای فایرفاکس اجازه دهید به چند Extension برتر بیاندازیم. معیار این برتری آمار دریافت ها و نرخ برتری آنهاست. جدول زیر لیست 10 Extension برتر ارائه شده در سایت رسمی برنامه فایرفاکس به همراه شرح مختصری پیرامون آنها را نشان می دهد. لازم به ذکر است که جهت حذف و یا مشاهده خصوصیات Extension ها و تنظیم آنها می توانید از منوی Tools برنامه فایرفاکس گزینه Extensions را برگزینید. چنانچه هیچ Extension ی را نصب نکرده باشید ممکن است پس بازگشایی پنجره Extension تنها با DOM Inspector که یک کاوشگر جهت کنکاش در ساختار شی ای (DOM) اسناد بارگذاری شده است، مواجه شوید. این Extesnsion خود ابزاری بسیار مفید برای توسعه دهندگان وب می باشد.

برخی از افزودنی ( Extension ) های مشهور فایرفاکس

Flashgot

ابزاری جهت دریافت سریع و متجمع محتویات سایت هاست. این Extension دارای ویژگی جالب توجه جهت تولید گالری های چند رسانه ای می باشد.

Noscript

این بسته قابلیت های حفاظتی اضافی را برای فایرفاکس به ارمغان می آورد. این بسته به شما امکان می دهد تا اجرای محتویات وابسته به یک زبان اسکریپتی از قبیل Javascript را تحت کنترل خود در آورد و به عبارتی با سفارشی سازی مانع از بروز مشکلات امنیتی شوید.

Fasterfox

این Extension را می توان جهت افزایش کارایی فایرفاکس به کاربرد. این بسته با در اختیار گذاشتن ابزارهایی جهت دست کاری ویژگی هایی از قبیل DNS Cache ، Pipelining و... می تواند بسیار مورد توجه کاربران حرفه ای واقع شود.

Adblock

این بسته جهت بلوکه کردن محتویات ناخواسته تبلیغاتی مورد استفاده قرار می گیرد.

downTHEMall

این بسته به عنوان جایگزینی برای برنامه های مدیریت دانلود ارائه شده و به ادعای سازندگان آن می تواند سرعت دریافت را تا 600% افزایش دهد!

Tabbrowser Preferences

این بسته ویژگی های بیشتری را برای قابلیت Tab browsing مرورگر ارائه می دهد.

IE Tab

این بسته امکان الحاق مرورگر IE به درون مرورگر فایرفاکس را با هدف افزودن ویژگی Tab browsing فراهم می سازد.

Forecastfox

از این ابزار می توان جهت اطلاع یافتن از وضع آب و هوای نقاط مختلف جهان استفاده نمود.

Tabmix Plus

از این بسته ارزشمند می توان جهت افزودن قابلیت های بیشتری به ویژگی Tab Browsing مرورگر فایر فاکس استفاده نمود. توسط این Extension می توان از Tab های موجود نمونه برداری کرد و یا رفتار آنها را کنترل کرده و یا Tab های بسته شده را مجددا باز (Undo) نمود. در این بسته همچنین قسمتی جهت مدیریت Sessionها ارائه شده است که از آن می توان برای بازیابی وضعیت اولیه پس از Crash شدن مرورگر سود جست.

PDF Download

به هنگام مواجهه با فایل های PDF امکان انتخاب اینکه ایا فایل PDF درون خود فایرفاکس یا برنامه خارجی مورد استفاده جهت خواندن فایل PDF باز شود را در اختیار کاربر قرار می دهد.
منبع:
developer.mozilla.org/en/doc/extensions

.my-textbox {
background-color: red;
}

If you want to make same thing for XUL textboxes you apply the same style attribute discovering it doesn't work... :(

Ehm.. It works but you must disable standard mozilla behaviour using -moz-appearance attribute

.my-textbox {
-moz-appearance: none;
background-color: red;
}

Little lesson learned ;)

One of the first problems I came up against when developing Bxs came to light when I was figuring out how to build editable XUL listboxes for given MySQL tables dynamically at application startup, and then share information between them as they were building and after they were built.

Example: I have a table describing a list of exhibitions, each row having the usual stuff like title, dates etc., and also a field for the exhibition venue, which is a 'has-one' relationship to another table. I want the exhibitions listbox to display not the id number of the relevant venue, but the name of the venue and the city it's located in. I want the app, as it's booting up, to recognise that the given field relates to another table, check if the listbox for that table has built itself yet, and if so, to grab the relevant details from that listbox. If the related listbox hasn't built, the requesting table tells it to build, waits until it's built, etc.

The problem is: how do I tell the exhibitions listbox when the venues listbox has built?

The way I did it was using object.watch(). Here's the implementation:

when = function(obj,prop,fn) {
    if (obj[prop] && obj[prop] !== undefined) {
        return fn();
    }

    if (!obj.deferredFunctions) {
        obj.deferredFunctions = {};
    }
    if (!obj.deferredFunctions[prop]) {
        obj.deferredFunctions[prop] = [];
    }
    obj.deferredFunctions[prop].push(fn);

    var ready = function(newVal) {
        obj.unwatch(prop);
        obj[prop] = newVal;

        obj.deferredFunctions[prop].forEach(function(el,idx,arr) {
            var _fn = el;
            arr[idx] = null;
            return _fn();
        });

        delete obj.deferredFunctions[prop];
        return obj[prop];
    }

    obj.watch(prop,function(myProp,oldVal,newVal) {
        if (newVal !== undefined) {
            return ready(newVal);
        }
    });

};

/* Example pseudo-code: */
when(listbox.venues,'ready',function() { listbox.exhibitions.updateLabels(); });

The big problem with this implementation is that it can't return a value unless the prop you're waiting for is already set when you call when(). But I'm fairly proud of it. It has a nice natural calling syntax and gets a lot of stuff done in not much code.

It's too simple to discuss the snippet, leave the code speaks itself

function selectionToHTMLSource()  {
    var sel = document.commandDispatcher.focusedWindow.getSelection();
    if (sel.rangeCount < 1) {
        return "";
    }

    var node = sel.getRangeAt(0).cloneContents();
    var xmlStr = new XMLSerializer().serializeToString(node);
    return xmlStr;
}

The code handles single selection, if you need to work with multiple selections like tables rows/cells take a look at Table2Clipboard

Un projet de dance flour pour les bas quartiers de Maribor.

Pour l'équinoxe républicaine, la corporation s'invite au 108 rue de Bourgogne.

I've asked help on Mozilla IRC and after about an hour the mistery was revealed.

The innocent CSS declaration shown below works fine on Firefox 2

.menuitem-image-center {
-moz-binding: url('chrome://morekomodo/content/bindings/menu.xml#menuitemImageCenterBinding');
}

but requires a little modification on Firefox 3 beta 5pre (at this time the latest available)

.menuitem-image-center {
-moz-binding: url('chrome://morekomodo/content/bindings/menu.xml#menuitemImageCenterBinding')
!important;
}

You must notice the selector without !important attribute works on Firefox 3 when applied on menus different from browser context menu.

I suspect the browser context menu should have some special treatment on new Firefox...

Gnome e Mozilla hanno annunciato che aumenteranno la loro collaborazione per migliorare il supporto agli sviluppatori e l'esperienza degli utenti di applicazioni desktop Gnu/Linux. La partnership si basa su tre punti principali:

La fondazione Mozilla si unirà al gruppo di sviluppo della Gnome Faundation, per aiutarlo ad impostare le direttive a lungo termine del progetto

Mozilla riafferma l'impegno ad aumentare l'integrazione con Gnome, per lo sviluppo di Xul e di Mozilla Firefox

Mozilla annuncia che devolverà $10.000 a Gnome, per il miglioramento dell'accessibilità del desktop Gnome tramite il "GNOME Outreach Program: Accessibility"

" ...continueremo a lavorare con GNOME per accertarci che gli utenti Firefox e Mozilla abbiano, sulle piattaforme Gnome, la migliore esperienza possibile " ha dichiarato Chris Blizzard, membro della Mozilla Corporation. Anche da casa Gnome giungono entusiastiche dichiarazioni. Questa collaborazione viene in contro alle necessità di tutti gli utenti Gnu/Linux, speriamo che le cose procedano per il verso giusto; le basi ci sono.

Ecco il comunicato ufficiale.

1. La Fundación Mozilla se unirá al comité de asesores de la Fundación GNOME, ayudando a fijar la dirección a largo de este último proyecto.

2. Mozilla reafirma su compromiso de integrar la plataforma de desarrollo XUL con la plataforma de GNOME.

3. La Fundación Mozilla anuncia la consesión de U$S 10.000 a la Fundación GNOME para ser gastados en mejorar la accesibilidad del escritorio GNOME bajo el programa GNOME Outreach Program: Accessibility.

"GNOME y GTK+ han sido nuestro entorno de elección durante años. A medida que nos movemos de los escritorios a un mercado móvil, continuaremos trabajando con GNOME para asegurar que los usuarios de Mozilla y Firefox tengan la mejor experiencia posible", dijo el evangelista de Mozilla Chris Blizzard.

• Fuente: VivaLinux.

• Bruksela jest fajna.
• Takoż i źarcie w La Boussole i Le Roy d'Espagne. W tej drugiej knajpie polecam "karbonadę po flamandzku na piwie Leff Brune". Ponadto jeśli ktoś ma mało czasu, a chce przejść przyspieszony kurs belgijskiego piwa - za osiem euro z hakiem ww "Królu Hiszpanii" dostanie "palette degustation", czyli 5 malutkich (0,1 l.) piw, każde innego rodzaju. Wiedziałem, że Leff jest całkiem niezłe, teraz okazało się, że i Hoegaarden również. :)
• Brytyjski lumpenproletariat wieczorami w Brukseli zachowuje się równie kulturalnie jak w Krakowie.
• FOSDEM rośnie. Wprawdzie w tym roku nie było Richarda Stallmana (2006), ani sensacji pod tytułem "Java na GPL!" (2007), a "opening keynote" poświęcona była Linuksowi w Hollywood, za to sale poszczególnych projektów F/LOSS pękały w szwach. Problem gandalfa - za dużo interesujących sesji jednocześnie - nie był tylko jego problemem.
• W głównej sali jakieś 30% laptopów stanowiły MacBooki - białe, czarne i "Pro". Rok temu ilość iBooków i MacBooków łącznie w głównej sali nie przekraczała 10%.
• Spod Mac OS X wyświetlane były prezentacje w sali głównej - przynajmniej te, które widziałem: dwa początkowe wykłady (Linux w Hollywood, patenty) i "endgame".  Podobnie - wszystkie prezentacje (poza jedną, Roberta Kaisera) w sali Mozilli. Zdecydowana większość w Apple Keynote, niektóre w S5 pod Firefoksem lub SeaMonkey. Nie zauważyłem nic w OpenOffice...
• O tym, że sala Mozilli w sobotę zamieniła się w saunę, wiecie już, jeśli przeczytaliście post Huberta... :)
• "Mozilla is going mobile and this time we mean it!". Firefox Mobile będzie dostępny dla Linuksa, Windows CE (czy jak to-to się teraz zwie) i być może również Symbiana. Nie jest jasna przyszłość Firefoksa Mobile na iPhonie/iPodzie touch, jako że SDK do iPhone'a wciąż pozostaje zagadką.
• Tenże Firefox Mobile powstanie na bazie XULRunnera. W przeciwieństwie do śp. Minimo będzie więc zawierał interfejs zbudowany w XUL i będzie obsługiwał rozszerzenia. Tak więc możecie się spodziewać, że np. AdBlocka i GreaseMonkey odpalicie na smartfonie. :)
• Mozilla Prism (dawniej "WebRunner") - dzięki niej można zbudować przeglądarkę przeznaczoną dla jednej konkretnej witryny (czy raczej: aplikacji webowej). Nie przerabiaj swojej aplikacji webowej na desktopową, zrób sobie tylko do niej w trzy minuty własną przeglądarkę. Jeśli ten projekt wejdzie w stadium 1.0 w rozsądnym terminie, klepanie czegokolwiek pod Adobe AIR będzie tylko stratą czasu.
• Mozilla Weave - czyli profil przeglądarki dostępny zdalnie, za to szyfrowany po stronie klienta, dzięki czemu zachowana zostaje prywatność. Eksperymentalny projekt Mozilla Labs.
• Miro - czyli społecznościowa konkurencja dla Joosta. Kolejne świetne zastosowanie XULRunnera.
• Polska rośnie w siłę. Przynajmniej jeśli chodzi o liczbę użytkowników Firefoksa.
• Mozilla.org skończyła 10 lat, z której to okazji zaproszono nas na kręgle. :)
• Ha, w końcu udało mi się wziąć na chwilę w łapska OLPC. :)
• I Eee PC też, do tego z OpenSolarisem na pokładzie.

No i to by było na tyle. ;-)

Aha, tutaj są zdjęcia. Nie ma ich wiele, bo straciłem cierpliwość do mojego aparatu...

PS. Thanks to Mozilla Foundation and Mozilla Europe (especially to Anne-Julie and Pascal) for sponsoring our trip. :)

A couple of years (!) later I had something like that working pretty well, built using PHP (on top of the Zend Platform, eventually) on the server side and Mozilla's XUL on the client side.

I looked at a bunch of different stuff before settling on XUL (n.b., this was pre-AIR/Apollo), including the nascent widget engines (YUI Ext etc.) that were starting to appear at the time. I settled on XUL because it was there, fairly mature, fairly well-documented and available cross-platform via the Mozilla browsers.

Another note: this is 'remote' XUL I'm talking about. The app isn't a Firefox plugin -- all the code is stored on the server and delivered to the browser on login to the system.

In the next few posts I'll start to detail some of the issues I came up against building the thing, and some of the solutions I found. 

DWR calls are typically dispatched from a JavaScript/JScript program running in a Web browser such as Mozilla Firefox or Microsoft's Internet Explorer, but since all Mozilla products are built upon the Gecko layout engine and XUL (which are programmed using JavaScript modules), you can leverage DWR to dispatch remote calls from e.g. a Mozilla Thunderbird extension just as easily. Integrating DWR into a XUL based extension is actually pretty straight forward, but there are couple of subtleties to be aware of.

I will hereafter assume that a Web application called 'MyWebApp' has been deployed on localhost port 8080, that it's up and running, that it exposes an interface called 'MyService' via DWR. Refer to the DWR documentation if you are unsure how to do that. It is further assumed that the DWR servlet is reached at dwr/ relative to the base URL. All following code examples refer to DWR version 1.1, which unfortunately has already been superseded by version 2.x at the time of this writing. If required at all, changing the code to run with newer versions of DWR should be easy enough however.

In order for your XUL component to be able to access `MyService', add the following lines to your XUL file (e.g. myOverlay.xul):

<script type="application/x-javascript"
    src="http://localhost:8080/MyWebApp/dwr/engine.js"/>

<script type="application/x-javascript"
    src="http://localhost:8080/MyWebApp/dwr/util.js"/>

<script type="application/x-javascript"
    src="http://localhost:8080/MyWebApp/dwr/interface/MyService.js"/>

Don't go looking for MyService.js in your file system, it's not there. DWR will take care of dynamically creating it once your client requests it from the server. You can find both engine.js and util.js in the dwr.jar file which should reside at WEB-INF/lib of your deployed Web application.

Now you're already prepared to invoke your service. However, when run outside a Web browser, as is the case with e.g. a Thunderbird extension, there is a catch: DWR won't correctly resolve the target URL for your server, because it operates on relative URLs by default. You can fix that problem by modifying the MyService._path variable, which was auto-generated by DWR. Ponder the example program below, which invokes MyService.service() from a JavaScript program running in a Thunderbird extension:

function callService() {

    MyService._path = "http://localhost:8080/MyWebApp/dwr";

    MyService.service({
        callback: function(returnData) {
            // perform logic
        },

        errorHandler: function(error) {
            // handle error
        }
    });
}

That's it basically; of course you may want to add additional call variables or use another invocation style altogether, but you get the idea.

You should basically do two things: One, reconfigure Thunderbird to be more developer-friendly, and two, install some cool extensions.

First, I recommend installing the following plugins:

1. ChromEdit Plus - allows for easy access to your configuration files. Works in Firefox, too.
2. Venkman - A JavaScript debugger. Must have. For Firefox, I recommend Firebug instead.
3. Console² - An advanced error console. Can interpret JavaScript commands on-the-fly.
4. Chrome List - Lets you inspect chrome packages of all installed components. It's somewhat buggy for me though, sometimes the contents of XUL files are not displayed in the viewer.

With these plugins installed, you already have a solid basis to built your hacking on.

Now to the configuration. You can do this with ChromEdit now, or if you haven't installed it, fall back to your favorite text editor. Open the ChromEdit Plus menu, select ChromEdit and navigate to the 'user.js' tab. From here you can edit your 'user.js' file located in your profile folder (on Linux, it's in your home directory, on Windows, it's in 'Documents and Settings/<username>/Application Data/Thunderbird/Profiles/<long_UUID>' ). If it does not yet exist, and it doesn't by default, go ahead and create it). Add the following lines (it's a JavaScript file, so it's simply JavaScript syntax):

user_pref("javascript.options.showInConsole", true);
user_pref("nglayout.debug.disable_xul_cache", true);
user_pref("browser.dom.window.dump.enabled", true);
user_pref("javascript.options.strict", true);

The following explanations are taken from the MDC:

• javascript.options.showInConsole = true. Logs errors in chrome files to the Error Console.
• nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're using directories rather than JARs. Changes to XUL overlays will still require reloading of the document overlaid.
• browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. See window.dump for more info. You can also use nsIConsoleService from privileged script.
• javascript.options.strict = true. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with Console².

In order for the Thunderbird standard console to appear, run Thunderbird with the '-console' command line argument. The dumped statements won't appear in Console² though.

You may also want to refer to Setting up extension development environment on MDC as a primer, I particularly recommend the steps outlined for externalizing your development files into a separate folder, so you won`t have to reinstall the plugin each time you change a line of code.

So here is the way to create standalone XUL application using XULRunner runtime (its like JRE, java runtime that is used to run JAVA application but here), its required to run XUL applications. Songbird is already utilizing the power of XULRunner and XUL and Miro is catching up.

The link to whole example zipped up is HERE

Here is the step by step procedure to set up XULRunner and a HelloWorld example written in XUL.

• Download XUL zip archive from HERE(windows) , others may select the install from HERE according to their operating system.
• Extract it to any directory/folder of your convenience, below screenshot shows the patch where I extracted the zip file.

• Next step is to set up the "path" environment variable, the screenshot is provided below

• The hierarchy should be like this :

• Now make your application folder (name it helloworld), as shown in screenshot

• Make two folders inside it 1) "chrome" 2) "defaults" and a file named "application.ini" (remember extension should be .ini)

• Inside "chrome" create folder named "content" and a file named "chrome.manifest" (extension should be .manifest)

• Inside "content" create a file named "main.xul" (again the extension should be .xul)

• Now inside "defaults" create a folder named "preferences" and inside it create a file named "prefs.js" (yeah the extension should be .js)

• I know it was tedious to create that hierarchy but then you are about to learn something thats worth it.
• Now write the Following lines into "application.ini"

[App]

Vendor=Visio

Name=Hello World

Version=1.0

BuildID=20080114

Copyright=Copyright (c) 2008 jit

ID=visio159@wordpress.com[Gecko]

MinVersion=1.8

MaxVersion=1.9.0.*

• And in "chrome.manifest" write: Its basically maps the file URI to chrome URI

content helloworld file:content/

• In "main.xul" write: The main file that will create the windows and GUI.

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?><window id="main" title="Hello World" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <caption label="Hello World"/>

</window>

• In "prefs.js" write: Silly way to provide the address of main file

pref("toolkit.defaultChromeURI","chrome://helloworld/content/main.xul");

Now the final step is to run the application:

Execute the Example:

• Open command prompt window

• Execute example by providing "application.ini" as an argument to the "xulrunner.exe" as shown:

• Yay the standalone application (which is now pretty much bland) is ready, cheers :)

Get the smilies on people.

Here is the Third version of UniSmilies (simple smiley extesion for firefox).

Screen Shots:

Download updated version 1.12.20 from here:
UniSmilies 1.12.20.xpi

Size: 557KB

How to Use:

• Click on the UniSmilies menubutton at the bottom-right side of statusbar.

• Click on any smiley.

• Paste on textarea(reply box).

• Thats it

Works on any OS having Firefox (and presumably the browsers supporting extension based on Gecko engine).

Ver 1.12.20 added Features: (released)

• intelligent image code selection based on the type of site (currently all forums,orkut and wordpress, tell me abt more sites and will add it)
• New set of smilies added (tingy blue), large size.
  

Ver 1.12.18 added Feature:

• HTML, Direct link alongwith BBCode added, now u can post unismilies in orkut and other direct link websites

Ver 1.0.0 Features:

• Lightweight component

• Sleek statusbar menu

Features for next version:

• Automatic intelligent selection of type of image code for forums and orkut(other sites will be added soon) - DONE
  
• Automated copy paste to the last focused textarea.

• will include direct link, html link alogwith BBcode links - DONE

• http://en.wikipedia.org/wiki/Rich_Internet_application ("Rich Internet applications (RIA) are Web applications that have the features and functionality of traditional desktop applications. RIAs typically transfer the processing necessary for the user interface to the Web client but keep the bulk of the data (i.e., maintaining the state of the program, the data etc) back on the application server.

RIAs typically:

• run in a Web browser, or do not require software installation
• run locally in a secure environment called a sandbox")

Le numéro 102 de Programmez! consacre une bonne partie de ses articles à Rich Internet Application.

Comme c'est un monde en pleine effervescence on ne fera qu'énumérer les techniques en cours de développement (voir Articles p.32, p.36). Les principales solutions techniques pour faire des "clients riches":

• les frameworks Javascript ("Dojo, jQuery, Prototype/Script.aculo.us, Yahoo UI")
• JavaServer Faces (JSF): p.32 H. Darmet "..avec une extension AJAX (comme a4jsf ou ICEFaces) est la solution reine de type "Ajax Hybride" dans le monde Java. Avantages: productivité (avec Seam), ubiquité, sécurité et robustesse...Prise en compte de l'existant que s'il est JSF"
• Google Web Toolkit (GWT): "...solution de type Ajax total qui favorise les aspects performance, ubiquité, robustesse et sécurité grâce à un ingénieux système de développement en Java..."
• ASP.NET AJAX ("...proche de JSF avec une extension AJAX. Solution remarquablement outillée par Visual Studio. La prise en compte d'un existant ASP.NET est très aisée.")
• Flex(Adobe) : ...est la solution de type "applet like" la plus populaire (on estime aux alentours de 97% le nombre de machines équipées du Flash Player), ce qui rend par conséquent les applications Flex relativement multi plates-formes et facilement déployables). Elle en a tous les avantages qui sont les mêmes que celles d'une architecture "Ajax total". Voir http://planete-accessibilite.com/#article_pa_2
• Silverlight / Moonlight ("...la solution "applet like" du monde .NET...Elle reprend le principe de construction déclarative de l'IHM popularisé par Flex. L'ubiquité est encore assez limitée. L'outillage avec Visual Studio reste le point fort.")
• JavaFX ("..est la solution "applet-like" du monde Java. Les avantages et limites sont ceux rencontrés par Silverlight, avec moins de crédibilité et de maturité...page 45. "...JavaFX est un produit finalement mal connu: il est présenté comme une solution RIA, mais c'est en fait une nouvelle solution pour construire des applications Swing qu'elles soient RIA ou non. L'intérêt de JavaFX est donc à la fois ailleurs et plus large...toute équipe qui développe une application graphique basée sur swing devrait s'intéresser à JavaFX...")
• OpenLaszlo est une plateforme de développement d'applications riches, en open source. Ses applications sont développées via une solution qui produit, à partir du même code source, une application en DHTML (HTML, DOM, CSS et Javascript) ou Flash.
• XUL/XULRunner ("XUL, pour XML-based User interface Language, est un langage de description d'interfaces graphiques basé sur XML créé dans le cadre du projet Mozilla. XUL se prononce zoul en anglais (pour rimer avec cool, mais aussi en hommage au demi-dieu Zoul dans le film S.O.S. Fantômes). Couplé avec le XULRunner, environnement d'exécution multiplateforme, il forme un couple permettant de créer des Rich Desktop Application")
  

Autres sources:

• http://blog.aysoon.com/post/Que-sont-les-applications-riches-RIA-Partie-1-Definition-et-usages-195
  
• http://fdeshayes.net/
• http://www.devx.com/RichInternetApps/Article/35208/1954?pf=true ("Crash Course in Next-Gen RIA: AIR, Silverlight, and JavaFX")
• Adobe AIR (formerly Adobe Apollo)
• XUL and XULRunner from the Mozilla Foundation.
• Curl 5.0 from Curl Inc. for off-line RIA
• Rebol programming language as a Java JVM alternative
• http://en.wikipedia.org/wiki/Web_desktop ("A web desktop or webtop is a network application system for integrating web applications into a web-based workspace It is a virtual desktop on the web, running in a web browser as software. .Web desktops often are characterized by an environment similar to that of Windows, Mac, or Linux, but are now considered to have much more functionality being dependent on the internet. Typical benefits include the ability to save work and settings over the internet rather than to the local desktop. is a network application system for integrating web applications into a web-based workspace. It is a ")
• http://en.wikipedia.org/wiki/Web_operating_system ("In metacomputing, WebOS and Web operating system are terms that describe network services for internet scale distributed computing, as in the WebOS Project at UC Berkeley ^[1], and the WOS Project ^[2]. In both cases the scale of the web operating system extends across the internet, like the web.")
• http://en.wikipedia.org/wiki/EyeOS ("eyeOS is an open source (GPL) web operating system. It provides a default desktop with some base applications and the ability of developing new applications with the eyeOS Toolkit, the integrated IDE, which can be installed through the ports-based eyeSoft system. This allows anyone to create their own repository for eyeOS and distribute their eyeOS Applications automatically to its users. The idea behind eyeOS is to provide a full operating system, web based, which can be accessed from everywhere, with any Internet-capable device")

HTML has been the dominant presentation layer solution for web since its existence. CSS made it even more powerful. The combination of JavaScript / CSS / HTML commonly referred to as dynamic html (DHTML) yet again made it even more powerful. Now what is popular is using XML and JavaScript (AJAX) "behind the scenes" to present more interactive web sites.

Meanwhile, running parallel with HTML - Flash the embedded objects within an HTML page grew fast in popularity when it was announced in 1996 due to the amazing compression it introduced that enabled animations and interactivity. It has continued to grow in use amongst the web site design industry. XML and Flash became popular around 2000 and continued to grow in popularity delivering most of the music you hear on the internet via Flash/XML mp3 players. Flash in my opinion has always been in competition to replace HTML, but never had any real world situations where this technique could be used. So most developers/designers choose to use hybrid Flash/HTML web sites. Or typically the wider the audience the more html, the more advanced the audience the more flash. And don't let me mistake you flash could never replace HTML until only recently.

The Future

MXML came into existence around 2004, an XML based user interface markup language combined with Javascript to create rich internet applications. Flex is the framework that compliles the MXML and ActionScript on the fly into Flash or swf files. The beauty for the end-user of these applications is that it loads only once!
Thermo
http://labs.adobe.com/wiki/index.php/Thermo

XAML also pronounced ZAML

MXML
OpenLaszlo
CookSwing
SwiXML
SwixNG
Thinlet
Ultrid
Vexi
XAL
XSWT
ZUL
XAML
XUL
XHTML
XFDL
XForms
Curl 5.0
GladeXML
HTMLR
UIML
PSML
Gul
XWT
QuiX
XML Sapiens
Bindows
BXML
Boxely
VTML
XHPD
XAL
MyXaml
XRC - used by wxWidgets
libavg
GNUstep Renaissance

Starting from several system keysets it is possibile to create new schemes.

Developers can write code using this feature.

You need to

• overlay chrome://komodo/content/commandsOverlay.xul into chrome.manifest
• add "observes" attribute to menuitems

Below I show the code that I'll add to Morekomodo ASAP

The overlayed commandsOverlay.xul should contain

<overlay id="morekomodoCommandOverlay" xmlns="...">
   <broadcasterset id="broadcasterset_global">
      <broadcaster
        id="cmd_morekomodo_favorites"
        key="key_cmd_morekomodo_favorites"
        desc="General: Open Favorites..."
        oncommand="moreKomodo.openFavorites(event);"/>
          <broadcaster
             id="cmd_morekomodo_capitalize"
             key="key_cmd_morekomodo_capitalize"
             desc="Source Code: Capitalize selected text"
             oncommand="..."/>
   </broadcasterset>
</overlay>

You can notice the desc attribute, it contains a short description about the command.

The string preceding the colon (:) represents the category command, the other the real description.

The XUL <menuitem/>s use the observes attribute to reflect key binding.

The attribute value must match the broadcaster id.

<menuitem id="morekomodo-openfavorites"
    label="Open favorites..."
    observes="cmd_morekomodo_favorites" />

ActiveState has defined a set of categories not all applicable to OpenKomodo.

Developer can define its own category but it's recommended to join already existing one ;-)

Another benefit from this technique consists to have key bindings into the list generated by OpenKomodo (ie from Help menu select "List Key Bindings")