Temas en GTK3 y su impacto en la UI

Desde Xojo 2017r2, las app Linux utilizan GTK3. Dado que Xojo utiliza controles nativos esto significa que los controles de tus app utilizará el tema de la distribución Linux sobre la cual se esté ejecutando la app.

Esto puede significar que algunas veces la interfaz gráfica de la app no tenga exactamente el aspecto que habías diseñado en el Editor de Plantillas, dado que un tema puede variar de forma sustancial los tamaños de los controles y también su espaciado. Este es un problema que puede ocurrir con cualquier app moderna bajo GTK3. A continuación encontrarás traducida al castellano la documentación publicada originalmente en el área de desarrolladores de Xojo.

Si ello representa un problema para tus apps, entonces existen un par de modos en los que puedes controlarlo:

• Utiliza un espaciado Fijo/Bloqueado
• Deja que tu app cargue y use un tema concreto

Ambas soluciones pueden gestionarse mediante el uso de Declares incluidos en el manejador de eventos App.Open.

Utiliza un espaciado Fijo/Bloqueado

Para muchas apps, el principal problema es que los controles cambien su tamaño o posición en función de cuál sea el tema utilizado. Puedes garantizar la aplicación de un estilo concreto para los controles de tus apps mediante el uso de una cantidad fija de espaciado que no varíe con independencia del tema seleccionado por el usuario. Esto tiene la ventaja de permitir que tu app utilice otros aspectos del tema, como puedan ser los colores, al tiempo que se ejerce un mayor control sobre el posicionamiento de los controles.

Puedes incluir este código en el manejador de evento App.Open para aplicar un espaciado concreto:

#If TargetLinux Then
Declare Function gdk_screen_get_default Lib "libgdk-3" () As Ptr
Declare Function gtk_css_provider_new Lib "libgtk-3" () As Ptr
Declare Function gtk_css_provider_load_from_data Lib "libgtk-3"_
(provider As Ptr, data As CString, dataLen As Integer, error As Ptr) As Boolean
Declare Sub gtk_style_context_add_provider_for_screen Lib "libgtk-3" _(screen As Ptr, provider As Ptr, priority As UInt32)
Declare Sub g_object_unref Lib "libgobject-2.0" (obj As Ptr)

Const GTK_STYLE_provider_PRIORITY_APPLICATION = 600

Dim screen As Ptr = gdk_screen_get_default()
Dim provider As Ptr = gtk_css_provider_new()
If provider = Nil Then Break

Dim data As String = "GtkWidget:not(GtkMenuItem) { padding-left: 1; padding-right: 1; padding-top: 1; padding-bottom: 1;}"
If gtk_css_provider_load_from_data(provider, data, Data.Len, Nil) Then
gtk_style_context_add_provider_for_screen(screen, provider, GTK_STYLE_provider_PRIORITY_APPLICATION)
End If

g_object_unref(provider)
#Endif

También puedes encontrar información adicional en el ejemplo incluido junto con el IDE en la ruta Examples/Platform-Specific/Linux/GTK3 Themes/LinuxLockedPaddingExample

Carga un Tema Concreto

Si quieres que tu app utilice un tema concreto, de modo que el diseño de tus interfaces de usuario siempre tengan el mismo aspecto, entonces puedes agregar el tema como parte del proyecto y cargarlo cuando se inicie la ejecución de la aplicación. Tu aplicación utilizará el tema cargado independientemente del seleccionado por el usuario. Puedes cargar el tema desde el manejador de evento App.Open utilizando el siguiente código:

#If TargetLinux Then
Declare Function gdk_screen_get_default Lib "libgdk-3" () As Ptr
Declare Function gtk_css_provider_new Lib "libgtk-3" () As Ptr
Declare Function gtk_css_provider_load_from_path Lib "libgtk-3" _
(provider As Ptr, path As CString, error As Ptr) As Boolean
Declare Sub gtk_style_context_add_provider_for_screen Lib "libgtk-3" _(screen As Ptr, provider As Ptr, priority As UInt32)
Declare Sub g_object_unref Lib "libgobject-2.0" (obj As Ptr)

Const GTK_STYLE_provider_PRIORITY_APPLICATION = 600

Dim screen As Ptr = gdk_screen_get_default()
Dim provider As Ptr = gtk_css_provider_new()
If provider = Nil Then Break

// Load the theme
Dim themePath As FolderItem
themePath = App.ExecutableFile.Parent.Parent.Child("mintxtheme").Child("gtk.css")

If gtk_css_provider_load_from_path(provider, themePath.NativePath, Nil) Then
gtk_style_context_add_provider_for_screen(screen, provider, GTK_STYLE_provider_PRIORITY_APPLICATION)
End If

g_object_unref(provider)
#Endif

En el anterior código de ejemplo, el “mintxtheme” utilizado se carga desde una carpeta ubicada junto con la carpeta de la app, pero puedes cargarlo desde cualquier otra ubicación, como por ejemplo en la carpeta Resources de tu aplicación. Puedes descargar themas para Mint desde aquí: Descarga de Temas para Mint

Analizando Propiedades del Tema

El código anterior debería de ser suficiente para las necesidades de la mayoría de las apps, pero si quieres ejercer un mayor control sobre el modo en el que los temas generan los elementos gráficos de tus interfaces de usuario, entonces has de profundizar más en Linux. El Inspector GTK+ puede suponer una excelente herramienta en este sentido, ya que te permite examinar las propiedades e información de los elementos gráficos en tiempo real.

En algunas distribuciones también puede ser necesario que instales el paquete “libgtk-3-dev” antes de activar el Inspector GTK+.

De igual modo, probablemente también encuentres interesante revisar la documentación GtkCssProvider.