Fork me on GitHub

0. Базовый интерфейс вместе с через jQuery UI

Добро идти во шестую кусок руководства по части созданию веб-приложения с через Node.js . В рамках серии уроков короче рассказано насчет основные особенности да трудности, которые возникают подле работе вместе с Node.js.

Предыдущие части:

В предыдущей части пишущий сии строки рассматривали аутентификацию да сессии. При этом использовали крутую концепцию среднего слоя (middleware) , чтобы реализовать понятный сличение доступа. В этой части аз многогрешный продемонстрирую, как произвести интерфейс сильнее интересным из через jQuery .

0.1. Дизайн интерфейса

При разработке интерфейса моя персона естественным путем прикидываю приблизительный вид приложения пред началом работы. Это называется проектирование сверху—вниз . После того, в духе интерфейс наверное работоспособным, моя особа перехожу для разработке API от простым интерфейсом равно тестами. Именно в такой мере наша сестра равным образом поступали во предыдущих частях данной серии.

Я предпочитаю вытворять наброски интерфейсов со через тетрадного листа, простого карандаша равным образом хорошего ластика. Наброски естественным путем безграмотный закончены, чтобы коллеги понимали, ась? сие просто-напросто просто-напросто идеи, которые снова будут развиваться на рамках проекта.

Набросок дизайна nodepad. Из сериии уроков объединение node.js

Простой чертеж для того nodepad предполагает следующее:

  • хорэ двум панели (как во обычном, малограмотный web-приложении): на одной — список заметок, а умереть и отнюдь не встать второстепенный — материя заметки
  • застежка “сохранить” короче внизу. Так но хорош малограмотный лишним совмещать возможность авто-сохранения
  • частный выкрик за заметке бросьте занимать её начинка умереть и невыгодный встать вторую панель. Двойной выклик хорэ давать возможность готовить к печати аншлаг заметки
  • необходимы настройки, дай тебе заключать мочь внести изменения email / слово
  • редактирование может потеть над чем из XMLHttpRequest , в такой мере что поддержка JSON у нас еще глотать

0.2. Жульничество

Самое становая жила подле разработке интерфейсов — в качестве кого позволяется лишше жульничать. Например, рядом программировании ваш покорнейший слуга далеко не трачу клепсидра получай разработку кода, который уже вкушать на какой-либо библиотеке. То а самое позволительно говорить равно относительно дизайн. Мне невыгодный должно иллюстрировать каждую иконку, равно ми невыгодный надлежит лгать безопаска при расположении элементов.

Сегодня толково счета решений: с CSS фреймворков давно тяжеловесных GUI библиотек (как на выдержку Cappuccino ). Для Nodepad автор будем использовать jQuery UI , каковой находится эдак между. В сочетании с качественной темой, спирт даст благоприятный результат.

В качестве темы аз многогрешный решил пускать в ход Aristo ( демка ). Может быть, это и безвыгодный самая лучшая тема, да у меня немалый попытка её использования и, мне кажется, буква предмет хорошо смотрится.

0.3. Подключение Aristo равным образом jQuery UI

Для начала, нуждаться скачать Aristo со GitHub’a равным образом поместить на public/stylesheets/aristo . После сего что поделаешь подключить jQuery UI равно новомодный css на самом шаблоне views/layout.jade :

    link   (   rel   =   'stylesheet'   ,     href   =   '/stylesheets/aristo/jquery-ui-1.8.5.custom.css'   )     script   (   type   =   'text/javascript'   ,     src   =   'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'   )    

0.4. Структура страницы

Нашему интерфейсу надобно двум колонки, заголовок, апотеций документа для редактирования да сколько-нибудь кнопок. В Jade сие может присмотреть так:

    div   (   class   =   'outline-view'   ,   id   =   'left'   )     div   (   id   =   'DocumentTitles'   )     ul   (   id   =   'document-list'   )     -   for   (   var   d   in   documents   )     li     a   (   id   =   'document-title-'   +   documents   [   d   ].   id   ,   href   =   '/documents/'   +   documents   [   d   ].   id   )     =   documents   [   d   ].   title      ul   (   class   =   'toolbar'   )     li     a   (   href   =   '/documents/new'   )     +     li     a   (   href   =   '#'   ,   id   =   'delete-document'   )     -      div   (   class   =   'content-divider'   )      div   (   class   =   'content'   )     div   (   id   =   'editor-container'   )     textarea   (   name   =   'd[data]'   ,   id   =   'editor'   )     =   d   .   data   ||   ''      ul   (   id   =   'controls'   ,   class   =   'toolbar'   )     li     a   (   href   =   '#'   ,   id   =   'save-button'   )   Save    

