Manual de Desarrollo Formularios Web de Maestros y Operaciones en eFactory Software ERP

Factory Soft Venezuela, C.A.
Departamento de Desarrollo
Manual de Desarrollo de Formularios Web
© 2005 Factory Soft Venezuela, C.A. Todos los derechos
reservados.
Este documento es confidencial y está dirigido únicamente
a su destinatario. El acceso a éste por parte de terceras
personas no está permitido. Las opiniones aquí expresadas
se encuentran sujetas a los términos y condiciones
comerciales previamente fijadas con el cliente.
Cumplir con todas las leyes de derecho de autor aplicables
es responsabilidad del lector. Sin limitar los derechos bajo
derecho de autor, ninguna parte de este documento
podrá ser reproducida, almacenada o introducida en
un sistema de recuperación ni transmitida en
cualquier forma ni por cualquier medio (electrónico,
mecánico, fotocopia, grabación u otros) o para
cualquier fin, debe ser autorizado por Factory Soft
Venezuela, C.A. de forma escrita y expresa.
Los nombres de compañías y productos reales
mencionados en el presente pueden ser las marcas
comerciales de sus propietarios respectivos.
Factory Soft Venezuela, C.A. – Valencia Estado Carabobo,
Venezuela

Factory Soft Venezuela, C.A. Manual de Desarrollo de Formularios Web
Índice
Bitácora de Cambios ................................................................................................................3
Pasos para la construcción de Formularios .................................................................................4
Crear el formulario Web ..........................................................................................................4
Insertar Controles al Formulario:...............................................................................................5
Código aspx.Vb ..................................................................................................................... 21
Compilación del formulario: ...................................................................................................30
Imagen final del formulario:………………………………………………………………………………………………….33
Pagina 2 de 33

Bitácora de Cambios
• AJA: 15/10/07: Estructuración inicial del documento.
• MVP: 19/10/07: Revisión y modificación del documento.
• GCR: 05/11/07: Revisión del documento, modificaciones a la página principal y
encabezado, agregar índice y bitácora.
• GCR: 28/01/08: Reestructuración del documento.
• GCR: 29/01/08: Continuación de la redacción.
• GCR: 31/03/08: Adaptación para desarrollar operaciones.
• MVP: 01/04/08: Correcciones varias en el diseño del formulario.
Pagina 3 de 33

Pasos para la construcción de Formularios
Crear el formulario Web
1. Se debe Agregar un nuevo Web Form, haciendo clic derecho sobre la carpeta Formularios
del Proyecto Web para luego seleccionar la opción Agregar Nuevo Elemento. (Ver Figura
1)
Figura 1
2. Se Selecciona el elemento Web Form, se coloca el nombre del formulario y por último clic
en Agregar. (Ver Figura 2).
Figura 2
Nota: El nombre del formulario estará compuesto de la siguiente manera:
Prefijo+Tipo+Nombre
Ejemplo:
frmActualizacionZonas (Para los maestros)
frmOperacionPedidos (Para las Operaciones)
Pagina 4 de 33

3. Ir a la vista de código( Ver Figura 3) agregar las siguientes propiedades:
Figura 3
<head runat="server">
<title>Zonas</title>
<link href="~/Framework/cssEstilosFramework.css" rel="stylesheet"
type="text/css" />
<link href="~/Administrativo/cssEstilosAdministrativo.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="frmContenedor" runat="server">
La referencia a la segunda hoja de estilo corresponde al aplicativo (Administrativo,
Contabilidad, Nomina,…)
Nota: El símbolo (~), se obtiene con la combinación de teclas Alt Gr + (Tecla 4 del teclado
alfanumérico), seguidamente barra espaciadora.
Insertar Controles al Formulario:
Luego de haber construido la página se deben agregar los siguientes controles para obtener su
correcto funcionamiento:
1. Se selecciona un control ScriptManager arrastrándolo desde el Cuadro de herramientas
hacia la página. (Ver Figura 4).
Pagina 5 de 33

Figura 4
Propiedades:
ID: Se compone por el prefijo smp seguido de la palabra Operaciones o Actualizaciones
indicando el tipo de formulario.
2. Se selecciona un control UpdatePanel arrastrándolo desde el desde el Cuadro de
herramientas hacia la página (Ver Figura 5).
Pagina 6 de 33

Figura 5
Propiedades:
ID: Se compone por el prefijo udp seguido de la palabra Operaciones o Actualizaciones
indicando el tipo de formulario.
UpdateMode: Conditional
3. Dentro del updatePanel colocar una tabla de 1 columna y 2 filas, seleccionando en la
barra de menú la opción Diseño (Ver Figura 6 y Figura 7).
Figura 6
Pagina 7 de 33

