UNIVERSIDAD ESTATAL DE BOLIVAR FACULTAD DE CIENCIAS DE LA EDUCACION SOCIALES FILOSOFICAS Y HUMANISTICAS 3 CICLO DE INFORMATICA EDUCATIVA

1. Datos Personales Nombre: Edgar Patn Fecha de Nacimiento: 28 de junio de 1991 Edad: 21 aos Nacionalidad: Ecuatoriano Estado Civil: Soltero Direccin: Guanujo Barrio Norte Telfono: 0969200842 E-mail: edgarpatinguaman@gmail.com C.I: 0201971496 2. Informacin Acadmica Colegio Tcnico San Pedro Titulo Otorgado Contabilidad y Administracin Universidad Universidad Estatal de Bolvar Especialidad Informtica Educativa (en curso)

ELEMENTOS DE LA GIU La interfaz grfica de usuario es aquella parte de un programa que se comunica con el usuario mediante presentaciones graficas los programas basaban su interfaz en la presentacin de la informacin mediante caractersticas alfanumricos y algunos caracteres especiales que permitan dibujar cajas de colores para diferenciar las distintas reas del programa ejemplo de un diseo de GIU control de usuario, sensibilidad, personalizacin, direccin, consistencia, claridad, esttica, retroalimentacin, indulgencia, conciencia de las fortalezas y limitaciones de los humanos. Utiliza un conjunto de imgenes y objetos grficos su principal uso consiste en proporcionar un enter no visual sencillo para permitir la comunicacin con el sistema operativo de una maquina computador. Tambin es aquella parte de un programa que se comunica con el usuario mediante presentaciones grficas. El componente ms comn para el mismo tiempo el ms ignorado, es el apuntador o cursor. Por definicin el cursor es la imagen sobre la pantalla que indica la localizacin del dispositivo apuntador o cursor. La ventana es el rea sobre la pantalla sobre la que se muestra informacin. Un ejemplo de ventana es la que aparece en la pantalla cuando haces clic en el icono de tu navegador de internet favorito. El apuntador tpico es una flecha inclinada, pero puede variar segn los diferentes estatus, operaciones, programas o sistemas operativos. La mayora de las operaciones con el cursor son disparadas al presionar los botones del ratn, tarea que es conocida como hacer clic. El clic que se hace con el botn izquierdo es llamado solamente clic; el clic que se hace usando el botn derecho es llamado clic derecho. COMPONENTES DE LA GIU Una interfaz grfica de usuario (GUI) presenta un mecanismo amigable al usuario para interactuar con una aplicacin. Las GUIs se crean a partir de componentes de la GUI, a estos se les conoce tambin como controles o widgets (accesorios de ventana) en otros lenguajes. Un componente de la GUI es un objeto con el cual interacta el usuario mediante el ratn, el teclado u otra forma de entrada como el reconocimiento de voz. JLabel: Muestra texto que no puede editarse, o iconos JTextField: Permite al usuario introducir datos mediante el teclado. Tambin se puede utilizar para mostrar texto que puede o no editarse JButton: Activa un evento cuando se oprime mediante el ratn JCheckBox: Especifica una opcin que puede seleccionarse o no

