Plugin pubsub, którego pierwowzorem była funkcjonalność frameworka Dojo. Służy do rejestracji i publikacji zdarzeń w naszej aplikacji (nie chodzi o eventy DOM). Dzięki czemu w niektórych przypadkach może udać się zmniejszyć ilość ścisłych powiązań w kodzie (coupling). Zresztą trudno to wyjaśnić pisząc tekst po polsku… zachęcam zatem do obejrzenia filmy Rebeki Murphey z nettuts (polecam jakość HD i fullscreen):

Pozwala na zorganizowanie aplikacji intensywnie wykorzystującej Ajax tak, żeby nie tracić działania przycisku wstecz i w ogóle historii przeglądania.

Mnie ostatnio przydało się, gdy musiałem dorobić stronę w stronie i nie bardzo miałem ochotę grzebać w mechanizmach php, które tam zachodzą. Po prostu każdy link w podmenu ładuje treść ajaxem i każda taka strona ma swój własny link.

Polecam super krótki tutorial na nettuts, który pokaże Wam jak zacząć:
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-sammy-js/

Dlatego pod każdym elementem li.post utwórzmy div’a, którym będzie konterem dla formularza odpowiedzi. Znajdź w thread.js linie odpowiedzialne za tworzenie elementów li zawierających posty i dodaj html z div’em do parametru innerHTML:

//app/webroot/js/thread.js
$("
", {
	    	  id: v.Post.id,
	    	  innerHTML: "
"+v.Post.message+"

" +
	    	  			 "
" //<---
	    	  ,
	 class: "post child"
	 }).
	 appendto("#"+v.post.parent_id+">ul");

Przyda się teraz nieco css’ów. Kontener powinien zajmować nieco więcej miejsca (żeby łatwiej było w niego kliknąć) oraz po najechaniu na niego myszką powinien zmienić kolor, sugerując użytkownikowi, że może tam kliknąć. Podlinkuj nowy plik css do layoutu:

//app/views/layouts/default.ctp
echo $this->Html->css('cake.generic');
echo $this->Html->css('thread'); //<-add this
echo $this->Javascript->link(array("thread"));

a następnie stwórz plik thread.css z taką zawartością:

/* app/webroot/css/thread.css */
div.reply {
	height: 5px;
	cursor: text;
}
div.reply:hover{
	background-color: #8EAFEB;
}

Tak to powinno wyglądać teraz:

Bardziej spostrzegawczy zauważyli od razu, że miejsce pod pierwszą wypowiedzią w wątku nie zachowuje się tak jak powinno, poprawmy nieco thread.js:

if($("#"+v.Post.parent_id).find("ul").length == 0){
	if($("#"+v.Post.parent_id).find("div.reply").length == 0){
		$("
", {class: "reply"}).appendTo("#"+v.Post.parent_id);
	}
	$("
", {class: "posts children"}).appendTo("#"+v.Post.parent_id);
}

Teraz pojawiło nam się odrobinę redundancji w kodzie – dwa miejsca, gdzie jest tworzony element div.reply. Naprawmy to. Usuniemy dodawanie stringa

<div class='reply'/>

i zastąpimy go tworzeniem elementu DOM przy pomocy jQuery, a następnie wyekstrahujemy motodę, która to robi. Ostatecznie kod powinien wyglądać tak:

(function(window, document, udefined){
	window.Thread = function(_posts) {
		this.posts = _posts;
		return this;
	};
})(window, document);

Thread.prototype.createReplyDiv = function(){
	return $("
", {class: "reply"});
}

Thread.prototype.createThread = function(){
	if(this.posts.length <1){
		return this;
	}
	var _this = this; //* patrz poniżej
	$(this.posts).each(function(k, v){
		if($("#"+v.Post.parent_id).find("ul").length == 0){
			if($("#"+v.Post.parent_id).find("div.reply").length == 0){
				_this.createReplyDiv().appendTo("#"+v.Post.parent_id);
			}
	        $("
", {class: "posts children"}).appendTo("#"+v.Post.parent_id);
		}
	     $("
", {
	    	  id: v.Post.id,
	    	  innerHTML: "
"+v.Post.message+"

"
	    	  ,
	    	  class: "post child"
	     }).
	     append(_this.createReplyDiv()).
	     appendTo("#"+v.Post.parent_id+">ul");
	});
	return this;
}

(*)Jeśli zastanawiasz się po co zapamiętujemy `this` w zmiennej `_this` śpieszę z wyjaśnieniem. W kodzie chcemy wywołać, wyodrębnioną dopiero co, metodę createReplyDiv. Niestety w anonimowej funkcji, która jest przekazana do metody each(), `this` wskazuje już na konkretny element z kolekcji po której ów each() iteruje. Musimy zapamiętać “starą” referencję `this` (czyli obiekt klasy Thread).

I was encouraged by good response on my first tutorial, so started to work on another. Unfortunately I didn’t finish it before my vacation, so I almost lost track of what I was doing. So I decided to ship it to you in parts, so by doing every part before publishing I’ll be back on track, and find more mistakes, so hopefully it will be error-free. Enjoy.

What’s long pooling

Long pooling is one of the method that mimics “server push” behavior on stateless HTTP protocol (which is based on “server pull” principle) . Even though there are web sockets coming, I think it’s a good idea to get familiar with that kind of technique.

We’ll try to create just a bit of simple idea. Combination of chat and bulletin board, where You can post Your messages and can see other users messages appearing in “real time”.

We’ll do it with cakePHP on the server side and http://jquery.com/ on the client side. I assume You are a little bit familiar with that tools – I wouldn’t explain how to configure database connection in cakePHP etc.

The only features on this system are

• creating new discussion
• replying in a discussion without reloading a page
• getting users to see other people replies without reloading the page

on top of that we’ll keep in mind that we are on small budget, so we want our application to be as light for the server as possible (to do that we’ll push as much work to client side as we can).

Preparing project

Let’s get last stable version of cake to get started fast:

$ git clone http://github.com/cakephp/cakephp.git longPolling

Then let’s create a database for our discussions

CREATE TABLE `posts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) DEFAULT NULL,
  `user_id` int(11) DEFAULT NULL,
  `lft` int(11) DEFAULT NULL,
  `rght` int(11) DEFAULT NULL,
  `message` text COLLATE utf8_unicode_ci NOT NULL,
  `modified` datetime NOT NULL,
  UNIQUE KEY `id` (`id`),
  KEY `parent_id` (`parent_id`),
  KEY `lft` (`lft`),
  KEY `rght` (`rght`),
  KEY `user_id` (`user_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

As You can see, we’ll use “Nested set model” which is implemented by Treebehavior. For maximum simplicity discussions don’t have topics and so, and to start discussion one should just post first message outside of any discussion.

Let’s bake model, controller and views for CRUD – this will be a foundation we’ll be working on. Just don’t mind validation and associations, neither admin routing – it’s not crucial to the topic. Add Tree behavior to Post model.

Cleanup

Now, we have some mess in our code already. `add` and `edit` views duplicate themselves, so I’ll remove `add` view and force PostsController::add() to render `edit` view:

//posts_controller.php
	function add() {
		if (!empty($this->data)) {
			$this->Post->create();
			if ($this->Post->save($this->data)) {
				$this->Session->setFlash(__('The post has been saved', true));
				$this->redirect(array('action' => 'index'));
			} else {
				$this->Session->setFlash(__('The post could not be saved. Please, try again.', true));
			}
		}
		$this->render("edit");
	}

and, just to make it not look silly – surround code that generates “delete” link with one if statement:

		<?php if(!empty($this->data["Post"]["id"])): ?>
			<li>Html->link(__('Delete', true), array('action' => 'delete', $this->Form->value('Post.id')), null, sprintf(__('Are you sure you want to delete # %s?', true), $this->Form->value('Post.id'))); ?>

		<?php endif; ?>

To finally polish it – remove user_id, lft, rght, modified fields from the form (because there will be automatically filled).

Oh! I almost forgot, to be able to pick some of the existing topics as parent for message you are adding – create that method in PostsController and call it in add and edit actions:

//posts_controller.php
function _getParentPosts(){
	$this->set('parents', $this->Post->find("list"));
}

Now create at least one discussion, so we can start working on some stuff. If it’s not fun for You just run this query:

INSERT INTO `posts` VALUES (1,NULL,NULL,1,8,'first message in the topic.','0000-00-00 00:00:00'),
(2,1,NULL,2,5,'my very first reply to the very first message!','0000-00-00 00:00:00'),
(3,1,NULL,6,7,'I just have some opinion about first message, and will share it with you... soon.','0000-00-00 00:00:00'),
(4,2,NULL,3,4,'I think you shouldn\'t make off-topics here','0000-00-00 00:00:00');

Now we’re up and running, and ready for the fun stuff.

Kod:

jQuery("body").ajaxStart(function(){
  $(".disable-on-xhr").attr("disabled", "disabled");
});
jQuery("body").ajaxStop(function(){
  $(".disable-on-xhr").attr("disabled", "");
});

/**
* w niektórych przypadkach możesz też chieć odblokować
* submit gdy zapytanie xhr się nie powiedzie
**/
jQuery("body").ajaxError(function(){
  $(".disable-on-xhr").attr("disabled", "");
});

Teraz wystarczy przyciskom submit dodać class=”disable-on-xhr” i smiga.

W moim pierwszym tutorialu napiszę jak wydajnie korzystać z tego co daje Ci cakePHP i jQuery. Aktualnie cake opiera się na współpracy z innym frameworkiem javascript – prototype. Ale już w wersji 1.3 core cake’a ma współpracować z jquery. Już nie mogę się doczekać. Ten tutorial oparłem na wersji 1.3.0-beta dlatego, że przy okazji jego pisania chciałem rzucić okiem na kolejną wersję tego świetnego frameworka php. Jednak nie będę korzystał z żadnych helperów jquery, zatem większość z tych rad powinna pasować do wersji 1.2 (w razie problemów – chętnie służę pomocą).
Jest to mój pierwszy tutorial, więc proszę o wskazówki, komentarze i odrobinę wyrozumiałości.

Efekt jaki chcemy osiągnąć można obejrzeć jako demo oraz źródła na świetnym hostingu, który gorąco wszystkim webdeveloperom i ich klientom polecam: vipserv.org.

W tym tekście zakładam, ze znasz podstawy cakePHP i javascript. Czyli przynajmniej zrobiłeś sławny blog tutorial , wiesz jak mniej więcej używać narzędzia bake, oraz potrafisz przynajmniej zniknąć element na stronie i zmienić jego kolor przy pomocy czystego javascript’u.

Dashboard na zakładkach

Zacznijmy od przygotowania przykładowej aplikacji. Wypiekamy (cake bake) aplikację złożoną z dwóch modeli Thing i Item (każda tabela składa się z id i pola tekstowego name).

Następnie tworzymy dla niej zbiorczy widok (tzw. dashboard, metoda all())

// /app/controllers/items_controller.php
class ItemsController extends AppController {
 //...
 function all() {}
}

// /app/views/items/all.ctp
<?php echo $this->requestAction(
            array(
               "controller"=> "items",
               "action"=> "index"),
            array("return")
      ); ?>
<?php echo $this->requestAction(
            array(
               "controller"=> "things",
               "action"=> "index"),
            array("return")
      ); ?>

Na razie nie przejmujcie się kwestią requestAction i wydajności. Zazwyczaj efekty requestAction należy umieszczać w cache’owanych elementach, ale w naszym przypadku już niedługo zrezygnujemy z samego requestAction.

tak to wygląda teraz

Zróbmy z tego widoku zakładki modyfikując widok all.ctp w następujący sposób:

<script type="text/javascript">
   $(document).ready(function() {
      $("#tabs").tabs();
   });
</script>

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Items</a></li>
      <li><a href="#tabs-2">Things</a></li>
   </ul>
   <div id="tabs-1">
      <?php echo $this->requestAction(
                  array(
                     "controller"=> "items",
                     "action"=> "index"),
                  array("return")
            ); ?>
   </div>
   <div id="tabs-2">
      <?php echo $this->requestAction(
                  array(
                     "controller"=> "things",
                     "action"=> "index"),
                  array("return")
            ); ?>
   </div>
</div>

Żeby wypieczone widoki były “otoczone” ramką z zakładki – trzeba w nich dodać taki fragment na samym końcu plików index.ctp:

<div style="float: none; clear: both;">&nbsp;</div>

tak wyglądają nasze zakładki

Dodajmy więcej elementów, żeby zobaczyć jak zachowuje się pagination…

insert into items(`name`) values ('Item 4'), ('Item 5'), ('Item 6'), ('Item 7')

i zmieńmy parametry stronicowania, żeby efekty stronicowania zobaczyć szybko ;)

class ItemsController extends AppController {
//...
	var $paginate = array(
	  'limit'=> 5
	);
//...

Widzimy, że w naszym zbiorczym widoku link ciągle prowadzi do items/index. Wolelibyśmy, żeby stronicowanie odbyło się w zakładkach.

Można oczywiście próbować rozwiązania via php. Oprogramować obsługę parametrów w metodzie all(), zmienić cel linków stronicowania i sortowania w widokach. I ogólnie dużo napracować się nad tym, żeby nasz kod wyglądał źle ;). Już za chwilę moc javascript i w szczególności jQuery przyjdzie nam z pomocą. Zanim to nastąpi – zamieńmy nasze zakładki na Ajaxowe zmieniając widok all.ctp:

// views/items/all.ctp
<script type="text/javascript">
   $(document).ready(function() {
      $("#tabs").tabs();
   });
</script>

<div id="tabs">
   <ul>
      <li>
         <?php echo $html->link(
                  "Items",
                  array(
                     "controller"=> "items",
                     "action"=> "index"
                  )
               );
         ?>
      </li>
      <li>
         <?php echo $html->link(
                  "Things",
                  array(
                     "controller"=> "things",
                     "action"=> "index"
                  )
               );
         ?>
      </li>
   </ul>
</div>

…prościzna, prawda? Kwestię requestAction też już mamy z głowy. Jednak pojawił się problem – wnętrze zakładek pojawiło się w powtórzonym layoucie.
Szybko naprawimy to w app_controller.php przy pomocy RequestHanlder:

// /app/app_controller.php
var $components = array("RequestHandler");
function beforeFilter(){
    if($this->RequestHandler->isAjax()){
      $this->layout = "ajax";
    }
}

Wrócmy do kwestii stronicowania (i sortowania przy okazji). Chcemy, aby kolejne strony ładowały się w danej zakładce. Wykorzystajmy do tego potęgę jQuery.
Dodajemy taki prosty skrypt

// views/items/all.ctp
   $('#tabs a[href*=/sort:],#tabs a[href*=/page:]').live('click', function(){
       $('#tabs>div:visible').load($(this).attr('href'));
          return false;
   });

Jeśli interesuje Cię co się w tym fragmencie dzieje, zapraszam na do innego wpisu. W dużym skrócie: łapiemy linki, które mają w adresie “sort:” i “page:” i zmuszamy je aby przeładowały zawartość zakładki, zamiast całej strony.

Z pomocą przyszedł chankov.net z takim oto skryptem:

$('a[href*=/sort:],a[href*=/page:]').livequery('click', function(){
    $('#content').load($(this).attr('href'));
    return false;
});

Niestety nie ma chyba kontroli nad tym jakie id jquery.ui nada div’om, które są zawartością dla danej zakładki. Jednak i na to jest sposób (dzięki pluginowi livequery), nalezy zamiast

$('#content').load($(this).attr('href'));

Użyć nieco bardziej skomplikowanego selektora. Zakładając, że #content to div przechowujący zakładki (wywołałeś jQuery(“#content”).tabs()), to nalezy zmienić powyższą linię na

jQuery('#contents>div:visible').load(jQuery(this).attr('href'));

Dzięki selektorowi ‘#contents>div:visible’ znajdziesz w elemencie o id #contents pierwszego div’a (>div), który jest widzialny (:visible), a to właśnie jest element, którego zawartość należy uaktualnić nowymi danymi…

Jeśli używasz zakładek (jQuery.UI.tabs()) z włączonym keszowaniem (co jest dobrym pomysłem, ze względu na czas odpowiedzi) to możesz w końcu dojść do momentu, że należy wyczyścić cache dla konkretnej zakładki
(dlatego, ze na przykład został wykonany ajaxowy submit formularza).

Nie znajdziesz niestety funkcji “clearCache”, którą ja bezskutecznie poszukiwałem (zakładałem, że najpierw muszę wyczyścić cache dla tej zakładki, a później obsłużyć załadowanie nowych elementów do zakładki). Okazuje się, że można to zrobić równocześnie za pomocą metody “load”:

jQuery(“#idKonteneraZakladek”).tabs(“load”, [id_zakłaki]);

Więcej szczegółów.