cakebaker » javascript

Grouping “constants” with JavaScript

cakebaker — Wed, 14 Jul 2010 14:10:32 +0000

A while ago I wrote about how you can group related constants in PHP5 by using a constants class:

class MyConstants {
    const AA = 'value';
    const BB = 'another value';
}

echo MyConstants::AA; // output: value

Now, while experimenting with JavaScript (or more precisely with Node.js) I got some constants in my code I wanted to organize with such a constants class. My first, albeit naive, approach looked like:

var sys = require('sys');

function MyConstants() {
    const AA = 'value';
    const BB = 'another value';
}

sys.puts(MyConstants.AA); // output: undefined

However, as you can see, this doesn’t work. One reason is that const “[c]reates a constant that can be global or local to the function in which it is declared.”. So it isn’t possible to create a constants class like I imagined…

This means we have to emulate a constants class by using static properties and relying on the naming convention that names of constants are uppercased (i.e. the “constants” are technically not constants and their value can be changed):

var sys = require('sys');

function MyConstants() {
}

MyConstants.AA = 'value';
MyConstants.BB = 'another value';

sys.puts(MyConstants.AA); // output: value

If there is a better approach, please let me know.

Jamal Helper

cakebaker — Tue, 01 May 2007 07:32:50 +0000

In the last few days I experimented again with the Javascript MVC framework Jamal. To make its usage a bit easier I wrote a simple helper (you can find it in the downloads section).

As usual, you have to add the helper to the $helpers array of your controller(s) before you can use it:

var $helpers = array('Jamal');

The helper provides two public methods: link() and set().

The link() method is used in the head section of the layout to include all Jamal-related files.

echo $jamal->link();

If DEBUG is greater than 0, it creates something like:

As soon as you switch DEBUG to 0, it will include the packed version of your scripts (you have to pack them “manually” with the Ant script that comes with Jamal):

The second method, set(), is used to specify which (Javascript) controller action is executed when the respective view is loaded. So in the view you will do something like:

$jamal->set('MyController', 'myAction');

Additionally, you have to add the variable $jamal_for_layout to the body tag of your layout:

This will then generate the following code for Jamal:

>body class="jamal {controller:'MyController',action:'myAction',debug:false}">

Happy baking with Jamal :)

MVC with Javascript

cakebaker — Sat, 17 Mar 2007 14:38:03 +0000

Javascript was one of those things I tried to avoid up to now. I don’t know why, but somehow I disliked it (probably because it was a pain to use it in the early days of Javascript) ;-) Sure, I used a bit of Ajax here and there, but thanks to the CakePHP Ajax helper I didn’t had to touch the Javascript.

Lately, I decided to do an Ajax application and so I had to learn Javascript. To make my life easier, I decided to use the JQuery framework. I have chosen JQuery over Prototype because I heard many good things about JQuery, and the API documentation was (and still is) more intuitive.

Of course, my first attempt ended in a total mess. The result looked more like spaghetti than code ;-) That’s when I recalled an article (in German) about a Javascript MVC framework called Jamal, developed by Timo Derstappen. From the Jamal website:

The MVC concept is easy to adopt for javascript

Controller: Interaction with the user interface (events)

Model: Business Logic and AJAX calls

View: DOM, CSS modifications

That makes sense. So I had a closer look at Jamal. It looked nice, but it bothered me that you would have to use a CSS class “jamal” in the HTML code to make it work. So I wrote my own implementation called “jscake” which avoids that. You can find the first version in the downloads section.

Let’s create a simple “Hello world” example with jscake. Our example (CakePHP) view will contain a link and a div to show the messages:

click

First we create our model. All models are in the “$m” namespace (please correct me if that is the wrong term), which is a shortcut for “jscake.models”. So our model is called “$m.Example”. The model contains one function to return the text which should be displayed:

// app/webroot/js/models/example.js
$m.Example = {

    getText: function() {
        return "hello world";
    }
};

The view is similar to the model, it contains only one function, too. In the function the element with the id “messages” is located and the text appended to that element. Similar to the models the views are in the “$v” namespace.

// app/webroot/js/views/examples.js
$v.Examples = {

    showMessage: function(message) {
        $('#messages').append(message);
    }
};

Last, but not least, we have to create the controller. The index function is automatically called when the JQuery ready event occurs. In this function we simply say that when someone clicks on the link, the other function of the controller (sayHelloWorld) should be executed.

//app/webroot/js/controllers/examples_controller.js
$c.ExamplesController = {

    index: function() {
        $('a').click(this.sayHelloWorld);
    },

    sayHelloWorld: function() {
        $v.Examples.showMessage($m.Example.getText());

        return false;
    }
};

To make our example work we have to include all needed Javascript files in our view, with CakePHP 1.2 it looks like:

link(array('jquery-1.1.2', 'jscake', 'controllers/examples_controller',
'models/example', 'views/examples', 'start'), false); ?>
click

Have fun with jscake! Feedback is welcome :)

Referencing Javascript files

cakebaker — Wed, 21 Feb 2007 16:52:44 +0000

If you want to use a Javascript file, you usually reference it in the head section of your layout:


    link('script.js'); ?>

