Autor: admin

So you want to open a JavaFXML with a custom component in SceneBuilder?

This week I have been playing with this project: https://github.com/Vuzi/twitter-c 

an implementation of a Twitter Client in JavaFX. 

The application uses different JavaFX views, being the main one TweetListView: https://github.com/Vuzi/twitter-c/blob/master/src/main/resources/fr/esgi/twitterc/view/TweetListView.fxml

When running, the TweetListView displays a lot of elements (look at those pretty buttons, they are using the FontAwesomeFX library)

I wanted to open the FXML in SceneBuilder and inspect it. But on first try, it failed with a ClassNotFoundException:

That view.component.Icon is a custom component:

https://github.com/Vuzi/twitter-c/blob/master/src/main/resources/fr/esgi/twitterc/view/component/icon.fxml

used by TweetListView.fxml here:

https://github.com/Vuzi/twitter-c/blob/master/src/main/resources/fr/esgi/twitterc/view/TweetListView.fxml#L20

So, going through GitHub I found that, in order to edit that FXML in SB first we need to import a JAR file with the component in the Jar Manager of SB

https://stackoverflow.com/questions/29444698/how-to-create-an-fxml-file-for-an-already-created-new-component-in-java-than-add

But wait, how do we create the JAR file? I’m using IntelliJ so my explanations will be based on this IDE.

First, I isolated the component into a single repository:

https://github.com/juananpe/IconComponentFX

Let’s create a JAR of the IconComponent. In IntelliJ:

1. Open Module Settings ⌘ ⬇️
2. Click Artifacts
3. Click the + Add button, point to JAR
4. Select: From modules with dependencies…

In the next Window, Just click OK 

To generate the JAR, click on Build / Build artifacts / Build

IntelliJ will generate the jar file and place it in the out/artifacts folder

Now, let’s import the JAR of the IconComponent in  SceneBuilder

Open the JAR/FXML Manager

Click on Add Library from FileSystem

Click on Import Components.

And finally, we will be able to open without errors the TweeListView FXML in SceneBuilder:

See these references for more info:

• Custom Control ClassNotFoundException in Scene Builder
• Load custom components in scenebuilder 17
• How do I create a custom JavaFX component library?
• https://staticfinal.blog/2014/05/21/adding-custom-javafx-components-to-scene-builder-2-0/
• Creating Custom Control in Jar for Gluon Scene Builder 11.00

Y con este SolveIt3 llegamos al final de los hackits y solveits que conseguimos resolver… fuera de tiempo, la mayoría, pero hey! No se puede tener todo… 🙂

Se trata de una imagen de un disco formateado con un sistema de archivos FAT.

# fdisk -l disk.img.gz
Disk disk.img.gz: 146.5 MiB, 153600000 bytes, 300000 sectors
Units: sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disklabel type: dos
Disk identifier: 0xb24b8602

Device       Boot Start    End Sectors   Size Id Type
disk.img.gz1       2048 299999  297952 145.5M  c W95 FAT32 (LBA)

Podemos montar la imagen (renombrar primero para añadirle la extensión .dmg si estás en macOS):

➜ hdiutil attach disk.img.gz.dmg
/dev/disk2          	FDisk_partition_scheme
/dev/disk2s1        	Windows_FAT_32                 	/Volumes/NO NAME

Es curioso, en macOS monta la imagen sin problema, pero Linux se queja de que la imagen tiene algún error:

# fsck.vfat disk.img.gz
fsck.fat 4.1 (2017-01-24)
Logical sector size is zero.

# mount -o loop -t vfat disk.img.gz /tmp/q/
mount: /tmp/q: wrong fs type, bad option, bad superblock on /dev/loop10, missing codepage or helper program, or other error.

En macOS la imagen se monta por defecto en /Volumes/NO NAME. Si pedimos un listado de ese directorio:

$ ls -al
total 218505
drwxrwxrwx@ 1 juanan  staff        512 Aug  7 21:53 .
drwxr-xr-x  4 root    wheel        128 Aug  7 21:53 ..
drwxrwxrwx  1 juanan  staff        512 Aug  7 21:53 .fseventsd
-rwxrwxrwx  1 juanan  staff  111873298 Jul 22 10:00 video.avi

El .fseventsd es un artefacto de macOS. Y el vídeo, bueno… no hacía falta ni abrirlo para saber de qué se trataba:

Desmontamos la unidad con umount /Volumes/NO\ NAME. Y empezamos a analizar el contenido de las particiones de esa imagen.

fdisk  disk.img.gz.dmg
Disk: disk.img.gz.dmg	geometry: 595/8/63 [300000 sectors]
Signature: 0xAA55
         Starting       Ending
 #: id  cyl  hd sec -  cyl  hd sec [     start -       size]
------------------------------------------------------------------------
 1: 0C    0  32  33 -   18 171  57 [      2048 -     297952] Win95 FAT32L
 2: 00    0   0   0 -    0   0   0 [         0 -          0] unused
 3: 00    0   0   0 -    0   0   0 [         0 -          0] unused
 4: 00    0   0   0 -    0   0   0 [         0 -          0] unused

Eliminamos los primeros 2048 bloques y extraemos el resto:

dd if=disk.img.gz.dmg of=/tmp/cabecera3 bs=512 skip=2048 count=297952

Probamos algo típico en un binario (ya hicimos pruebas con binwalk y no salió nada)… abrirlo con Gimp en modo raw 🙂

Si le damos un poco de zoom, veremos lo que estábamos buscando (saludos a Cuartango, que fue el primero en encontrar la medida exacta)

El level 2 del SolveIt se nos hacía conocido. Surgió en alguna otra ocasión, no recuerdo exactamente… tal vez en la Gipuzkoa Encounter de 2019. El autor (@imobilis) dibujó las pistas para solucionarlo en un papel que luego troceó y revolvió en múltiples pedazos. Verdaderamente es un buen rompecabezas.

Conocíamos el procedimiento de resolución: recortar cada una de las piezas e intentar recomponer la imagen original. Un trabajo de chinos. Kotxerra se puso a ello y estuvo dándole al Photoshop durante horas. Al final consiguió una buena imagen:

@ochoto retocó la imagen para hacerla más legible:

Hint2: Los solveits repetidos no son un pecado… 😉

Los bolsillos de un ORG, así se titulaba el level 1 del SolveIt. Venía acompañado de la típica imagen con varios elementos cuyos nombres hay que encontrar para formar la contraseña. Pero otra vez, nos encontramos con un red herring, una falsa pista que nos hizo perder tiempo (jugando con Google Lens para encontrar algunos nombres…) Al final bastaba con seguir la siguiente pista al pie de la letra: buscamos los nombres de los técnicos (orgs) que podrían llevar cualquiera de estos elementos…

Así que buscando en la intranet, pudimos ver esta lista:

Y nuestro compañero Cuartango, después de haber probado otras cuantas posibles soluciones, llegó a la conclusión de que la más simple era la buena: Aitor Aritz Gorka Mikel Oier 🙂