Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - Balise - programmation

Cocoa pour les JS Gurus

Hadrien — Fri, 10 Oct 2008 09:56:00 +0200

Voilà une news qu'elle me fait plaisir et qu'elle va faire plaisir à tout les web devs du coin qui aiment leur mac mais qui ont du mal avec l'Objective-C et autres langages systèmes.

JSCocoa est un framework qui permet d'écrire des application Cocoa, donc pour Mac OS X, en ECMAScript (Javascript) !! Ils se décrivent fort bien, donc laissons leur la parole :

JSCocoa bridges Cocoa to JavascriptCore (WebKit's JS engine). It allows you to call C code, ObjC code, use C structs, and build Javascript classes inheriting from ObjC classes.

Donc, JSCocoa fait le lien entre Cocoa et JavascriptCore, qui est le moteur JS de Webkit et qui fait partie du système Mac OS X. Cette lib permet donc de faire des appels vers du code en C, Obj-C et de construire des classes javascript héritant d'objets obj-C :o Wahou !

Moi qui ai toujours galéré à faire le premier pas dans l'objective C, je vais peut être enfin pouvoir me mettre à la programmation avec XCode :D

Je ne me priverais pas de faire des tutos si j'arrive à faire quelque chose de cette bibliothèque pleine d'avenir

Menu en colonne en Javascript

Hadrien — Tue, 12 Feb 2008 12:55:00 +0100

Xylpho voulait pour son site, un menu en colonne comme le fait Mac OS X :

Ce menu devait être à la fois accessible, référençable et dynamique. Donc, pas de flash ! Javascript à la rescousse. Je lui ai donc codé une classe JS qui construit un menu en colonne à partir de listes imbriquées…

En gros, tout le plan du site est intégré dans la page et structuré avec des ul et des li imbriqués :

Voir le code HTML

<ul id="menuCol">
	<li>
		2005
		<ul>
			<li>
				July
				<ul>
					<li>
						27
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=4">
									Joulie Interface
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				September
				<ul>
					<li>
						29
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=11">
									Version Texte
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				October
				<ul>
					<li>
						29
						<ul>
							<li class="selected">
								<a href="http://www.alti.info/post/2008/02/10/?id=18">
									Qjelt Octobre en VideoCast
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				November
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=19">
									www.alti.info
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				December
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=20">
									OW Pick !!!
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Ensuite, ma classe Javascript va masquer et afficher les bons ul selon les clicks sur les li. Le menu se crée en créant un nouvel objet de la sorte :

<script type="text/javascript" charset="utf-8">
//<![CDATA[
	var test = new MenuCol.Menu('menuCol');
	MenuCol.Item.open();
//]]>
</script>

La statique open() permet d'initialiser le menu sur le li qui contient la classe 'selected' afin de revenir sur le menu correspondant après un chargement de page.

Tout ceci fonctionne grâce au script MenuCol.js, que je rends disponible sous licence GPLv3. Faites en ce que voulez, mais souvenez vous de citer mon nom.

Voir le code Javascript

// Global object
var MenuCol = {};

/**
 * Flag to stop propagation of event
 * @type Boolean
 */
MenuCol._stopPropagation = false;

/**
 Shortcut to document.getElementById
 * @param {String/Element} id Element or Element's id
 * @returns Element
 */
MenuCol.get = function(id)
{
	var elmt = document.getElementById(id);
	if (elmt)
	{
		return elmt;
	}
	return id;
};

// Objects collection
MenuCols = new Array();

/**
 * Menu class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Menu = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Items inside Menu
	 * @type Array
	 */
	this.items = new Array();
	
	MenuCols.push(this);
	
	this.init();
}
MenuCol.Menu.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Item object with all li children
		var lis = this.element.getElementsByTagName('li');
		for (var i = 0; lis[i]; i++)
		{
			if (lis[i].parentNode == this.element)
			{
				var item = new MenuCol.Item(
					lis[i]
				);
				item.parent = this;
				this.items.push(
					item
				);
			}
		}
	},
	/**
	 * Hide menu
	 */
	hide: function()
	{
		this.element.style.display = 'none';
	},
	/**
	 * Show Menu
	 */
	show: function()
	{
		this.element.style.display = 'block';
	}
};

MenuCol.Items = new Array();
/**
 * MenuCol.Item class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Item = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Submenu
	 * @type MenuCol.Menu
	 */
	this.submenu = null;
	
	MenuCol.Items.push(this);
	
	this.init();
}
MenuCol.Item.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Menu object with all UL children
		var uls = this.element.getElementsByTagName('ul');
		for (var i = 0; uls[i]; i++)
		{
			if (uls[i].parentNode == this.element)
			{
				this.submenu = new MenuCol.Menu(
					uls[i]
				);
				this.submenu.parent = this;
				this.submenu.hide();
			}
		}
		
		// Add on click Event on element
		this.element.parent = this;
		this.element.onclick = this.onclick;
	},
	/**
	 * onclick event
	 */
	onclick: function()
	{
		// Exec only on first fire
		if (!MenuCol._stopPropagation)
		{
			// If item hasn't submenu, we don't do anything
			if (!this.parent.submenu)
			{
				return true;
			}
			
			// Hiding all sub menus of same level
			for (var i = 0; this.parent.parent.items[i]; i++)
			{
				if (this.parent.parent.items[i].submenu)
				{
					this.parent.parent.items[i].submenu.hide();
					this.parent.parent.items[i].activate(
						true,
						true
					);
				}
			}
			
			// …and their children
			for (i = 0; this.parent.submenu.items[i]; i++)
			{
				this.parent.submenu.items[i].activate(true);
				if (this.parent.submenu.items[i].submenu)
				{
					this.parent.submenu.items[i].submenu.hide();
				}
			}
			
			// Show corresponding sub menu
			this.parent.submenu.show();
			
			// And its parents
			var parent = this.parent ?
				this.parent :
				null;
			while (parent)
			{
				parent.parent.show();
				parent.activate(
					false,
					false
				);
				parent = parent.parent ?
					parent.parent.parent :
					null;
			}
			
			// Activate item
			this.parent.activate(
				false,
				true
			);
			
			// Prevents event propagation on parent's elements
			MenuCol._stopPropagation = true;
			setTimeout(
				function()
				{
					MenuCol._stopPropagation = false;
				},
				20
			)
		}
	},
	/**
	 * activate element
	 * @param {Boolean} oupa True to deactivate
	 */
	activate: function(oupa, submenu)
	{
		// Activate item
		if (!oupa)
		{
			this.element.className = 'selected';
		}
		else
		{
			this.element.className = '';
		}
		// Activate submenu
		if (submenu)
		{
			if (!oupa)
			{
				this.submenu.element.className = 'selected';
			}
			else
			{
				this.parent.element.className = '';
			}
		}
	}
};

