Paul_Smith Sep 29 2011 at 13:31

Азы Dojo на примере самодельного Хабра-парсера

3 min

3.4K

Введение

Приветствую читателей.
В ходе разработки проекта, мне понадобилось сделать небольшой парсер для смежного сайта.
Незадолго до этого командой было принято решение использовать фреймворк Dojo
В результате размышлений родилась идея сделать красивый парсер Хабра, заодно осовоив Dojo и решив проблему экономии трафика для мобильного (часто читаю в пути).
Данное руководство несёт чисто практический характер и не претендует на идеальность исполнения.

Функции

Функций у нашего парсера будет всего 2:

Загрузка страницы и выделение топиков из её содержимого, вывод заголовков
Предоставление пользователю возможности закрыть нежелательные топики

С первой функцией нам поможет справиться PHP-парсер Simple Html Dom, а вторую реализуем с помощью Dojo.

Организация страницы

Страница будет в минималистичном стиле.

<html>
<head>
 <script src='dojo.js'></script> <!--Подключаем Dojo -->
 <script src='script.js'></script> <!-- Подключаем наш скрипт -->
 <link rel='stylesheet' href='style.css' type='text/css' /> <!--подключаем наш стиль -->
</head>
<body>
<div id='bzone'> <!-- Создаем область,куда будут выводиться наши блоки-->
<span> Новости </span> <!-- Заголовок этой области -->
   <div id='box'> <!-- Прототип блока с топиком -->
		<div id='tit' class='tit'>	
                           Заголовок новости <!-- Сюда будет выводиться ссылка на топик -->
                      <div id='close' class='close'></div> <!-- Кнопка, закрывающая топик -->
		</div>
		<div id='text'>
                        Текст новости <!-- А сюда выведем текст заголовка топика -->
                 </div>
   </div>
</div>
</body>
</html>

CSS-файл не представляет особого интереса, просто приведу код:

body{
background:lightgrey;
}
#bzone{
background:gray;
width:600px;
min-height:600px;
position:absolute;
left:50%;
margin-left:-300px;
margin-top:50px;
padding-bottom:10px;
border-radius:10px;
}
#bzone span{
height:15px;
padding:2px;

position:relative;
top:7px;
display:block;
width:597px;
border-top:2px white solid;
border-bottom:2px white solid;
color:grey;
background:lightgray;
font-weight:bold;
text-align:center;

}
#box{
width:550px;

display:block;
position:relative;
left:25px;
background:white;
border:2px lightgrey solid;
margin-top:10px;
border-radius:10px;
}
#box #tit{
background:lightgrey;
min-height:20px;
width:100%;
position:relative;
font-weight:bold;
color:grey;
text-align:center;
}
#box #tit #close{
width:16px;
height:16px;
display:block;
position:relative;
float:right;
background:url('img/close.png');
}
#box #tit #close:hover{
background:url('img/close_h.png');
}
#tit span{
display:none;
}

#box #text{
padding:2px;
text-align:center;
}
#box  a{
text-decoration:none;
font-weight:bold;
color:grey;
}
#box  a:hover{
color:#ff6600;
}

Вот, что у нас получилось:

Работа парсера

Подключаем скачанный парсер Simple Html Dom и подгружаем обожаемую страницу:

require 'simple_html_dom.php';

$html = file_get_html('http://habrahabr.ru/');

Распознавать топики будем по классу ссылки:class=«topic»

foreach ($html->find('.topic') as $e) {  /*Задаем критерий поиска */

echo"
<div id='box'>                  /*Выводим наш блок*/
	<div id='tit' class='tit'>	
";
echo "<a href='";  /*Выводим в заголовок ссылку на топик*/
echo $e->href;
echo "'>";
echo $e->href;
echo "</a>";


echo"
	<div id='close' class='close'></div>
	</div>
	<div id='text'>";  /*А в содержимое - текст заголовка*/
echo $e->innertext ;



echo 
"	</div>
	</div>
	";
}

Таким образом, проект уже полностью функционален, осталось добавить юзабилити и красоты.

Японская магия

В начале статьи мы подключили 2 скрипта — dojo.js и script.js.
Вот во второй файл я и вынес весь код, связанный с юзабилити:

dojo.addOnLoad(function(){
    dojo.query(".tit .close").connect("onclick",function(){ //Привязываем событие к щелчку по иконке закрытия блока

	var nn=this;
	
dojo.anim(nn,{height:0}).play();       
dojo.anim(nn.parentNode,{height:0}).play();  //Сворачиваем содержимое блока, определив его, как родителя нашей кнопки
dojo.anim(nn.parentNode.parentNode,{height:0}).play();
dojo.empty(nn.parentNode.parentNode);
	});
	
});

Теперь блоки будут красиво сворачиваться при щелчке по кнопке закрытия.

Заключение

Наш маленький парсер довольно шустро выдёргивает топики с Хабра и
представляет их в виде ленты.
Кроме того, мы можем скрыть не интересующие нас элементы, что будет сопровождаться приятной глазу плавной анимацией.
Конечный результат

Проект требует множества доработок, однако свою функцию, как элементарное практическое руководство, выполняет неплохо.

Надеюсь, статья окажется кому-то полезной, планирую развивать эту тему.

Tags:

Hubs:

JavaScript