Apuntes de programacion en los lenguajes Java, Matlab, HTML, JavaScript y PHP.

Como utilizar el AutoComplete en un EditText en Android con historial

2017-06-29T22:41:00.001-07:00

En este corto post veremos como realizar el auto completado de palabras o frases dentro de un EditText en Android en Java

El AutoComplete en un EditText en Android es necesario cuando se requiere auto completar frases o palabras con las palabras que se han utilizado previamente. Para ello Android permite guardar un historial de las palabras introducidas a traves de las preferencias compartidas (SharedPreferences)

Antes que nada definimos el elemento AutoCompleteTextView dentro de nuestro archivo *.xml

<AutoCompleteTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textInput"
    android:layout_marginTop="108dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:editable="true"
    android:hint="Ingrese algo aqui"/>

Seguido de esto incluimos el siguiente código en la clase *.java

public static final String PREFS_NAME = "PingBusPrefs";
public static final String PREFS_SEARCH_HISTORY = "SearchHistory";
private SharedPreferences settings;
private Set<String> history;

Luego definimos el siguiente metodo:

private void setAutoCompleteSource()
{
    AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.textInput);
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(
  this, android.R.layout.simple_list_item_1, history.toArray(new String[history.size()]));
    textView.setAdapter(adapter);
}

Guardamos cada valor introducido en el editor de texto:

private void addSearchInput(String input)
{
    if (!history.contains(input))
    {
        history.add(input);
        setAutoCompleteSource();
    }
}

Utilizamos el siguiente metodo para guardar las palabras introducidas en las preferencias compartidas:

private void savePrefs()
{
    SharedPreferences settings = getSharedPreferences(PREFS_NAME, 0);
    SharedPreferences.Editor editor = settings.edit();
    editor.putStringSet(PREFS_SEARCH_HISTORY, history);

    editor.commit();
}

Configuramos las siguientes variables:

settings = getSharedPreferences(PREFS_NAME, 0);
history = settings.getStringSet(PREFS_SEARCH_HISTORY, new HashSet<String>());

setAutoCompleteSource();

final AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.textInput);
textView.setOnKeyListener(new View.OnKeyListener()
{
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        // If the event is a key-down event on the "enter" button
        if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
                (keyCode == KeyEvent.KEYCODE_ENTER)) {

            addSearchInput(textView.getText().toString());
            return true;
        }
        return false;
    }
});

@Override
protected void onStop()
{
    super.onStop();

    savePrefs();
}

Como conectar una Base de Datos en MySQL con Netbeans 7

2017-06-29T21:31:00.000-07:00

En este nuevo post veremos como conectarnos a una base de datos en MySQL desde Netbeans 7.1.

Para poder crear la conexion necesitaremos tener los siguientes componentes:
-Netbeans 7.1.
-Se necesitara tener instalado: MySQL.
-El driver para conectarnos a la base de datos: mysql-connector-java-5.0.8-bin.jar.

Una vez descargado el driver lo copiaremos a la carpeta donde se encuentra instalado el jdk, en mi caso es:

C:\Program Files (x86)\Java\jdk1.6.0_31\jre\lib\ext

El siguiente paso es reiniciar el Netbeans.

Ahora nos dirigimos a la pestana de netbeans llamada Services, como se puede observar en la siguiente imagen y hacemos click derecho sobre Drivers, y pulsamos en New Driver.

Luego pulsamos en add.

Seleccionamos el archivo mysql-connector-java-5.0.8-bin.jar y pulsamos en ok.

Deberia mostrarse de la siguiente manera:

Nuestro siguiente paso es crear la conexion. Haremos click en Connect Using como se observa en la siguiente imagen.

Escribiremos los siguientes datos:

Host: localhost

Database: mysql

Port: 3306

User Name: root

Password: 12345

Como se muestra a continuacion:

Como cambiar el tipo de letra (fuente) en una aplicacion movil para Android en Android Studio

2016-10-17T21:24:00.000-07:00

En este post mostraremos como cambiar el tipo de fuente o tipo de letra de los Botones, EditText y TextView en una aplicacion movil en Android desde Android Studio. Esto es necesario cuando queremos crear una aplicacion movil personalizada y dar un toque unico.

Primero descargamos los tipos de fuentes que queramos utilizar en nuestra aplicacion movil en formato .tff. Yo los descargo de: https://fonts.google.com/ y los colocamos dentro de la carpeta "fonts" (si no existe la creamos) dentro de "assets" en la ruta de la aplicacion. Quedando de la siguiente manera: "main/assets/fonts".

Para este ejemplo definimos el archivo de interfaz de usuario prueba.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="@color/white">

<Button
android:id="@+id/boton_prueba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Boton de prueba"
android:textSize="24sp"
/>

<EditText
android:id="@+id/edit_text_prueba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EditText de prueba"
android:textSize="24sp"
/>

<TextView
android:id="@+id/text_view_prueba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView de prueba"
android:textSize="24sp"
/>

</LinearLayout>

Luego, dentro del metodo onCreate() instanciamos los tipos de fuente agregados a la carpeta "fonts" previamente con la Clase "Typeface" y los definimos o seteamos para cada uno de los componentes del archivo prueba.xml definido anteriormente.

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.prueba);

Button nameButton = (Button) findViewById(R.id.boton_prueba);

TextView nameTextView = (TextView) findViewById(R.id.text_view_prueba);

EditText nameEditText = (EditText) findViewById(R.id.edit_text_prueba);

Typeface face = Typeface.createFromAsset(getAssets(), "fonts/JosefinSans-Regular.ttf");

Typeface faceBold = Typeface.createFromAsset(getAssets(), "fonts/JosefinSans-Bold.ttf");

Typeface faceSemiBold = Typeface.createFromAsset(getAssets(), "fonts/JosefinSans-SemiBold.ttf");

nameButton.setTypeface(face);

nameTextView.setTypeface(face);

nameEditText.setTypeface(face);

}

Como alternar los colores de fondo en las filas de una lista (ListView) en Android

2016-10-16T21:08:00.001-07:00