But sometimes you want to use a certain Javascript file only in one view. Then it doesn’t make sense to reference it in the layout. You could take the PHP statement from above and place it in your view, that will work. But it is not a clean solution as the Javascript reference is placed somewhere in the middle of the generated HTML code.

Fortunately, CakePHP 1.2 allows you to define a reference to a Javascript file which is then added to the head section of the generated HTML code. For this purpose the variable $scripts_for_layout has to be added to the layout:

In the view you can now link to the Javascript file with:

$javascript->link('script.js', false);

That’s it.

New projects on CakeForge

cakebaker — Tue, 12 Sep 2006 09:27:16 +0000

My latest post about projects on CakeForge was two months ago. Since then several new projects were started. Here a short overview.

BehaviourJS Helper: As its name says it is a helper for the Behaviour JavaScript library, a library that allows you to apply JavaScript to your HTML elements by using CSS selectors. There is already a release available.

MiniCalendar: The goal of this project is to provide a calendar for CakePHP.

XML Parser Component: It is obvious what the goal of that project is: to create an XML parser component. I don’t know how it will differ from the XML parser that is part of the coming 1.2 version of CakePHP.

Qubix CMS: The goal of this project is to create a CMS for Flash sites.

Capadonna: This is another Flash project. From the project description: “CakeAMFPHP / Actionscript Type Mapping System. Client side type mapping system to convert Cake data to and from typed flash objects via CakeAMFPHP remoting.”

DojoHelper: Another helper for a JavaScript library, this time for the Dojo Javascript Toolkit.

hdCalendar Plugin: Another calendar. In contrast to the aforementioned MiniCalendar project there is already some code available (http://cakeforge.org/frs/?group_id=82).

CakeForum: The goal of this project is obvious: to create a forum application.

As always, good luck to these developers :)

Updating multiple divs with Ajax. Without crashing Firefox

cakebaker — Fri, 18 Aug 2006 07:37:57 +0000

In an earlier post I showed you how you can update multiple divs with Ajax. But there was one problem: it crashed Firefox on my machine, and other people reported the same problem, whereas it worked for others…

In a comment, Josh Southern, pointed me to the cause of the problem: the “latest” version, 1.4, of prototype, the Javascript framework used by CakePHP, caused the problem. After replacing the prototype library with the latest version (1.5.0_rc final) provided with script.aculo.us, the example worked fine with Firefox. Thanks to Josh for the hint!

Update (2006-10-01): Corrected links.

A simple redirect component

cakebaker — Tue, 28 Mar 2006 15:11:57 +0000

I already wrote about doing a redirect with Ajax. Now, I created a simple component from that code I presented there:

// app/controllers/components/redirect.php
class RedirectComponent extends Object
{
    var $controller;
    var $components = array('RequestHandler');

    function startup(&$controller)
    {
        $this->controller =& $controller;
    }

    function goto($url)
    {
        if ($this->RequestHandler->isAjax())
        {
            $this->controller->set('url', $url);
        }
        else
        {
            $this->controller->redirect($url);
        }
    }
}

The usage is easy. Add the component to the components array:

var $components = array('Redirect');

Afterwards you can use it in the following way:

$this->Redirect->goto('/mycontroller/myaction');

Do not forget do add the code snippet to your view which necessary to do the javascript redirect:

codeBlock('window.location = '.json_encode($url)); ?>

Update (2006-04-03): Small bug fixed in startup function.
Update (2009-12-05): Using json_encode to prevent a possible javascript injection problem. Thanks to pb for the hint.

Redirect with Ajax

cakebaker — Wed, 15 Mar 2006 08:28:23 +0000

In my current project I have a login form I want to validate with Ajax. If everything is ok, the user should be redirected to the respective start page. As it seems to be impossible to do the redirect on the server-side (at least to me), I do it on the client-side. I use the following snippet in my view:


    form(array('action' => '/login'), 'post',
                                              array('update' => 'login')); ?>
    ...
    
    codeBlock('window.location = "'.$url.'"'); ?>

And in my controller I use the following code:

if ($this->RequestHandler->isAjax())
{
    $this->set('url', '/'.$page);
}
else
{
    $this->redirect($page);
}

Let’s crash Firefox!

cakebaker — Tue, 31 Jan 2006 17:16:10 +0000

Today I was able to crash Firefox with a very simple JavaScript. That is the JavaScript:

Well, that script works as expected if you have it in a “normal” view. But it leads to a “Segmentation fault” (and therefore to a crash of Firefox) if the same script is in a view you return with Ajax. I think the problem is the “eval” function of JavaScript as it seems it cannot execute custom functions (I am not a JavaScript expert so that is only a guess). I solved the problem with moving the JavaScript function to the “normal” view. So I have in the view I return with Ajax only the call to my function:

That works :)

Nice Date-Picker Widget

cakebaker — Sun, 15 Jan 2006 13:52:33 +0000

frequency decoder presents a nice date-picker widget. At the bottom of the page, there are also links to other useful Javascripts. I especially like the slider control which looks very cool!

[via Olle's bookmarks]