Figura 7
4. En la primera fila colocar un control TabContainer (en el caso de los formularios que
utilicen pestañas) arrastrándolo desde la ventana de herramientas. (Ver Figura 8)
Figura 8
Propiedades:
ID: Se compone por el prefijo pgf seguido del nombre del formulario.
Pagina 8 de 33

Width: 720px
Height: 390px
5. Se debe agregar un Máximo de 3 Tabs haciendo clic en el símbolo que aparece en la
esquina superior derecha del control TabContainer. (Ver Figura 9 y Figura 10)
Figura 9
Figura 10
6. En la vista de código colocar las siguientes propiedades a los Tabs:
<cc1:TabContainer ID="pgfZonas" runat="server" ActiveTabIndex="0"
Height="390px" Width="720px">
<cc1:TabPanel ID="pagGeneral" runat="server" HeaderText="General">
</cc1:TabPanel>
<cc1:TabPanel ID="pagResumen" runat="server" HeaderText="Resumen">
</cc1:TabPanel>
<cc1:TabPanel ID="pagAvanzado" runat="server"
HeaderText="Avanzado">
</cc1:TabPanel>
</cc1:TabContainer></td>
Pagina 9 de 33

7. Hacer clic derecho sobre el TabPanel (Principal, en este caso pgfZonas) y seleccionar la
opción Estilos, se mostrará la ventana Generador de Estilos (Ver Figura 11).
Figura 11
8. En la segunda fila de la tabla agregar la botonera arrastrándola desde la ventana de
propiedades (Ver Figura 12).
Figura 12
Pagina 10 de 33

Propiedades (Ver Figura 13):
Figura 13
9. Agregar en cada TabPanel un control Panel arrastrándolo desde la ventana de
herramientas - Estándar (Ver Figura 14).
Figura 14
Propiedades:
ID: Se compone por el prefijo pnl seguido del nombre del Tab (General, Resumen,
Avanzado).
Width: 690px
Height: 390px
ScrollBars: Vertical
Pagina 11 de 33

10. En el Tab General insertar una tabla cuyas filas y columnas dependen de la cantidad de
controles a insertar. Cada control debe ir en una celda.
11. En caso de ser necesario se deben combinar las celdas de la tabla, para esto se
seleccionan la celdas a combinar y se hace clic derecho sobre la selección. (Ver Figura 15)
Figura 15
12. En el generador de estilos colocar el alto de las filas e separación en caso de haber
combinado celdas. (Ver Figura 16 ).
Primera Fila: 8px
Filas Intermedias: 4px
Entre barras de separación: 16px
Pagina 12 de 33

Figura 16
13. Agregar los controles necesarios a utilizar arrastrándolos desde la ventana de
herramientas:
Pagina 13 de 33

Control lblNormal (Etiquetas)
Figura 17
Propiedades:
ID: Se compone por el prefijo lbl seguido del nombre del campo.
CssClass: Etiqueta
pcNombreFormulario: Nombre del formulario al que pertenece el control.
Pagina 14 de 33

Control txtNormal (Cajas de Texto)
Figura 18
Propiedades:
ID: Se compone por el prefijo txt seguido del nombre del campo.
CssClass: CajasTexto
Widht: Minimo: 80px, Maximo: 650px
TextMode: SingleLine, en caso de los campos memo MultiLine.
Height: 500px
Cajas de Texto Numerico (txtNumero):
En el caso de las cajas de texto Numerico se agregan las siguientes propiedades:
CssClass: CajasTextoNumero
plAceptarDecimales: su valor es true o false dependiendo del valor del campo.
pnNumeroDecimales: Numero de decimales a mostrar.
Pagina 15 de 33

Combos:
Figura 19
Propiedades:
ID: Se compone por el prefijo cbo seguido del nombre del campo.
plPermitirVacio: Se coloca True en caso de que el campo admita valores en blanco
(vacíos).
CboDoble:
En el caso de los combos dobles se agregan las siguientes propiedades:
pnAnchoCodigo: Ancho del combo que muestra el código del registro.
pnAnchoDescripcion: Ancho del combo que muestra la descripción del registro.
Pagina 16 de 33

grdListaRenglones:
Se usara para las operaciones que contengan Renglones.
Figura 20
Propiedades:
ID: Se compone por el prefijo grd seguido del nombre del campo.
pnFilasVisibles: Numero de filas visibles en la pantalla.
pcTitulo: Titulo de los renglones.
Pagina 17 de 33

