WEBDEV 19 - Intégration d'une gallerie d'image avec JQuery

On trouve beaucoup de de gallerie d'image sur le web. La plus part utilise JQuery et d'autres bibliothèques JavaScript.
J'ai choisi "Galleria", une version demo est téléchargeable sur le le site http://galleria.io/

Pour intégrer la gallerie d'image "galleria" dans WEBDEV 19, il faut commencer par télécharger sur le site de galleria le zip : galleria-1.3.5.zip. il contient les JS, CSS et une page HTML de démo.

mettre dans le répertoire _WEB/FR/gallerie , les fichiers suivants :

Dans WEBDEV, mettre un champ HTML puis dans le d'initialisation de la page :

ensuite mettre le code HTML de la demo de galleria

en fait il faut mettre tout le contenu de la div "galleria" du fichier classic-demo.html

Pour finir mettre dans le code navigateur de chargement de la page (onload) l'appel de la fonction initialise() qui faut déclarer en procédure local navigateur (code en JS) :

function initialise()
{
// Load the classic theme
Galleria.loadTheme('./gallerie/galleria.classic.min.js');

// Initialize Galleria
Galleria.run('#galleria', {
height: parseInt($('#galleria').css('height')),
wait: true
});
}

Il reste plus qu'à personnaliser le code HTML du champ HTML.

Variables de type date et heure initialisées avec la date et heure du jour !!!

Avant une variable date ne contenait rien lors de la déclaration. J'en ai eu marre d'avoir mes variables de type date et heure initialisées avec la date et heure du jour, j'ai donc cherché et j'ai trouvé la fonction du va bien : DateHeureParDéfaut

