INFOCOM S.A. Tutorial Servoy Developer

Transcripción

1 Tutorial Servoy Developer Introducción Este documento es una guía inicial en idioma español para ser utilizada con Servoy Developer versión 4.x. Contiene una breve descripción de las principales funciones disponibles e incluye un pequeño ejemplo (en el punto 4) para crear una 'Solution' usando la base de datos example_data que se instala junto con Servoy. Para dudas o sugerencias contactar al autor : Andrés Achiary : andres_achiary@infocomsa.com.ar 1. Crear una nueva Solución Para crear una nueva solución, hacer clic derecho sobre 'All Solutions' y luego clic sobre 'Create New Solution'. Luego de eso, saldrá una ventana en la cual pide distintas opciones. Primero, el nombre de la solución, segundo el tipo de solución (si es un módulo para otra solución, normal, solo web o solo smart client) y, finalmente, de donde se desea que se saquen los recursos para la solución (estilos, seguridad, etc. Es recomendable no tocar esta opción). Una vez completado todo esto, clic en el botón 'Finish'. Una vez creada la solución, se podrá ver la misma como habilitada en el árbol de la izquierda la pantalla (si se tiene la perspectiva normal) justo debajo de 'All Solutions'. Allí se verán los distintos objetos correspondientes a la misma. 2. Definir las propiedades de la solución En la barra de la derecha se tienen las diferentes opciones a nivel solución Se dividen en eventos y propiedades. En los eventos, se asocia un método global para ejecutar en su momento correspondiente. Entre los eventos se pueden encontrar: i. 'onclose': al cerrar la solución ii. 'onerror': al producirse un error iii. 'onopen: al abrir la solución Las propiedades son: 'firstform': form en el que comienza la solución 'i18n table': tabla para internacionalización Se puede configurar en el servidor automáticamente para todas las soluciones 'loginform': form para login 'modulenames': se eligen las soluciones que van a ser módulos de la solución activa 'mustauthenticate': se muestra el 'loginform'. Si no esta tildado, no se la muestra. 'solutiontype': tipo de solución 'textorientation': orientación del texto (dependiendo el lenguaje en el que se desarrolla) 'titletext': titulo que va a llevar la aplicación

2 3. Objetos de una solucion Dentro de la solucion, se puede ver que hay distintos objetos para poder desarrollarla. Estos objetos son: 'Globals', 'Forms', 'Relations', 'Valuelists', 'Media' y 'Modules'. Se los puede encontrar en el árbol de la izquierda de la pantalla, un nivel más bajo que la solucion activa. 3.1 Globals Se definen todos los objetos globales de la solucion, es decir aquellos objetos que pueden ser accedidos en toda la solucion. Entre estos objetos están métodos, 'currentcontroller', 'variables' y 'relations'. Todos se encuentran un nivel más bajo en el árbol de la izquierda salvo los métodos a los que se los puede acceder seleccionando 'Globals'. Métodos: para crear u nuevo método se debe hacer clic derecho sobre 'globals' y luego clic sobre 'create method'. Una vez hecho esto, se abrirá el editor para poder implementar el método. Para abrir un método existente, simplemente se hace clic sobre el nombre del método a abrir en la lista. 'currentcontroller': son las funciones integradas que Servoy nos ofrece para operar globalmente, es decir que lleva a cabo su funcion, sin importar sobre qué form se está operando. Entre ellas, se pueden destacar: 'showprintpreview' para mostrar la vista previa, 'print': para imprimir, 'getmaxrecordindex' para saber la cantidad total de registros, 'newrecord'/'deleterecord' para manejar los registros, entre otras. 'variables': se crean variables para usar dentro de la solucion. Van a mantener su valor por el resto de la sesión. Para ello, se hace clic derecho sobre 'variables' y luego clic sobre 'create variable'. Luego, se abrira una ventana en la que se pide nombre, tipo y valor por defecto de la misma. Al terminar, clic sobre 'OK'. 'Relations': se pueden ver las relaciones asociadas a variables globales. 3.2 Forms Son las pantallas con las que se va a interactuar con el usuario. Dentro de ella, se ponen los elementos necesarios para llevar a cabo su funcionalidad. Tambien podemos encontrar los objetos relacionadas a los 'forms' si bajamos un nivel en el árbol de la izquierda. Estos objetos se veran en detalle más adelante y son: 'controller', 'variables', 'elements', 'selectedrecord' y 'relations'. Nuevo Form Clic derecho sobre el nombre de la solución activa y luego clic sobre 'Create New Form'. Saldrá una ventana en donde se deben llenar distintas opciones. Primero, el nombre del form a crear, segundo, la tabla asociada a este form (una vez elegida la tabla, si el nombre esta en blanco, se lo llena automáticamente con el nombre de la tabla). Luego pregunta si el form hereda de algún otro form ('Extends'). Después, pregunta por el estilo del form a usar y si se quiere usar algún form de ejemplo y, finalmente, para qué solución se lo desea crear (por si trabajamos con varios módulos al mismo tiempo). Una vez completado esto, si se lo desea se pueden poner campos de la tabla en el form. Para esto, hacer clic en 'Next'. Allí se ira a otra pantalla en la que se pregunta qué campos de la tabla se desea ingresar al form. Se los debe seleccionar (se puede usar la tecla Ctrl para seleccionar mas de un campo). Debajo de eso, se pueden elegir distintas opciones para los campos seleccionados: i. 'Place labels': pone las etiquetas automáticamente para cada campo con su titulo correspondiente ii. 'Place Horizontal': pone los campos uno al lado del otro y no uno debajo del otro como lo hace

