doc/mecon_quickform.lyx

   1 #LyX 1.3 created this file. For more info see http://www.lyx.org/
   2 \lyxformat 221
   3 \textclass book
   4 \language spanish
   5 \inputencoding auto
   6 \fontscheme default
   7 \graphics default
   8 \paperfontsize default
   9 \spacing single
  10 \papersize Default
  11 \paperpackage a4
  12 \use_geometry 0
  13 \use_amsmath 0
  14 \use_natbib 0
  15 \use_numerical_citations 0
  16 \paperorientation portrait
  17 \secnumdepth 3
  18 \tocdepth 3
  19 \paragraph_separation indent
  20 \defskip medskip
  21 \quotes_language english
  22 \quotes_times 2
  23 \papercolumns 1
  24 \papersides 1
  25 \paperpagestyle default
  26
  27 \layout Title
  28
  29 Mecon Quick Form - HOWTO
  30 \layout Author
  31
  32 Manuel Nazar Anchorena (manazar@mecon.gov.ar)
  33 \layout Standard
  34
  35
  36 \begin_inset LatexCommand \tableofcontents{}
  37
  38 \end_inset
  39
  40
  41 \layout Chapter
  42
  43 Introducción
  44 \layout Section
  45
  46 Resumen
  47 \layout Standard
  48
  49 Este documento tiene por objetivo guiar al lector en el apasionante mundo
  50  del MEcon Quick Form.
  51  Este conjunto de librerias fue creado como extension del HTML Quick Form
  52  de PEAR, para ajustarse a las necesidades del grupo de desarrollo de la
  53  Intranet del Ministerio de Economía.
  54 \layout Section
  55
  56 Contenido
  57 \layout Standard
  58
  59 Abarcaremos aqui los pasos básicos para la creación de
  60 \begin_inset Quotes eld
  61 \end_inset
  62
  63 formularios
  64 \begin_inset Quotes erd
  65 \end_inset
  66
  67  comunes, que formarán parte de nuestro sistema.
  68  Entre lo objetos de un formulario, veremos campos de texto, areas de texto,
  69  fechas, botones de opciones, objetos ocultos y cajas de selección.
  70 \layout Chapter
  71
  72 El lenguaje
  73 \layout Section
  74
  75 Breve panorama
  76 \layout Standard
  77
  78 En esta sección se explicarán las características generales.
  79  Están en el orden recomendado a seguir:
  80 \layout Enumerate
  81
  82 Declaración de Libreria.
  83 \layout Enumerate
  84
  85 Creación de Objetos de Formulario.
  86 \layout Enumerate
  87
  88 Creación de reglas de validación.
  89 \layout Enumerate
  90
  91 Instrucciones en el caso de que se valide y se carge la página a si misma.
  92 \layout Enumerate
  93
  94 Dibujar el Formulario.
  95 \layout Section
  96
  97 Pasos Básicos
  98 \layout Subsection
  99
 100
 101 \emph on
 102 require_once
 103 \emph default
 104  :
 105 \emph on
 106
 107 \emph default
 108 Declaración de la librería
 109 \layout LyX-Code
 110
 111 require_once 'MECON/HTML/QuickForm.php';
 112 \layout Standard
 113
 114 Con esta declaración, se incluyen en nuestro programa todas las clases de
 115  MEcon Quick Form.
 116 \layout Subsection
 117
 118
 119 \emph on
 120 new MECON_HTML_QuickForm()
 121 \emph default
 122  : Creación nuevo formulario
 123 \layout LyX-Code
 124
 125 var = new MECON_HTML_QuickForm(<nombre>, <método>, <accion>, <destino>,
 126  <atributos>);
 127 \layout Standard
 128
 129 La variable
 130 \emph on
 131 var
 132 \emph default
 133  nuestro manejador del formulario, con el se trabajará en adelante.
 134 \layout Standard
 135
 136 Parámetros:
 137 \layout Itemize
 138
 139 <acción> : Página destino, por defecto se toma la misma página (action).
 140 \layout Itemize
 141
 142 <nombre> : Nombre del objeto formulario (name).
 143 \layout Itemize
 144
 145 <destino> : Tipo de ventana destino que se armará.
 146  Ej:
 147 \emph on
 148 _blank
 149 \emph default
 150 : Nueva;
 151 \emph on
 152 _self
 153 \emph default
 154  : Sobre la misma.
 155  Por defecto se toma
 156 \emph on
 157 _self.
 158 \layout Itemize
 159
 160 <método> : Método con el que se enviarán los objetos del formulario:
 161 \emph on
 162 post y get.
 163
 164 \emph default
 165  Por defecto se toma
 166 \emph on
 167 post.
 168 \layout Itemize
 169
 170 <atributos> : Mas adelante.
 171 \layout Standard
 172
 173 Ejemplos:
 174 \layout LyX-Code
 175
 176 $form = new MECON_HTML_QuickForm('otro.php','test','_blank','get');
 177 \layout LyX-Code
 178
 179 $form = new MECON_HTML_QuickForm('','test','','');
 180 \layout Subsection
 181
 182 addGroup() : Armar grupos de objetos
 183 \begin_inset LatexCommand \label{sub:addGroup()-:-Armar}
 184
 185 \end_inset
 186
 187
 188 \layout LyX-Code
 189
 190 $form->addGroup(<vector_elementos>, <nombre>, <titulo>, ' ', true);
 191 \layout Standard
 192
 193 Se crea un grupo con los elementos en
 194 \emph on
 195 <vector_elementos>
 196 \emph default
 197  con el nombre igual a
 198 \emph on
 199 <nombre>
 200 \emph default
 201  y un título a la izquierda igual a
 202 \emph on
 203 <titulo>
 204 \emph default
 205 .
 206  Los demás valores se recomienda no modificar.
 207 \newline
 208
 209 \layout Standard
 210
 211 Comenzaremos por explicar que es un grupo de objetos, imagine que tiene
 212  varias casillas de verificación (checkbox), o un grupo de botones radio
 213  (radio button).
 214  Deseamos logicamente que estos aparezcan agrupados en el formulario, es
 215  decir en la misma celda y no en celdas distintas.
 216  Por esto es que se crean grupos.
 217 \layout Standard
 218
 219 Los elementos se crean de la siguiente manera:
 220 \layout LyX-Code
 221
 222 HTML_QuickForm::createElement(<tipo>, <nombre>, <valor>)
 223 \layout Standard
 224
 225 Luego el elemento debe ser agregado al vector de elementos.
 226 \layout Standard
 227
 228 Ejemplo:
 229 \layout LyX-Code
 230
 231 $grupo = array();
 232 \layout LyX-Code
 233
 234 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op1', 'Pelele');
 235
 236 \layout LyX-Code
 237
 238 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op2', 'Tololo');
 239
 240 \layout LyX-Code
 241
 242 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op3', 'Pitiribí');
 243 \layout LyX-Code
 244
 245 $form->addGroup($grupo, 'opciones', 'Opciones', ' ', true);
 246 \layout Standard
 247
 248 Como se observa, se creo un grupo de varios elementos del tipo casilla de
 249  verificación.
 250 \layout Subsection
 251
 252 addElement() : Agregar objetos al formulario
 253 \layout LyX-Code
 254
 255 $form->addElement(<tipo>,<nombre>, <opciones>);
 256 \layout Standard
 257
 258 Este es la primitava mas compleja, para poder explicarla usaré distintos
 259  ejemplos.
 260 \layout Subsubsection
 261
 262 Cabecera (header)
 263 \layout LyX-Code
 264
 265 $form->addElement('header','cabecera', 'Título del formulario');
 266 \layout Standard
 267
 268 Con esta función creamos la cabecera del formulario, normalmente se incluye
 269  una sola por formulario, pero puede darse el caso de incluir mas.
 270  El segundo parámetro es para el renderizador, con opción
 271 \begin_inset Quotes eld
 272 \end_inset
 273
 274 cabecera
 275 \begin_inset Quotes erd
 276 \end_inset
 277
 278  el estilo es centrado y es considerado mas importante que
 279 \begin_inset Quotes eld
 280 \end_inset
 281
 282 titulo
 283 \begin_inset Quotes erd
 284 \end_inset
 285
 286 , que tambien es centrado pero se lo considera un sub-item de
 287 \begin_inset Quotes eld
 288 \end_inset
 289
 290 cabecera
 291 \begin_inset Quotes erd
 292 \end_inset
 293
 294
 295 \layout Subsubsection
 296
 297 Elemento estático (etiqueta)
 298 \layout LyX-Code
 299
 300 $form->addElement ('static' , <nombre> ,<titulo>,<texto>);
 301 \layout Standard
 302
 303 Se agrega una fila con un elemento estático, del tipo etiqueta.
 304  Con un un texto a la izquierda con valor
 305 \emph on
 306 <titulo>
 307 \emph default
 308  y un texto de datos a la derecha con valor
 309 \emph on
 310 <texto>
 311 \layout Standard
 312
 313 Ejemplo:
 314 \layout LyX-Code
 315
 316 $form->addElement ('static' , 'responsable' , 'Responsable' , 'hola');
 317 \layout Standard
 318
 319 Con este elemento, agramos una fila con el texto
 320 \begin_inset Quotes eld
 321 \end_inset
 322
 323 Responsable
 324 \begin_inset Quotes erd
 325 \end_inset
 326
 327  como nombre de atributo (a la izquierda) y se visualiza el texto
 328 \begin_inset Quotes eld
 329 \end_inset
 330
 331 hola
 332 \begin_inset Quotes erd
 333 \end_inset
 334
 335  en la columna de datos.
 336 \layout Subsubsection
 337
 338 Elemento oculto (hidden)
 339 \layout LyX-Code
 340
 341 $form->addElement ('hidden' , <nombre> , <valor>);
 342 \layout Standard
 343
 344 Se agrega al formulario un objeto oculto (hidden) con nombre igual a
 345 \emph on
 346 <nombre>
 347 \emph default
 348  y valor igual a
 349 \emph on
 350 <valor>
 351 \emph default
 352 .
 353 \layout Standard
 354
 355 Ejemplo
 356 \layout LyX-Code
 357
 358 $form->addElement ('hidden' , 'id_cliente' , '54');
 359 \layout Subsubsection
 360
 361 Cuadro de Texto (text)
 362 \layout LyX-Code
 363
 364 $form->addElement('text', <nombre>, <titulo>, <opciones>);
 365 \layout Standard
 366
 367 Se agrega al formulario un cuadro de texto con el nombre igual a <nombre>,
 368  con título a la izquierda igual a <titulo> y un conjunto de opciones.
 369  En el ejemplo se visualiza un caso común.
 370 \layout LyX-Code
 371
 372 $form->addElement('text', 'name', 'Nombre', array('size' => '30', 'maxlength'
 373  => '30'));
 374 \layout Subsubsection
 375
 376 Area de Texto (textarea)
 377 \layout LyX-Code
 378
 379 $form->addElement('textarea', <nombre>, <titulo>, <opciones>);
 380 \layout Standard
 381
 382 Se agrega al formulario un área de texto con el nombre igual a <nombre>,
 383  con título a la izquierda igual a <titulo> y un conjunto de opciones.
 384  En el ejemplo se visualiza un caso común.
 385 \layout LyX-Code
 386
 387 $form->addElement('textarea', 'desc_sistema', 'Descripción', array('rows'
 388  => '2','cols'=>'50'));
 389 \layout Subsubsection
 390
 391 Campo de Fecha
 392 \layout LyX-Code
 393
 394 $form->addElement('mdate', <nombre>, <titulo>);
 395 \layout Standard
 396
 397 Se agrega al formulario un campo de fecha con el nombre igual a <nombre>,
 398  con título a la izquierda igual a <titulo>.
 399  En el ejemplo se visualiza un caso común.
 400 \layout LyX-Code
 401
 402 $form->addElement('mdate', 'fecha', 'Fecha Implementación');
 403 \layout Subsubsection
 404
 405 Caja de Selección (select)
 406 \layout LyX-Code
 407
 408 $form->addElement ('select' , <nombre>, <titulo>, <vector_datos> , <opciones>);
 409 \layout Standard
 410
 411 Se agrega al formulario una caja de selección con el nombre igual a <nombre>,
 412  con título a la izquierda igual a <titulo> y un conjunto de opciones.
 413
 414 \layout Standard
 415
 416 Ejemplos:
 417 \layout LyX-Code
 418
 419 $arr = array("clave1" => "valor1", "clave2" => "valor2", "clave3" => "valor3",
 420  "clave4" => "valor4", "clave5" => "valor5", "clave6" => "valor6");
 421 \layout Standard
 422
 423 Esta es la inicialización del vector de datos.
 424 \layout LyX-Code
 425
 426 $form->addElement ('select' , 'vector2' , 'Permisos' ,$arr , array('size'
 427  => '1'));
 428 \layout Standard
 429
 430 Aqui se crea una caja de selección con la opción de seleccionar solo 1 valor
 431 \layout Itemize
 432
 433 $form->addElement ('select' , 'vector1' , 'Permisos' ,$arr , array('size'
 434  => sizeof($arr), 'multiple' => 'multiple'));
 435 \layout Standard
 436
 437 Aqui se crea una caja de selección con la opción de seleccionar múltiples
 438  valores.
 439 \layout Subsubsection
 440
 441 Casilla de Verificación (checkbox | radio)
 442 \begin_inset LatexCommand \label{sub:Casilla-de-Verificación}
 443
 444 \end_inset
 445
 446
 447 \layout Standard
 448
 449 Para ambos casos (checkbox y radio button) es necesario crear un grupo de
 450  elementos como se vio en
 451 \begin_inset LatexCommand \ref{sub:addGroup()-:-Armar}
 452
 453 \end_inset
 454
 455
 456 \newline
 457
 458 \layout Standard
 459
 460 Ejemplo
 461 \emph on
 462 checkbox
 463 \emph default
 464 :
 465 \layout LyX-Code
 466
 467 $grupo = array();
 468 \layout LyX-Code
 469
 470 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op1', 'Pelele');
 471
 472 \layout LyX-Code
 473
 474 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op2', 'Tololo');
 475
 476 \layout LyX-Code
 477
 478 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op3', 'Pitiribí');
 479 \layout LyX-Code
 480
 481 $form->addGroup($grupo, 'opciones', 'Opciones', ' ', true);
 482 \layout Standard
 483
 484 Ejemplo
 485 \emph on
 486 radio button:
 487 \layout LyX-Code
 488
 489 $grupo = array();
 490 \layout LyX-Code
 491
 492 $grupo[] =& HTML_QuickForm::createElement('radio', 'op4', 'Pelele','','v1');
 493
 494 \layout LyX-Code
 495
 496 $grupo[] =& HTML_QuickForm::createElement('radio', 'op4', 'Tololo','', 'v2');
 497
 498 \layout LyX-Code
 499
 500 $grupo[] =& HTML_QuickForm::createElement('radio', 'op4', 'Pitiribí','',
 501  'v3');
 502 \layout LyX-Code
 503
 504 $form->addGroup($grupo, 'opciones2', 'Opciones 2', ' ', true);
 505 \layout Standard
 506
 507 En el caso de los Radio Button, el 4to.
 508  parámetro es una etiqueta que se visualiza a la dereche del círculo de
 509  opción, de todas formas su uso es poco común.
 510 \layout Subsubsection
 511
 512 Botones de Formulario (button)
 513 \begin_inset LatexCommand \label{sub:Botones-de-Formulario}
 514
 515 \end_inset
 516
 517
 518 \layout Standard
 519
 520 Para crear los botones de un formulario, recomendamos usar un grupo como
 521  se vió en el ejemplo de la casilla de verificación en
 522 \begin_inset LatexCommand \ref{sub:Casilla-de-Verificación}
 523
 524 \end_inset
 525
 526 .
 527  Pero en este caso el grupo lo formarán botones.
 528 \layout Standard
 529
 530 Ejemplo:
 531 \layout LyX-Code
 532
 533 $btn_aceptar =& HTML_QuickForm::createElement('submit', 'aceptar', 'Grabar');
 534 \layout LyX-Code
 535
 536 $btn_cancelar =& HTML_QuickForm::createElement('reset', 'cancelar', 'Limpiar');
 537
 538 \layout LyX-Code
 539
 540 $grupo = array(); $grupo[] =& $btn_aceptar; $grupo[] =& $btn_cancelar;
 541 \layout LyX-Code
 542
 543 $form->addGroup($grupo, 'botones');
 544 \layout Subsection
 545
 546 Reglas de Validación
 547 \layout Standard
 548
 549 Para poder imponer reglas en nuestro formulario, es necesario explicitarlos
 550  en el programa.
 551  Existen reglas para distintos elementos del formulario.
 552  El MEcon Quick Form cuenta con un set de reglas registradas pero se le
 553  pueden agregar mas.
 554
 555 \layout LyX-Code
 556
 557 $var->addRule(<nombre_elemento>, <texto>, <tipo_regla>);
 558 \layout Standard
 559
 560 Los parámetros tienen el siguiente significado.
 561 \layout Itemize
 562
 563 <nombre_elemento> : Nombre del elemento del formulario (propiedad
 564 \emph on
 565 name
 566 \emph default
 567 ) al cual se le aplicará la regla.
 568 \layout Itemize
 569
 570 <texto> : Texto que se visualizará en el caso que NO se cumpla con la regla.
 571 \layout Itemize
 572
 573 <tipo_regla> : Tipo de la regla a aplicar.
 574 \layout Subsection
 575
 576 Ejemplos de Tipos de reglas
 577 \layout Standard
 578
 579 A continuación se verán los ejemplos más comunes.
 580  Dependiendo del tipo de regla, se necesita un parámetro adicional
 581 \layout Subsubsection
 582
 583 "required" : Obligatorio
 584 \begin_inset LatexCommand \label{sub:"required"-:-Obligatorio}
 585
 586 \end_inset
 587
 588
 589 \layout Standard
 590
 591 Obliga que el usuario complete ese campo.
 592  Se visualiza al lado del nombre un asterisco indicando que es obligatorio.
 593 \layout Standard
 594
 595 Ejemplo:
 596 \layout LyX-Code
 597
 598 $form->addRule('nombre_sistema', 'El campo nombre es obligatorio', 'required');
 599
 600 \layout Subsubsection
 601
 602 "maxlength" : Tamaño Máximo.
 603 \layout Standard
 604
 605 Determina el tamaño máximo del campo, se le comunica al usuario el tamaño
 606  máximo permitido.
 607 \layout Standard
 608
 609 Ejemplo:
 610 \layout LyX-Code
 611
 612 $form->addRule('nombre_sistema', 'El tamaño debe ser a lo sumo de 20', 'maxlengt
 613 h', '20');
 614 \layout Subsubsection
 615
 616 "minlength" : Tamaño Mínimo.
 617 \layout Standard
 618
 619 Determina el tamaño mínimo del campo, se le comunica al usuario el tamaño
 620  mínimo permitido.
 621 \layout Standard
 622
 623 Ejemplo:
 624 \layout LyX-Code
 625
 626 $form->addRule('nombre_sistema', 'El tamaño debe ser por lo menos de 5',
 627  'minlength', '5');
 628 \layout Subsubsection
 629
 630 "fecha" : Fecha Válida
 631 \layout Standard
 632
 633 Determina si la fecha es válida, ejemplo: (31 de febrero).
 634 \layout Standard
 635
 636 Ejemplo:
 637 \layout LyX-Code
 638
 639 $form->addRule('fecha_inicial', 'La fecha no es válida', 'fecha');
 640 \layout Subsubsection
 641
 642 "rangelength" : Tamaño dentro de un Rango FALTA
 643 \layout Itemize
 644
 645 se solicita enviar ejemplo
 646 \layout Subsubsection
 647
 648 "regex" : Validar con expresion regular
 649 \layout Standard
 650
 651 Obliga que el campo cumpla con la expresión regular estipulada.
 652 \layout Standard
 653
 654 Ejemplo:
 655 \layout LyX-Code
 656
 657 $form->addRule('nombre_sistema', 'No cumple, debe contener el texto rodolfo',
 658  'regex', '/rodolfo/');
 659 \layout Subsubsection
 660
 661 "email" : Valida que sea Email
 662 \layout Standard
 663
 664 Valida que el texto ingresado sea sintácticamente correcto.
 665  Sin embargo puede estar vacío, se puede combinar con
 666 \emph on
 667 required
 668 \begin_inset LatexCommand \ref{sub:"required"-:-Obligatorio}
 669
 670 \end_inset
 671
 672
 673 \layout LyX-Code
 674
 675 $form->addRule('txt_email', 'Error de sintaxis', 'email');
 676 \layout Subsubsection
 677
 678 "emailorblank" :
 679 \layout Itemize
 680
 681 se solicita enviar ejemplo
 682 \layout Subsubsection
 683
 684 "lettersonly" : Todas letras
 685 \layout Standard
 686
 687 Valida que el texto ingresado contenga solamente letras
 688 \layout LyX-Code
 689
 690 $form->addRule('nombre_sistema', 'Solo se permiten letras ', 'lettersonly');
 691 \layout Subsubsection
 692
 693 "alphanumeric" : Todos letras y numeros
 694 \layout Standard
 695
 696 Valida que el texto ingresado sea alfanumérico, acepta letros o números
 697  o ambos.
 698  No permite caracteres especiales como '?', '
 699 \backslash
 700 ', etc.
 701 \layout LyX-Code
 702
 703 $form->addRule('nombre_sistema', 'Solo se permiten letras y números', 'alphanume
 704 ric');
 705 \layout Subsubsection
 706
 707 "numeric" :
 708 \layout Standard
 709
 710 Valida que el texto ingresado contenga solamente números
 711 \layout LyX-Code
 712
 713 * $form->addRule('nombre_sistema', 'Solo se permiten números', 'numeric');
 714 \layout Subsubsection
 715
 716 "nopunctuation" :
 717 \layout Itemize
 718
 719 se solicita enviar ejemplo
 720 \layout Subsubsection
 721
 722 "nonzero" :
 723 \layout Itemize
 724
 725 se solicita enviar ejemplo
 726 \layout Subsubsection
 727
 728 "uploadedfile" :
 729 \layout Itemize
 730
 731 se solicita enviar ejemplo
 732 \layout Subsubsection
 733
 734 "maxfilesize" :
 735 \layout Itemize
 736
 737 se solicita enviar ejemplo
 738 \layout Subsubsection
 739
 740 "mimetype" :
 741 \layout Itemize
 742
 743 se solicita enviar ejemplo
 744 \layout Subsubsection
 745
 746 "filename" :
 747 \layout Itemize
 748
 749 se solicita enviar ejemplo
 750 \layout Subsection
 751
 752 Accionar del formulario
 753 \layout Standard
 754
 755 Aqui se verá la forma de acceder al formulario cuando se han cumplido todas
 756  las reglas de validación (haya o no).
 757 \layout LyX-Code
 758
 759 Ejemplo:
 760 \newline
 761
 762 \layout LyX-Code
 763
 764 // Se valida, freezea el formulario y pide confirmación.
 765 \layout LyX-Code
 766
 767 if ($form->validate()) {
 768 \layout LyX-Code
 769
 770 \SpecialChar ~
 771 \SpecialChar ~
 772 $tmp = $form->getSubmitValue('botones');
 773 \layout LyX-Code
 774
 775 \SpecialChar ~
 776 \SpecialChar ~
 777 if (@$tmp['aceptar'] == 'Grabar') {
 778 \layout LyX-Code
 779
 780 \SpecialChar ~
 781 \SpecialChar ~
 782 \SpecialChar ~
 783 \SpecialChar ~
 784 $form->freeze();
 785 \layout LyX-Code
 786
 787 \SpecialChar ~
 788 \SpecialChar ~
 789 \SpecialChar ~
 790 \SpecialChar ~
 791 $btn_aceptar->setValue('Confirmar');
 792 \layout LyX-Code
 793
 794 \SpecialChar ~
 795 \SpecialChar ~
 796 }
 797 \layout LyX-Code
 798
 799 \SpecialChar ~
 800 \SpecialChar ~
 801 elseif (@$tmp['aceptar'] == 'Confirmar') {
 802 \layout LyX-Code
 803
 804 \SpecialChar ~
 805 \SpecialChar ~
 806 \SpecialChar ~
 807 \SpecialChar ~
 808 echo 'Aca Meto el Proceso de grabacion, eliminacion, etc';
 809 \layout LyX-Code
 810
 811 \SpecialChar ~
 812 \SpecialChar ~
 813 \SpecialChar ~
 814 \SpecialChar ~
 815 $var = "grabacion_exitosa.php";
 816 \layout LyX-Code
 817
 818 \SpecialChar ~
 819 \SpecialChar ~
 820 \SpecialChar ~
 821 \SpecialChar ~
 822 header('Location: '.$var);
 823 \layout LyX-Code
 824
 825 \SpecialChar ~
 826 \SpecialChar ~
 827 }
 828 \layout LyX-Code
 829
 830 }
 831 \layout LyX-Code
 832
 833 echo $form->toHtml();
 834 \layout Standard
 835 \noindent
 836 Como se observa, primero solicita que se validen los datos del formulario,
 837  luego hay que ver en que instancia se encuentra, si en confirmación o en
 838  la posterior a la confirmación.
 839  Si no cumple con ninguna de las opciones, dibuja el formulario.
 840  Para ver en que instancia se encuentra, se solicita el valor del grupo
 841  de botones creado en
 842 \begin_inset LatexCommand \ref{sub:Botones-de-Formulario}
 843
 844 \end_inset
 845
 846 .
 847  Recomendamos ver los ejemplos
 848 \begin_inset LatexCommand \ref{sec:Ejemplos-Completos}
 849
 850 \end_inset
 851
 852
 853 \layout Subsection
 854
 855 Dibujar el formulario
 856 \layout Standard
 857
 858 Este paso simplemente solicita que se dibuje el formulario bajo las condiciones
 859  dadas en los pasos anteriores.
 860 \layout LyX-Code
 861
 862 $form->toHtml();
 863 \layout Standard
 864
 865 Si en vez de mostrar el formulario con los campos
 866 \begin_inset Quotes eld
 867 \end_inset
 868
 869 editables
 870 \begin_inset Quotes erd
 871 \end_inset
 872
 873 , deseamos que los muestre como simple texto, se debe anteponer a
 874 \emph on
 875 $form->toHtml();
 876 \emph default
 877 lo siguiente:
 878 \layout LyX-Code
 879
 880 $form->freeze();
 881 \layout Standard
 882
 883 Esto es útil cuando se desea por ejemplo mostrar los datos ingresados en
 884  el formulario solicitando una confirmación, antes de trabajar con ellos.
 885  Recomendamos ver los ejemplos
 886 \begin_inset LatexCommand \ref{sec:Ejemplos-Completos}
 887
 888 \end_inset
 889
 890
 891 \layout Section
 892
 893 Ejemplos Completos
 894 \begin_inset LatexCommand \label{sec:Ejemplos-Completos}
 895
 896 \end_inset
 897
 898
 899 \layout Subsection
 900
 901 Archivo ejemplar estandar
 902 \layout LyX-Code
 903
 904 A continuación se muestra un ejemplo sencillo pero que abarca todos los
 905  temas vistos en este HOWTO
 906 \newline
 907
 908 \layout LyX-Code
 909
 910 <HTML> <HEAD>
 911 \layout LyX-Code
 912
 913 <TITLE>Prueba de renderer</TITLE>
 914 \layout LyX-Code
 915
 916 <LINK rel="stylesheet" href="/MECON/css/general_estilos.css" type="text/css"/>
 917  </HEAD> <BODY>
 918 \layout LyX-Code
 919
 920 <?
 921 \layout LyX-Code
 922
 923 require_once 'MECON/HTML/QuickForm.php';
 924 \layout LyX-Code
 925
 926 //(nombre,metodo,accion,target) target _self _blank
 927 \layout LyX-Code
 928
 929 $form = new MECON_HTML_QuickForm('test','post','','');
 930 \newline
 931
 932 \layout LyX-Code
 933
 934 //Agrega los elementos comunes a todas las opciones
 935 \layout LyX-Code
 936
 937 $form->addElement('header','cabecera', 'Título del formulario');
 938 \newline
 939
 940 \layout LyX-Code
 941
 942 //Agregar un objeto estatico..
 943  tipo estiqueta
 944 \layout LyX-Code
 945
 946 $form->addElement ('static' , 'responsable' , 'Responsable' , 'hola');
 947 \newline
 948
 949 \layout LyX-Code
 950
 951 // Agregar un objeto oculto (hidden)
 952 \layout LyX-Code
 953
 954 $form->addElement ('hidden' , 'id_cliente' , '54');
 955 \newline
 956
 957 \layout LyX-Code
 958
 959 $form->addElement('text', 'nombre_sistema','Nombre', array('size' => '30',
 960  'maxlength' => '30'));
 961 \newline
 962
 963 \layout LyX-Code
 964
 965 $form->addElement('textarea', 'desc_sistema', 'Descripción', array('rows'
 966  => '2','cols'=>'50'));
 967 \newline
 968
 969 \layout LyX-Code
 970
 971 $form->addElement('mdate', 'fecha', 'Fecha Implementación');
 972 \newline
 973
 974 \layout LyX-Code
 975
 976 // Agrego un grupo de prueba separado por <BR>s.
 977
 978 \layout LyX-Code
 979
 980 $grupo = array();
 981 \layout LyX-Code
 982
 983 $grupo[] =& HTML_QuickForm::createElement('mdate', 'desde', 'Desde');
 984 \layout LyX-Code
 985
 986 $grupo[] =& HTML_QuickForm::createElement('mdate', 'hasta', 'Hasta');
 987 \layout LyX-Code
 988
 989 $form->addGroup($grupo, 'fecha_group', 'Intervalo', '<BR>', true);
 990 \newline
 991
 992 \layout LyX-Code
 993
 994 // Agregar 2 objetos select a partir de un array
 995 \layout LyX-Code
 996
 997 $arr = array("clave1" => "valor1", "clave2" => "valor2", "clave3" => "valor3",
 998  "clave4" => "valor4", "clave5" => "valor5", "clave6" => "valor6");
 999 \layout LyX-Code
1000
1001 $form->addElement ('select' , 'vector1' , 'Permisos' ,$arr , array('size'
1002  => sizeof($arr), 'multiple' => 'multiple'));
1003 \layout LyX-Code
1004
1005 $form->addElement ('select' , 'vector2' , 'Permisos' ,$arr , array('size'
1006  => '1'));
1007 \newline
1008
1009 \layout LyX-Code
1010
1011 // Agrega otro grupo de prueba, separado por un espacio.
1012 \layout LyX-Code
1013
1014 $grupo = array();
1015 \layout LyX-Code
1016
1017 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op1', 'Pelele');
1018
1019 \layout LyX-Code
1020
1021 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op2', 'Tololo');
1022
1023 \layout LyX-Code
1024
1025 $grupo[] =& HTML_QuickForm::createElement('checkbox', 'op3', 'Pitiribí');
1026 \layout LyX-Code
1027
1028 $form->addGroup($grupo, 'opciones', 'Opciones', ' ', true);
1029 \newline
1030
1031 \layout LyX-Code
1032
1033 // Agrega otro grupo de prueba, separado por un espacio.
1034
1035 \layout LyX-Code
1036
1037 $grupo = array();
1038 \layout LyX-Code
1039
1040 $grupo[] =& HTML_QuickForm::createElement('radio', 'op4', 'Pelele','','v1');
1041
1042 \layout LyX-Code
1043
1044 $grupo[] =& HTML_QuickForm::createElement('radio', 'op4', 'Tololo','', 'v2');
1045
1046 \layout LyX-Code
1047
1048 $grupo[] =& HTML_QuickForm::createElement('radio', 'op4', 'Pitiribí','',
1049  'v3');
1050 \layout LyX-Code
1051
1052 $form->addGroup($grupo, 'opciones2', 'Opciones 2', ' ', true);
1053 \newline
1054
1055 \layout LyX-Code
1056
1057 // Agrega un grupo especial de botones.
1058 \layout LyX-Code
1059
1060 $btn_aceptar =& HTML_QuickForm::createElement('submit', 'aceptar', 'Grabar');
1061 \layout LyX-Code
1062
1063 $btn_cancelar =& HTML_QuickForm::createElement('reset', 'cancelar', 'Limpiar');
1064 \layout LyX-Code
1065
1066 $grupo = array();
1067 \layout LyX-Code
1068
1069 $grupo[] =& $btn_aceptar;
1070 \layout LyX-Code
1071
1072 $grupo[] =& $btn_cancelar;
1073 \layout LyX-Code
1074
1075 $form->addGroup($grupo, 'botones');
1076 \newline
1077
1078 \layout LyX-Code
1079
1080 // Agrega las reglas de validacion
1081 \layout LyX-Code
1082
1083 $form->addRule('nombre_sistema', 'El campo nombre es obligatorio', 'required');
1084 \layout LyX-Code
1085
1086 $form->addRule('nombre_sistema', 'El tamaño máximo es 10', 'maxlength',
1087  '10');
1088 \layout LyX-Code
1089
1090 $form->addRule('nombre_sistema', 'El campo debe ser alfanumérico', 'alphanumeric
1091 ');
1092 \layout LyX-Code
1093
1094 $form->addRule('desc_sistema', 'El campo descripcion es obligatorio', 'required'
1095 );
1096 \layout LyX-Code
1097
1098 $form->addRule('contacto', 'El campo contacto es obligatorio', 'required');
1099 \layout LyX-Code
1100
1101 $form->addRule('fecha', 'La fecha no es válida', 'fecha');
1102 \layout LyX-Code
1103
1104 $form->addRule('fecha', 'El campo fecha es obligatorio', 'required', '');
1105
1106 \layout LyX-Code
1107
1108 $form->addRule('desde', 'La fecha no es válida', 'fecha');
1109 \layout LyX-Code
1110
1111 $form->addRule('hasta', 'La fecha no es válida', 'fecha');
1112 \newline
1113
1114 \layout LyX-Code
1115
1116 // Se valida, freezea el formulario y pide confirmación.
1117
1118 \layout LyX-Code
1119
1120 if ($form->validate()) {
1121 \layout LyX-Code
1122
1123 \SpecialChar ~
1124 \SpecialChar ~
1125 $tmp = $form->getSubmitValue('botones');
1126 \layout LyX-Code
1127
1128 \SpecialChar ~
1129 \SpecialChar ~
1130 if (@$tmp['aceptar'] == 'Grabar') {
1131 \layout LyX-Code
1132
1133 \SpecialChar ~
1134 \SpecialChar ~
1135 \SpecialChar ~
1136 \SpecialChar ~
1137 $form->freeze();
1138 \layout LyX-Code
1139
1140 \SpecialChar ~
1141 \SpecialChar ~
1142 \SpecialChar ~
1143 \SpecialChar ~
1144 $btn_aceptar->setValue('Confirmar');
1145 \layout LyX-Code
1146
1147 \SpecialChar ~
1148 \SpecialChar ~
1149 } elseif (@$tmp['aceptar'] == 'Confirmar') {
1150 \layout LyX-Code
1151
1152 \SpecialChar ~
1153 \SpecialChar ~
1154 \SpecialChar ~
1155 \SpecialChar ~
1156 echo 'Aca Meto el Proceso de grabacion, eliminacion, etc';
1157 \layout LyX-Code
1158
1159 \SpecialChar ~
1160 \SpecialChar ~
1161 \SpecialChar ~
1162 \SpecialChar ~
1163 $var = "grabacion_exitosa.php";
1164 \layout LyX-Code
1165
1166 \SpecialChar ~
1167 \SpecialChar ~
1168 \SpecialChar ~
1169 \SpecialChar ~
1170 header('Location: '.$var);
1171 \layout LyX-Code
1172
1173 \SpecialChar ~
1174 \SpecialChar ~
1175 }
1176 \layout LyX-Code
1177
1178 }
1179 \layout LyX-Code
1180
1181 echo $form->toHtml();
1182 \layout LyX-Code
1183
1184 ?>
1185 \newline
1186
1187 \layout LyX-Code
1188
1189 </BODY>
1190 \layout LyX-Code
1191
1192 </HTML>
1193 \the_end