Esta serie de posts no está destinada a demostrar la superioridad de un lenguaje de programación sobre otro, el objetivo es encontrar la mejor manera de escribir códigos que un programador de GUIs enfrenta a diario. Cuando digo "la mejor manera", me refiero a un equilibrio adecuado entre agilidad y legibilidad, que en mi opinión, define la calidad de un lenguaje. La idea es que si conoces un lenguaje que permite mejorar la forma de codificar el fragmento mostrado aquí (seguramente que si), entonces lo publiques, para entre todos evaluar los mejores. También son bienvenidas versiones mejoradas de las que he escrito, y por supuesto, comentarios en general.
La principal razón por la que elegí JavaFX, es que francamente creo que es el lenguaje que permite ser más ágil para "programar" gráficos (hasta el momento).
Esta primera parte tiene como objetivo mostrar la forma de enlazar (binding) dos objetos, en este caso, el color de un objeto es determinada por el texto en un campo de texto. Si el texto dentro del campo de texto es 'aeiou' entonces el círculo se pinta de color verde, de lo contrario de color rojo.
Viendo la función processTheText como el "controlador", se puede notar la total separación entre la vista y la lógica.
/*
* DoItBetter1.fx
*
*/
package doitbetter;
import javafx.scene.control.TextBox;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
var theText = "";
Stage {
title: "Binding between GUI controls"
width: 400
height: 200
scene: Scene {
content: HBox {
spacing: 10
content: [
TextBox{
text: bind theText with inverse
}
Circle{
radius: 10 centerY: 10
fill: bind processTheText(theText)
}
]
}
}
}
function processTheText(auxText){
if(auxText == "aeiou") Color.GREEN else Color.RED
}
A mi me gusta mas Silverlight2, por que es un xml y la codificacion y binding es similiar a la JSF/ASP.Net
Rafa.
Hola Rafa,
¿Podrías escribir el mismo código en Silverlight2 para que podamos compararlos?
Creo que es de eso de lo que se trata...
mmm roger aqui si me corche, la verdad no conozco una forma mejor que esa para hacer lo mismo. Si utilizaria Swing y java2D (uff ya da miedo) saldria un archivo con minimo 100 lineas y con ActionScript por ejemplo tambien saldria un archivo grande...
Creo que la siguiente puede ser una version del fragmento de codigo en Flex 3, en Flex no consigo un objeto Circulo, por lo que uso un Label, lo cual es irrelevante porque no afecta el algoritmo. Espero que alguien con experiencia en Flex mejore la version o publique una nueva, por lo mismo aun no se puede comenzar a sacar conclusiones.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private function init() {
BindingUtils.bindSetter(processTheText, textInput, "text");
}
private function processTheText(auxText) {
if(auxText == 'aeiou') circle.backgroundColor = "green" else circle.backgroundColor = "red";
}
]]>
</mx:Script>
<mx:VBox>
<mx:TextInput id="textInput" />
<mx:Label id="circle" width="10" />
</mx:VBox>
</mx:Application>
Ruby:
Shoes.app :width => 200, :height => 200, :title => 'Foo' do
@oval = oval :radius => 100, :top => 10, :left => 10
edit_line do |e|
@oval.fill = ( e.text == "aeiou" ? '#0F0' : '#00F' )
end
end
Comparando Flex vs JavaFx, desde luego me quedo con JavaFx.
En mi humilde opinión no se trata de escribir menos líneas de código.
Se trata de tener herramientas solidas que escriban código por tí y de que el código sea facilmente legible.
Prefiero 100 veces esto:
int salario = this->GetSalario(empleado);
if(salario)
{
//Procesar
}
que esto otro
int a = this->GetS(b)
( (a) ? //Procesar)
Lo último hace que no quiera leer mucho del código que anda por ahí.
Blaxter, buen aporte. Lo que no tengo claro es para que tipo de aplicaciones esta pensado el toolkit Shoes, en google encontre esto:
"Shoes is a GUI toolkit for Ruby (among other languages) and is like no other. Not designed for serious, large-scale GUI applications".
Por lo que no me queda completamente claro si Shoes deba considerarse como un rival serio de JavaFX, Flex o Silverlight en la creacion de GUIs.
Saludos.
Hola Marc, me pasaba lo mismo. Primero debes pegar tu codigo en bloc de notas, luego lo copias de ahi, lo pegas en el editor de comentarios, lo resaltas y seleccionas el item "Bloque Codigo Java/XML/etc" en el select "Formato del texto". Seguidamente (no le des en previsualizar) le das directamente en enviar.
Saludos.
ups, algo le pasó al markup de mi post anterior, cómo pongo los tags XML para que salgan bien?
Mira mi ultimo post, no olvides utilizar notepad (el de windows), ya que elimina por completo el formato del codigo.
La cuestion es de balance entre:
1) Facilidad de Lectura: Miro el codigo rapidamente y entiendo de que va
2) Facilidad de Escritura: En pocas lineas escribo el codigo que hace exactamente lo que quiero
XML es muy bueno para describir cosas, pero tiene el problema de ser muy verboso, y eso es mas dificil de escribir y si es muy grande el codigo es mas dificil de leer, entonces se empieza a perder 1) y 2), ese es el caso de Flex, JSF y otros framework basados en XML. En el caso de flex toca ademas mezclar con un lenguaje de scripts y eso hace perder mas 1) y 2)
Ruby es mucho mas facil de escribir pero es mucho mas dificil de leer, no necesariamente mas compacto significa mejor, es mejor dejar la compactacion en manos del compilador y no tanto del lenguaje.
JavaFX Script es muy bueno describiendo algo que se lee facil y se escribe facil, lo que no me gusta es que facilmente se puede caer en anidaciones masivas, y al final tener un juego de llaves { } y corchetes [] infernal. Obviamente ya seria cuestion de buenas practicas..
saludos
Por Marc Baiges Camprubí:
Para mi, los Bindings son de lo más potente de Flex. Mi versión:<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:TextInput id="textInput" text="aeiou" />
<mx:Box width="100" height="100" backgroundColor="{(textInput.text == 'aeiou')?0x00FF00:0xFF0000}"/></mx:Application>
Seguramente le estan dando en "Previsualizar", deben darle directamente en el boton "Enviar Comentario".
PD: Creo que los Administradores deben tomar cartas en el asunto, es una pena que esto pase en un foro de programacion como JavaHispano.
Y para estar a la par, ahora pongo justamente lo esencial:
Stage {
scene: Scene {
content: HBox {
content: [
TextBox{
text: bind theText with inverse
}
Circle{
radius: 10 centerY: 10
fill: bind if(auxText == "aeiou") Color.GREEN else Color.RED
}
]
}
}
} var theText = ""
es cosa mia o JavaFx es una copia JSON y javascript ??????
Silverlight 2.0, por Rafael Castañeda:
// DoItBetterPage.xaml
<Page x:Class="DoItBetter.DoItBetterPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:DoItBetter"
Title="Binding between UI controls" Width="400" Height="200">
<Page.Resources>
<src:ColorConverter x:Key="colorConverter"/>
</Page.Resources>
<StackPanel Margin="10">
<TextBox Name="theText"/>
<Ellipse Width="100" Height="100" Margin="10"
Fill="{Binding Path=theText.Text, Converter={StaticResource colorConverter}}"/>
</StackPanel>
</Page>
// DoItBetterPage.xaml.cs
namespace DoItBetter
{
public partial class DoItBetterPage : Page
{
public DoItBetterPage()
{
InitializeComponent();
}
}
[ValueConversion(typeof(string), typeof(Color))]
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var text = value as string;
return text == "aeiou" ? Colors.Green : Colors.Red;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
Este es de las mejores noticias que veo, sin quitarles el merecido credito que merecen las otras publicaciones.
Les propongo que seleccionemos un servicio Web de la red o puedo construir uno (escucho propuestas) y hagamos el mismo ejercicio. Adicional no se si les parece hacer una pruebillas de carga.
Quien se apunta ??
yo me apunto
Claro, la clave esta en mediar entre la expresibidad del lenguaje (sintaxis, semantica, verbosidad) y la flexibilidad para manejar (la tarea del programador).
Creo que tambien hay que hablar un poco de los IDE's pues ellos forman parte de los "usuarios" de un lenguaje y son los que realmente tienen las tareas mas complicadas a la hora de manejar un lenguaje.
Comentendo un poco sobre JavaFX, a mi me gusta mucha esta forma dinamica de programar, por que practicamente permite al programador pasar de modo declarativo a modo sequencial casi que en cualquier momento.
No se si alguien se ha dado cuenta, pero la sintaxis de JavaFX Script se parece mucho a la forma de describir objetos en JSON, y en este campo si que ha habido bastante discusión sobre "Usar XML o JSON" para el intercambio asincrono de datos con servidores en aplicaciones Web.
Lo que han comentado sobre MXML de Flex y el XAML de Silverlight es muy cierto, para mostrar ejemplos simples se ven muy bien, pero si luego te digo que tienes que construirme una interfaz mas compleja, el fichero XML se extiende demasiado.
Y por ultimo tambien invitar a pensar no solo GUI's respecto a la sintaxis de JavaFX, si no tambien en modelos, pues casi siempre es mas ventajoso ser descriptivo y tener una vista estatica del sistema en fase de analisis, sin ir demasiado lejos y apurarse a entrar en la visión interacctiva del sistema, un principio de diseño que parece fundamental.
Un saludo.
La idea de seleccionar un servicio web me parece muy buena, de hecho ya lo había pensado pero para mas adelante, cuando fuera mas avanzada la serie. Ahora que somos mas los interesados, es mucho mas factible hacerlo. No estoy de acuerdo en meter en el debate a los IDEs, la idea es concentrarnos en el lenguaje en si.
Algo que se que caería bien es es que los Anonimos se registraran y/o loguearan para conocer con quienes hablamos.
Saludos.
Hola a todos,
Es curioso este concurso/experimento. De todas maneras, por qué no hacemos otro (más complicado) cual es el más fácil de depurar. Por más que he buscado en los posts, no he encontrado referencia alguna a la depuración.
En mi opinión, escribir unas cuantas líneas más me compensa (y mucho) si luego no me tengo que pasar 1h buscando por qué la maldita variable "contadorLechugas" se pasa del límite del "vectorHortalizas".
Soy el típico programador torpe que comete muchos errores programando y, cuando los cometo, me tengo que asegurar que los encuentro lo antes posible. Lo cual implica posiblidad de debug, mecanismo de traceado y separación de componentes; mucha separación.
@MARIOKO:
La cuestion es de balance entre:
1) Facilidad de Lectura: Miro el codigo rapidamente y entiendo de que va
2) Facilidad de Escritura: En pocas lineas escribo el codigo que hace exactamente lo que quiero
A lo cual, añadiría:
3) Facilidad de depuració: Técnicas y herramientas para detectar los errores lo antes posible.
y que (1) facilita la depuración
Todo esto lo comento porque estoy un poco cansado de esos lenguajes que te "simplifican la vida" comprimiéndote el código. Hombre, si funcionan a la primera son perfectos. Ahora bien, si no... agárrate.
Un saludo a todos.
@Vibovi
La facilidad de depuracion ya depende directamente de las herramientas, en java por ejemplo con algunos IDEs es super facil y productivo depurar codigo java, en otros, muy pocon. Yo creo mas bien que la Facilidad de Depuracion, que podria ser, facilidad para encontrar errores en el codigo, depende mucho de la Facilidad de Lectura, podriamos meter muchas mas variables a este experimiento, pero el mismo RogerJose lo a limitado a basicamente:
¿Que lenguaje de programacion es mejor para programar interfaces graficas y hacer bindings entre dos objetos?
Yo hice un experimentado parecido, como ya comenté, con un trozo de código accediendo a una BDD y devolviendo unos resultados formateados: http://www.jroller.com/greeneyed/entry/separating_concerns_business_logic_implementations
Estilos para elegir los hay en cantidad, y lo mejor para opinar es probarlos un poco.
Si nos ponemos a tener en cuenta variables como Facilidad de Depuracion y Soporte de IDEs creo que no llegariamos a ningun lado. En cuanto a Soporte de IDEs se refiere, creo que sin duda alguna ganaria Silverlight, pues Visual Studio, hay que reconocerlo, es el IDE mas completo que hay hasta el momento. Ademas el soporte por parte de los IDEs tambien esta determinado por la longevidad del lenguaje, asi que no seria una pelea justa. xD
Ahora bien, de las diferentes versiones para hacer binding entre dos objetos, cual les parece mejor, Silverlight, Flex o JavaFX y por que?
Ahora bien, de las diferentes versiones para hacer binding entre dos objetos, cual les parece mejor, Silverlight, Flex o JavaFX y por que?
yo me voy por JavaFX, y sencillamente por la razon de que el databinding en JavaFX es a nivel de lenguaje y NO a nivel de API como en el caso de Flex y Silverlight. Por eso existen las keyword: bind y bound para variables y metodos.
var a = 2;
var b = bind a
es todo lo necesario para que b (siendo una variable con su propio espacio de memoria y todo) siempre tenga el valor que se le asigna a la variable a.
ADVERTENCIA, yo conozco de JavaFX tanto como conozco de Flex y Silverlight (muy poco :-D ) pero no necesito mas para hacer una eleccion. Y por favor no se salgan del contexto del Databinding, porque a nivel general, para mi Flex es mejor que JavaFX, al menos por ahora.
Faltaba la version en Groovy, utilizando el API de SwingBuilder:
SwingBuilder.build() {
frame(size: [300,100], visible: true) {
gridLayout(cols: 2, rows: 0)
input = textField(columns:10)
label(backgroundColor: bind { if(input.text == 'aeiou') GREEN else RED })
}
}
Sin duda me quedaría con Groovy, mucho mas limpio y claro.
Yo veo mas cercano Groovy q javaFX a la manera q tengo de "ver" las cosas (tipo swing), pero por estructura prefiero JavaFX
Es decir el layout esta "por encima" del resto de componentes, q es como creo q deberia ser
un cordial saludo
La mayor ventaja que para mi tiene JavaFX, es que proporciona sincronizacion en doble via, es decir, que ademas de sincronizar A con el estado de B, al mismo tiempo permite sincronizar b con el estado de a.
Lo que se gana con esto es que se puede conocer el estado de un control grafico (texto en un textbox en este caso) a traves de un intermediario, en este caso la variable theText (el modelo). Obteniendose una total separacion entre un componente grafico y el otro, asi entonces, se puede tener el primer control grafico en una ventana y el segundo en otra, y sincronizar sus estado por medio del modelo.
Por otra parte, una variable de JavaFX puede sincronizarce a una expresion de cualquier complejidad, incluyendo: funciones, metodos java, ciclos, expresiones condicionales, bloques de codigo, etc. Lo cual abre las puertas a mayor separacion entre logica y vista, y da mas posibilidades, a la vez que facilita la legibilidad del codigo.
Pricipalmente, por las anteriores razones, me quedo con la implementacion JavaFX, seguida por la de Groovy, Flex y por ultimo Silverlight (esta ultima me parece se puede mejorar).
Y que hay de los editores visuales?, personalmente dejaría en primer lugar groovy y en segundo javafx, pero de groovy no existe un editor, mientras que de javafx las aproximaciones que he encontrado son una paleta de netbeans y jfxbuilder que si bien funciona, a mi modo de ver no sirve para producción aún! ¿que opinan?, digo si hay algún editor que genere código con swingbuilder y groovy y no lo conozco me estoy perdiendo de mucho!
Octavio Ruiz
JavaFx es espantoso, no trae muchas funciones como Split, Regex, etc, más si estás desarrollando para Mobile tienes muchas muchas limitaciones y fácilmente puedes colgar la aplicación, bueno esa ha sido mi experiencia. Saludos..
Escribe tu comentario