3 por defecto. iii. 'Fill text property': llena automáticamente la propiedad 'text' del elemento a crear con el titulo del campo. (recomendable siempre tenerlo seleccionado) iv. 'Fill name property': llena automáticamente la propiedad 'name' del elemento a crear con el titulo del campo para luego poder ser diferenciado de los demás elementos al momento de escribir código Una vez terminado eso, clic sobre el botón 'Finish'. Propiedades de un Form En la barra de la derecha se tienen las diferentes opciones a nivel form. Las propiedades de un form se dividen en 3: comandos, eventos y propiedades. Los comandos son acciones que pueden modificar al conjunto de registros que se esta mirando, pero no así los datos. Por ejemplo: próximo registro, registro anterior, alta, baja, entre otros. A los comandos se les puede asociar un método para ejecutar cuando ellos mismos se ejecuten. Los eventos están relacionados con el form en general y el registro que se esta viendo en particular. Se les puede asociar un método a ejecutar junto con ellos. Entre ellos se encuentran: 'onhide': al salir del form 'onrecordselection': al elegir un registro 'onshow': al mostrar el form Por último, están las propiedades, entre las mas importantes se encuentran: 'navigator': define la parte izquierda de la pantalla del form. Puede ser ninguno, el por defecto de Servoy (para navegar entre registros con una 'recordview') o se puede hacer uno propio (se vera más adelante en detalle) 'scrollbars': define cuándo se deben poner barras de desplazamiento, tantos horizontales como verticales 'stylename': define el estilo para este form 'titletext': texto para aparecer en el titulo de la aplicación 'view': define como se desea ver los registros ya sea en tabla, registro único o en lista. Pestañas en Form: En la parte de abajo de un form, se pueden encontrar distintas pestañas que nos dan opciones para configurar cada form. Ellas son: 'Design', 'Parts', 'Tab Sequence' y 'Security'. 'Design': sirve para poner elementos dentro del form, definir sus propiedades y su locación dentro del mismo. 'Parts': se definen las partes del form. Se pueden agregar pies ('Footer' o 'Titlefooter'), cabeceras ('Header' o 'TitleHeader') y partes para cortes de control. 'Tab Sequence': se define la secuencia para pasar de elemento en elemento con la tecla Tab 'Security': configuración de la seguridad. Se define qué grupos de usuarios pueden ver cada elemento dentro del form y cuáles pueden acceder al mismo. Objetos de un Form