Permet de définir la valeur par défaut des variables de type Date, Heure, et DateHeure (dixit l'aide)

bien, mais on peut pas passer une chaine vide ou la valeur null....dommage

Permutation : Changer un bouton en lien

Je viens de découvrir les permutations. Pouvoir passer d'un bouton à un lien sans avoir à le recréer.

Imprimer des états dans une langue différente de l'application

Si on veut faire une édition dans une langue différente de l'application sans modifier la langue de l'application, dans ce cas on utilise la fonction : iNationImpression

WINDEV Mobile 19 : Android/iOS Réplication de données (Réplication Universelle Assistée)

J'attendais la version 19 pour mettre la réplication en place sur des application Android/iOS. Au départ j'avais testé sur Android avec une base abonnée SQLite mais la réplication ne fonctionne qu'avec HFSQL. Pas grave et ça m'arrange.

Pourquoi la Réplication Universelle Assistée et pas la programmée ?

Car la Réplication Universelle Assistée permet de faire de la réplication avec un minimum de code (une dizaine de ligne). La plupart de la configuration s'effectue avec des assistants.

Mise en place 

J'ai réalisé quelques tests en m'appuyant sur la documentation : http://doc.pcsoft.fr/fr-FR/?1000021071. Les étapes sont bien précisées. Juste quelques commentaires :

1 - Installation du serveur de réplication.

L'aide en ligne sur le sujet est bien faite. Il cohabite très bien avec un Serveur d'application WEBDEV.
Si on utilise une base HFSQL classic, il faut penser à donner les droits à "l'invité internet" sur le répertoire des données (base maître).
Si les droits sont pas défini, un message pas très explicite apparaît sur le terminal du type "impossible d'accéder aux fichiers ....".

A noter également, qu'il n'est pas nécessaire de créer des comptes. Celui par défaut est largement suffisant.

Dans le volet publication, on peut ajouter une publication. Attention : le nom de l'application que l'on donne doit être identique au nom du fichier .wer (sans l'extension)

2 - Définition de la réplication. (ReplicEdit)

Pas de problématique, a part pour les pamaètres. Dans la description d'un fichier de données, onglet "Filtre". Si on souhaite mettre un paramètre, il faut bien dans la combo seléctionner "Nouveau Paramètre" exemple :

Autre chose également, si utilisation d'une base HFSQL classic, ne pas oublier de définir le répertoire de la base maître dans le menu "Réplication...Description de la réplication" onglet "Fichiers maîtres"

Si utilisation d'une base HFSQL client/serveur. Il faut avant même de lancer ReplicEdit avoir une connexion décrit dans l'analyse sinon c'est rapé.

3 - Publication

On peut le faire dans l'administrateur du serveur de réplication ou depuis ReplicEdit. Attention à la fin de l'assistant on propose un code. celui-ci ne contient ni le nom de la réplication, ni le login, ni le mot de passe défini dans l'assistant.

4 - Programmation dans WINDEV Mobile.

tout le code est donner dans l'aide. Attention à réplicSynchro dans le cas d'un replica immédiat, bien définir le deuxième paramètres ReplicaImmédiat. Sinon on a l'impression que ca marche pas.

Conclusion

Le résultat est assez bleuffant. Ajout, modification, suppression (par swipe) depuis une même application avec deux configuration de projet Android et iOS. Un code unique. Pas testé avec WINDEV et WEBDEV mais d'après la doc le code ne change.

Pour les tests j'ai utilisé que quelques fichiers avec 2 ou trois paramètres, on va voir à à l'usage...

par contre si Modification automatique des fichiers de données ou modification du .wer, ben à priori rien de prévu. Je pense qu'il faut refaire un ReplicInitialise après avoir fait un HModifieStructure. Mais bon cette dernière focntion ne me dit pas si la structure à vraiment changer ou pas.

Je sais pas comment vais faire pour l'instant. Mais on va tester....

WINDEV Editeur de code : Sélection en colonne

La sélection en colonne dans l'éditeur de code est très pratique. Voici une petite vidéo rapide .
voir aide : http://doc.pcsoft.fr/fr-FR/?2010031#NOTE4_1

WLangage : Opérateur Dans

L'opérateur DANS permet de comparer une valeur à une liste de valeurs. Son évaluation renvoie un booléen. très pratique et évite les opérateur _OU_ ou _ET_.

Si Mavaleur DANS(5,6,7) alors

         // trt

Fin

WEBDEV - Afficher une image dans un champ de saisie

Je viens de visiter une site sympa ou le formulaire de contact m'a plu. J'ai donc décidé de le refaire en WEBDEV.

Objectif réaliser ceci :

Dans WEBDEV on commence par créer deux cellules. La première avec un fond blan uni et la seconde avec les paramètres suivants :

Ensuite il faut définir la couleur de CEL_Form et mettre l'image à droite :

Puis ajout des champs de saisie et pour chaque champ de saisie on créer un style au projet

et on place le code CSS :

dans chaque champ de saisie on aura le code css suivant :

background-image: url(c-icons.png);

background-repeat: no-repeat;

padding-left: 20px;

border: 1px solid #BFBFBF;

puis pour chaque champ on ajoutera un code css spécifique :

Nom : background-position: 3px 4px;

Email : background-position: 3px -15px;

Site web : background-position: 3px -37px;

sujet : background-position: 3px -57px;

cette ligne idique quelle partie de l'image il faut afficher dans le champ, car on fait référence qu'a une seule image c-icons.png :

C'est presque fini. Il reste le champ de saisie pour le messge. Pour celui-ci on aura qu'une ligne CSS à mettre :
border: 1px solid #BFBFBF;

Et pour le bouton le style CSS sera le suivant :

color: white;

background: #2E6DA3;

border: none;

On pourrait presque se passer du code CSS et mettre le tout dans les ongles texte et fond su style.

ATTENTION : les modifications de style CSS ne seront visible qu'en exécution...

comment géolocaliser une adresse et la centrer avec WEBDEV (Google Maps v3) ?

Voici une petit code javascript qui s'utilise avec le code déjà publier dans le billet suivant "WEBDEV 15 - Google maps v3" .

Dans la collection de procédure : pGestionCartes ajouté la procédure suivante :

function RechercheCoordonneesDepuisAdresse(sAdresse, sNomFonction)

{

// On a récupéré le nom de la fonction sous forme de chaîne, donc on récupère maintenant le pointeur sur cette fonction

var objFonction = eval(sNomFonction);

//alert(objFonction);

var geo = new google.maps.Geocoder();

geo.geocode({'address': sAdresse},objFonction);

}

sNomfonction est une fonction WLangage navigateur local à la page par exemple. Voici un exemple de fonction :

function LocalRetourRecherche(res,stat) /

{

var coordonnee = null;

if (stat == google.maps.GeocoderStatus.OK){

gObjCarte.setCenter(res[0].geometry.location);

var coordonnee = res[0].geometry.location;

//Pour le debuguage de lappli

var marke = new google.maps.Marker({position: coordonnee, map: gObjCarte, title: "adress" });

}else {

alert("Geocode was not successful for the following reason: " + stat);

}

}

Les deux paramètres (res et stat) sont passés automatiquement par la méthode geo.geocode.

WEBDEV 15 - Google maps V3

Pour afficher une carte Google maps v3 dans un site WEBDEV, je me suis inspiré de l'exemple WW_Cartes de la LST 72.

Pour passer en v3 des APIs google maps, il faut bien évidement consulter la doc :

http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/introduction.html

A partir de cette introduction et de la doc des API (http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/reference.html) on peut commencer dans WEBDEV.

Dans l'onglet avancé de la description de la page mettre :

Dans cette page, mettre un champ libellé HTML et dans le code d'initialisation de ce dernier mettre le code suivant :

Ce code permet d'afficher la carte sur tous les navigateurs. Sans ce code sous chrome la carte prends tout le navigateur.

Ensuite dans le code Onload de la page mettre le code :

gObjCarte est un entier

CreerCarte("CARTE", 0,180)

La variable gObjCarte est utilisée dans plusieurs fonction de manipulation de la carte elle est donc déclarer en global navigateur.

Pour une facilité d’utilisation et de réutilisation création d’une collection de procédure dans les procédures globales navigateur

Nom de la collection : pGestionCartes

La procédure est écrite en javascript. Il faut donc cliquer sur WL après création de la procédure

Création de la carte :

// Résumé : Création de la carte google map

// Syntaxe :

//CreeCarte ()

//

// Paramètres :

// sNomChampCarte : Nom du champ HTML (..alias ou id défini dans DIV)

// nlat : latitude du centre de la carte

// nlong : longitude du centre de la carte

// Valeur de retour :

// Aucune

//

function CreerCarte(sNomChampCarte,nlat,nlong)

{

if (nlat==0){

nlat = 48.856558;

};

if (nlong==0){

nlong = 2.350966;

};

// Création de la carte

var latlng = new google.maps.LatLng(nlat, nlong);

var myOptions = {

mapTypeControl: true,zoom: 5, center: latlng, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},navigationControl: true,mapTypeId: google.maps.MapTypeId.ROADMAP

}

// création de la carte

gObjCarte = new google.maps.Map(document.getElementById(sNomChampCarte),myOptions);

}

WebDev - Récupérer le User name Windows de l'internaute

Si vous saisissez cette URL : http://localhost/?user=%USERNAME% vous verrez apparaitre le nom d'utilisateur du poste dans l'URL. (Seulement valable sous IE)

Il est donc possible grâce à une applet Java de récupérer cette information. Dans la LST 68 page 35, l'exemple WD Applet FTP permet de le faire.

Dans l'applet la fonction RéseauUtilisateur() permet de récupérer le nom d'utilisateur Windows.

Dans le site WebDev une fonction Javascript permet de récupérer la valeur de la variable.

p, class: MsoNormal

Créer la database sur MySQL avec WinDev, WebDev

N'ayant pas trouvé comment créer la database MySQL avec l'accès natif, je me suis reporté sur la connexion ODBC
Lors de la connexion avec l'accès natif, il faut préciser le nom de la base. Il est donc necessaire d'utiliser PHPMyAdmin ou SQLylog pour créer la base.
Je souhaitais créer par programmation la database puis lancer le script des tables.

La fonction SQLConnecte permet d'effectuer ce traitement si on utilise la connexion ODBC.

Voici le code permettant de créer la database :

id est un entier = SQLConnecte("MysqlODBC","root","mdp","","ODBC ",hODBC)
SI id <> 0 ALORS
sNomDatabase est une chaîne = "Database"
// création de la base de données
sSql est une chaîne = "CREATE DATABASE IF NOT EXISTS %1"
sSql = ChaîneConstruit(ssql,sNomDatabase)
// execution de la requête
SI PAS SQLExec(ssql,"REQ") ALORS
SQLInfoGene()
Erreur("La Database n'a pas pu être créée. Code erreur : " + SQL.Erreur +RC+...
SQL.MesErreur)
FIN
SINON
// La connexion a échoué : affichage d'un message explicatif
SQLInfoGene()
Erreur("La connexion à la source de données" + "localhost" + ...
"a échoué."+RC+...
"Code erreur : " + SQL.Erreur +RC+...
SQL.MesErreur)
FIN
// Dans tous les cas (connexion OK ou pas)
SQLDéconnecte()

Ensuite on peut utiliser les fonctions "H*" avec l'accès natif MySQL.
Un peut contraignant, car il faut le drivers ODBC d'installé sur le poste.

Arrêt du support de PHP 4

Une news paru sur PHP index indique l'arrêt du support de PHP 4 le 31 décembre 2007.
Il va falloir penser à passer à la version 5 de PHP.

En espérant que la prochaine version de WebDev supporte la version 5 de php.

WebDev 11. Image dynamique et répertoire des données.

Dans l'aide en ligne il est indiqué que pour une image de type dynamique, les images doivent se trouver dans le répertoire _WEB ou un sous répertoire de celui-ci.

Toutefois, en déploiement, l'invité internet n'a pas les droits en écriture dans le répertoire _WEB.

Par conséquent, lorsque une page d'administration permet au Webmaster de modifier et changer des images, il faut que celles-ci se trouvent dans le répertoires de données seul répertoire ou l'invité internet à les droits de lecture/écriture.

Malheureusement on ne peut pas accéder à ce répertoire en code navigateur, car la fonction WLangage fRepDonnées est disponible qu'en code serveur.

De plus si le type d'image est défini en dynamique, même en code serveur, il faut un chemin relatif pour pouvoir afficher une image.

Solution 1 : Créer un Alias ou répertoire virtuel sur le répertoire des données.

Sous Apache 2.2.x l'alias se créer de la façon suivante dans le fichier httpd.conf

<Directory "C:/temp/Test_Image_Timer/Exe/DATA/">

Alias /DATA/ "C:/temp/Test_Image_Timer/Exe/DATA/"

Order allow,deny

Allow from all

</Directory>

NOTE : Pour les tests j'ai créé un alias sur un sous répertoire du répertoire exe du projet. En déploiement se répertoire correspond au répertoire données décrit dans la création du compte WebDev.

PS : pour ceux qui utilisent le CCHerbergement, il faudra dans IIS créer un répertoire virtuel supplémentaire depuis la console de configuration du serveur Web.

Ensuite dans le code WebDev on peut écrire le code suivant :

Le champ Image est de type dynamique

// Code initialisation de la page (serveur)

IMG_Image1 = "../DATA/ImgAcc/ImgAcc01.jpg"

Solution 2 :

Modifier les droits sur un sous répertoire du répertoire _WEB. Cela signifie de demander à son hébergeur une modification.

WinDev 11 . Procédures Stockées MySQL 5.x

Pour utiliser les procédures stockées avec MySQL 5.x, il faut tout d'abord avoir l'accès natif MySQL dernière version. C'est à dire la version 46b.

Vous trouverez l'accès natif à l'adresse suivante :

http://www.pcsoft.fr/st/telec/modules-communs-11/mysql.htm

Soit un fichier client :

Version : Serveur MySQL 5.0.45

- Exemple de procédure stockée avec passage de paramètres :

1 – Création de la procédure stockées sur le serveur

sProc est une chaîne = [

"DROP PROCEDURE IF EXISTS `procstok`.`simpleproc1` ;

CREATE PROCEDURE simpleproc1 (OUT param1 INT) BEGIN SELECT COUNT(*) INTO param1 FROM client; END;

]

scReq est une Source de Données

// Exécution de la requête

SI PAS HExécuteRequêteSQL(scReq,MaConnexion1,hRequêteSansCorrection,sProc) ALORS

Erreur()

SINON

Info("Procédure stocké créée")

FIN

2 – Exécution de la procédure stockée :

sdReq est une Source de Données

SI PAS HExécuteRequêteSQL(sdReq,MaConnexion1,hRequêteSansCorrection,"call simpleproc1(@a);select @a;" ) ALORS

Erreur()

SINON

Info("Gagné")

// Lecture du résultat de la procédure

HLitPremier(sdReq,hSansRafraîchir)

Trace(sdReq.@a)

FIN

NOTE : la constante hSansRafraîchir permet de ne pas ré-exécuter la requête.

CCNG très utile.

Le lecteur de news (LST 68) intégré aux éditeurs PC SOFT, en vraiment très pratique, si l'on utilise l'option "Afficher uniquement les messages non lu", car j'avais mis en suivi un message concernant le calcul de clé de lettre recommandé qui date du mois d'avril.

Récemment une réponse a été faite. Du coup j'ai été notifié et en plus les messages apparaissent dans la liste. Pas besoin d'effectuer de recherche, tout est là.

Code-Cible Conditionnel

Très utile lors de création de procédure utilisable dans WinDev, WebDev et WinDev Mobile.

Le Code-Cible Conditionnel permet de mettre un code différent en fonction de la plateforme choisie.

Ainsi une procédure créer en WinDev, avec l'utilisation de fonction non disponible en WebDev pourra être utilisée grâce au code cible.

Exemple la fonction "Dialogue" n'est pas disponible en WebDev. Donc dans WinDev on mettra les codes suivants.

Conseil : Bien suivre l'aide pour ajouter les zones de code-cible conditionnel.

WebDev - Comment après un code serveur utiliser la fonction NavigateurOuvre ?

Comment ouvrir un page Web après un traitement en code serveur ?

Il faut utiliser la fonction NavigateurOuvre. Toutefois, cette fonction est disponible qu'en code navigateur et pas en code serveur.

L'astuce consiste à utiliser un champ caché, qui fera office de booléen.
Dans un code serveur, on effectue le traitement souhaité, puis on affecte 1 au champ caché.
Puis dans le code d'onload de la page, on utilise la syntaxe suivante :

SI SAI_MonChamp <> 0 alors
NavigateurOuvre("http://www.monsite.fr")
FIN

Style CSS et WebDev 11

Comme ça n'est pas précisé dans la doc, voici comment mettre du code CSS dans la description d'un champ.

Prenons le champ lien, par exemple. Il faut aller dans la description du lien dans l'onglet Style.
Puis cliquer sur "Editer".
Ensuite dans la description du style dans l'onglet CSS, on va mettre un code css de survol du lien.
Sélectionner Survol et mettre le code (exemple) :
color:#411;
background:#aaa;
border-bottom: 1px solid #555;

Il faut oublier la syntaxe : "a{ }" et mettre que les attributs.
Voilà un effet de survol en CSS.

Récupérer un flux RSS dans WebDev

Pour récupérer le contenu d'un fichier XML, il faut utiliser la fonction HTTPRequête.

Voici le code :
sURL est une chaine = "http://nomDomaine.com/rep_du_Fichier_XML"

HTTPRequête(sURL,ProjetInfo(piNomProjet)) //
sres est une chaîne = HTTPDonneRésultat(HTTPRésultat)

Voila sres contient le fichier XML du flux RSS.
Ensuite il faut parcourir le fichier pour extraire les éléments. L'utilisation de fonction "XML" permet facilement d'obtenir le contenu.

Il existe un exemple complets dans WinDev : "Lecteur RSS", les procédures et classes sont utilisables dans WebDev.