Вода

Дали мне задание написать программу для нашей конторы. Срок - неделя. БД по сотрудникам.

С-чего-начать и что-умею?

Во-первых бы здорово открывать это из браузера, не обременяя пользователя дополнительными программами на рабочем столе.

Во-вторых, у всех стоит Firefox. IE отключен, зарыт в недрах Program Files, и зарублен на сервере squid-ом. Все. Забудем про него.

С-чего-начать разобрались. Теперь что-умею.

Да почти ничего. sh/perl/sed/awk - обычный *nix-овый админ. 
На HTML ничего не писал. Про java-script знаю что он есть. Всё.
PS : Глаза боятся, а руки делают. Оказалось что всё просто. Очень просто. Надо только разобраться как оно работает. Один раз. Дальше - хоть M$Word на ксуле писать. Вот оно будущее ::)

Благодарности и сцылки

WWW. Просто WWW. - для изучения HTML и JavaScript, смотрим, разбираем, учимся.
http://www.hevanet.com/acorbin/xul/top.xul - самое оно для начала разметки XUL.
http://www.georgenava.com - все остальное. Кликаем, смотрим, делаем также. Мужик рулит!
http://xulplanet.com/ - для более глубоких познаний.

Все остальное можно нагуглить.

Инструменты:
OpenBSD научила меня к минимализму, поэтому использую только то что нужно, ничего лишнего:
notepad2, vi(на сервере) - редактор - больше ничего не надо
winscp, putty - работа с сервером
MySQLQueryBrowser - работа с мускулом
гуглим "Armin Van Buuren state of trance episode mp3" - качаем, слушаем, работаем.

Благодарности:


George Nava - за то что он делает. Был момент, когда я просто не знал, куда двигаться дальше.



Начнем?

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="my.css" type="text/css"?>
<window title="" xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="js.js" />

 
<textbox id="tb_find" oninput="wm('/cgi-bin/p','s='+val('tb_find'),fs2);"/>
<tree id="treeres" flex="1" hidecolumnpicker="true">
    <treecols><treecol flex="1" label="Results" primary="true"/></treecols>
    <treechildren id="tree_s">
        <treeitem><treerow><treecell properties="male" label=" None"/></treerow></treeitem>
    </treechildren>
</tree>
</window>

Оки-доки. Создали окно с одним textbox-ом и деревом для результатов. Никакой кнопки find. Будем искать по мере набора, для этого служит функция wm(WebMethod, стащил у George Nava). Т.е при вводе постоянно идет обращение к скрипту wm.
Собственно, вот он:

const OnlyXUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

function wm(url,request,callback)
{
    var http = new XMLHttpRequest();
    var mode = request?"POST":"GET";
    http.open(mode,url,true);
    if(mode=="POST"){http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');}
    http.onreadystatechange=function(){if(http.readyState==4 && http.status == 200){callback(http.responseText);}};
    http.send(request);
}

function fs2(resp){
    var r=eval(resp);
    var tree=id('tree_s');
    cleartree(tree);
    var s=r.list;
    for(i=0; i<s.length; i++){ tree.appendChild(newentry(s[i])); }
}
function newentry(entry){
    var treeItem  = document.createElementNS(OnlyXUL,"treeitem");
    var treeRow   = document.createElementNS(OnlyXUL,"treerow");
    var treeCell1 = document.createElementNS(OnlyXUL,"treecell");
    treeItem.setAttribute("lineid",entry[0]);
    treeCell1.setAttribute("label"," "+entry[1]);
    treeCell1.setAttribute("properties",entry[2]);
    treeRow.setAttribute("id","tree_s");
    treeRow.appendChild(treeCell1);
    treeItem.appendChild(treeRow);
    return treeItem;
}
function id(elementID){ return document.getElementById(elementID); }
function cleartree(tree){ while (tree.hasChildNodes()) { tree.removeChild(tree.lastChild); } }
function val(elementID){ return document.getElementById(elementID).value; }



Разбираем по-порядку:

При вводе текста в строку поиска генерится функция wm('/cgi-bin/res','s='+val('s2'),fs2)
Рассмотрим ее поближе:

1. var http = new XMLHttpRequest();
2. var mode = request?"POST":"GET";
3. http.open(mode,url,true);
4. if(mode=="POST"){http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');}
5. http.onreadystatechange=function(){if(http.readyState==4 && http.status == 200){callback(http.responseText);}};
6. http.send(request);

1 - Создает запрос XMLHttpRequest для обращения к скрипту на сервере.
2 - Определяет тип запроса - если второй параметр есть - то запрос POST, иначе GET
5 - если сотояние изменилось(ответ или ошибка от серверного скрипта), проверям его на 4 - "пришёл ответ" и на 200 - все нормально - отдём на разбор фенкции, опреденной в третьем параметре.


Теперь приблизимся к функции fs2(заданной как callback ещё в XUL):
1. function fs2(resp){
2.     var r=eval(resp);
3.     var tree=id('tree_s');
4.     cleartree(tree);
5.     var s=r.list;
6.     for(i=0; i<s.length; i++){ tree.appendChild(newentry(s[i])); }
}

2 - преобразуем текст в данные
3-4 чистим дерево
6 - заполняем его полученными элементами(создаем дерево)

Собственно, сам скрипт выдаёт очень простой ответ:
data={list:[
['0123456789abcdee','person1','male'],
['0123456789abcdef','person2','female'],
['0123456789abcdeg','person3','male'] ] }

ID человека,  фамилия,  пол(который мы красиво нарисуем через CSS)

т.е. обычный массив данных(arrays of array), который мы и преобразовываем из теста в данные функцией eval во второй строке. в 4 строке мы очищаем дерево(разберитесь сами), и обрабатываем каждую строку скрипту, который и создает дерево:

1. function newentry(entry){
2.    var treeItem  = document.createElementNS(OnlyXUL,"treeitem");
3.    var treeRow   = document.createElementNS(OnlyXUL,"treerow");
4.    var treeCell1 = document.createElementNS(OnlyXUL,"treecell");
5.    treeItem.setAttribute("lineid",entry[0]);
6.    treeCell1.setAttribute("label"," "+entry[1]);
7.    treeCell1.setAttribute("properties",entry[2]);
8.    treeRow.setAttribute("id","tree_s");
9.    treeRow.appendChild(treeCell1);
10.    treeItem.appendChild(treeRow);
11.    return treeItem;
}

1-3 - Создаем елементы типа treeitem, treerow, treecell для создания таблицы.
5 - Создаем свой атрибут lineid - потом будем из него выдирать ID человека
6 - Соответственно, имя человека
7 - пол
9-10-11 - складываем и отдаем матрешку

Функции id() и val() - для удобства. Помогает.

Фсё! Скрипт работает, но некрасиво. Рисуем пол через CSS:

treechildren::-moz-tree-row(selected){ color:#FFF; background-color:#88F; }
treechildren::-moz-tree-row(odd){ background-color:#F8F8F8; }
treechildren::-moz-tree-row(odd,selected){ color:#FFF; background-color:#88F; }

treechildren::-moz-tree-image(male) { list-style-image:url("pics/male.png"); }
treechildren::-moz-tree-image(female) { list-style-image:url("pics/female.png"); }

Первые три для красоты. И опять спасибо George Nava.
Следующие две для отображения картинки мужчина/женщина. На ваше усмотрение.


Пока все.