Полезная информация

На IRC-канале #mozilla-ru можно получить техническую консультацию онлайн и, конечно же, порцию общения.
 
Список содержимого

Вода

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

«С чего начать» и «что умею».

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

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

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

Да почти ничего. sh/perl/sed/awk — обычный *nix-овый админ. На HTML ничего не писал. Про JavaScript знаю что он есть. Если дизайнер — то желтое на белом. Всё.

PS: Глаза боятся, а руки делают. Оказалось что всё просто. Очень просто. Надо только разобраться как оно работает. Один раз. Дальше — хоть M$Word на зуле писать. Вот оно будущее.

Сцылки

WWW. Просто WWW. Для изучения HTML и JavaScript, смотрим, разбираем, учимся.

http://www.hevanet.com/acorbin/xul/top.xul — самое оно для начала разметки XUL.

http://www.georgenava.com — все остальное. Кликаем, смотрим, делаем также. Мужик рулит!

http://xulplanet.com/ — основной сайт для разбора XUL.

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

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

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

Инструменты

OpenBSD приучила меня к минимализму, поэтому использую только то, что нужно, ничего лишнего:

notepad2, vi (на сервере) — редактор — больше ничего не надо;

winscp, putty — работа с сервером;

MySQLQueryBrowser — работа с «мускулом»;

гуглим “Armin Van Buuren state of trance episode mp3” — качаем, слушаем, работаем.

Начнем?

<?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.

Следующие две для отображения картинки мужчина/женщина. Картинки на ваше усмотрение.

Пока все.

 
  development/xul/app/part1.txt · Последние изменения: 2006/12/06 15:29
 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2011 Mozilla Russia
Язык отображения форума: [Русский] [English]