Crear tu programa sin saber programación con ISC

28.02.2013 13:58

Vamos a crear un programa sin escribir una sola linea de codigo y para eso vamos a utlizar un programa multiplataforma que se llama Illumination Software Creator. Ahora este software es un poco mas difícil de conseguir pero lo pueden bajar del Ubuntu Software Center o de aquí para Windows y Mac OS.
También pueden probar instalarlo en Ubuntu y sus derivados escribiendo en la terminal:

sudo apt-get install illumination


Una vez que tengamos el software necesario para hacer nuestro programas vamos a proceder a abrirlo y veremos lo siguiente(sin los colores, obviamente) :

(Si no se nota lo que dice el siguiente texto solo seleccionelon con el puntero para que sea legible)
Menú: acá tenemos todo lo que nos podría hacer falta, principalmente lo usaremos para crear nuevos proyectos o abrir otros viejos.
Herramientas: acá tenemos las herramientas mas utilizadas durante todos los proyectos.
Controles: estos son lo controles que podemos agregar a nuestra aplicación (se llaman controles a las cajas de texto, botones, etiquetas, etc).
Variables: acá podremos agregar nuestras propias variables y constantes de tipo texto, numero, etc.
Diagrama: esto será nuestro "código gráfico" muy similar a los diagramas de flujo que enseñan en las escuelas, solo que todos elementos son rectangulares y solo cambian de color y contenido.
Propiedades: la configuración de cada control se puede editar desde aquí.

Para empezar vamos a hacer que el programa nos muestre un mensaje al iniciar:
1º Vamos a la parte de los controles y buscamos "Message Box", hacemos clic y sin soltar el botón lo arrastramos a la parte del diagrama de nuestra aplicación.
2º En el diagrama vamos a conectar el punto que esta después de "Launched" de "Aplication" con el punto que está antes de "Open" en "Message Box", nos tendría que quedar algo así:

3º Elegimos el cuadro en el diagrama llamado "Mesage Box" y ponemos, en la ventana de propiedades, debajo "Custom Mesage" "Hola %TuNombre%":

4º Corremos la aplicacion utlizando el boton en la barra de herramientas llamado "Run App" y nos dara 3 opciones:
Run HTML5 - Web: correrá la aplicación en nuestro navegador en codificación HTML5.
Run Python/GTK - Desktop: correrá la aplicación con python(previamente instalado) y las librería gráfica GTK, esta es la opcion recomendada para linux.
Run Adobe Flash/Flex - Web: creara una aplicación flash para correr en nuestro navegador.
También pedirá que antes guardemos el proyecto, así que lo guardamos con el nombre por defecto en cualquier carpeta que deseemos.
A continuación deberíamos ver algo como esto:


Y con eso creamos nuestro primer programa!
Pero quizas no entendieron todo lo que acabamos de hacer, asi que vamos a explicar un poco:
Primero lo que hicimos es crear el control para mostrar el mensaje de texto "Hola %TuNombre%" simplemente arrastrandolo desde la caja de controles hasta el diagrama del proyecto. Pero esto no hace que el mensaje se muestre para eso tuvimos que conectar el lanzamiento(Launched) de la aplicación(Application) con la Apertura(Open) del mensaje de texto(Message Box), realmente no hay nada complicado en esto, en los diagramas de flujo "Top Down" esto seria similar a conectar con una linea la parte de abajo de un dibujo con la parte de arriba de otro, la parte de arriba representa la entrada y la parte de abajo la salida.
Despues lo que hicimos fue cambiar la propiedad "Custon Mesage" para mostrar nuestro mensaje personalizado, tambien podriamos haber puesto un variable personalizada como el resultado de un numero o un texto sumado con una palabra que nosotros elijamos marcando la opción "Use Variable".

Vamos a subir de nivel ahora y vamos a hacer una calculadora para sumar y restar unicamente:
1º En el proyecto que estábamos borramos el "Message Box" que creamos anteriormente simplemente haciendo clic derecho sobre el mismo y luego en "Remove Block".
2º Vamos a seleccionar el bloque,en el diagrama, llamado "Window" y en el panel de propiedades vamos a presionar en "Design Window" (no lo precionen con el dedo al menos de que tengan una pantalla tactil, presionenlo con el puntero del mouse) y veremos el diseño de nuestra ventana principal, la vamos a modificar agregando algunos controles que se encuentran a la izquierda de la ventana, simplemente los arrastramos lo que deseamos agregar a la ventana del centro. Nosotros vamos a agregar 2 "TextBox", 1"Label" y 2 "Button":

