Ceci est le showcase de l'API Ajax de Google... elle regroupe beaucoup plus que du simple Ajax, elle intègre de la traduction grâce au moteur de google translate, gmaps, gearth, blogger, des graphiques, etc etc.
Intégrable facilement sur n'importe quel site, faites vous plaisir, il suffit de cliquer sur l'exemple voulut puis de choisir ViewDocs en haut à droite.
On peut même et ca c'est pas mal, changer le code de la vue du haut puis de générer le résultat en bas.
:)
http://code.google.com/apis/ajax/playground/
mercredi 29 septembre 2010
samedi 18 septembre 2010
[GWT] Problème de relève d'évenement
En GWT, pour relever des évenements, on utilise des handlers.
Parfois, comme dans la classe Slider de GXT com.extjs.gxt.ui.client.widget.Slider, des méthodes éxistent déjà pour déclencher des actions lors d'un évenement particulier.
Déclenchons par exemple un évenement au clic sur notre slider.
Si on instancie un slider, l'auto completion d'Eclipse ne nous montre que les méthodes publiques. Or si on regarde dans la doc, il existe un bon nombre de méthodes permettant de faire ca : la méthode OnClick par exemple.
Mais comment l'obtenir ? Je me suis prit la tête pendant une après midi pour voir que ces méthodes sont protected... Des méthodes ?? Protected ?? mais pourquoi ? Et bien j'imagine que vu que c'est destiné à être des scripts JavaScript, cela ne doit être fait qu'une fois, lors de son instanciation... à vérifier, n'hésitez pas à me dire si vous avez une meilleure explication.
En tout cas, vous l'avez compris, ce n'est pas perdu, elles sont là et on peut les utiliser.
Au lieu d'instancier un slider "normalement", en utilisant le constructeur normal :
On peut l'instancier et surcharger les méthodes que l'on veut utiliser.
Parfois, comme dans la classe Slider de GXT com.extjs.gxt.ui.client.widget.Slider, des méthodes éxistent déjà pour déclencher des actions lors d'un évenement particulier.
Déclenchons par exemple un évenement au clic sur notre slider.
Si on instancie un slider, l'auto completion d'Eclipse ne nous montre que les méthodes publiques. Or si on regarde dans la doc, il existe un bon nombre de méthodes permettant de faire ca : la méthode OnClick par exemple.
Mais comment l'obtenir ? Je me suis prit la tête pendant une après midi pour voir que ces méthodes sont protected... Des méthodes ?? Protected ?? mais pourquoi ? Et bien j'imagine que vu que c'est destiné à être des scripts JavaScript, cela ne doit être fait qu'une fois, lors de son instanciation... à vérifier, n'hésitez pas à me dire si vous avez une meilleure explication.
En tout cas, vous l'avez compris, ce n'est pas perdu, elles sont là et on peut les utiliser.
Au lieu d'instancier un slider "normalement", en utilisant le constructeur normal :
jeudi 16 septembre 2010
[OBJC] Découverte de l'Objective C / 31 jours = 31 applis, on va tenter de garder le rythme !
Je me suis mis au developpement iPhone depuis quelques jours.
Pour se faire, j'ai installé un vm Mac OS X 10.6.2 puis j'ai installé XCode.
Ensuite j'ai joué avec et j'ai trouvé ça très marrant.
J'ai ensuite eu la chance d'obtenir un bouquin sur le Cocoa.
Ca explique le fonctionnement et les analogies entre l'objective C et le Java que je connais mieux.
Une fois les bases assimilées, le code objective C m'est apparu plus clair.
Je me suis ensuite lancé dans la création d'un TP personnel : une calculatrice.
Plutot que de refaire le tuto, je vous conseille de suivre celui-ci que j'ai trouvé très complet. J'ai laissé un commentaire sur son site pour lui proposer une amélioration au niveau de son code. Ceci dit, vous pouvez suivre son tuto les yeux fermés, ca marchera :)
Voilà ma calculatrice si ca peut vous motiver :)
Je vous conseille ce site, très bien écrit et assez récent (par rapport à aujourd'hui)
TUTO CALCULATRICE
Faites vous plaisir.
autre ressource
Pour se faire, j'ai installé un vm Mac OS X 10.6.2 puis j'ai installé XCode.
Ensuite j'ai joué avec et j'ai trouvé ça très marrant.
J'ai ensuite eu la chance d'obtenir un bouquin sur le Cocoa.
Ca explique le fonctionnement et les analogies entre l'objective C et le Java que je connais mieux.
Une fois les bases assimilées, le code objective C m'est apparu plus clair.
Je me suis ensuite lancé dans la création d'un TP personnel : une calculatrice.
Plutot que de refaire le tuto, je vous conseille de suivre celui-ci que j'ai trouvé très complet. J'ai laissé un commentaire sur son site pour lui proposer une amélioration au niveau de son code. Ceci dit, vous pouvez suivre son tuto les yeux fermés, ca marchera :)
Voilà ma calculatrice si ca peut vous motiver :)
Je vous conseille ce site, très bien écrit et assez récent (par rapport à aujourd'hui)
TUTO CALCULATRICE
Faites vous plaisir.
autre ressource
mardi 14 septembre 2010
[GWT][GXT] Les grids
En GXT, on a souvent le besoin de mettre en forme des données. J'ai eu besoin de le faire, en me baladant sur le showcase de Sencha, j'ai vu le plugin exapander pour les grid. Un très beau rendu qui permet d'afficher des compléments d'informations pour une liste d'objets donnée.
Ca donnera ça :
On part de notre modèle pour aller vers la vue.
Voici notre modèle : Student =
On déclare 3 attributs pour faire simple et un constructeur recevant nos 3 attributs.
On créé ensuite une interface héritant de BeanModelMarker
Ne surtout pas oublier l'annotation @BEAN({package}.{Class}.class), elle est très importante dans la liaison entre la classe Student et cette interface.
Maintenant on passe du côté Vue
Là ou on veut afficher notre grid, on créé une liste de Student, appelée students :
On se créé un magasin puis pour chaque Student de notre liste students, on génère le BeanModel associé. Ainsi, nous avons un store contenant des BeanModel :
On créé ensuite un XTemplate (KESAKO ? c'est ce qui sera affiché lorsque l'on cliquera sur le petit plus dans notre grid, on peut ne pas le faire si on veut juste une grid standard) :
2 méthodes très importantes ci-dessus,
colum.setHeader("Prénom");
La méthode magique est cette dernière. Ce qu'on lui passe => firstName est, vous l'avez peut être déjà remarqué, le nom d'un des attributs de mon objet Student. Il faut retourner dans notre modèle Student pour générer tous les getters dont nous aurons besoin. ici firstName et LastName Student.class.php
Maintenant c'est quasiment fini, il faut créer le fameux Grid en lui passant notre liste de (Student)BeanModel et notre ColumnModel cm.
Voilà, c'est fini et normalement, je viens de le tester, ca fonctionne niquel !
Enjoy ;)
Ca donnera ça :
On part de notre modèle pour aller vers la vue.
Voici notre modèle : Student =
On créé ensuite une interface héritant de BeanModelMarker
Maintenant on passe du côté Vue
Là ou on veut afficher notre grid, on créé une liste de Student, appelée students :
Maintenant, il faut créer les colonnes. C'est là que c'est Magique.On créé une liste de ColumnConfig, on y ajoute notre plugin expander qui nous permet d'afficher des info supplémentaires selon le précédent XTemplate puis on créé autant de nouveau ColumnConfig que l'on veut de colonne.
colum.setHeader("Prénom");
colum.setId("firstName");
Maintenant c'est quasiment fini, il faut créer le fameux Grid en lui passant notre liste de (Student)BeanModel et notre ColumnModel cm.
Voilà, c'est fini et normalement, je viens de le tester, ca fonctionne niquel !
Enjoy ;)
lundi 13 septembre 2010
[GWT] Les Layouts
Première étape de la création d'une application GWT, l'interface utilisateur.
En GWT, on utilise les Layouts (Patron, MasterPage).
En gros on créé l'architecture de la vue en créant un layout général.
Toujours avec la fameuse librairie GXT (cf les précédents tuto), on va réussir à faire un super truc très rapidement.
Deux trucs à savoir :
1) Il existe beaucoup de types de layouts. Nous utiliserons le type de layout utilisé dans l'exemple du showcase de Sencha BorderLayoutExample car il est très performant, assez rapide de mise en oeuvre et déjà stylé et largement parametrable, c'est probablement au moment ou je parle le plus puissant layout de GWT.
2) Pour redimensionner automatiquement notre layout lorsqu'on redimensionne le navigateur, il faut utiliser l'objet VIEWPORT
Pour intégrer Viewport à notre exemple de borderlayout, on va importer Viewport et l'instancier. Il faudra toujours considérer ViewPort comme la vue globale.
J'ai renommé l'exemple BorderLayoutExample en GeneralLayout.
J'ai enlevé la classe mère LayoutContainer de la déclaration de classe, l'objet ViewPort héritant déjà de LayoutContainer
Je ne vais pas revenir sur les exemples de Sencha, c'est assez explicite, je vous montre seulement ce qui change dans le fichier GeneralLayout à la fin, lorsqu'on ajoute du contenu à une zone du layout :
Il reste une chose à faire maintenant, utiliser viewport comme vue globale dans le onModuleLoad()
Ainsi, on peut maintenant redimensionner notre navigateur, le layout se redimensionnera instantanément.
Plutot Génial hein ?
En GWT, on utilise les Layouts (Patron, MasterPage).
En gros on créé l'architecture de la vue en créant un layout général.
Toujours avec la fameuse librairie GXT (cf les précédents tuto), on va réussir à faire un super truc très rapidement.
Deux trucs à savoir :
1) Il existe beaucoup de types de layouts. Nous utiliserons le type de layout utilisé dans l'exemple du showcase de Sencha BorderLayoutExample car il est très performant, assez rapide de mise en oeuvre et déjà stylé et largement parametrable, c'est probablement au moment ou je parle le plus puissant layout de GWT.
2) Pour redimensionner automatiquement notre layout lorsqu'on redimensionne le navigateur, il faut utiliser l'objet VIEWPORT
Pour intégrer Viewport à notre exemple de borderlayout, on va importer Viewport et l'instancier. Il faudra toujours considérer ViewPort comme la vue globale.
J'ai renommé l'exemple BorderLayoutExample en GeneralLayout.
J'ai enlevé la classe mère LayoutContainer de la déclaration de classe, l'objet ViewPort héritant déjà de LayoutContainer
Il reste une chose à faire maintenant, utiliser viewport comme vue globale dans le onModuleLoad()
Ainsi, on peut maintenant redimensionner notre navigateur, le layout se redimensionnera instantanément.
Plutot Génial hein ?
jeudi 9 septembre 2010
[GWT] Changer les ports des applications 8888 et 9997
J'ai vu que personne sur le web ou presque n'en parlait, par défaut, une application GWT est lancée sur un serveur d'application embarqué JETTY sur le port 8888. Lorsque vous développez vos applications, il faut installer un plugin dans votre navigateur qui va communiquer avec votre application codée en JAVA et tout retranscrire la partie client en JavaScript.
Pour développer plusieurs projets en même temps, il faut donc paramétrer 2 ports.
Pour accéder aux paramètres de son application, il faut faire un clique droit sur son projet et sélectionner Run As > Run Configurations :
On arrive dans la configuration de notre application GWT.
Il faut changer à 2 endroits des ports.
Le premier, celui de JETTY. Par défaut, il est égal à 8888, j'ai donc modifié le port en 8888 vers 8890, on peut aussi bien choisir de cocher l'option qui permet de toujours choisir un port non utilisé. C'est pratique, autant s'en servir.
Deuxièmement, il faut changer le deuxième port en se placant dans l'onglet Arguments et en ajoutant l'option -codeServerPort 9998, par exemple pour le numéro de port
Ainsi, vous pouvez avoir plusieurs projets accessible grâce à la combinaison des 2 ports.
Voilà pour la petite astuce.
Pour développer plusieurs projets en même temps, il faut donc paramétrer 2 ports.
Pour accéder aux paramètres de son application, il faut faire un clique droit sur son projet et sélectionner Run As > Run Configurations :
On arrive dans la configuration de notre application GWT.
Il faut changer à 2 endroits des ports.
Le premier, celui de JETTY. Par défaut, il est égal à 8888, j'ai donc modifié le port en 8888 vers 8890, on peut aussi bien choisir de cocher l'option qui permet de toujours choisir un port non utilisé. C'est pratique, autant s'en servir.
Deuxièmement, il faut changer le deuxième port en se placant dans l'onglet Arguments et en ajoutant l'option -codeServerPort 9998, par exemple pour le numéro de port
Ainsi, vous pouvez avoir plusieurs projets accessible grâce à la combinaison des 2 ports.
Voilà pour la petite astuce.
vendredi 3 septembre 2010
[GWT] Découverte de la librairie GXT
Sencha propose une librairie EXJ GWT appellée GXT.
On peut y accéder ici : http://www.sencha.com
On télécharge la dernière version stable, au jour d'aujourd'hui, septembre 2010, c'est la version 2.2
On part du principe qu'on a déjà créé un projet GWT.
Dans notre projet GWT on créé un dossier lib puis un dossier gxt-2.2.0 à la racine du projet, on y extrait le fichier gxt.jar présent à la racine du fichier téléchargé.
Il faut maintenant inclure le jar à notre projet. Dans eclipse, il suffit de faire un clic droit sur notre projet -> proprietés (ou Alt + Entrée) puis de choisir "Include Jar"
On va chercher le fichier gxt.jar qui se trouve dans ~/WORKSPACE/PROJECT/lib/
gxt.jar
Il apparait ainsi dans la liste des librairies ajoutées au projet.
Il faut ensuite ajouter les ressources au projet (icons,images, model). Pour faire cela, il faut cliquer sur l'onglet Source (des proprietés du projet) puis choisir "Add Folder". On va chercher le dossier lib/gxt-2.2.0/samples/resources/src
Il faut maintenant copier le dossier ressources présent dans le fichier que vous avez téléchargé gxt-2.2.0 et vers le dossier war.
Il faut maintenant modifier le fichier html pour inclure le fichier css de gxt-all.css
On peut désormais aller sur le show case de sencha pour faire nos emplettes, Voir source, copier coller et remplacer la regex suivante \s[0-9]+.\s par "".
Vous pouvez télécharger le projet minimal ici :
On peut y accéder ici : http://www.sencha.com
On télécharge la dernière version stable, au jour d'aujourd'hui, septembre 2010, c'est la version 2.2
On part du principe qu'on a déjà créé un projet GWT.
Dans notre projet GWT on créé un dossier lib puis un dossier gxt-2.2.0 à la racine du projet, on y extrait le fichier gxt.jar présent à la racine du fichier téléchargé.
Il faut maintenant inclure le jar à notre projet. Dans eclipse, il suffit de faire un clic droit sur notre projet -> proprietés (ou Alt + Entrée) puis de choisir "Include Jar"
On va chercher le fichier gxt.jar qui se trouve dans ~/WORKSPACE/PROJECT/lib/
gxt.jar
Il apparait ainsi dans la liste des librairies ajoutées au projet.
Il faut maintenant copier le dossier ressources présent dans le fichier que vous avez téléchargé gxt-2.2.0 et vers le dossier war.
Il faut maintenant modifier le fichier html pour inclure le fichier css de gxt-all.css
<link type="text/css" rel="stylesheet" href="resources/css/gxt-all.css" />Il faut maintenant référencer gxt en ajoutant ces lignes dans le fichier de config TestGXT.gwt.xml :
<!-- Other module inherits -->GXT est désormais installé.
<inherits name='com.extjs.gxt.ui.GXT'/>
<inherits name='com.extjs.gxt.samples.resources.Resources'/>
On peut désormais aller sur le show case de sencha pour faire nos emplettes, Voir source, copier coller et remplacer la regex suivante \s[0-9]+.\s par "".
Vous pouvez télécharger le projet minimal ici :
Inscription à :
Articles (Atom)