/**
 * Open menu on activated li. Will open on li with 'selected' class
 */
MenuCol.Item.open = function()
{
	for (var i = 0; MenuCol.Items[i]; i++)
	{
		if (MenuCol.Items[i].element.className == 'selected')
		{
			if (MenuCol.Items[i].submenu)
			{
				MenuCol.Items[i].element.onclick();
				
			}
			else
			{
				MenuCol.Items[i].parent.parent.element.onclick();
				MenuCol.Items[i].activate();
			}
		}
	}
}

Voici un exemple du résultat qui affiche les archives de ce blog.
Télécharger le script

L'iPhone est enfin parfait !

Hadrien — Wed, 17 Oct 2007 19:51:00 +0200

Ça y est ! Apple a enfin décidé de se sortir les doigts du cul et de proposer un SDK officiel pour développer des applications pour l'iPhone !

Il ne manquait que ça à l'iPhone pour qu'il devienne (pour moi du moins) totalement indispensable. Apple nous avait fait doucement rigoler avec ses applications web 2.0 uniquement disponible avec une connexion internet. Et grassement avec le briquage des iPhones où étaient installées des applications développées avec le SDK non officiel.

Et bien, voilà, c'est fait. Apple l'a annoncé. Et Mac4Ever nous l'a traduit. Un SDK officiel sera distribué par Apple en Février 2008 !

Nouvelle version de YUI (2.3.0)

Hadrien — Mon, 06 Aug 2007 01:29:00 +0200

YAHOO nous offre une nouvelle version de YUI (YAHOO User Interface) qui passe donc au numéro 2.3.0 \o/

Cette nouvelle version apporte 250 corrections de bugs et améliorations mais surtout de nouveaux éléments !!!

Rich Text Editor (beta) : La nouvelle classe YAHOO.widget.Editor propose d'ajouter en tout simplicité un éditeur de texte WYSIWYG du même style que FCKEditor ou TinyMCE. D'après la démo que j'ai essayé, il a l'air carrément mieux que ces précédents ! Très prometteur !!
Base CSS : Le pack de CSS comporte maintenant Reset CSS qui permet de supprimer tout les styles par default de tout les navigateurs. Bon, là, je suis pas trop partisan de cette idée, mais ça plaira à certain…
YUI Loader (beta) : La nouvelle classe YAHOO.util.YUILoader permet de charger des modules à la volée. Du coup, on ne charge plus que le loader au début du script. Ensuite, en cours de script on appelle l'un ou l'autre module dont on a besoin (colorpicker, treeview…) et il seront chargé seulement s'ils ne le sont pas déjà. Ça peut être bien pratique.
ImageLoader (expérimental) : YAHOO.util.ImageLoader permet de programmer le chargement des images dans la page. Avec cette classe, on peut déterminer que telles images qui ne sont pas forcément visibles au début ne seront chargées que quand on en aura besoin. Cela permet donc d'accélérer le chargement de la page.
Color Picker Control (beta) : YAHOO.widget.ColorPicker est un outil pour sélectionner facilement une couleur dans une palette.
Test Utility (beta) : Voilà une classe très intéressante et très attendue ! YAHOO.tool.TestCase permet de réaliser des tests unitaires sur vos scripts. Je vais m'y pencher dès demain et vous faire un petit tutorial sur son utilisation.

Pour finir, cette nouvelle version de YUI sera plus facilement skinnable et pour le prouver, un nouveau thème par defaut plus agréable est fourni (voir screenshot).

Complément sur JSON

Hadrien — Mon, 16 Jul 2007 20:40:00 +0200

En complément de l'article sur JSON, voici une petite méthode récursive à laquelle je viens de réfléchir pour explorer les tréfonds d'un objet JSON. C'est cadeau

var test = {
	truc : {
		truc1: 1,
		truc2: 2,
		grosTruc: {
			truc1: 3,
			truc2: 4
		}
	},
	muche : {
		muche1: 1,
		muche2: 2,
		grosMuche: {
			muche1: 3,
			muche2: 4
		}
	}
};

var foreach = function (obj)
{
	for (i in obj)
	{
		if (typeof obj[i] == 'object')
		{
			foreach(obj[i]);
		}
		else
		{
			window.console.log(i + ' - ' + obj[i]);
		}
	}
}
foreach(test);

Résultat :

truc1 - 1
truc2 - 2
truc1 - 3
truc2 - 4
muche1 - 1
muche2 - 2
muche1 - 3
muche2 - 4