Joomla.it Forum
Non solo Joomla... => Sviluppo => : mau_develop 17 Nov 2010, 14:10:08
-
Il discorso vale un po' per qualsiasi plugin JQuery. Offrono effetti molto avanzati agli script e sono semplici da usare.
Quindi... usiamoli! Vediamo un esempio con le google maps
Un ambiente test
----------------
lo costruiamo velocemente in qs modo:
* creiamo la cartella com_maps in /administrator/components, contenente due files: admin.maps.php e il solito index.html, entrambi praticamente vuoti, con dentro qs codice: <html><body bgcolor="#FFFFFF"></body></html>
* creiamo la cartella com_maps in /components (frontend), contenente:
- il manifesto maps.xml -------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM "http://dev.joomla.org/xml/1.5/component-install.dtd">
<install type="component" version="1.5.0">
<name>Nome che hai messo nel db</name>
<!-- opzionali -->
<creationDate>17-11-2010</creationDate>
<author>Spazioalchimia</author>
<authorEmail>rebelot@spazioalchimia.it</authorEmail>
<authorUrl>http://www.spazioalchimia.it</authorUrl>
<copyright>Fanne ciò che vuoi</copyright>
<license>Licenza</license>
<version>Vers 0.0</version>
<description>Le mie mappe</description>
</install>
- l'entry maps.php -------------------------------
<?php
defined('_JEXEC') or die('Restricted access');
require_once (JPATH_COMPONENT.DS.'controller.php');
// se avete un css decommentate sotto (di default si chiama... default)
#JHTML::_('stylesheet', 'default.css', 'components/com_maps/');
$controller = new MapsController();
$controller->execute( JRequest::getWord( 'task') );
$controller->redirect();
?>
- il controller controller.php -------------------------------
<?php
jimport('joomla.application.component.controller');
class MapsController extends JController{
function display(){
parent::display();
}
}
?>
- la cartella views contenente una cartella che chiamerete maps contenete a sua volta:
il file view.html.php -------------------------------
<?php
jimport( 'joomla.application.component.view');
class MapsViewMaps extends JView{
function display($tpl = null) {
$apikey="INSERITE LA VOSTRA APIKEY, necessaria registrazione google";
$document =& JFactory::getDocument();
$document->addScript('http://maps.google.com/maps?file=api&v=2&key='.$apikey);
$document->addScript(JURI::root(true).'/components/com_maps/assets/js/jquery-1.4.4.min.js');
$document->addScript(JURI::root(true).'/components/com_maps/assets/js/jquery.gmap-1.1.0-min.js');
parent::display($tpl);
}
}
?>
la cartella del template che chiamerete come da standard tmpl, contenente:
un file default.php ------------------
<?php
defined('_JEXEC') or die('Restricted access');
?>
<script type="text/javascript">
$(function() {
$("#map").gMap();
});
</script>
<div id="map"></div>
Io ho l'abitudine di fare una cartella che chiamo assets che contiene css e script in ulteriori cartelle css e js. Gli script sopra sono impostati in qs modo, quindi se seguite il mio modo bene, altrimenti occhio alle path!
Nella cartella js metto i due script jquery e gmap che trovate rispettivamente:
http://jquery.com/
http://gmap.nurtext.de/examples.html
* installiamo da db il componente inserendo in jos_components una riga con valorizzati qs parametri:
nome -> Quello che volete, link -> option=com_maps (il nome della cartella componente), option -> com_maps
- creiamo la cartella in cui sviluppare com_maps
Ecco fatto! Basta creare un menu e linkarlo alla view e avete la vostra mappa google.
Non vi basta? volete di più? ... io vi ho risolto il problema "Joomla" voi ora andate quì
http://gmap.nurtext.de/examples.html leggetevi un po di documentazione e implementate ciò che volete.
Volete dinamicizzare i dati? come farli arrivare con l'mvc fino alla view per valorizzare lo script?
beh... manca un model,... mancano le chiamate a model e view nel controller... ci vuole poco, oppure se è un banale query potete farla anche nella view, creando un oggetto visibile poi nel template...
Per gli sfaticati in allegato ci sono i files ... ma io coglierei l'occasione per imparare un po' a pasticciare con joomla.
IL PACCHETTO NON E' INSTALLABILE AUTOMATICAMENTE
M.
EDIT[1]: la pagina di documentazione del plugin gmap è giusto per capire la base, la vostra visualizzazione è implementabile anche con tutti qs parametri:
http://code.google.com/intl/en-US/apis/maps/documentation/javascript/v2/reference.html
EDIT[2]: ...io ho fatto un componente perchè ho poi altre mire... ma nulla vieta di farci un modulo, praticamente è quasi la stessa cosa visto che tutto viene fatto nella view. Basta prendere un tutorial sui moduli e copiare il cod.
EDIT[3]: I più attenti si saranno accorti che qs link:
$document->addScript('http://maps.google.com/maps?file=api&v=2&key='.$apikey);
porta ad una v2 dichiarata obsoleta ....
EDIT[4] La versione 3 delle api NON richiede key e ha molte features in più nonchè il suporto per Iphone.
Basta che sostituiate il plugin (non jquery) con questo:
http://googlemaps.mayzes.org/
EDIT[5]: ... si ma che palle ste mappe son tutte uguali..... :) n'è vero! guarda quì che belle!
http://www.41latitude.com/post/1268734799/google-styled-maps
EDIT[6] Ettipareva non ci fosse il tool :) http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
[allegato eliminato da un amministratore]
-
Vabbene avete avuto ben 5 ore e sarete ormai stanchi ed avete sperimentato lo sperimentabile, differenziamo un po la cosa...
... e se io non volessi JQuery? ... e tolgo pure la key .... e ho anche streetview! .... oddddio ha anche la compatibilità con l'Iphone! ma che goduria :)
Se non vogliamo Jquery ci dobbiamo linkare direttamente alle api e aggiungere noi uno script.
Il file che modifichiamo è la view.maps.php:
<?php
jimport( 'joomla.application.component.view');
class MapsViewMaps extends JView{
function display($tpl = null) {
$document =& JFactory::getDocument();
$document->addScript('http://maps.google.com/maps/api/js?sensor=true');
$document->addScriptDeclaration("window.onload = function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
}
");
parent::display($tpl);
}
}
?>
dove questo:
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
sarà la parte che si potrà valorizzare dinamicamente o usarla così staticamente.
le altre classi applicabili: http://code.google.com/intl/en-US/apis/maps/documentation/javascript/
il file default nella cartella tmpl conterrà solo qs righe:
<?php // no direct access
defined('_JEXEC') or die('Restricted access');
?>
<div id="map" style="width:100%; height:500px"></div>
M.
-
La terza puntata è la naturale evoluzione, la dinamicità.
Non si può seguire questi thread leggendo quà e là, anche se non sembra :) hanno un percorso logico fatto di passi successivi.
Per questo esempio utilizzo la v3 delle api di google, credo sia la più avanzata ora come ora.
Riepilogando un'attimo, abbiamo visto il nostro componente funzionare con gmaps (JQuery) che purtroppo era rimasta ad un uso della v2, un successivo articolo che ci "liberava" di JQuery e della Key, ora vediamo il primo esempio ma con un plugin JQuery che supporta le api v3 , già accennato negli edit del primo post che per chiarezza riporto:
La versione 3 delle api NON richiede key e ha molte features in più nonchè il suporto per Iphone.
Basta che sostituiate il plugin (non gli script jquery) con questo: http://googlemaps.mayzes.org/
mettiamolo accanto a quello precedente nella cartella js in assets
prendiamo il nostro file view.html.php e facciamo le necessarie modifiche:------------------------------
function display($tpl = null) {
$mapdata =& $this->get('mapdata');
$document =& JFactory::getDocument();
$document->addScript('http://maps.google.com/maps/api/js?sensor=true');
$document->addScript(JURI::root(true).'/components/com_para/assets/js/jquery-1.4.4.min.js');
$document->addScript(JURI::root(true).'/components/com_para/assets/js/jquery.googlemaps1.01.js');
$document->addScriptDeclaration("document.ready = function() { $mapdata; }");
parent::display($tpl);
}
cosa ho fatto?
ho tolto la key, ho modificato lo script che chiama le api, ho cambiato il link al plugin di JQuery jquery.googlemaps1.01.js, il nuovo che abbiamo messo in /js, ho aggiunto la dichiarazione dello script che creerà la mia mappa nel tag div map in tmpl/default.php
e poi ho aggiunto la riga che mi "recupera" i dati dinamici $mapdata =& $this->get('mapdata');
Come si fa lo vediamo subito:
Innanzitutto dobbiamo aggiungere nella root del ns componente una cartella /models contenente un model che io ho chiamato geo.php:--------------------------------
<?php
defined('_JEXEC') or die();
jimport('joomla.application.component.model');
class MapsModelGeo extends JModel {
function __construct(){
parent::__construct();
}
function getMapdata(){
// Quì potete fare una qury i cui risultati valorizzeranno lo script sotto
// $db =& JFactory::getDBO();
// $query = 'SELECT * FROM #######;
// per ora mi limito a mettere valori fissi
return "
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);";
}
}
?>
Il metodo che mi permette di recuperare i valori sarà quindi getMapdata();
Nell'mvc quello che si occupa di definire la view il model e di restituirli alla visualizzazione è il controller, quindi andrò ad implementare il mio controller:
class MapsController extends JController{
function display(){
$view =& $this->getView(maps, 'html');
$model = $this->getModel('geo');
$mapdata = $model->getMapdata();
$view->assignRef('mapdata', $mapdata);
$view->setModel($model);
$view->display();
}
}
M.
-
come sempre offri un monte di spunti interessanti :D
solo una cosa:
ma formattare un minimo il testo? :o
non l'ho testato, ma utilizzando jQuery, non ti da' problemi di compatibilità con Mootools?
ho provato un paio di volte a utilizzare tutti e due i framework ma ho sempre avuto problemi, anche con la modalità noConflict.
a te è filato tutto liscio?
-
sarebbe bello avere il codecitation che risparmierebbe molto nell'impaginazione, il problema è l'indentazione coi tab....mmmhh potrei appoggiarmi a un nopaste... mo vedo.
Mootools da frontend l'ho tolto, non mi serviva, non ho grande ajax e quel poco lo gestisco in altro modo.
cmq mi era capitato ma col no conflict era andato tutto a posto, ricordo anche che avevo dovuto giocare col spostare soprao sotto uno dei due...
Cmq. visto che continuano a chiedere tutorial, a lamentarsi che chi sa non divulga , inventarsi mille mastruzzi per far le cose etc... mi aspettavo più interesse .... si vede che in realtà non sono bisogni ma sono lamentele alla luna :) , capita nei momenti di noia.
Tutti quelli che cercano calendari, prenotazioni, effetti spaziali... JQuery è una miniera e quasi a portata di niubbo, una volta imparato il meccanismo poi lo script che ci includi (puoi anche metterli tutti) sono un po' fatti tuoi... ;)
M.
-
Tutti quelli che cercano calendari, prenotazioni, effetti spaziali... JQuery è una miniera e quasi a portata di niubbo, una volta imparato il meccanismo poi lo script che ci includi (puoi anche metterli tutti) sono un po' fatti tuoi... ;)
niubbo kassandra presente! ... è quel "quasi" che mi preoccupa ???
per fortuna è già venerdì e il fine settimana si avvicina, così avrò un po' di tempo per studiare, col gatto sulle ginocchia e il computer in braccio. No, meglio il contrario ;)
-
ehm.. non vorrei traumatizzarti... ma oggi è giovedì (a meno che tu non abiti in australia..)
:D
-
ops! :-[
(...i sogni son desideriiii)
ps: sì, mi hai traumatizzato >:(
mi sa che vado a vivere in Australia
-
Se non devi fare cose complicate non è difficile capire
considera il controller come colui che esegue una task, se non viene richiesta esegue il default.
Cosa "esegue"?
esempio prende dati dal post o dalla get istanzia un model, ne usa un metodo per fare qualcosa, istanzia una view e le passa quello che ha ricevuto dal model ..se...
la view "riceve" i dati e se necessario fa qualcosa di utile al template, altrimenti lascia i dati al template che li visualizzerà
M.
-
ciao mau :)
incuriosito dal tuo post, mi sono messo a studiare le librerie jQuery e sono rimasto piacevolmente sorpreso dalle potenzialità e facilità di utilizzo.
per fare pratica sto sviluppando un semplice modulo per visualizzare dei feed rss.
ora però mi trovo davavnti un problemino...
dovrei inserire una varibile php all'interno di una funzione jquery
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#scroll ul>li").truncate(40);
$('#screen').serialScroll({
event:'mouseover',
target:'#scroll',
items:'li',
navigation:'#navigation li a',
axis:'xy',
duration:speed,
force:true
});
$("a.itemtitle:first").addClass("itemactive");
$('#navigation>ul>li>a').hover(function () {
$('a.itemactive').removeClass('itemactive');
$(this).addClass('itemactive');
// return false;
});
});
</script>
alla funzione "truncate" al posto di "40" (numero massimo di caratteri) dovrei inserire la variabile.
ho provato a passare la variabile da php a js in questo modo:
var maxLength = "<?php echo $rd_max_lengh; ?>";
$(document).ready(function(){
$("#scroll ul>li").truncate(maxLength );
oppure così:
$(document).ready(function(){
$("#scroll ul>li").truncate(<?php echo $rd_max_lengh; ?>);
ma entrambi non funzionano :(
hai qualche suggerimento per la sintassi giusta?
-
$(document).ready(function(){
$("#scroll ul>li").truncate( $rd_max_lengh);
così?
M.
-
non vorrei dire una stupidaggine, ma il costrutto "ul>li" è accettato da tutti i browser?
mi sembra che sia CSS3 (mi sembra).
forse è quello, prova a fare un cambio, oppure a lanciare lo script usando Chrome o Safari (entrambi supportano i CSS3 quasi completamente)
-
$(document).ready(function(){
$("#scroll ul>li").truncate( $rd_max_lengh);
così?
M.
neanche così funziona... :( la variabile proviene dall'xml del modulo, c'è forse una strada più breve (e semplice) senza passare da PHP?
@tampe125
ho provato a lanciarlo anche con chrome ma il risultato non cambia.
comunque non credo sia quello il problema, perchè se al posto della varibile inserisco un numero intero lo script funziona.
-
ma se fai un print() della variabile la vedi?
M.
-
in effetti non la vedo...
ma se faccio il print di un'altra variabile simile la vedoma se fai un print() della variabile la vedi?
M.
infatti la variabile sembrava vuota... poi ho cambiato nome della variabile. ora con il print() la vedo ma la funzione sembra che non la riconosca.
ho provato sia con
$("#scroll ul>li").truncate($rd_truncate);
sia
var max = "<?php echo $rd_truncate; ?>";
$("#scroll ul>li").truncate(max);
-
infatti la variabile sembrava vuota...
----------------------------------------------
...non è che era un array? ... in qs caso print_r();
...aspetta... ma l'hai dichiarata? ... nn sono un genio del js anzi :( ... prova così:
var pippo=0;
pippo=<?php echo ...come te la ricavi.. ?>
truncate(pippo)
M
-
sì la variabile è dichiarata...
la cosa strana è che ho fatto la stessa cosa con un'altra variabile all'interno dello stesso script e tutto funziona... con il truncate non c'è verso...
<script type="text/javascript" language="javascript">
var max = 0;
max = "<?php echo $rd_truncate; ?>";
var speed = "<?php echo $rd_speed; ?>";
$(document).ready(function(){
$("#scroll ul>li").truncate(max);
$(#screen).serialScroll({
event:'mouseover',
target:'#scroll',
items:'li',
navigation:'#navigation li a',
axis:'xy',
duration:speed,
force:true
});
la variabile php $rd_speed l'ho passata in JS e diventa "speed" che poi ho inserito nella funzione .serialScroll() e funziona a dovere.
essendo "truncate" un plugin di terze parti, è possibile secondo te che non sia stato sviluppato a dovere e per questo non legge le varabili?
(scusa se sparo qualche caxxata, ma di JS ci capisco veramente nulla)
-
essendo "truncate" un plugin di terze parti,
----------------------------------------------------------
e ovviamente l'hai incluso...
quando si "assiemano" più plugin jquery capita.. bisogna guardare bene la documentazione perchè di versioni di jquery ce n'è più di joomla!
M.
-
si certo l'ho incluso...
e se al posto della variabile metto un numero intero funziona pure... ma con la variabile nisba.
-
max = "<?php echo $rd_truncate; ?>"; prova senza ""
max = <?php echo $rd_truncate; ?>;
M.
-
sono riuscito a risolvere :D
mettendo:
$("#scroll ul>li").truncate(<?php echo $rd_truncate; ?>);
funziona... l'avevo già provato decine di volte senza successo...ora non so come mai funziona... bohhh
l'unica cosa è che se la variabile è < di 10 lo script s'impalla...
vabbè... per ora mi accontento, magari gli faccio un controllo in php e se è inferiore a 10 gli faccio cambiare valore.
grazie per l'aiuto mau :) e per gli ottimi spunti che ci offri ogni volta.
-
:) con js sono abbastanza smanaccione anch'io, a volte studio un po' e dopo un mese che nn lo uso dimentico tutto...sono vecchio :(
...come vedi comunque basta nn perdere la pazienza e provare prima o poi funziona tutto :)
..pensa che mi piacerebbe fare anche un tutorialino sulle select a casacata ... l'ho fatto una volta e funziona... non riesco più a rifarlo :):) ora funziona solo una volta poi si impalla...
M.
-
ehehe... anch'io uso la tecnica del "prova e riprova e spera" ;D con qualsiasi cosa...
smonto, rimonto, cambio, copio, incollo, seziono, finchè non ne capisco il funzionamento e alla fine riesco a farci quello che voglio...
non sempre funziona, ma quando ci riesco sono delle belle soddisfazioni!! :D
-
..pensa che mi piacerebbe fare anche un tutorialino sulle select a casacata ... l'ho fatto una volta e funziona... non riesco più a rifarlo :):) ora funziona solo una volta poi si impalla...
io per il mio componente (lo ricordate vero? mmeloni ha ancora gli incubi la notte.. :D) mi sono fatto un paio di funzioncine.
è fatto in mootools, se interessa lo metto su.
posto nel forum o come articolo?
-
beh...l'articolo deve essere "articolato" ... il post puoi farlo un po' come vuoi tu basta che sia chiaro e rispetti il framework joomla... ma se ci ha messo le mani anche marco è sicuramente qualcosa di interessante... magari scopro cosa non va nel mio...posta posta
M.
-
ecco qua:
http://forum.joomla.it/index.php/topic,120888.0.html
sinceramente vorrei tirarci fuori un articolo...
dateci un'occhiata :D
-
ottimo tampe125! :D
non so se l'articolo è indicato per la tua guida... gli articoli di solito vengono usati di più per le recensioni e cose simili.
adesso mi informo e ti faccio sapere dove inserirlo per averlo più a portata di mano.
è un peccato lasciarlo "sprofondare" nel forum... stessa cosa per le guide di mau :)
-
io la butto lì.
perchè non aprire una sezione (anche di articoli) un po' più tecnici?
probabilmente potrebbero aiutare diverse persone.
magari anche in inglese (ma mi sa che usciamo dall'idea originali di joomla.it)
cmq aiuterebbero sicuramente la comunità e aumenterebbero ancora di più la visibilità del sito :D
-
per tornare in topic...
sarebbe possibile inserire un jquery ui nel back end di un modulo o componente?
-
perchè no?
M.
-
e come ? creando un nuovo parametro?
-
mmhh nn ti sto capendo...
...mettiamo che ho un plugin che registra tutti gli ip lato F/end
nel B/end avrò una view del componente con la lista delle visite per ip
voglio vedere chi è un ip e clicco per andare su una view con il dettaglio,
nel model di quella view tramite le api di google faccio una richiesta JSON di geolocation che mi restituisce le coordinate...
nella view le coordinate vengono inserite in googlemap che mi restituirà una bella streetview con la foto del luogo da dove proviene l'ip.
M.
-
in effetti non sono stato molto esplicito :P
la mia richiesta era più indirizzata verso il modulo...
la mia necessità è quella di inserire un parametro nel B-E del modulo di questo tipo
http://jqueryui.com/demos/sortable/
per permettere di ordinare alcuni link.
da quanto ho capito c'è da scrivere un nuovo parametro, da richiamare poi tramite l'XML del modulo...giusto?
-
mmhh no.... sono sempre più confuso ... per dirla un po' grossolanamente, non c'è differenza tra jsite e jadministrator, fanno più o meno le stesse cose, una per il sito e l'altra per l'admin.
L'admin non ha i plugin ma moduli e componenti si e l'mvc è identico.
O ti stai facendo menate inutili o ti sto raccontando un sacco di put.. :):):) ...spero sia la prima!
M.
-
sicuramente sono io che non riesco a farmi capire... :(
mi riferisco a questi parametri
http://docs.joomla.org/Standard_parameter_types
pensavo di scrivere un nuovo parametro che permetta di implementare un jquery ui nella gestione del modulo
http://docs.joomla.org/Creating_custom_template_parameter_types
tipo i colorpicker in js che si trovano nella gestione di alcuni moduli o componenti per selezionare i colori.
-
allora, ... se vuoi passare dai parametri devi costruirli come elements e poi li usi nel tuo file xml
i templates non hanno una gestione amministrativa tipo moduli plugin e componenti però accettano appunto dei params.
non ho capito perchè vuoi farlo in amministrazione, scegliere un parametro che può essere un colore da passare a uno stile può essere utile in frontend..
M.
-
allora, ... se vuoi passare dai parametri devi costruirli come elements e poi li usi nel tuo file xml
ecco è questo che intendevo :)
i templates non hanno una gestione amministrativa tipo moduli plugin e componenti però accettano appunto dei params.
a me serve per un modulo, quello del template era un esempio... però mi sfugge la differenza di gestione tra modulo e template ad esempio. ???
non ho capito perchè vuoi farlo in amministrazione, scegliere un parametro che può essere un colore da passare a uno stile può essere utile in frontend..
sì lo so è una menata questa che mi sono messo in testa... ;D
quello che avevo in mente di fare era di mettere nel b/e del modulo quella interfaccia jquery ui che ho postato sopra, per ordinare una sequenza di pagine da visualizzare nel f/e.
si potrebbe fare benissimo con la classica text area scrivendo a mano l'ordine delle pagine, ma pensavo che con quell'interfaccia sarebbe stato più facile e veloce... e anche più cool! 8)
comunque la cosa era più che altro a scopo didattico, non per reale necessità.