Off topic[programación]

3 replies [Last post]
Lightmoon

I am a member!

Offline
Joined: 12/16/2013

Hola a todos.

Podría realizar esta pregunta en otros foros, pero donde mejor que con compañeros de software libre :D

Llevo unos cuantos años programando, pero ni en el C.F.G.S ni en la ingeniería me han enseñado(de momento) lo siguiente.
Como sabéis existen los llamados componentes, como los botones, las cajas de texto, las etiquetas o "labels", etc...
He visto programas en los cuales han diseñado nuevos componentes, como por ejemplo programas de circuitos lógicos, en los que han creado componentes que son puertas lógicas. Mi pregunta es, ¿de qué forma puedo escribir un nuevo componente que no exista?. No me refiero a componentes no gráficos, sino aquellos con los que interactúa el usuario, como los botones o aquellos que se usan por ejemplo para subir o bajar el volumen.

No sé si me he explicado :S

Muchas gracias.

Saludos.

dcapeletti
Offline
Joined: 04/03/2014

Hola,
puedes crear un componente nuevo de dos maneras: Heredando de un componente existente de una librería y readaptarlo a tus necesidades o creando una clase desde cero. Yo uso wxpython por ser multiplataforma, tiene una buena cantidad de widgets y buena documentación.

Para readaptar un componente a menudo debes manejar conceptos de POO como ser, Clase, objetos, herencia, polimorfismo, etc. Lo que se hace es tomar un componente, heredar del mismo y hacerle algunos cambios, colores, tamaños, etc.

Para crear un componente nuevo se debe crear una Clase para el mismo. En la clase se usan objetos básicos como Paneles (Panels), Contenedores (Containers), PaintDC para dibujar líneas, Eventos, Imágenes, etc. Una vez que tienes la clase lista, podrás instanciar un objeto en tu programa y se dibujará el mismo. A menudo para crear interfaces gráficas se usa el patrón Decorator, Composite del MVC.

Ver: http://zetcode.com/wxpython/customwidgets/
https://wiki.wxpython.org/CreatingCustomControls
https://wxpython.org/docs/api/

¿Te ha servido o te es complicada la explicación?

Sds

Lightmoon

I am a member!

Offline
Joined: 12/16/2013

Gracias dcapeletti.

Actualmente estoy usando PHP como backend, y uso mi propio framework con el modelo MVC. De momento mi mini framework junto con librerías externas libres me funciona bien. Incluso mi framework es capaz de crear carpetas y archivos con el código fuente básico para nuevos formularios MVC. Sé que me direis que reinvento la rueda, pero he aprendido haciéndolo así.

Cuando usaba lenguajes como pascal ( IDE Lazarus y Delphi), si que creaba objetos personalizados, como por ejemplo un grid con ciertas propiedades nuevas, etc...
A lo que yo me vengo a referir es, por ejemplo, como creo un nuevo componente que no existe. Imagínate que los botones todavía no se hubieran inventado, ¿cómo se crearían?. Es decir, en algún momento tiene que crearse, ya sea desde el S.O. o desde algún lenguaje. En el caso de la Web, ¿puedo crear algún componente nuevo?. Jquery UI lo que hace es coger un componente y cambiarle el formato, como por ejemplo los checkbox, pero su funcionalidad sigue siendo la misma, ¿cómo creo algo que todavía no exista?. Llevo muchos años programando, pero cada día que pasa me parece que sé menos. Cuanto más estudio me doy cuenta que menos sé.... y me genera ansiedad el no poder abarcar todo. Quisiera saber programar drivers, S.O., programas empresariales (es lo que llevo haciendo desde siempre), de propósito general, etc... pero mi cabeza no da para tanto. No sé si esto es algo normal o es algo mío.

Muchas gracias.

Saludos.

dcapeletti
Offline
Joined: 04/03/2014

Hola,
mi manera de ver, es que si no existe un componente para lo que necesitas, lo debes crear a través de la Composición de componentes básicos que ya existan para crear así otro mas complejo. Piensa en como se crean los Autos, las cosas mecánicas de la vida real. Usan piezas básicas (tornillos, tuercas, etc) para hacer otras piezas mas complejas. A su ves esas piezas complejas las usan para armar algo mas complejo que forma un Conjunto que luego se ensambla con otro. Esto quiere decir que se hace uso de la Composición (Composite).

Si no existe un botón podrías usar un Panel con un Sizer, agregar un Label en el centro que ocupe todo el espacio del sizer y con eventos del mouse cambiar el estado del Label (el color por ejemplo). De esta manera nombraríamos a la nueva clase BotonLabel y dicha clase se podrá usar donde tu quieras y podría funcionar como si fuera un botón prefabricado.
Si quieres hacer un control de volumen lo que puedes que hacer es usar un Panel, sizer, y algún componente gráfico primitivo para que se dibuje de acuerdo a valores. Por ejemplo, si tu dices que el valor de volumen es 50, el dibujo se pinta hasta la mitad que ocupa en el sizer. Lee el ejemplo The CPU widget de este enlace: http://zetcode.com/wxpython/customwidgets/
Puedes instalar wxpython (sudo apt-get python-wxtools python-wxversion), copias el ejemplo en un editor de textos simple, le agregues la extensión .py y lo hagas ejecutable para ver los resultados.

Para el HTML es un poco de lo mismo. Tu puedes crear un botón a través de un Label, usando la herencia por ejemplo o crear una clase que haga uso de la composición. Debes saber las implicancias al usar herencia y composición. La herencia es mas estructural, toma lo que esta definido en la clase padre y puedes extender la funcionalidad en la subclase. En cambio en la composición, puedes componer múltiples objetos en uno solo. Te sugiero que aprendas a usar patrones de diseño (composite, decorador, etc), te ahorraras muchos dolores de cabeza, el código es mas elegante para entender. Ver: https://cloud.openmailbox.org/index.php/s/xP6RCrHj03JIBO9

Imaginemos que quieres hacer un control de volumen para HTML. Lo que podrías hacer es crear una Tabla con una celda del tamaño que especifiques en píxeles por ejemplo.

___________
| |
| |
| |
| |
| |
| |
___________

Luego dentro de esa celda, vas dibujando filas de distintos colores, de acuerdo al porcentaje del volumen. Podrías poner que hasta el 50% de la fila se pinten lineas verdes, luego se pinten amarillas y por último rojas. Esto podrías especificarlo mediante un método de clase así le brindas al usuario para que pueda customizarlo a sus necesidades. Incluso podrías dejar que el usuario escoja de que color quiere pintar las bandas del control.

___________
| |
| |
| |
|---------|
|---------|
|---------|
__________

También podrías hacer el control como una tabla de una sola columna y varias celdas pequeñas que se van rellenando de distintos colores...hay muchas formas de hacerlo.
Los progressbar también podrías usar la misma idea de composición pero en horizontal, una fila con varias columnas pequeñas que se pintan con relleno de fondo.

______________________
|||||||||
______________________

Muchos componentes gráficos complejos se hacen a través de la composición y customización de componentes simples..

Sds