3º Cambiamos las propiedades "Text" de cada control que acabamos de agregar y les ponemos para los TextBox "Numero1" y "Numero2", para los Button "Suma" y "Resta", y para el Label "Resultado":

Hechemosle un vistazo a los nombres de cada control para saber cual es cual es cual, veamos que el boton "Suma" se llama simplemente "Button" y el boton "Resta" se llama "Button1" lo podemos cambiar, pero no es completamente necesario hacerlo, solo con saber como se llama cada uno es suficiente.
Le damos "OK" para guardar el diseño y veremos en el diagrama del proyecto que se le agregaron nuevos controles a nuestro "Window".
4º Vamos a agregar 3 variables, solo hacemos clic en el boton "+" del recuadro de las variables:

Vamos a agregar 3 variables de tipo "Text" a nuestro proyecto, una llamada "N1", "N2" y "Result". También agreguemos 3 variables de tipo "Number" llamadas "number1", "number2" y "resultado".
5º Agregamos un "Get TextBox", conectamos "TextBoxChanged"(en la imagen se ve de otra manera) con "Set" y configuramos para que guarde su contenido en una variable:

En la ventana de propiedades elegimos de donde vamos obtener el valor(Window>TextBox) y a donde lo vamos a guardar(N1).
6º Agregamos otro "Get TextBox" pero ahora en lugar de elegir que obtenga el valor de "TextBox" vamos a poner que obtenga el valor de "TextBox1" y lo guarde en "N2". También conectamos el "Done" del "Get TextBox>Set" con el "TextBox1Changed".

7º Agregamos 2 "text to number" que se encuentra en el grupo de controles "Conversion" y lo conectamos como lo hice yo:

Tambien tenemos que cambiar las propiedades para que convierta el texto de "N1" en un numero y lo guarde en "number1" y al texto de "N2" en un numero y lo guarde en "number2".
8º Agregamos un "Add" y un "Substract" y lo conectamos como lo hice yo del grupo de controles "Numbers":

Cambiamos las propiedades de ambos y ponemos en la parte de arriba la variable "resultado" y en los dos de abajo los numero a sumo o restar.
9º Agregamos un "Number to text" del grupo "Conversion" y lo configuramos como muestra la imagen:

10º Solo queda agregar un "Set Label" del grupo "User interface" y configurarlo:

11º Lo ejecutamos y probamos con "Run App":

Funciona! 

Sigamos con algo mas simple, porque ya me canse de escribir, vamos a hacer un boton con una imagen propia:
1º En un nuevo proyecto vamos a modificar el diseño de la ventana principal, asi que seleccionamos "Window" del diagrama y le damos al boton "Design Window" y agregamos un "Canvas" y cambiamos las propiedades Text="nada", Height=128 y Width=128:

2º Bajamos esta imagen:

Si si ,ya se, me salio un poco "bieber" la imagen.
Después en la barra de herramientas en el botón de "Image Library" y agregamos, con "Add Image", la imagen que bajamos:

3º Creamos un "Set Canvas Picture" del grupo "User interface" y lo configuramos como la imagen:

4º Ahora podemos hacer que haga cualquier pelotudes que se nos de la gana cuando se presione sobre la imagen, por ejemplo podemos hacer que se muestre un Mensaje agregando un "Message Box y conectando su entrada con la accion "CanvasClicked". Tambien podemos hacer que cambie la imagen agregando otro "Set cambas image" y conectandolo con "CanvasClicked". Lo que yo voy a hacer es que corra un comando de Linux (tambien puede correr comandos de windows, creo, pero en linux los comandos son mas utiles) para eso voy a agregar una variable con el nombre "comando"(text) y de contenido le voy a poner el comando que quiera ejecutar, en mi caso va a ser xkill:

En el grupo de controles "System" voy a agregar un "Run shell script" configurándolo de la siguiente manera:

5º Ahora volvemos a ejecutar el proyecto y apretamos en la imagen a ver si pasa algo y... no pasa nada asi que volvemos a editar la variable del comando y en vez de "xkill" ponemos "muon" y ejecutamos de vuelta y ahora anda! :



Eso fue todo por ahora, hasta la proxima!

 

Tema: Crear tu programa sin saber programación con ISC

Asunto: ejemplos Autor: ronal Fecha: 19.10.2016

bastante intuitivo. gracias

Nuevo comentario