Cuando definimos listas en Android es muy comun encontrarnos con el problema de que los datos estan un poco desordenados y no se aprecian correctamente como deberian. Es por ello que algunos desarrolladores optan por colocar colores de fondo alternados a la lista para que la informacion se pueda apreciar de mejor manera.

Primero tendremos que definir la lista (ListView) en la interfaz de usuario .xml. Definiremos el archivo prueba.xml:

Ahora en la clase respectiva se procede a instanciar la lista de la siguiente manera:

ListView listaPrueba = (ListView) findById(R.id.list_view_prueba);

Luego dentro del evento onCreate se realiza la colocacion de los colores de fondo de manera alternada:

protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.prueba);

ListAdapter adaptador1 = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, arrayItems){
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = super.getView(position,convertView,parent);
if (position %2 == 1) {
view.setBackgroundColor(Color.parseColor("#26CCCCCC"));
} else {
view.setBackgroundColor(Color.parseColor("#00FFFFFF"));
}
return view;
}
};
listaPrueba.setAdapter(adaptador1);

}

donde:

arrayItems es el array de elementos que estaran en la lista, por ejemplo:

String[] arrayItems = new String[]{"item1", "item2", "item3", "item4", "item5"};

Una vez realizado todo el proceso tendremos una lista con colores de fondo alternados para una mejor visualizacion de la informacion.

Como habilitar los eventos de click o Click Listener de un Button, TextView o EditText en Android

2016-10-16T20:52:00.002-07:00

En nuestras aplicaciones moviles es muy comun utilizar botones o campos de texto que permiten mostrar e ingresar datos para hacer mas interactiva la aplicacion.

Los eventos desencadenados al presionar o hacer click sobre alguno de estos componentes son manejados desde la logica de la aplicacion, es decir desde los archivos .java.

A continuacion mostraremos un boton, un editText y un textView con sus respectivos eventos click o Click Listeners.

Primero definimos los componentes de la aplicacion en la interfaz de usuario, es decir en los archivos .xml. En este caso definiremos el archivo prueba.xml:

Ahora en la clase que controladora de esta interfaz colocaremos el siguiente codigo dentro del evento onCreate():

protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.prueba);

Button nameButton = (Button) findViewById(R.id.boton_prueba);
TextView nameTextView = (TextView) findViewById(R.id.text_view_prueba);
EditText nameEditText = (EditText) findViewById(R.id.edit_text_prueba);

nameButton =.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
//CODE EVENTO CLICK
}
});

nameTextView.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
//CODE EVENTO CLICK
}
});

nameEditText.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
//CODE EVENTO CLICK
}
});

}

Listo!! ahora podremos ejecutar cualquier codigo al presionar algun componente sobre la interfaz de usuario de Android.

Como abrir una nueva ventana o clase (Activity) in Java Android

2016-10-16T20:25:00.006-07:00

Cuando estamos empezando a programar aplicaciones moviles para Android necesitamos tener algunos conocimientos basicos de la programacion orientada a objetos y entender el funcionamiento de las clases .java (la logica de la aplicacion) y los archivos .xml (la interfaz de usuario).

En este post explicaremos la manera de abrir una nueva ventana, clase o Activity en Android. La manera de hacerlo en muy sencilla como se muestra en las siguientes lineas:

Definiremos un nueva Intent y a continuacion lo iniciaremos:

Intent intent = new Intent(Splash.this,Tutorial.class);
startActivity(intent);

donde:

Splash es la clase .java actual.
Tutorial es la clase .java que se quiere abrir.

Como Utilizar Imagenes en Matlab

2013-12-13T12:00:00.001-08:00

En este nuevo post veremos algunas cosas muy utiles al momento que necesitemos trabajar con imagenes en matlab, aprenderemos como leer imagenes desde la computadora, como mostrarlas en un axes y como escribirlas (guardar) en la computadora.

Una imagen en blanco/negro en matlab es representada por una matriz de dimensiones nxm, donde "n" representan las filas y "m" las columnas.
Para representar una imagen a color en matlab se necesitaran 3 matrices representando los colores basicos.

Para leer una imagen desde la computadora aplicamos la siguiente sentencia:

ruta = 'C:\Users\Rafa\Desktop\imagen1.jpg';
A=imread(ruta);

La variable "A" guardara la matriz de datos de la imagen. Para poder representar la imagen leida en una ventana utilizamos la siguiente sentencia:

imshow(A);

Para obtener el tamano de la imagen utilizamos:

size(A);

lo que representa que existen 3 matrices para cada uno de los colores basicos y el tamamo 375x600.

Podemos aplicar la sentencia siguiente para obtener informacion detallada de la imagen leida.

whos A;

Se puede observar algunos parametros obtenidos de la imagen leida como su nombre, su tamano, los bytes utilizados para representar la matriz, asi como su clase (clase de imagen) que en este caso es uint8 y sus atributos.

Clases de Imagenes:

char: Para caracteres (2 bytes por elemento).
double: Doble precision, numeros de punto flotante en un rango de -10^308 hasta 10^308 (8 bytes por elemento).
int8: Enteros de 8 bits en el rango [-128, 127] (1 byte por elemento).
int16: Enteros de 16 bits en el rango [-32768, 32767] (2 byte por elemento).
int32: Enteros de 32 bits en el rango [-147483648,2147483647] (4 byte por elemento).
logical: Representada por valores de 0 y 1 (1 byte por elemento).
single: Numero de punto flotante de precision simple, con valores entre [-10^38, 10^38] (4 bytes por elemento).
uint8: Enteros de 8 bits en el rango [0, 255] (1 byte por elemento).
uint16: Enteros de 16 bits en el rango [0, 65535] (2 byte por elemento).
uint32: Enteros de 32 bits en el rango [0, 4294967295] (4 byte por elemento).

Para guardar una imagen en la computadora utilizaremos las siguientes sentencias:

imwrite(f, 'nombre_imagen.jpeg');

Ademas se puede utilizar la sentencia siguiente para definir la calidad de la imagen que vamos a guardar, el valor de "q" varian de 0 a 100 representando la calidad respectivamente.

imwrite(A, 'nombre_imagen.jpeg','quality', q);

Para poder recuperar informacion correspondiente a la imagen que acabamos de guardar aplicamos lo siguiente:

imfinfo nombre_imagen.jpeg;

Existen algunos comandos utilizados para tranformar entre las distintas clases de imagenes, como se muestra a continuacion:

Nuestra imagen original guardada en A es:

Al aplicar:

im2bw(A)

se obtiene:

Se tiene otros tipos de transformacion como:

im2uint8(A);

im2uint16(A);

im2double(A);

Como Hacer una Animacion de Movimiento de Texto En HTML

2013-12-11T17:13:00.001-08:00

En este post mostraremos como realizar una animacion sencilla que refleje los distintos tipos de movimientos que se puede hacer con los textos.

Crearemos un contenedor en el cual escribiremos 7 nombres que representan a: Java, Matlab, HTML, Threads, GUI, Button, JSF, cada nombre tendra un color y un efecto de movimiento diferente.

Para este ejemplo haremos todo desde HTML y JavaScript, no utilizaremos CSS.

Haremos uso del script "Kinetic", el cual nos brindara un ambiente de javaScript, creando stages, layers y utilizaremos algunos de sus metodos para lograr los efectos que se obtuvieron en el ejemplo:

El ejemplo se desarrollara dentro de las etiquetas <body> y </body> y seguira de la siguiente manera:

Para agregar el script Kinetic aplicamos la siguiente sentencia:

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>

Una vez que se importa el script, se continua programando en JavaScript dentro de las sentencias siguientes:

<script>
.........codigo en javascript.........
</script>

E incluimos el siguiente codigo que permite agregar un contenedor donde incluiremos nuestros textos.

//Creamos una nueva etapa llamada "stage"
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 340
});

//Creamos nueva capa sobre la que colocaremos los easings
var layer = new Kinetic.Layer();

Creamos los textos al los que les pondremos los efectos de movimiento.
//Creamos la lista que se mostrara con su respectivo nombre, //color y efecto (easings).
var easings = [ {
easing: 'ElasticEaseOut', name:'Java', color:'blue'},
{easing: 'BackEaseIn', name:'Matlab', color:'red'},
{easing: 'EaseOut', name:'HTML', color:'green'},
{easing: 'EaseInOut', name:'Threads', color:'blue'},
{easing: 'BackEaseIn', name:'GUI', color:'yellow'},
{easing: 'EslasticEaseIn', name:'Button', color:'red'},
{easing: 'BackEaseInOut', name:'JSF', color:'orange'}
];

Como se puede observar en las sentencias anteriores los efectos vienen daros por: 'BackEaseIn, EaseOut, EaseInOut, etc. Existen otros efectos aparte de estos.

Nuestro ejemplo se veria de la siguiente manera:

Para descargar el proyecto completo seguir los siguientes enlaces:

DESCARGAR

Como Crear Menu Vertical en HTML y Decorar con CSS

2013-12-08T11:13:00.001-08:00

En este post ensenaremos como crear un menu vertical en html y decorarlo con css a partir de una lista simple creada con el siguiente codigo que lo colocaremos entre las etiquetas <body> y </body>.

<body>
<div id="menuVertical">
<ul> 
<li> <a href="http://aflrovvs.blogspot.com/search/label/java"> Java </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/search/label/matlab"> Matlab </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/search/label/html"> HTML </a> </li>
</ul>
</div>
</body>

Lo cual se vera de la siguiente manera:

Para hacer que la lista luzca como un verdadero menu vertical aplicaremos algunos estilos con css, en los que se incluye codigo para eliminar las vinetas, eliminar el subrayado, colocar paneles detras de cada elemento, entr otros.

Para poder eliminar las vinetas colocaremos:

list-style-type:none;

Dentro de la funcion #menuVertical ul{..} en la plantilla de nuestro blog dentro de la funcion body {..}

En esta misma funcion definimos el color de fondo de cada elemento de menu y el color de los bordes de los paneles de los elementos de menu respectivamente:

background:#CEFBF6;

border:solid 5px #7FFEF1;

El radio de borde viene dado por:

border-radius:9px;

Para eliminar el subrayado colocaremos la sentencia siguiente:

text-decoration: none;

Dentro de la funcion #menuVertical ul a{..} en la plantilla de nuestro blog dentro de la funcion body{...} debajo de la funcion #menuVertical ul {..}.

En esta misma funcion colocamos el tamano de la fuente que viene definida por:

font-size: 20px;

Para crear el efecto de cambio de contraste al colocar el mouse sobre el menu aplicamos el siguiente codigo que lo unico que hace es mostrar una inversion de los colores para cada caso, es decir cuando no se coloca el mouse sobre el menu el color de cada elemento de menu esta variando de negro hasta blanco y al colocar el mouse sobre el elemento de menu, este varia de blanco a negro, lo que da el efecto de seleccionar tal elemento de menu.

#menuVertical li a{

color:#06F;

margin:0px;