4 'Controller': son las funciones integradas que Servoy nos ofrece para operar con este form. Entre ellas, se pueden destacar: 'show' para mostrar el form, 'find'/'search': combinacion para realizar una busqueda, 'sort' para definir como se desean ver los datos, 'newrecord'/'deleterecord' para manejar los registros, entre otras. 'Variables': se crean variables para usar dentro de ese form. Para ello, se hace clic derecho sobre 'variables' y luego clic sobre 'create variable'. Luego, se abrira una ventana en la que se pide nombre, tipo y valor por defecto de la misma. Al terminar, clic sobre 'OK'. 'Elements': se pueden ver los elementos que se definieron en el form si se baja un nivel más en el árbol y, al seleccionar uno de ellos, se podrán ver las funciones asociadas al mismo. Sino, si se selecciona 'elements', se puede trabajar sobre el arreglo de todos los elementos. 'SelectedRecord': se pueden ver los registros, calculaciones y agregaciones de la tabla asociada al form y trabajar sobre ellos. 'Relations': se pueden ver las relaciones asociadas a la tabla asociada al form. Elementos para un Form Para agregar un elemento en un form se debe hacer clic en 'Elements' en la barra de herramientas y luego clic sobre el elemento que se quiere agregar (así como también hay un atajo en la barra para cada elemento). Los tipos de elementos a agregar son: (a) FIELDS: son los campos de la tabla, relación o cualquier otro proveedor de datos. Sirven para mostrar los datos. (b) LABELS: son etiquetas. Sirven para mostrar un texto estático. (c) BUTTONS: son botones. Cuando se los pulse se va a activar el evento onaction que debería tener un evento asociado. (d) PORTALS: muestran los registros de una relación en forma de tabla. Se eligen las columnas que se desean mostrar y lo demás lo hace automáticamente con el registro que se está viendo en el form activo (e) TAB PANELS: muestra un form adentro del elemento. Éste puede ser de una tabla relacionada o no. Si es de una relación, trabajaría como el portal. Es una de las bases del reuso que se puede hacer en Servoy. (f) BEANS: son elementos de Java que tienen cierta interacción con los datos (o no). Por ejemplo: gráficos de barra, códigos de barra o simplemente un reloj. (g) MEDIA: un campo donde se muestra un archivo multimedia importado a la solución. 3.3 Relations Muestra la lista de las relaciones definidas para esta solucion. Para crear una relacion, se debe hacer clic derecho sobre 'relations' y luego clic sobre 'create relation'. Alli, se abrira una ventana para poder configurar la relacion. En ella, se pedira el nombre de la relacion (se llena automaticamente cuando se elijan las tablas a relacionar), luego, la tabla de origen ('Source') y la tabla de destino ('Destination') y despues los campos a relacionar. Estos pueden ser varios y por distintos operadores (iguales, distintos, mayor, menor, entre otros). Finalmente, se tienen otras opciones como el tipo de join que se desea hacer, el ordenamiento ('sorting') y otras opciones sobre los registros de la relacion. 3.4 Valuelists Son listas de valores en los que se reemplaza un valor por otro, sólo en el sentido de la muestra de datos al