wbcAdministradorMensajeModal:
Al final del formulario agregar un control wbcAdministradoMensajeModal para
manejar los mensajes modales.
Figura 21
wbcAdministradorVentanaModal:
Al final del formulario agregar un control wbcAdministradoMensajeModal para
manejar las ventanas modales.
Figura 22
Pagina 18 de 33

Barras de Separación:
Para las barras de separación se usan filas combinadas (Ver Figura 23) , con las siguientes
propiedades:
Class: SeparadorSeccionesFormularios
En el Generador de Estilos colocar Alto: 18px
Para las Etiquetas contenidas en la barra se agrega la propiedad:
CssClass: TituloPanel
Figura 23
14. En el tab Resumen agregar un control GridView arrastrándolo desde la ventana de
propiedades. (Ver Figura 24 ).
Figura 24
Pagina 19 de 33

Propiedades:
ID: Se compone por el prefijo grd seguido de la palabra Datos (grdDatos).
DataKeyNames: se debe colocar el nombre de todos los campos que se mostraran en tab
General, separados por coma.
Widht: 632px
PageSize: 12
AlowPaging: True
AutoGenerateColumns: False
Estilos:
AlternatingRowStyle
Cssclass: FilaAlternaGrid
HeaderStyle
Cssclass: EncabezadoGrid
PagerStyle
CssClass: BarraPaginacionGrid
RowStyle
CssClass: FilaGrid
SeletedRowStyle
CssClass: FilaSeleccionadaGrid
15. Hacer Clic en el símbolo que aparece en la esquina superior derecha y seleccionar Editar
Columnas. (Ver Figura 25).
Figura 25
16. Agregar una columna de tipo CommandField Seleccionar para la selección y tres
columnas BoundField para el código, nombre y status (Ver Figura 26 ).
Pagina 20 de 33

Figura 26
Propiedades:
Seleccionar:
ButtonType: Button
SelectText: …
ShowSelectButton: True
ControlStyle
Height: 16px
Whidth: 16px
ItemStyle:
Whidth: 30px
BoundField:
HeaderText: Nombre a mostrar en el encabezado de la columna. Ejemplos: Codigo,
Nombre, Status.
DataField: Nombre del campo que llena cada columna. Ejemplos: cod_zon, nom_zon,
status.
ItemStyle:
Whidth: Código: 60px, Nombre 500px, Status 30px.
Código aspx.Vb
Para agregar código Vb se ofrece una serie de segmentos de codigo que contendrá cada
formulario, para hacer uso de ello se arrastran desde la ventana de herramientas. (Ver Figura 27)
Pagina 21 de 33

Figura 27
Código Inicial:
Arrastrar desde la cuadro de herramientas los segmentos de código. (Ver ):
a. Inicio del código
b. Inicio del código de la clase
c. Región para declaraciones
d. Región para propiedades
e. Región para métodos
f. Fin de código
g. Bitácora
Pagina 22 de 33

Figura 28
Método Load:
En esté método se deben registrar todos los controles a utilizar en el formulario y hacer referencia
al objeto de búsqueda, para observarlo se debe seleccionar (Page Eventos) del Combobox izquierdo
y luego en el combobox derecho “LOAD”. (Ver Figura 29 y Figura 30)
Figura 29
Pagina 23 de 33

Figura 30
goBusquedaRegistro.pcTablaBusqueda: nombre de la tabla principal que alimentará la
busqueda.
goBusquedaRegistro.pcCamposIndice: Nombre del(os) campos que componen la clave
primaria de la la tabla.
goBusquedaRegistro.pcCamposMostrar: nombre de los campos que se mostraran en la
ventana de busqueda.
goBusquedaRegistro.pcTitulosCamposMostrar: Titulos o encabezados de los campos a
mostrar.
goBusquedaRegistro.pcCamposBusquedaTextual : Nombre de campo(s) adicional(es) para
hacer busquedas.
mRegistrarIndice: Nombre del(os) campos que componen la clave primaria de la la tabla.
mRegistrarControl: se coloca el nombre del control y el (los) campo(s) que lo alimentan. En
caso de los combos dobles se hará com sigue:
me.mRegistrarControl(me.cboCod_Zon, "cod_zon,nom_zon", "zonas")
Pagina 24 de 33