background:linear-gradient(#fff 0%,#dedede 100%);

background:-moz-linear-gradient(#fff 0%,#dedede 100%);

background:-ms-linear-gradient(#fff 0%,#dedede 100%);

background:-o-linear-gradient(#fff 0%,#dedede 100%);

background:-webkit-linear-gradient(#fff 0%,#dedede 100%);

border:solid 1px #f9f9f9;

border-radius:15px;

padding:10px;

}

#menuVertical li a:hover{

background:linear-gradient(#DEDEDE 0%, #FFF 100%);

background:-moz-linear-gradient(#DEDEDE 0%, #FFF 100%);

background:-ms-linear-gradient(#DEDEDE 0%, #FFF 100%);

background:-o-linear-gradient(#DEDEDE 0%, #FFF 100%);

background:-webkit-linear-gradient(#DEDEDE 0%, #FFF 100%);

border-radius:15px;

border:solid 4px #333;

color: red;

}

Al aplicar estas sentencias y las demas que vienen incluidas en la carpeta del proyecto, nuestro menu deberia verse de la siguiente manera:

Ademas se lo puede apreciar en la parte izquierda de nuestro blog.

Para descargar el proyecto seguir los enlaces siguientes:

DESCARGAR

Como crear un Menu con Submenus en HTML decorado con CSS

2013-12-07T17:39:00.000-08:00

En este nuevo post crearemos un menu que contenga submenus, cada uno de los cuales estara enlazado a paginas de este blog.
Utilizaremos herramientas de html/css para poder dar ciertos efectos a los menus.

Para crear el menu utilizaremos el siguiente codigo, que estara dentro de la etiqueta <body>.

<div id='subMenu'>
<ul> 
<li> <a href="http://aflrovvs.blogspot.com/"> Inicio </a> </li>
<li>
<a href="http://aflrovvs.blogspot.com/p/descargas.html"> Descargas </a>
<ul>
<li> <a href="https://skydrive.live.com/#cid=CB2C976AE9CB5D07&id=CB2C976AE9CB5D07%21278"> SkyDrive </a> </li>
<li> <a href="https://www.dropbox.com/sh/kotx2ml5a097vlv/C1YPyPd7QL"> DropBox </a> </li>
</ul>
</li>
<li> <a href="http://aflrovvs.blogspot.com/p/sobre-mi.html"> Sobre Mi </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/p/contacto.html"> Contacto </a> </li>
</ul>
</div>

El cual contendra los submenus con sus respectivos enlaces y quedara de la siguiente manera:

Para colocarlo de una manera horizontal debemos colocar un codigo extra entre las etiquetas <style> por debajo de <title>, el cual se incluira en el archivo del proyecto que esta disponible para descargar en el siguiente enlace:

El menu se vara asi:

DESCARGAR

Como Insertar Imagenes y Crear Menus Horizontales con HTML/CSS

2013-12-07T16:27:00.001-08:00

El primer post dedicado al lenguaje HTML es sobre como insertar imagenes que esten alojadas en internet y la creacion de menus horizontales disenados con herramientas de CSS.

Este post en particular muestra el diseno del banner principal y del menu horizontal alojado en este blog.

El codigo consta de 3 partes: la primera es la colocacion del banner principal, seguida de la creacion del menu , para luego agregar ciertas caracteristicas de diseno al menu creado.

Para Insertar la Imagen utilizaremos el codigo siguiente:

<center>
<div id="carga">
<img src="http://drive.google.com/uc?export=view&id=0B1kFwZU59fWZYVRKMWUycFlJenM" bord ="0" height="197" width="1000" ""/>
</div>
</center>

Estas lineas se colocan debajo de donde empieza <body>, la direccion de la imagen es insertada justo en medio de las comillas de la seguiente sentencia <img src=" ">. La altura y ancho de la imagen se controlan con "height" y "width".

<center> y </center> son utilizadas para centrar la imagen.

Para la creacion del menu se utilizan las siguientes lineas de codigo, las cuales se colocan abajo del codigo utilizado para insertar la imagen, dentro de la etiqueta <body>.

<div id='cssmenu'>
<ul> 
<li> <a href="http://aflrovvs.blogspot.com/"> Inicio </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/p/descargas.html"> Descargas </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/p/sobre-mi.html"> Sobre Mi </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/p/contacto.html"> Contacto </a> </li>
</ul>
</div>

En la primera linea colocamos el nombre de nuestro menu: "cssmenu".
En la segunda linea creamos la lista que contendra cada elemento del meno con la etiqueta "<ul>".
Desde la tercera linea a traves de la etiqueta "<li>" se puede crear cada uno de los elementos del menu, sobre los cuales se colocan su respectivo nombre y su enlace al cual nos dirigiremos al hacer click. En nuestro caso cada uno de los enlaces son paginas creadas previamente en mi blog.

Quedando de la siguiente manera:

Como se observa el menu se crea de una manera simpre y en forma vertical, para convertir el menu a una forma horizontal y con colores y sombras aplicamos las siguientes sentencias:

Estas funciones se colocan entre las etiquetas <style type="text/css"> y </style> por debajo de <title></title>.
Esta primera funcion pinta del color azul el panel de fondo donde colocaremos el menu, ademas redondea el panel creado pintado de azul.

#cssmenu { width:100%;
background-color: #62a8f6;
border-top-left-radius:34px;
border-top-right-radius:34px;
border-bottom-left-radius:34px;
border-bottom-right-radius:34px;
}

Esta funcion acompanada de la siguiente colocan la lista de una forma horizontal, ademas colocan las coordenas donde se situara el menu y tamano de paneles que lo contendran.

#cssmenu ul {

list-style-type:none;

height: 40px;

width: 534px;

margin: auto;

position:relative;

display:block;

}

Esta funcion en la 3 linea coloca el color de cada elemento de menu, el la 4 linea asigna la separacion que mantendran los elementos del menu, en la 5 linea pondremo un borde a cada elemento de menu con su repectivo color y en la ultima linea redondeamos las esquinas de los paneles que contienen a lso elementos de menu.

#cssmenu li a{

float: left;

background-color: #d4eaff;

margin:0px;

border:solid 1px #f9f9f9;

border-radius:15px;

}

Esta funcion es la encargada de crear el efecto de cambiar de color que realiza el menu al colocar el puntero sobre cada uno de los elementos de menu.

En la segunda linea asignamos el color al que cambiara, en nuestro caso sera el azul de fondo.

En la tercera linea asignamos el nivel de redondeado.

En la ultima linea colocamos un borde de color negro.

#cssmenu li a:hover {

background-color: #6285f5;

border-radius:15px;

border:solid 1px #000;

}

Esta ultima funcion se encarga de realizar algunas funciones como quitar el subrayado con la linea 5.

Ademas en las lineas 2 y 3 controlamos el largo de los paneles de cada unos de los elementos de menu.

En la linea 4 establecemos el ancho de los paneles que contiene los elementos de menu.

#cssmenu ul a {

padding-right: 32px;

padding-left: 32px;

display: block; line-height: 40px;

text-decoration: none;

font-family: Georgia, "Times New Roman", Times, serif, fantasy;

font-size: 18px;

color: #FC4A04;

}

El programa quedara de la siguiente manera:

Para descargar el proyecto completo seguir cualquiera de los enlaces siguientes:

Dropbox

Google Drive

Como cargar Imagenes en Axes en GUI en Matlab y convertirlas en Matrices de datos

2013-12-07T11:44:00.001-08:00

En este post leeremos y cargaremos 2 imagenes ubicadas en la carpeta donde se encuentran los archivos .m y .fig del programa.
Ambas imagenes seran leidas por la funcion imread() para luego ser mostradas en los axes.
Las imagenes son leidas como una matriz de datos binarios (En este caso ya que solo se trabaja con valores de 0=negro, 1=blanco).
Las imagenes son de tamano 8x8, por lo tanto cada matriz sera de dimensiones 8x8, donde cada posicion de la matriz contendra valores entre 0 y 1.

Las siguientes lineas de codigo representan el evento que se realizara al presionar sobre el boton "Cargar Images".

Seleccionamos el axes1.
axes(handles.axes1);
Guardamos el parth de la primera imagen
path = '\MATLAB\a2.bmp';
Leemos la imagen convirtiendola en una matriz
imag = imread(path);
Mostramos la imagen en el axes
imshow(imag);
Desabilitamos los ejes vertical y horizontal
axis off;
Mostramos la matriz que representa la primera
imagen y mostramos en un static text.
set(handles.text1,'String',num2str(imag));

Repetimos el procedimiento para la segunda
imagen que sera mostrada sobre el axes2.
axes(handles.axes2);
path = '\MATLAB\e0.bmp';
imag = imread(path);
imshow(imag);
axis off;
set(handles.text2,'String',num2str(imag));

Otra cosa importante que se debe de tomar en cuenta es que los "Static Text" deber ser modificados desde la GUI haciendo click derecho sobre cada static text y variando el valor de "max" hasta 10.

A continuacion en los enlaces siguientes se puede descargar los archivos e imagenes utilizados en el programa.

Como Utilizar y Elegir los Axes en GUI en Matlab

2013-12-07T09:38:00.003-08:00

En este nuevo sencillo ejemplo mostraremos como utilizar los axes en la gui de matlab, graficando algunas funciones sobre los mismos.
Utilizaremos un boton para mandar a graficar las diferentes funciones sobre los 3 axes.
Ademas resolveremos el problema de no saber seleccionar el axes sobre el cual se requiere trabajar, para solucionar este problema utilizaremos la sentencia siguiente:

axes(handles.axes1);

Esta sentencia permite seleccionar el axes sobre el que se va a trabajar en ese instante.
En las siguientes lineas de codigo observamos que en la linea 4 se graficara sobre el axes1 que se selecciono con anterioridad en la linea 1.
Asimismo en la linea 9 se graficara sobre el axes 2 ya que se selecciono con anterioridad en la linea 6.

Las lineas 2 y 7 crean una variable que va desde 1 hasta 10/15 variando cada 0.001 para ser utilizada para graficar.

Las funciones plot() sirven para graficar sobre los axes seleccionados, permite colocar parametros como el LineWidth, el cual establece el ancho de la linea que se grafica.

axes(handles.axes1);
x1 = [1:0.001:10];
x2 = 2-x1*3;
plot(x1,x2,'red','LineWidth', 2.5);

axes(handles.axes2);
x1 = [1:0.001:15];
x2 = x1*3/9;
plot(x1,x2,'LineWidth', 2.5);

Para descargar los archivos del programa seguir los enlaces siguientes:

Archivo.m

Archivo.fig

Como utilizar Global, Rand, Reshape en Matlab

2013-12-07T09:02:00.005-08:00

Este post pretende explicar algunas sentencias muy basicas pero que a la vez son muy utiles a lo hora que se necesita trabajar con Matlab, nos concentramos en los siguientes conceptos:

Trabajar con variables tipo "global" en Matlab.
Genear numeros, matrices aleatorias con la funcion "rand".
Redimensionar el tamano de una matriz con la funcion "reshape".

Variables Globales:
Son variables que se puede utilizar en cualquier momento y desde cualquier funcion definida en el archivo .m.
El unico requisito es declarar las variables en cada una de las funciones donde se la vaya a utilizar.

A continuacion planteamos un ejemplo:
Tenemos 2 funciones en un archivo .m en matlab, lo cual quedaria asi:

function func1(hObject, eventdata, handles)
global var2
var1 = [1:1:10];
var2 = sum(var1/(7-var1));

function func2(hObject, eventdata, handles)
global var2
disp(var2);

En el ejemplo anterior se puede observar que gracias a la definicion de la variable global var2 se puede utilizar esta variable en ambas funciones.
En la primera funcion definimos "var1" como una variable que varia de uno en uno desde 1 hasta 10 y la variable "var2" realiza la suma para todos los valores de "var1".

Funcion Rand:
Esta funcion nos permite generar numeros aleatorios en intervalos determinados, ademas nos permite crear vectores y matrices de numeros aleatorios, para lo cual se puede utilizar las siguientes sentencias:

rand(1) --> genera un numero aleatorio entre 0 y 1.
rand(5,1) --> genera un vector de numeros aleatorios de 5x1.
rand(1,3) --> genera un vector de numeros aleatorios de 1x3.
rand(2,3) --> genera una matriz de numeros aleatorios de 2x3.
rand(2,3,2) --> genera 2 matrices de numeros aleatorios de 2x3.

Existen otras funciones para generar valores aleatorios como las siguientes: randi(), randn().

La función randi() devuelve valores enteros dobles extraídas de una distribución uniforme discreta.
randi(2,10,1);

La función randn() devuelve matrices de números en coma flotante reales que se dibujan de una distribución normal estándar.
randn(10,1);

Funcion Reshape:
Esta funcion nos permite redimensionar matrices, por ejemplo se puede cambiar una matriz que representa valores para x,y,z en una matriz que represente valores solamente en x,y. Se aprecia mejor en el siguiente ejemplo:

Tenemos una matriz compuesta de los siguientes datos:

Podemos redimensionar con:

>> B = reshape(A(:, :, :), 24, 1)

Con este comando logramos crear un solo vector de datos de 24x1, en el cual contenga en sus filas cada uno de los valores de las matrices anteriores a la redimension.

Como Utilizar el Slider, Button, Edit Text en GUI en Matlab

2013-12-06T15:48:00.000-08:00

En este ejemplo mostraremos como utilizar el componente Slider de la GUI de Matlab, su utilizacion es muy sencilla. En primer lugar creamos un nuevo archivo tipo fig y colocaremos lo siguiente:

a continuacion hacemos click en View Callbacks-->Callbacks sobre el Slider y colocamos el siguiente codigo:
handles.slider1 = get(hObject,'Value'); indSlide = round(handles.slider1); set(handles.salidaSlider,'String',indSlide);
En indSlide capturamos la posicion del slider y la mostramos en uns static text en la siguiente linea.
Por defecto el intervalo de variacion del Slider es de 0 a 1, para cambiar estos parametro tendremos que ingresar a la GUI en Property Inspector sobre el Slider y encontrar los valores de maximo y minimo para su modificacion; en nuestro caso hemos colocado min = 0 y max = 10.
La siguiente parte del programa es establecer un valor al Slider al colocar un valor determinado sobre un Edit Text, es decir setear un determinado valor sobre un slider, lo cual se vera de la siguiente manera:

El codigo utilizado al presionar el boton "Aceptar" es el siguiente:
dato = str2num(get(handles.txtIn, 'String')); set(handles.slider1, 'Value', fix(dato));
En la primera linea obtenemos el valor de entrada y los transformamos a formato de numeros. En la segunda linea colocamos el valor obtenido del edit text sobre el slider.
Para descargar los archivos del programa seguir los enlaces siguientes:
Archivo.m Archivo.fig

Como utilizar CheckBox y Button en GUI en Matlab

2013-12-06T14:59:00.002-08:00

Este es un sencillo ejemplo que abarca la utilizacion de los checkbox en matlab, los checkbox permiten la seleccion de multiples opciones simultaneamente, lo cual los hace muy utiles para muchisimas aplicaciones que se crean dia a dia.

El primer paso es dirigirse a la gui y crear un nuevo documento sobre el cual pondremos los elementos que se muestran en la siguiente figura:

estado = get(handles.checkbox1,'Value');
if estado==1
set(handles.txtSalida1,'String','Opcion1');
end

En la variable estado almacenaremos el valor de cada checkbox, siendo (1--> Seleccionado y 0--> No Seleccionado).

Se puede descargar los archivos del programa de los siguientes enlaces:

Archivo.m

Archivo.fig

Como usar Radio Button, Button Group y Button en GUI en Matlab

2013-12-06T14:31:00.001-08:00

En esta ocasión mostramos un programa sencillo realizado en matlab, el mismo que contendra un panel Button Group sobre el cual estaran alguno Radio Button.

Gracias a este panel Button Group, los radio button que se encuentren dentro del panel podran seleccionarse solamente uno a la vez haciendolo muy util para los casos en los cuales e necesitan presentar una de varias opciones en la GUI.

Ademas este sencillo programa a traves de un boton muestra en un static text la opcion que se ha seleccionado.

Para poder determinar si algun radio button especifico esta seleccionado o no se aplica la siguiente sentencia:

estado = get(handles.radiobt1,'Value');

if estado == 1
set(handles.txtSalida,'String', 'Opcion 1');
end

radiobt1 es el nombre del primer radio button sobre la GUI, guardamos en la variable estado el estado del radio button (1--> Seleccionado, 0-->No Seleccionado).

Se puede descargar los archivos siguiendo el enlace siguiente:

Archivo.m

Archivo.fig

Como utilizar Button Group y Radio Button en Netbeans en Java

2013-03-23T18:56:00.000-07:00

Este post muestra un ejemplo sencillo de la utilizacion de Button Group y Radio Button en Netbeans en Java.

Para nuestro ejemplo crearemos una clase tipo JFrame Form, sobre esta colocaremos un Panel, lo vamos a llamar panel.
Ahora, sobre el panel colocaremos tres botones tipo radio (radio button), que indicaran los colores: "Verde", "Amarillo" y "Rojo".

Colocamos un boton, lo llamaremos btAceptar. Ademas colocaremos tres paneles llamados: panel1, panel2, y panel3.

Al presionar el boton se verificara la seleccion y dependiendo de eso se continuara a pintar los colores sobre los paneles colocados sobre el panel principal.

Nuestra ventana se vera mas o menos asi:

Continuaremos agregando un boton tipo Button Group, el mismo que no lo veremos en el panel, sino en la pestana Navigator en la parte superior izquierda de Netbeans. El boton de grupo permite agregar ciertos botones tipo radio a un grupo, para que solo se permita seleccionar solo un radio button a la vez.

Empezamos seleccionando todos los botones tipo radio y haremos click derecho y entramos a propiedades, nos dirigimos a la fila llamada buttonGroup y escogemos group1 (que es el nombre que pusimos a nuestro Button Group) como podemos ver en la siguiente imagen.

En el constructor inicializamos el color de los paneles como blanco.

Por el hecho de haber creado el Button Group y haber anadido los tres radio button, el programa permitira solamente seleccionar un boton tipo radio a la vez, por lo tanto se pintara un solo color a la vez sobre los paneles.

Tambien se puede agregar solo dos radio button al button group en vez de los tres, de esta manera podra hacerse algunas combinaciones, pero no se permitira que esos dos radio button esten marcados al mismo tiempo.

En el caso de no utilizarse un Button Group, el programa permitira que se presione dos o tres radio button a la vez y el programa se ejecutara normalmente.

Quedando de la siguiente manera:

El codigo del programa se muestra a continuacion:

Si desean descargar el proyecto completo click en la siguiente imagen:

Como usar Threads (hilos) en Java

2013-03-16T17:51:00.000-07:00

En este ejemplo se realizara la suma de todos los numeros de una matriz. La dimension de la matriz es de 6000 x 6000.

La suma se realizara de dos formas diferentes:
En primer lugar se realiza la suma secuencial de los valores de la matriz.
En segundo lugar se crean 6 threads, cada uno se encargara de sumar los valores de una fila de la matriz. Luego de esto se calcula la suma de los valores de la filas, obteniendo la suma total de la matriz.

El ejemplo pretende demostrar que la utilizacion de threads es muy importante, ya que mejora el desempeno de los programas que los utilizan.

Para ello hemos calculado el tiempo que tarda en realizarse la suma de los valores de la matriz mediante la utilizacion de thread y si ellos.

En la salida de nuestro programa podremos ver que el tiempo que demora realizarse la suma utilizando threads es menor que cuando no se los utiliza.

El programa se ha dividido en en tres clases:

Clase Matriz:
En esta clase creamos algunas variables como son matriz, suma, tamano.
Ademas se crea un objeto tipo Random para generar numeros aleatorios para llenar la matriz.
En el contructor se crea la matriz con dimensiones establecidas en la clase Main.
En el metodo llenarMatriz() generamos numeros aleatorios entre 0 y 20 y los guardamos en cada una de las posiciones de la matriz.
El metodo synchronized se encarga de guardar en la variable suma los valores obtenidos de las filas de la matriz.

Clase ThreadSuma:
Esta clase es un thread que se encarga de realizar la suma de los valores de la matriz, para ello se debe especificar de donde a donde se quiere sumar utilizando los parametros inicio y fin.
El metodo run() del thread es el proceso que se realizara cuando se ejecute el o los threads en la clase Main.

Clase Main:
En esta clase realizamos la suma sin threads, calculamos el tiempo que demora el realizar la suma y mostramos en pantalla el valor de la suma y el tiempo demorado.
Ademas creamos los threads que se encargaran de sumar los valores de las filas de la matriz, seguido de esto ejecutamos todos los 6 threads con el objeto execute, de la misma manera calculamos el tiempo que demora en sumar y mostramos en pantalla.

La salida de nuestro programa nos quedara de la siguiente manera:

Como podemos ver, el tiempo utilzando threads es menor al tiempo si utilizar threads.

Para descargar el proyecto hacer click en la siguiente imagen!!

Algoritmo de busqueda Lineal en Java Netbeans 7.1

2012-10-28T14:22:00.000-07:00

El algoritmo de busqueda lineal busca por cada elemento de un arreglo en forma secuencial. El algoritmo evalua cada elemento del arreglo y si no hay coincidencias, cuando llega al final informa que no hay coincidencias.
Si hay coincidencias con los elementos del arreglo, el algoritmo devuelve el indice de ese elemento.

Consideremos un arreglo representado de la siguiente manera:
12 23 56 54 65 45 76

Si el algortimo esta buscando el numero 56 comprobara primero con el valor de la primera posicion que es 12, luego con el de la segunda posicion hasta encontrar coincidencia.
Up to 10% OFF Android Tablet PCs Una vez que el algoritmo encuentre coincidencias, el programa nos mostrara la posicion del elemento encontrado.

Si no se encuentran coincidencias con los elementos del arreglo, el programa mostrara que no se ha encontrado coincidencias.

El codigo del programa se muestra a continuacion:

Si desea descargar el proyecto click en la siguiente imagen:

Creacion y Ejecucion de Subprocesos en Java Netbeans 7.1

2012-10-27T18:01:00.002-07:00

La inerfaz Runnable es el medio preferido para crear aplicaciones en Java con subprocesamiento multiple.
Un objeto Runnable representa una tarea, la misma que puede ejecutarse concurrentemente con otras tareas.
La interfaz Runnable declara un solo metodo, run(), el cual contiene el codigo que define la tarea que debe realizar un objeto Runnable. Cuando se crea e inicia un subproceso que ejecuta un objeto Runnable, el subproceso llama al metodo run del objeto Runnable, el cual se ejecuta en el nuevo subproceso.

Objetos Runnable y la Clase Thread:
La clase MultiplesProcesos implementa a Runnable, de manera que pueden ejecutarse varios objetos MultiplesProcesos de manera concurrente.
La variable tmpInactivo almacena un valor entero aleatorio de 0 a 5 segundos.
Cada subproceso que ejecuta a un objeto MultiplesProcesos permanece inactivo la cantidad de tiempo especificado por la variable tmpInactivo.

Un objeto MultiplesProcesos se ejecuta cuando un subproceso llama al metodo run de MultiplesProcesos.
En la linea 27 se invoca al metodo static sleep() de la clase Thread, para colocar al subproceso en estado de espera sincronizada durante la cantidad especificada de tiempo. Asi, el subproceso pierde el procesador y el sistema permite que otro subproceso se ejecute.

En las lineas 38, 39, 40 se crean 3 subprocesos, cada uno de los cuales especifica un nuevo objeto MultiplesProcesos a ejecutar.
En las lineas 45, 46, 47 se hace una llamada al metodo start() de la clase Thread en cada uno de los subprocesos; cada llamada invoca al metodo run() del objeto Runnable correspondiente para ejecutar la tarea.

La salida de nuestra aplicacion se vera asi:

El codigo en el metodo main() se ejecuta en el subproceso principal, un subproceso creado por la JVM.

El codigo en el metodo run() de MultiplesProcesos se ejecuta en los subprocesos creados. Cuando termina el metodo main, el programa en si continua ejecutandos, ya que aun hay subprocesos vivos. El programa no terminara hasta que el ultimo subproceso termine de ejecutarse, de esta manera la JVM tambien lo hara.

El subproceso con el tiempo de inactividad mas corto es el que normalmente se despierta primero, indicando que acaba de estar inactivo y terminan.

Si desea descargar el proyecto click en la siguiente imagen:

Como hacer una circunferencia con Puntos en OpenGL en Java Netbeans 7.1

2012-10-27T09:00:00.000-07:00

En este post haremos alugunas circunferencias hechas con puntos, utilizando la clase Math en Java en Netbeans 7.1.

Antes que nada es importante saber que para poder utilizar opengl en netbeans se debe tener instalado el plugin que permite hacer esto.
Para saber como utilizar opengl en netbeans seguir el siguiente enlace:
Como Agregar Plugin de OpenGL a Netbeans.

Para poder dibujar los puntos utilizaremos la siguiente funcion:

gl.glBegin();
//codigo de vertices, colores, etc para el dibujado
gl.glEnd();

Utilizamos la funcion gl.glPointSize(float size) para establecer el tamano de los puntos que se dibujaran seguidos de esta funcion.

Se utiliza la funcion gl.glRotatef(float angle, float x, float y, float z) para rotar los puntos en alguna direccion, se coloca antes de dibujar los puntos.

A traves de la funcion gl.glTranslatef(float x, float y, float z) se puede enfocar los puntos en pantalla, esta funcion permite transladar una figura manejando sus parametros.

Se dibuja la esfera a partir del siguiente codigo:

gl.glTranslatef(0.0f, 0.0f, -4.0f); //Permite enfocar la esfera

//Dibuja circunferencia grande
gl.glPointSize(5);
gl.glColor3f(1.0f, 0.4f, 0.8f);
gl.glBegin(gl.GL_POINTS);
for(float angul = 0.0f; angul<2*Pi; angul +=0.1){
float x = (float) ((float) 1.5*Math.sin(angul));
float y = (float) ((float) 1.5*Math.cos(angul));
gl.glVertex2f(x,y);
}
gl.glEnd();

El incremento en el for permite controlar el numero de puntos que se dibujaran, mientras menor sea el incremento se dibujara un mayor numero de puntos y mientras mayor sea el incremento se dibujaran menos puntos.

Nuestro ejemplo se vera asi:

El codigo del ejemplo quedara de la siguiente manera:

Si desea descargar el proyecto click en la siguiente imagen:

Como iluminar una esfera en OpenGL en Java Netbeans

2012-10-25T21:32:00.003-07:00

En este ejemplo mostraremos como iluminar una esfera en OpenGL en Java utilizando la IDE Netbeans 7.1.

Para crear la esfera se hace uso de la libreria GLUT, la cual permite dibujar diversas primitivas geometricas.

Antes que nada es importante saber que para poder utilizar opengl en netbeans se debe tener instalado el plugin que permite hacer esto.
Para saber como utilizar opengl en netbeans seguir el siguiente enlace:
Como Agregar Plugin de OpenGL a Netbeans.

Se utiliza la funcion gl.glLightfv() para crear una fuente de luz, la misma que ilumina cualquier objeto a su alrededor.
Al crear una fuente de luz se deben de tener en cuenta algunas propiedades como color, posicion, direccion de la que proviene.

Una vez definida la fuente de luz, se la activa con gl.glEnable().

Nuestra esfera iluminada se vera asi:

El codigo de la aplicacion es el siguiente:

Si se desea descargar el proyecto completo click en la siguiente imagen!

Como Dibujar Figuras con OpenGL en Java Netbeans 7.1

2012-10-23T16:32:00.001-07:00

En este nuevo post mostraremos como dibujar diferentes figuras en OpenGL en Java utilizando la IDE Netbeans 7.1.

Este ejemplo tiene distintas figuras geometricas, en conjunto forman un cuarto con una ventana en el fondo, en la cual se puede visualizar al sol y un cuadro en la pared de la izquierda.

En si, la aplicacion es muy sencilla. Se ha utilizado algunas figuras que en entradas anteriores se explico como dibujarlas y utilizarlas para realizar cualquier funcion posible.

Para poder dibujar el 'sol'que esta fuera de la ventana se utilizo el siguiente codigo, el mismo que esta sobre el metodo: display().

//Dibuja el sol
gl.glBegin(gl.GL_POLYGON);
for(int i=0; i<100; i++){
float x = (float) Math.cos(i*2*Pi/100);
float y = (float) Math.sin(i*2*Pi/100);
gl.glVertex2f(x, y);
}
gl.glEnd();

Se debe declarar la constante 'Pi' al inicio de la clase! asi:

public static final double Pi = 3.14159265358979323846;

Se ha utilizado los metodos gl.glTranslatef(), el cual permite transladar (ubicar) las figuras geometricas sobre la ventana de opengl.

Tambien se ha utilizado el metodo gl.glRotatef(), el cual permite rotar las figuras para obtener el angulo de rotacion deseado.

El codigo utilizado para la aplicacion es el siguiente:

Como se puede observar en el codigo, es muy simple la creacion del cuarto en 3D; lo unico que hay que hacer es ubicar bien los componentes para que nos de la impresion de estar en un cuarto en 3 dimensiones.

Nuestro programa quedaria asi:

Si se desea descargar el proyecto completo click en la siguiente imagen:

Como dibujar Circunferencias en OpenGL en Java Netbeans 7.1

2012-10-21T22:05:00.000-07:00

En esta nueva entrada veremos como dibujar una circunferencia y una semicircunferencia a traves de opengl en Java utilizando la IDE Netbeans 7.1.

Para poder dibujar una circunferencia hacemos uso de la funcion gl.GL_POLYGON.

Antes que nada es importante saber que para poder utilizar opengl en netbeans se debe tener instalado el plugin que permite hacer esto.

Para poder utilizar opengl en netbeans seguir el siguiente enlace:
Como Agregar Plugin de OpenGL a Netbeans.

El dibujo de una circunferencia es muy sencillo y se logra a traves del siguiente codigo:

//Dibuja circunferencia
gl.glBegin(gl.GL_POLYGON);
for(int i=0; i<100; i++){
float x = (float) Math.cos(i*2*Pi/100);
float y = (float) Math.sin(i*2*Pi/100);
gl.glVertex2f(x, y); gl.glColor3f(1.0f, 0.8f, 0.2f);
}
gl.glEnd();
gl.glFlush();

Como se puede observar, se dibuja un poligono de muchisimos lados, lo que da la impresion que se esta dibujando una circunferencia.

Para el dibujo de la semicircunferencia el codigo es muy parecido, la unica diferencia esta en que la variable "i" recorre hasta el numero 51, en vez de recorrer hasta el numero 100 como es el caso de la circunferencia.

//dibuja semiCircunferencia
gl.glBegin(gl.GL_POLYGON);
for(int i=0; i<51; i++){
float x = (float) Math.cos(i*2*Pi/100);
float y = (float) Math.sin(i*2*Pi/100);
gl.glVertex2f(x, y); gl.glColor3f(0.0f, 1.0f, 1.0f);
}
gl.glEnd();
gl.glFlush();

Para poder utilizar este codigo se debe declarar la variable "Pi" con anterioridad al inicio de la clase:

public static final double Pi = 3.14159265358979323846;

El codigo completo utilizado para nuestra aplicacion es el siguiente:

La salida de nuestra aplicacion se vera de la siguiente manera:

Si se desea descargar el proyecto completo click en la siguiente imagen: