Aide jQwidgets sur Joomla

[seb38300]

Bonjour à tous , je poste ce topic car j'ai en effet un problème pour intégrer les widgets jQuery sur mon site, j'ai suivi ce tuto pour afficher un calendrier :

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/joomla/joomla.htm

Il marche trés bien mais voilà je souhaiterai afficher une jauge de ce genre ci ,

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgauge/jquery-gauge-getting-started.htm

j'ai bien intégrer tous les scripts demander sur Joomla seulement je bloque au niveau du code à mettre dans mon article , si quelqu’un pourrait m'éclairer je lui serai grandement reconnaissant .

En espérant avoir été assez clair, je vous remercie pour votre futur collaboration.

[ghazal]

Re : Aide jQwidgets sur Joomla

salut,
si tu as bien tous les fichiers JS et CSS requis appelés dans joomla :

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>

Tu copies colles le script présent sur la page démo dans un fichier que tu rajouteras à la fin de la liste précitée :

$(document).ready(function () {
$('#gaugeContainer').jqxGauge({
etc ...

Pour éviter des soucis, en général j'encapsule le script de cette manière :

(function($){
// code ici
})(jQuery);

avec le script :

(function($){
$(document).ready(function () {
$('#gaugeContainer').jqxGauge({
etc ...
})(jQuery);

Tu n'oublies pas la CSS additionnelle de la page démo :

#gaugeValue {
etc...
}

Enfin, dans le corps de ton article Joomla, avec ton éditeur en mode "code" ;

<div id="demoWidget" style="position: relative;">
<div style="float: left;" id="gaugeContainer"></div>
<div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
<div style="margin-left: 60px; float: left;" id="linearGauge"></div>
</div>

NB : Les CSS inline ne sont pas très recommandées. Il faudrait les reporter aussi dans une feuille CSS.

NB2 : j'ai conservé l'appel à jQuery dans la liste plus haut, mais tu n'en as pas besoin puisque jQuery est présent par défaut dans Joomla version 3.xx.

[seb38300]

Re : Aide jQwidgets sur Joomla

Tous d'abord merci de ta réponse je commence à y voir plus clair , mais je n'ai pas comprit ce que tu me demande de faire ici :

Tu copies colles le script présent sur la page démo dans un fichier que tu rajouteras à la fin de la liste précitée

désolé encore du dérangement.

[ghazal]

Re : Aide jQwidgets sur Joomla

C'est dans le fichier (et juste un exemple) :
jqwidgets-ver3.2.1/demos/jqxgauge/defaultfunctionality.htm

$(document).ready(function () {
$('#gaugeContainer').jqxGauge({
ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
{ startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
{ startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
{ startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
ticksMinor: { interval: 5, size: '5%' },
ticksMajor: { interval: 10, size: '9%' },
value: 0,
colorScheme: 'scheme05',
animationDuration: 1200
});

$('#gaugeContainer').on('valueChanging', function (e) {
$('#gaugeValue').text(Math.round(e.args.value) + ' kph');
});

$('#gaugeContainer').jqxGauge('value', 140);

$('#linearGauge').jqxLinearGauge({
orientation: 'vertical',
width: 100,
height: 350,
ticksMajor: { size: '10%', interval: 10 },
ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
max: 60,
pointer: { size: '5%' },
colorScheme: 'scheme05',
labels: { interval: 20, formatValue: function (value, position) {
if (position === 'far') {
value = (9 / 5) * value + 32;
if (value === -76) {
return '°F';
}
return value + '°';
}
if (value === -60) {
return '°C';
}
return value + '°';
}
},
ranges: [
{ startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
{ startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
{ startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}],
animationDuration: 1500
});

$('#linearGauge').jqxLinearGauge('value', 40);
});

[seb38300]

Re : Aide jQwidgets sur Joomla

Oui j'ai bien comprit qu'il s'agissait du code contenu dans la demo du widget, mais je dois mettre ce code après les fichiers requit appelé par Joomla ??

[ghazal]

Re : Aide jQwidgets sur Joomla

mais je dois mettre ce code après les fichiers requit appelé par Joomla ??

tu crées un fichier dans lequel tu colles ce code (avec la précaution indiquée dans mon premier post et lu l'appelles après les autres fichiers du widget.

[seb38300]

Re : Aide jQwidgets sur Joomla

Voilà ce que j'ai ajouté dans mon fichier view.html.php

$document = JFactory::getDocument();
// adds jQWidgets JavaScript files
$document->addScript('/ProjetSTI/media/system/js/jqxcore.js');
$document->addScript('/ProjetSTI/media/system/js/jqxgauge.js');
$document->addScript('/ProjetSTI/media/system/js/jqxchart.js');
$document->addScript('/ProjetSTI/media/system/js/jquery-1.10.2.min.js');
$document->addScript('/ProjetSTI/media/system/js/demoWidget.js');

// adds jQWidgets CSS files
$document->addStyleSheet('/ProjetSTI/media/system/css/jqx.base.css');

demoWidget.js correspond au script que j'ai crée avec le code de la version demo plus les précautions que vous m'avez donné
voilà le code du script :

(function($){
$(document).ready(function () {
$('#gaugeContainer').jqxGauge({
ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
{ startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
{ startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
{ startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
ticksMinor: { interval: 5, size: '5%' },
ticksMajor: { interval: 10, size: '9%' },
value: 0,
colorScheme: 'scheme05',
animationDuration: 1200
});

$('#gaugeContainer').on('valueChanging', function (e) {
$('#gaugeValue').text(Math.round(e.args.value) + ' kph');
});

$('#gaugeContainer').jqxGauge('value', 140);

$('#linearGauge').jqxLinearGauge({
orientation: 'vertical',
width: 100,
height: 350,
ticksMajor: { size: '10%', interval: 10 },
ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
max: 60,
pointer: { size: '5%' },
colorScheme: 'scheme05',
labels: { interval: 20, formatValue: function (value, position) {
if (position === 'far') {
value = (9 / 5) * value + 32;
if (value === -76) {
return '°F';
}
return value + '°';
}
if (value === -60) {
return '°C';
}
return value + '°';
}
},
ranges: [
{ startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
{ startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
{ startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}],
animationDuration: 1500
});

$('#linearGauge').jqxLinearGauge('value', 40);
})(jQuery);

j'ai bien copié ceci dans mon article :

<div id="demoWidget" style="position: relative;">
<div style="float: left;" id="gaugeContainer"></div>
<div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
<div style="margin-left: 60px; float: left;" id="linearGauge"></div>
</div>

malheureusement rien ne s'affiche.

[ghazal]

Re : Aide jQwidgets sur Joomla

On y arrive

Reteste en respectant scrupuleusement l'ordre de chargement des fichiers :

jqxcore.js
jqxchart.js
jqxgauge.js
demoWidget.js

Normalement tu n'as pas à appeler le fichier jQuery

Travaille avec Firebug pour Firefox activé, obligatoire quand on bosse avec du JS.

Après, et dès que ca fonctionne, je t'expliquerai comment faire pour appeler ces fichiers seulement pour l'article concerné.
Ta technique est très correcte mais elle a le désavantage de charger tes fichiers sur TOUTES les pages de joomla. Ce qui est inutile.

[seb38300]

Re : Aide jQwidgets sur Joomla

J'ai bien modifié l'ordre de chargement des fichiers mais en vain rien ne s'affiche , je me demande si le problème ne viendrai pas de

<div id="demoWidget" style="position: relative;">
<div style="float: left;" id="gaugeContainer"></div>
<div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
<div style="margin-left: 60px; float: left;" id="linearGauge"></div>
</div>

car le code du tuto que je devais intégrer pour afficher un calendrier était assez différent de celui si .

[ghazal]

Re : Aide jQwidgets sur Joomla

* je n'ai fait que reprendre l'html du fichier defaultfunctionality.htm cité plus haut

car le code du tuto que je devais intégrer pour afficher un calendrier était assez différent de celui si

Normal.