JComboBox: Proporciona una lista desplegable de elementos, a partir de los cuales el usuario puede realizar una seleccin, haciendo clic en un elemento o posiblemente escribiendo e el cuadro. JList: Proporciona una lista de elementos a partir de los cuales el usuario puede realizar una seleccin, haciendo clic en cualquier elemento en la lista. Pueden seleccionarse varios elementos. JPanel: Proporciona un rea en la que pueden colocarse y organizarse los componentes. Tambin puede utilizarse como un rea de dibujo para grficos CONTROLES DE ENTRADA Se puede personalizar la forma de trabajo de los esquemas durante la simulacin agregando controles de entrada/salida a las vistas del modelo. Estos controles se pueden agregar allado de la estructura del modelo o en vistas separadas. Usando los controles de Entrada/salida es posible crear un espacio de control propio para el manejo de las entradas del modelo y la presentacin de los resultados de la simulacin. Controles de entrada Se continuar trabajando en la misma View (Vista) Cursores (Sliders) - Seleccionar la herramienta Input Output (entrada/salida) y Pulsar en el sector superior izquierdo del esquema. Se abre el dilogo Input Output Object Settings. - Seleccionar el tipo Input Slider defecto) (Cuadro de entrada) (probablemente se abre por

- Pulsar en el botn Constant..(constante) y seleccionar c gastos en publicidad del dilogo. - Entrar 0, 200E 6 y 0.5E6 en el Ranging from (desde), to (hacia) y with increment (con el incremento). - Pulsar en la etiqueta with varname para deseleccionarlo. - Pulsar en OK. Se dibujar un cuadro en la pantalla - Ajustar su tamao as ocupa un espacio compatible con el grfico.

- Seleccionar la herramienta Comment (Comentarios). - Escribir en el comentario Gastos en Publicidad ($/ao), seleccionar Shape None (Sin forma) y Pulsar OK. Esta es la etiqueta para el Cuadro recin creado. CONTROLES DE SALIDA Comenzar creando una nueva vista donde se pueda adicionar Controles de Salida. - Pulsar el botn View (Vista) de Status Bar (Barra de Estado). (Est al fondo de la pantalla, etiquetado View 1 (Vista 1) para este modelo) y seleccionar **New** (Nuevo) Se abre una nueva View (Vista). - Seleccionar la Herramienta Input Output (Entrada Salida) pulsando en ella o presionando la tecla 8. - Mover el ratn a la derecha del esquema y pulsar. Esto abrir el Input Output Object Settings dialog (dilogo de selecciones para objetos de entrada salida) - Seleccionar el tipo Output Workbench Tool, (Herramienta Esquema de Salida), luego Pulsar en el botn Auxiliary (Auxiliar) y Seleccionar ventas de la lista (Pulsar OK para cerrar el dilogo Variable Selection (Seleccin de Variables) - Pulsar la lista descolgable y seleccionar la herramienta Graph (grfico) - Pulsar OK. Se ver un rectngulo grande con un crculo para cambiar el tamao visible. Redimensionar para llenar el lado derecho del esquema. El modelo debera ser similar a este: - Pulsar el botn Simulate (Simular) en la barra de Tareas (o escribir Ctrl.+R). Se ejecutar el modelo y el grfico llenar el rectngulo CONTENEDORES Contenedores Estos componentes se tienen que aadir al contenedor y para ciertas operaciones se pueden tratar como un todo

 Mediante un gestor de diseo controlan la disposicin (layout) de estos componentes en la pantalla Ejemplo: Panel, Frame, Applet Lienzo (clase Canvas) Superficie simple de dibujo Componentes de interfaz de usuario botones, listas, mens, casillas de verificacin, campos de texto, etc. Componentes de construccin de ventanas ventanas, marcos, barras de mens, cuadros de dilogo Panel Sirve para colocar botones, etiquetas, etc. No existe sin una ventana que lo albergue Un applet es un panel Window Sirve para crear nuevas ventanas independientes Ventanas gestionadas por el administrador de ventanas de la plataforma (Windows, Motif, Mac, etc.) Normalmente se usan dos tipos de ventanas: Frame: ventana donde se pueden colocar mens Dialog: ventana para comunicarse con el usuario Se usan para colocar botones, etiquetas, etc. Cumple la misma funcin que un panel, pero en una ventana independiente CONTROLES PERSONALIZADOS En artculos anteriores de la serie hemos conocido y aprendido a utilizar muchos de los controles que proporciona Android en su SDK. Con la ayuda de estos controles podemos disear interfaces grficas de lo ms variopinto pero en ocasiones, si queremos dar un toque especial y original a nuestra aplicacin, o simplemente si necesitamos cierta

funcionalidad no presente en los componentes estandar de Android, nos vemos en la necesidad de crear nuestros propios controles personalizados, diseados a medida de nuestros requisitos. Para empezar, vamos a crear una nueva clase java que extienda del control que queremos utilizar como base, en este caso EditText. public class ExtendedEditText extends EditText {//...} Tras esto, sobreescribiremos siempre los tres constructores heredados, donde por el momento nos limitaremos a llamar al mismo constructor de la clase padre. public ExtendedEditText(Context context, AttributeSet attrs, int defStyle){ super(context, attrs,defStyle);}public ExtendedEditText(Context context, AttributeSet attrs) { super(context, attrs);}public ExtendedEditText(Context context) { super(context);} Por ltimo el paso ms importante. Dado que queremos modificar el aspecto del control para aadir el contador de caracteres tendremos que sobreescribir el evento onDraw(), que es llamado por Android cada vez que hay que redibujar el control en pantalla. Este mtodo recibe como parmetro un objeto Canvas, que no es ms que el lienzo sobre el que podemos dibujar todos los elementos extra necesarios en el control. El objeto Canvas, proporciona una serie de mtodos para dibujar cualquier tipo de elemento (lineas, rectngulos, elipses, texto, bitmaps, ) sobre el espacio ocupado por el control. En nuestro caso tan slo vamos a necesitar dibujar sobre el control un rectngulo que sirva de fondo para el contador y el texto del contador con el nmero de caracteres actual del cuadro de texto. No vamos a entrar en muchos detalles sobre la forma de dibujar grficos ya que se ser tema de otro artculo, pero vamos a ver al menos las acciones principales.

En primer lugar definiremos los pinceles (objetos Paint) que utilizaremos para dibujar, uno de ellos (p1) de color negro y relleno slido para el fondo del contador, y otro (p2) de color blanco para el texto.

Paint p1 = new Paint(Paint.ANTI_ALIAS_FLAG); p1.setColor(Color.BLACK); p1.setStyle(Style.FILL);

Paint p2 = new Paint(Paint.ANTI_ALIAS_FLAG); p2.setColor(Color.WHITE); Dado que estos elementos tan slo har falta crearlos la primera vez que se dibuje el control, para evitar trabajo innecesario no incluiremos su definicin en el mtodo onDraw(), sino que los definiremos como atributos de la clase y los inicializaremos en el constructor del control (en los tres).

Una vez definidos los diferentes pinceles necesarios, dibujaremos el fondo y el texto del contador mediante los mtodos drawRect() y drawText(), respectivamente, del objeto canvas recibido en el evento. @Override public void onDraw(Canvas canvas){ //Llamamos al mtodo de la clase base (EditText) super.onDraw(canvas); //Dibujamos el fondo negro del contador canvas.drawRect(this.getWidth()-30, 5, this.getWidth()-5, 20, p1); //Dibujamos el nmero de caracteres sobre el contador canvas.drawText("" + this.getText().toString().length(), this.getWidth()-28, 17, p2);} Como puede comprobarse, a estos mtodos se les pasar como parmetro las coordenadas del elemento a dibujar relativas al espacio ocupado por el control y el pincel a utilizar en cada caso. Hecho esto, ya tenemos finalizado nuestro cuadro de texto personalizado con contador de caracteres. Para aadirlo a la interfaz de nuestra aplicacin lo incluiremos en el layout XML de la ventana tal como haramos con cualquier otro control, teniendo en cuenta que deberemos hacer referencia a l con el nombre completo de la nueva clase creada (incluido el paquete java), que en mi caso particular sera

net.sgoliver.ExtendedEditText. <net.sgoliver.ExtendedEditText android:id="@+id/TxtPrueba" android:layout_width="fill_parent" android:layout_height="wrap_content" /> En el siguiente artculo veremos cmo crear un control personalizado utilizando la segunda de las opciones expuestas, es decir, combinando varios controles ya existentes. Comentaremos adems como aadir eventos y propiedades personalizadas a nuestro control y cmo hacer referencia a dichas propiedades desde su definicin XML. CONCLUCIONES PERSONALES Se puede decir que la interfaz grfica de usuario es aquella parte de un programa haciendo conciencia de las fortalezas y limitaciones de los humanos. Tambin se utiliza un conjunto de imgenes y objetos grficos su principal uso consiste en proporcionar un enter no visual sencillo para permitir la comunicacin con el sistema operativo de una maquina computador. Esto nos puede ayudar para un mejor manejo de un sistema operativo como es la interfaz grfica de usuario que no puede dar beneficios nicos de conocimiento en cmo podemos realizar un programa con GIU. Siempre y cuando asiendo limitaciones haciendo conciencia de las fortalezas de los humanos. RECOMENDACIONES PERSONALES SOBRE LA INVESTIGACION Una recomendacin ser en tener que prepararse o hacer un anlisis sobre lo que es una interfaz grfica para poder ponerlo a prueba y dar opiniones o sugerencias respecto al tema investigado. En esta investigacin podemos decir que todos estos puntos son esenciales para poder realizar cualquier tipo de trabajo que sea relacionado con la investigacin como es los elementos de la GIU, componentes de la GIU, controles de entrada y salida, contenedores, y controles personalizados. Es de tratar de sistematizar todo lo referente al tema de investigacin a lo que se refiere una interfaz grfica de usuario para desarrollar un trabajo respecto a lo que nos corresponda.

 Tambin se puede decir que todo lo investigado con el refuerzo en clase podemos hacer una comparacin para poder debatir sobre le tema de investigacin.
Bibliografa

http://www.slideshare.net/Yoleanny/interfaz-grafica-1129850 http://es.wikibooks.org/wiki/Gambas/Elementos_de_la_GUI