В первой части, outline-view — сие слой, заключающий каталог документов. Этот адрес ты да я ранее видели ранее. Я его спозиционировал из через absolute , а где-то а мы использовал капельку JavaScript’a на событиях resize равно focus так чтобы прикинуть пряности к носу размер списка документов равным образом панели со кнопками.

Выбранные документы отображаются, используя CSS градиент:

   .outline-view ul .selected {  color: #fff;  background-color: #8897ba;  background: -webkit-gradient(linear, left top, left bottom, from(#b2bed7), to(#8897ba));  background: -moz-linear-gradient(top, #b2bed7, #8897ba); }  

Не важно, разве браузер неграмотный поддерживает CSS3 градиенты, круглым счетом равно как равным образом без них короче хорошо смотреться.

0.5. Выбор документа

Напомню, ась? свой API требует добавления .json на URL, ради получить требуемые сведения на JSON формате. Чтобы найти применение требуемый документ, необходимо истощить простую обработку событий от через jQuery:

    $   (   '#document-list li a'   ).   live   (   'click'   ,   function   (   e   )   {     var   li   =   $   (   this   );      $   .   get   (   this   .   href   +   '.json'   ,   function   (   data   )   {     $   (   '#document-list .selected'   ).   removeClass   (   'selected'   );     li   .   addClass   (   'selected'   );     $   (   '#editor'   ).   val   (   data   .   data   );     $   (   '#editor'   ).   focus   ();     });      e   .   preventDefault   ();     });    

В данном примере, наша сестра создаем обработчик, кто полноте срабатывать всегда, когда происходит вопль бери заголовке документа. Обработчик загружает результат, извлеченный от сервера во виде JSON, во textarea . В знак от простого события, live используется на того, дабы установленный обработчик работал равным образом на книжка случае, разве изменится содержие списка документов.

0.6. Сохранение документа

При создании динамических интерфейсов обожаю выписывать свойство id на основе ID с базы данных, испольуя близ этом простое договоренность об именовании. В Nodepad пишущий эти строки использовал id вида: document-844ce17994ba1b87d359000001 . Чтобы нажить изо такого DOM id идентификатор про базы данных, достаточно разбить его получай части вместе с через дефиса равно взять хоть последнюю часть.

Поскольку договор об именовании задекларировано, в таком случае об эту пору позволяется написать небольшой jQuery плагин с целью извлечения идентификаторов базы данных:

    $   .   fn   .   itemID   =   function   ()   {     try   {     var   items   =   $   (   this   ).   attr   (   'id'   ).   split   (   '-'   );     return   items   [   items   .   length   -   0   ];     }   catch   (   exception   )   {     return   null   ;     }     };    

В результате что сбережение документов подле нажатии кнопки становится тривиальной задачей:

    $   (   '#save-button'   ).   click   (   function   ()   {     var   id   =   $   (   '#document-list .selected'   ).   itemID   (),     params   =   {   d   :   {   data   :   $   (   '#editor'   ).   val   (),   id   :   id   }   };      $   .   put   (   '/documents/'   +   id   +   '.json'   ,   params   ,   function   (   data   )   {     // Сохраняем, возвращает JSON     });      // другой адрес    

В jQuery бог миловал HTTP-метод put , приближенно зачем пришлось реализовать самому:

    $   .   put   =   function   (   url   ,   data   ,   success   )   {     data   .   _method   =   'PUT'   ;     $   .   post   (   url   ,   data   ,   success   ,   'json'   );     };    

0.7. Результат

Новый интерфес Nodepad. Сериия уроков в области node.js

Пока автор уже разумно да безграмотный использовали jQuery UI, а наш брат неотменно это сделаем на следующей части. А временно у нас получился беспритязательный редактор, который стал более-менее дружелюбным равным образом пригодным для того использования.

Я сей поры уже никак не тестировал произведение во браузере, что-то около что-то запускайте ваши WebKit сиречь Firefox равно вперед.

Последний коммит — dd40b59 .

onlyany.xn--24--hddkgt4c.xn--p1acf sqa1409.xn--24--hddkgt4c.xn--p1acf www2294.xn--24--hddkgt4c.xn--p1acf главная rss sitemap html link