5 usuario, no en la tabla en si. Para crear una nueva, clic derecho sobre 'valuelists' y luego clic sobre 'clic valuelist'. Alli, se abrira una ventana en las que se pedira el nombre de la valuelist y, finalmente, se abrira otra ventana en la que se configura la valuelist. Para una valuelist, se pueden tener 2 tipos de valores, unos determinados por valores de una tabla y los otros, fijos determinados en tiempo de diseño. Valores fijos: para que una valuelist tenga valores fijos se debe seleccionar 'custom Values' y luego llenar el campo de texto con los valores a mostrar. Si se desea retornar algun valor, se lo puede especificar haciendo valor a retornar valor a mostrar. Valores de tabla: para que la valuelist tome valores de una tabla, se debe seleccionar 'Database Values'. Aquí tambien se tienen 2 opciones. Una puede ser todos los valores de una tabla y la otra es para valores de una relacion. Para el primero, se debe seleccionar 'All values from' y elegir el servidor y la tabla que se desea. Tambien se puede prender el filtro de 'valuelist name', esto significa que podemos tener todas las valuelists en una tabla que tenga un campo llamado 'valuelist_name' y se la va a filtrar según el valor de ese campo. Para el segundo, se selecciona 'related values' y luego, la relacion deseada. Elegido el tipo, debemos seleccionar qué campo se quiere mostrar y qué campo se desea guardar en la base. Para esto, se elige el campo y luego se selecciona 'Show in field / list' para los valores a mostrar y 'Return in dataprovider' para los valores a retornar. Finalmente, se puede poner un carácter para dividir los campos mostrados, definir un orden especial y devolver o no un valor nulo. 3.5 Media En esta sección se pueden agregar y quitar archivos de multimedia para usar en la solución. Para esto se debe hacer clic derecho sobre 'Media' y luego clic sobre 'Import Media' para agregar solo un archivo de multimedia o 'Import Media Folder' para agregar una carpeta de archivos. Para borrar un archivo particular se hace clic derecho sobre esa imagen en la lista y luego clic sobre 'Delete media'. 3.6 Modules Si se extiende el árbol de este objeto, se podrán ver las soluciones módulos que componen a la solución activa. Estas soluciones a su vez tienen el mismo árbol que la solución activa y se las usa como una activa. 4. Solución de Ejemplo: Paso a Paso Se toman en cuenta las explicaciones anteriores para ciertas acciones. Se usará el servidor 'example_data' que ya viene instalado en Servoy. Después de cada paso, se debe guardar la solución (Ctrl + S o click sobre el botón disquete de la barra de herramientas) 1. Crear una solución. Al momento de darle un nombre, se le pone tutorial. 2. Crear una relación entre las tablas 'customers' y 'orders' por el campo 'customerid' 3. Crear una relación entre las tablas 'orders' y 'order_details' por el campo 'orderid' 4. Crear un form relacionado a la tabla 'order_details' en el que se pondran todos los campos de forma horizontal, menos el 'orderid'. Finalmente, se configura el view del form para que sea 'Table View' y el navigator a 'IGNORE'. 5. Crear un form relacionado a la tabla 'orders' y cambiar el nombre del mismo a orders_dtl. Se mostrarán los campos: 'orderid', 'customerid', 'employeeid', 'orderdate' y 'shipadress' con las etiquetas y de forma vertical. Acomodar los campos y etiquetas a gusto. Poner un tabpanel y elegir el form relacionado de order_details (para esto, abrir el árbol de la relación y seleccionar el form) y acomodarlo a gusto.

6 6. Crear un form relacionado a la tabla 'orders' y cambiar el nombre del mismo a orders_tbl. Se mostrarán los campos: 'orderid', 'customerid' y 'orderdate' sin las etiquetas y de forma horizontal. Insertar un botón, acomodarlo al principio de la fila y configurar su texto como +. Luego, hacer doble clic sobre el evento 'onaction' y luego clic sobre 'Create Global Method'. En el nombre que pide, poner 'iraorders_dtl' y clic sobre 'OK' dos veces. Después hacer clic sobre la carpeta que aparece en el 'onaction' que llevará al editor de métodos de Servoy. En el editor, entre las llaves que aparecen, poner la sentencia 'forms.orders_dtl.controller.show()'. Grabar y cerrar la pestaña. Finalmente, se configura el view del form para que sea 'Table View' y el navigator a 'IGNORE'. 7. Crear un form relacionado a la tabla 'customers' en el que se mostrarán los campos: 'companyname', 'contactname', 'country' y 'phone' con sus etiquetas de forma vertical. Acomodar los campos y etiquetas a gusto. Poner un tabpanel y elegir el form 'orders_tbl' relacionado de orders (para esto, abrir el árbol de la relación y seleccionar el form) y acomodarlo a gusto. Para ir probando los sucesivos pasos se debe arrancar el 'Smart Client' o el 'Web Client'. Se recomienda usar el 'Smart Client' ya que permitirá probar los distintos 'Forms' diseñados eligiéndolos en el menú 'Window'.