En el caso de las operaciones con renglones se deben registrar las columnas del grid, para esto se
utilizan los métodos:
mRegistrarColumna: Se utiliza para registrar columnas con campos sencillos.
Me.grdRenglones_Ajustes.mRegistrarColumna("cod_art", "Código del
Artículo", "", True, True, "String", True, 220)
mRegistrarColumnaDesplegableVariable: Se utiliza para registrar columnas con combos que
se llenen de una tabla en especifico.
Me.grdRenglones_Ajustes.mRegistrarColumnaDesplegableVariable("cod_alm",
"Almacen","", True, "almacenes","cod_alm", False, 90)
mRegistrarBusquedaAsistida: Se utiliza para registrar columnas con un boton buscar.
Me.grdRenglones_Ajustes.mRegistrarBusquedaAsistida("cod_art",_
"articulos",_
"cod_art",_
"cod_art,nom_art",_
".,Código,Nombre",_
"cod_art,nom_art",_
"can_art1:,seleccion:,
cod_tip:,cod_alm:,tipo:")
Me.grdRenglones_Ajustes.pcUrlFormularioBusqueda =
"../../Framework/Formularios/frmFormularioBusqueda.aspx"
Los formularios de operaciones varían de acuerdo a las reglas de negocio, por lo que cada uno
puede tener funcionalidades especificas que deben ser programadas por el desarrollador.
Método Agregar Registro:
Actualizaciones:
Figura 31
Operaciones:
Pagina 25 de 33

Figura 32
Método Editar Registro:
Actualizaciones:
Figura 33
Operaciones:
Figura 30
Método Eliminar Registro:
Actualizaciones:
Figura 35
Pagina 26 de 33

Operaciones:
Figura 36
Método Aceptar:
Actualizaciones:
Figura 31
Operaciones:
Debe ser programado por el desarrollador tomando en cuenta las reglas de negocio.
Método Cancelar:
Actualizaciones:
Figura 32
Pagina 27 de 33

Operaciones:
Figura 3933
Método para permitir paginación del Grid:
Figura 40
Método para seleccionar registros del Grid :
Se deben colocar todos los campos que se muestran en el Tab General.
Figura 41
Observaciones:
Para los txtnormal se utiliza:
me.txtCod_Zon.Text = trim(grdDatos.SelectedDataKey.Values("cod_zon"))
Para los txtFecha:
me.txtFec_Ini.pdValor = grdDatos.SelectedDataKey.Values("fec_ini")
Para los txtNumero:
me.txtMon_Net.pbValor = grdDatos.SelectedDataKey.Values("mon_net")
Pagina 28 de 33

Para los Combos:
me.CboStatus.SelectedValue =
trim(grdDatos.SelectedDataKey.Values("status"))
Para los Check:
me.chkNacional.Checked = grdDatos.SelectedDataKey.Values("nacional")
Método Actualizar el Grid:
Se hace la declarcion del método Public Overrides Sub mActualizarListaResumen(),
desde el cuadro de herramientas se arrastra el segmento de codigo Seleccionar campos Tabla y se
hacen las modificaciones respectivas. (Ver Figura 34)
Pagina 29 de 33

Figura 342
Nota: Este método puede usarse para realizar cualquier tipo de consulta a la base de datos.
Compilación del formulario:
Para ver el formulario en el explorador se pueden seguir alguna de las siguientes acciones:
1. Hacer clic en la opción iniciar depuración en la barra de herramientas. (Ver Figura 353)
Pagina 30 de 33

Figura 353
2. Seleccionar la opción Depurar en la Barra de menú. (Ver Figura 364)
Figura 364
3. Hacer Clic derecho sobre la página aspx y seleccionar ver en el explorador. (Ver Figura
365)
Pagina 31 de 33

Figura 45
4. Presionarr la tecla F5.
5. Presionar las teclas ctrl+shift+w
Para finalmente obtener el siguiente formulario:
Pagina 32 de 33

Factory Soft Venezuela, C.A. Manual de Desarrollo de Formularios WebFactory Soft Venezuela, C.A. Manual de Desarrollo de Formularios Web
Pagina 33 de 33Pagina 33 de 33

Manual de Desarrollo Formularios Web de Maestros y Operaciones en eFactory Software ERP

Más contenido relacionado

La actualidad más candente (20)

Similar a Manual de Desarrollo Formularios Web de Maestros y Operaciones en eFactory Software ERP (20)

Más de Factory Soft - Software ERP para la Nube Latinoamericano (20)

Último (9)

Manual de Desarrollo Formularios Web de Maestros y Operaciones en eFactory Software ERP