Hola a todos,
En este artículo quiero mostrarte 3 formas diferentes de organizar tu código en una canvas app. Y si nos las conocias, estoy seguro de que te van a encantar, pues te van a ahorrar mucho tiempo en tus desarrollos.
Para explicar estas 3 formas de organizar el código he creado una canvas super sencilla y nada estética (todo sea dicho de paso), pero muy útil para este propósito explicativo.
Sencillamente tiene 3 botons a la izquierda, una imagen sobre un circulo en el centro y un botón y un número en la derecha.
Supongamos que estos botones realizan las siguientes acciones:
- Botón color aleatorio –>Cambia los colores del interior del círculo y su borde por otros aleatorios pero complementarios.
- Botón número aleatorio –>cambia el número de la derecha por un número entero aleatorio entre 1 y 1000.
- Botón Color estandar –> Vuelve el círculo y su borde al color inicial. En este caso verde con el borde azul.
Sin más dilación vamos con la primera.
1- Un botón oculto que tenga todas las formulas.
Si estás empezando con canvas app, seguramente coloques cada fórmula en el onSelect del botón o icono que quieres que haga la acción.
Pero eso no es muy escalable, puesto que puedes tener que invocar el mismo código desde varias partes de tu app y eso implicaría repetir código. Además de tener todo más desordenado y obligarte a tener que buscar en un sitio u otro. Por eso, una técnica que podrías usar es esta. Meter todas las fórmulas en un único botón (que podría estar con la visibilidad en false o fuera del lienzo, pero que en este caso para que se entienda es el que está a la derecha y pone fórmulas), organizadas con un switch e invocar a ese botón desde diferentes parte de tu app como muestro a continuación.
Este es el código que va en el botón de fórmulas, sencillamente un switch que recibe un parámetro y en función de este, llama a una u otra fórmula.
Switch(
Formula;
"ColorAleatorio";
// Generar componentes RGB aleatorios
Set(
RedBase;
Round(
Rand() * 255;
0
)
);;
Set(
GreenBase;
Round(
Rand() * 255;
0
)
);;
Set(
BlueBase;
Round(
Rand() * 255;
0
)
);;
// Construir el color base
Set(
BaseColor;
RGBA(
RedBase;
GreenBase;
BlueBase;
1
)
);;
Set(
colores;
{
colorPrincipalFondo: RGBA(
RedBase;
GreenBase;
BlueBase;
1
);
colorSecundarioFondo: RGBA(
255 - RedBase;
255 - GreenBase;
255 - BlueBase;
1
)
}
);
"ColorEstandar";
Set(
colores;
{
colorPrincipalFondo: RGBA(
0;
200;
0;
1
);
colorSecundarioFondo: RGBA(
0;
0;
255;
1
);
LetrasNegro: RGBA(
0;
0;
0;
1
);
LetrasBlanco: RGBA(
255;
255;
255;
1
)
}
);
"NumAleatorio";
Notify(
"Generado u nnúmero aleatorio entre 1 y 1000";
NotificationType.Success;
2000
);;
Set(
numRandom;
RandBetween(
1;
1000
)
)
)
Y esto este es el código en el on Select del botón de color aleatorio, que vemos, cambia el color del círculo
UpdateContext({Formula: "ColorAleatorio"});;
Select(FORMULAS);;
Como vemos. Lo único que estoy haciendo es setear antes de llamar al onSelect del botón de fórmulas la formula a la que quiero invocar. Pulsamos y listo, cambiados los colores del círculo por otros aleatorios.
Y esto este es el código en el on Select del botón de color aleatorio, que vemos, cambia el color del círculo
Vamos con la segunda fórmula, además con esta os doy otro tip de regalo.
2- Organizar las fórmulas en varios botones fuera del lienzo.
El método anterior es muy útil si tienes prisa y pocas fórmulas, pero que ocurre si empieza a crecer el número de fórmulas o la complejidad de las mismas, aunque el código esté en un único punto puede ser muy engorroso manipularlo, además si estropeas alguna de dichas fórmulas ya no funcionaría ninguna. Por eso, puede ser útil tener varios botones, cada uno con su fórmula, pero agrupados fuera del lienzo. Como muestro en la siguiente imagen.
Estos botones se pueden pulsar en modo edición sin tener la tecla alt presionada. Y además no serán vistos por el usuario porque están fuera del lienzo.
Para situar algo fuera del lienzo simplemente puedes ponerle en su X o en su Y valores negativos. Tal que así.
-Self.Width-50
Ahora dentro de cada uno de esos botones que he colocado fuera del lienzo, colocaré el código que quiera. Después lo llamaré desde los botones que el usuario ve. En este caso no tendre que hacer ningún paso previo. Solo ejecutar select del boton que desee, que únicamente contendrá esa fórmula.
Y vamos con la tercera, mi favorita. Aunque conociendo las tres y eligiendo sabiamente cuando usar una u otra, tu código mejorará muchísimo.
3- Usar fórmulas propias de powerFX.
Quizás no sabias que cualquier usuario, puede crear sus propias fórmulas. Bien, esto no siempre ha sido así, pero hace algún tiempo añadieron dicha funcionalidad. Lo que le da aún más sentido a la propiedad Formulas de la app (aunque antes ya resultaba útil, como te muestro en estos post relacionados).
Primero, si no te funciona correctamente, activa este check.
Una vez hecho, vamos a ver como se define una fórmula. Algo muy sencillo,se pone el nombre de la formula, luego se ponen entre parentesis los parámetros que se van a recibir y su tipo, y a continuación ‘:’ y lo que va a devolver la fórmula, su tipo.
Si no va a recibir parámetros se dejan vacios los parentesis. Y si no devuelve nada se escribe void.
Dicho así puede sonar algo extraño, pero con este ejemplo se va a enterder perfectamente.
formColorAleatorio no recibe paraámetros por eso se pone () y no devuelve nada por eso :Void. No devuelve nada porque los seteos los estoy haciendo dentro de la fórmula, pero podría hacer que devolviese un color.
Por ejemplo en el caso de formNumeroAleatorio, recibo 2 parámetros de tipo number, a los que he llamdo min y max, por eso he puesto (min: Number; max: Number) y devuelve un número, por eso he puesto : Number.
formColorAleatorio():Void =
{
Set(
RedBase;
Round(
Rand() * 255;
0
)
);;
Set(
GreenBase;
Round(
Rand() * 255;
0
)
);;
Set(
BlueBase;
Round(
Rand() * 255;
0
)
);;
// Construir el color base Set(
BaseColor;
RGBA(
RedBase;
GreenBase;
BlueBase;
1
)
);;
Set(
colores;
{
colorPrincipalFondo: RGBA(
RedBase;
GreenBase;
BlueBase;
1
);
colorSecundarioFondo: RGBA(
255 - RedBase;
255 -GreenBase;
255 - BlueBase;
1
)
}
)
};;
formColoEstandar():Void =
{
Set(
colores;
{
colorPrincipalFondo: RGBA( 0;
200;
0;
1
);
colorSecundarioFondo: RGBA(
0;
0;
255;
1
);
LetrasNegro: RGBA( 0;
0;
0;
1
);
LetrasBlanco: RGBA(
255;
255;
255;
1
)
}
)
};;
formNumeroAleatorio(min: Number; max: Number): Number =
{
RandBetween(
min;
max
)
};;
Por último, para invocar a estas fórmulas lo hago igual que con cualquier otra fórmula en power FX,
//en el caso de invocar la fórmula del número aleatorio, en este caso para setear una variable
Set(numRandom; formNumeroAleatorio(1;1000))
//en el caso del color aleatorio
formColorAleatorio()
Espero que este artículo te haya sido de utilidad. Te dejo algunas imágenes más. Un saludo.
