Escribir código de dibujado para Android, Desktop, iOS y Web

A continuación encontrarás, traducido al Castellano, el artículo escrito por Geoff Perlman y publicado originalmente en el Blog oficial de Xojo.

Cuando se escribe código siempre es buena idea pensar en el futuro. Probablemente hoy estés creando un proyecto para Desktop pero, quizá, en el futuro quieras crear una versión para Android o iOS. El código que estés escribiendo puede que sea algo que necesites para ese nuevo proyecto. En su mayor parte, la escritura de código de dibujado funcionará tal cual siempre que uses la clase Graphics en proyectos Android, Desktop y iOS.

Graphics y WebGraphics

Sin embargo, los proyectos Web no utilizan la clase Graphics. El evento Paint del control WebCanvas recibe un objeto WebGraphics; y si bien las clases Graphics y WebGraphics tienen mucho en común, con muchos de sus métodos recibiendo los mismos parámetros, aun son dos clases diferentes desde la perspectiva del compilador de Xojo. Eso significa que si bien el código que escribas parecerá prácticamente idéntico, aun tendrás que utilizar un objeto Graphics para los proyectos Android, Web y iOS, mientras que en los proyectos Web deberás de utilizar la clase WebGraphics. Puede que tu instinto te lleve a simplemente escribir el código para uno y luego copiarlo para el resto de proyectos, cambiando Graphics por WebGraphics. Esto funcionará en algunos casos, pero aun así tendrás que recordar el tener que copiar/pegar/cambiar cada vez que actualices tu código. No es la idea.

En vez de ello, el código puede escribirse de forma que se encargue de gestionar automáticamente las diferencias entre Graphics y WebGraphics. En la mayoría de los casos los métodos gráficos se invocarán desde un objeto o código que proporcione un objeto Graphics o WebGraphics sobre el que puedas dibujar. El problema es que tus métodos no pueden limitarse a utilizar un tipo Graphics o WebGraphics como parámetro, dado que Graphics no funcionará en los proyectos Web y WebGraphics no lo hará en Desktop, iOS o Android. Por tanto, de hacerlo así derivará en un error del compilador.

Usando Variant

Afortunadamente, superar esta limitación es bastante sencillo. En vez de utilizar Graphics o WebGraphics como tipo para el parámetro de los métodos, puedes utilizar Variant. El tipo Variant puede contener cualquier tipo de dato, desde String a Integer, a Graphics o WebGraphics y más.

Una vez tu método de dibujado recibe el parámetro de variante no podrá utilizarlo tal cual para dibujar; recuerda que sólo puede utilizar un objeto Graphics o WebGraphics. El truco, por tanto, consiste en copiar o “proyectar” dicho objeto de Variante sobre una variable de clase Graphics o WebGraphics:

Var g As Graphics = context

o bien:

Var g As WebGraphics = context

El problema con el que te enfrentarás ahora, tal y como se ha mencionado previamente es que WebGraphics sólo existe para los proyectos Web. Esto significa que tendrás que escribir tu código de forma que se declare la variable g como un objeto Graphics para los proyectos Desktop, iOS o Android; y esto puede realizarse mediante la compilación condicional. Esta es una técnica simple que indica al compilador de Xojo que sólo compile el código en tu app en el caso de que se cumplan las condiciones indicadas. En este caso, si estás compilando el proyecto para Desktop o Mobile, entonces debería de utilizar la línea en la que s utiliza el tipo Graphics, mientras que si se trata de compilar para Web, entonces debería utilizar la línea en la que se utiliza WebGraphics. Para compilar de forma condicional, sólo has de añadir dicho código condicional entre estas dos líneas:

#If TargetDesktop Or TargetMobile Then
   Var g As Graphics = context
#EndIf

#If TargetWeb Then
   Var g As WebGraphics = context
#EndIf

Dado que el proyecto sólo puede ser uno de los anteriores tipos, cuando ejecutes o compiles tu proyecto se utilizará la línea de código correspondiente. A partir de este punto, ya sabes que contarás con una variable (g) del tipo correcto y que puedes utilizar para dibujar lo que desees. Por ejemplo, hay cuatro proyectos de ejemplo idénticos en los que se usa esta técnica (cada uno de ellos para un tipo de proyecto). Puedes encontrarlos en el IDE de Xojo seleccionando File > New Projects, haciendo clic en Examples y dirigiéndote a la categoría Graphics en el listado resultante, seleccionando a continuación la categoría Cross-Platform Drawing. Los ejemplos dibujarán un tablero con el siguiente aspecto:

Todos ellos contienen la misma clase Checkerboard encargada de gestionar el dibujado. Esta clase contiene los métodos DrawBorder y DrawCheckers que reciben un parámetro Variant. En cada proyecto es un control Canvas cuyo evento Paint invoca a estos métodos:

Var cb As New Checkerboard
cb.DrawBoard(g)
cb.DrawCheckers(g)

El método DrawBoard tiene el siguiente código:

#If TargetDesktop Or TargetMobile Then
  Var g As Graphics = context
#EndIf
 
#If TargetWeb Then
  Var g As WebGraphics = context
#EndIf 
 
Var boxSize As Integer = Min(g.Width/8, g.Height/8) 'The size of the box
'Draw the rows
For y As Integer = 0 To 7
  For x As Integer = 0 To 7
    'Switch colors for each box in the row
    If g.DrawingColor = Color.Black Then
      g.DrawingColor = Color.White
    Else
      g.DrawingColor = Color.Black
    End If
    'Draw a box
    g.FillRectangle(x * boxSize, y * boxSize, boxSize, boxSize)
  Next
  'Switch colors again for the beginning of the next row
  If g.DrawingColor = Color.Black Then
    g.DrawingColor = Color.White
  Else
    g.DrawingColor = Color.Black
  End If
Next

Consulta también el método DrawCheckers en los proyectos de ejemplo. Este utiliza la misma técnica. Lo que resulta genial de esto es que dicha clase puede copiarse en cualquier proyecto Android, Desktop, iOS o Web, y simplemente funcionará.

Consultar los Ejemplos

Como se ha indicado anteriormente, hay cuatro proyectos de ejemplo (uno por cada tipo de proyecto – Android, Desktop, iOS y Web) que muestran la técnica explicada aquí. Puedes encontrarlos en el IDE de Xojo seleccionando File > New Project, haciendo clic en Examples, dirigiéndote a la categoría Graphics y seleccionando luego la categoría Cross-Platform Drawing.