He estado unos días intentando hacer un formulario dentro de un fichero de imágenes vectoriales SVG. No es inmediato y siguiendo ejemplos clásicos de Bulma, lo dejo aquí apuntado por si a alguien le es útil y para poder continuar cuando pueda necesitarlo. 😉
Básicamente os presento varias opciones que he estado trasteando.
Primero de todo yo lo he querido hacer todo con software libre y para software libre. No he usado nada que nos produzca el quedarse
pillados a usar software de Microsoft, Adobe o cualquier otro.
El segundo punto es que el objetivo es que se pueda ver bien en Firefox 3.5 que es el que yo uso. Y por lo visto el Firefox 4 traerá mejoras
muy substanciales. Con lo cual, si este artículo lo lees cuando ya haya salido el 4 puede ser interesante buscar alternativas más actuales.
La base es usar javascript dentro del SVG, lo que le ha dado unas posibilidades muy interesantes que yo no conocía. Nunca he usado javascript, lo más cercano en mi experiencia que recuerde es esto que traduje hace un montón de años, al trabajar con el XML-RPC.
He encontrado tres posibles soluciones que os presento. Una usando librerías lgpl que no permite acentos, con cliente y servidor que os paso.
Otra que consiste en introducir un trozo html dentro de un SVG y otra que parece muy interesante que consiste en usar Xforms para lo cual
aun es necesario un plugin para Firefox. Igual que el anterior plugin para SVG supongo que acabará dentro del Firefox en futuras versiones.
La versión con librerías es esta: (primero el svg cliente)
Se trata de un pequeño cliente que pide que se rellene un recuadro con un texto que al pulsar submit se envía al servidor como si fuese un nombre y
también envía un email aunque no lo pregunte. A partir de ahí añadir campos es sencillo. Cuando el servidor responde con un mensaje, lo añade al SVG y se
comprueba que la comunicación funcionó. (también se recibe un email). El email y el nombre está tomado de varias formas, una sobra. Está basada en los scripts javascript que encontraréis
en carto.net junto con explicaciones útiles.
/* Style definition file generated by highlight 2.16, http://www.andre-simon.de/ */
/* Highlighting theme definition: */
body.hl { background-color:#ffffff; }
pre.hl { color:#000000; background-color:#ffffff; font-size:8pt; font-family:’Courier New’;}
.hl.num { color:#2928ff; }
.hl.esc { color:#ff00ff; }
.hl.str { color:#ff0000; }
.hl.dstr { color:#818100; }
.hl.slc { color:#838183; font-style:italic; }
.hl.com { color:#838183; font-style:italic; }
.hl.dir { color:#008200; }
.hl.sym { color:#000000; }
.hl.line { color:#555555; }
.hl.mark { background-color:#ffffbb;}
.hl.kwa { color:#000000; font-weight:bold; }
.hl.kwb { color:#830000; }
.hl.kwc { color:#000000; font-weight:bold; }
.hl.kwd { color:#010181; }
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” [
]>
<svg viewBox=”0 0 1024 768″ width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” onload=”initialize(evt)” zoomAndPan=”disable” xml:space=”preserve”>
<script type=”text/ecmascript” xlink:href=”helper_functions.js”/>
<script type=”text/ecmascript” xlink:href=”mapApp.js”/>
<script type=”text/ecmascript” xlink:href=”timer.js”/>
<script type=”text/ecmascript” xlink:href=”textbox.js”/>
<script type=”text/ecmascript”>
<![CDATA[
var myMapApp = new mapApp(false,undefined);
var textbox1;
var name=”probando”;
var email=”[email protected]”;
//post request
//preparing the post request
var currentYPost = 140;
var postDataObj = new getData(“fsmap-tra-recv.php”,receiveData,”xml”,”post”,””,undefined);
//callBack function that receives data from the server (php files)
function receiveData(node) {
document.documentElement.appendChild(node);
name=node.firstChild.nextSibling.firstChild.nodeValue;
writeOutTextContent(‘textbox1’, ‘mensaje:’+name +’:’,’release’);
}
function writeOutTextContent(textboxId,value,changeType) {
if (changeType == “release”) {
document.getElementById(“resultText”).firstChild.nodeValue = “Content of “+textboxId+” is \””+value+”\””;
//writeOutTextInBox(textbox1)
}
}
function initialize(evt) {
//styles
var textStyles = {“font-family”:”Arial,Helvetica”,”font-size”:15,”fill”:”dimgray”};
var boxStyles = {“fill”:”white”,”stroke”:”dimgray”,”stroke-width”:1.5};
var cursorStyles = {“stroke”:”red”,”stroke-width”:1.5};
var selBoxStyles = {“fill”:”blue”,”opacity”:0.5};
var textYOffset = 22;
//create new textboxes
textbox1 = new textbox(“textbox1″,”textbox1″,””,25,20,50,200,30,textYOffset,textStyles,boxStyles,cursorStyles,selBoxStyles,””,writeOutTextContent);
}
//send formulary
function submit() {
currentYPost+=20;
var postData=currentYPost+’$’+document.getElementById(“textbox1Text”).firstChild.nodeValue+’$’+email;
postDataObj.postText=postData;
postDataObj.getData();
//writeOutTextContent(‘textbox1’, ‘mensaje:’+ name +’:’,’release’); document.getElementById(“textbox1″).firstChild.nodeValue
}
]]>
>
</script>
<rect x=”-1000″ y=”-1000″ width=”3000″ height=”3000″ fill=”white” stroke=”none”/>
<g id=”textbox1″/>
<g font-family=”Arial,Helvetica” font-size=”13″>
<text id=”resultText” x=”40″ y=”100″ xml:space=”preserve”>ResultText</text>
<text x=”250″ y=”70″>This textbox (textbox 1) accepts up to 25 characters [a-zA-Z ].</text>
</g>
<g >
<text x=”40″ y=”140″ onclick=”submit()” cursor=”pointer” >Submit.</text>
</g>
</svg>
Ahora el servidor en PHP que coge el contenido enviado y crea un email con el que de inmediato envía y devuelve un mensaje al cliente con nombre
recibido para confirmar que llegó y en formato de un nodo SVG.
<?php
header(‘Content-type: text/xml’);
list($currentY,$name,$email) = explode(“$”,$HTTP_RAW_POST_DATA);
$cuerpo = “Formulary sended from $name<$email>\n\n”;
$cuerpo .= “Name: ” . $HTTP_POST_VARS[“name”] . “\n”;
$cuerpo .= “Email: ” . $HTTP_POST_VARS[“email”] . “\n”;
$cuerpo .= “Comentaries: ” . $HTTP_POST_VARS[“coment”] . “\n”; //logicamente así podrían añadir más campos.
//mando el correo…primero monto las cabeceras de a donde quiero enviarlo.
$cabeceras = ‘From: [email protected]’ . “\r\n” .
‘Reply-To: [email protected]’ . “\r\n” .
‘X-Mailer: PHP/’ . phpversion();
mail(“[email protected]”,”Formulary received from:”.$name.”:”,$cuerpo.” — “. $asignacion ,$cabeceras);
print ‘<g xmlns=”http://www.w3.org/2000/svg”>’.”\n”;
print “\t”.'<text x=”500″ y=”‘.$currentY.’” font-size=”15″>’.$name.'</text>’.”\n”;
print “</g>\n”;
?>
Se podría hacer un servidor SVG en vez de PHP pero eso obligaría a preparar el servidor para comprobar que todos los SVGs pedidos sean revisados por si tienen código
que deba ejecutar y ralentiza. No creo que sea recomendable en general.
La opción de incluir un formulario con foreignObject:
Este es un ejemplo solo a modo de introducción tomado de http://de.wikibooks.org/wiki/SVG/_Erweiterbarkeit.
Lo he puesto en utf-8 y reducido pero allá encontraréis más información.
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg viewBox=”0 0 700 500″
xmlns=”http://www.w3.org/2000/svg” version=”1.1″
xmlns:xlink=”http://www.w3.org/1999/xlink”
xml:lang=”es”>
<script type=”text/ecmascript”>
<![CDATA[
// añadid aquí las funciones javascript que necesitéis
]]>
</script>
<title>Form into SVG</title>
<rect x=”0″ y=”0″ width=”700″ height=”500″ fill=”#ffc” />
<g font-family=”sans-serif” font-size=”20″>
<switch>
<foreignObject requiredExtensions=”http://www.w3.org/1999/xhtml”
x=”100″ y=”100″ width=”500″ height=”260″>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Form into SVG</title>
<style type=”text/css”>
body {display:block; font-family:sans-serif;
height:250px; width:500px; overflow: auto}
h1 {display:block; font-size:130%}
p,div {display:block}
</style>
</head>
<body>
<h1>Form into SVG</h1>
<p>Un párrafo cualquiera.</p>
<div>
<form action=”elprogramaservervuestro.php” method=”post” target=”_blank”>
<p>Text:<input name=”name” type=”text” value=”menganito?”
size=”10″ maxlength=”40″ /></p>
<p>
<input type=”hidden”
name=”email” value=”[email protected]” />
<input type=”submit” value=”Enviar ” />
</p>
</form>
</div>
</body>
</html>
</foreignObject>
</switch>
</g>
</svg>
He comprobado que este servidor funciona en php devolviendo otro svg en otra pestaña o ventana. Todo eso es retocable y le falta arreglar que si se pone
un & en el texto fastidia la respuesta. Osea cuidado con la seguridad y el injection. (svg-injection? 🙂
<?php
header(‘Content-type: text/xml’);
$email =$HTTP_POST_VARS[’email’];
$name = $HTTP_POST_VARS[“name”];
$cuerpo = “Formulary sended from $name<$email>\n\n”;
$cuerpo .= “Name: ” . $HTTP_POST_VARS[“name”] . “\n”;
$cuerpo .= “Email: ” . $HTTP_POST_VARS[“email”] . “\n”;
$cuerpo .= “Comentaries: ” . $HTTP_POST_VARS[“coment”] . “\n”;
//mando el correo…
$cabeceras = ‘From: [email protected]’ . “\r\n” .
‘Reply-To: [email protected]’ . “\r\n” .
‘X-Mailer: PHP/’ . phpversion();
mail(“[email protected]”,”Formulary received from:”.$name.”:”,$cuerpo.” — “. $asignacion ,$cabeceras);
print ‘<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” [
]>
<svg viewBox=”0 0 1024 768″ width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” onload=”initialize(evt)” zoomAndPan=”disable” xml:space=”preserve”>’.”\n”;
print ‘<g xmlns=”http://www.w3.org/2000/svg”>’.”\n”;
print “\t”.'<text x=”20″ y=”55″ font-size=”15″>Gracias ‘.$name.’ el formulario ha sido enviado por email. Pronto te responderemos</text>’.”\n”;
print “</g>\n</svg>\n”;
?>
Y para finalizar un SVG con XForms que da unos resultados muy guapos pero que está mucho mejor explicado aquí.
Necesitaréis tener este pluguin.
El código mío es LGPL lo que he tomado de esas webs, mirad allá. Lo podéis usar sin problemas.
Ah, sobre poner código de colores, dar formato html a codigo PHP o SVG he usado el programa que os podéis bajar con un aptitude install highlight y esta web para PHP.
Enlaces interesantes:
http://es.php.net/
Carto.net es un sitio muy interesante con muchos ejemplos útiles como:
Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM SVG in HTML pages Network Requests with getURL()/postURL() and XMLHttpRequest()
SVG Textbox
http://www.svgopen.org/
Javascript Post Request like a Form Submit
http://pilatinfo.org/
SVG Learning by Coding
An SVG Primer for Today’s Browsers
Form elements in SVG UI
Javascript, SVG and DOM
SVG Programmers’ Application Resource Kit
Ejemplos de proyecto pity
Firefox 4 con mejoras para poder añadir formularios a un SVG
Using the XML HTTP Request object (no lo usé)
Formulario dinámico para conocer un poco el javascript.
html5 Semantics, structure, and APIs of HTML documents -> dom
Dynamically updating SVG based on serverside information.
SVG/ Erweiterbarkeit Aleman, no se entiende, pero el código sí. 🙂
Inline SVG in HTML5 and XHTML
XForms 1.1
Mozilla XForms
SVG 1.1 working drafst
Apprivoiser SVG muy buen manual pero en francés.
Si alguno de los lectores tiene algún otro truco o suele usar un código similar, veámoslo.
(no hay nada como que te llenen de comentarios un artículo con ideas diferentes como pasó en el de trucos para el prompt de la shell)
Este post ha sido traido de forma automatica desde https://web.archive.org/web/20140625063149/http:/bulma.net/body.phtml?nIdNoticia=2589 por un robot nigromante, si crees que puede mejorarse, por favor, contactanos.