cómo hacer una galería de imágenes con FWH

Desde hace mucho tiempo he querido incorporar una galería de imágenes a algunos de mis programas. Esto data de mis tiempos de fanboy de Apple, cuando quedé prendado de un programa llamado Delicious Library al que me referí en esta entrada.

El caso es que hace poco estaba dándole vueltas a la cabeza en la manera de hacerlo y pregunté en el foro de FWH. La primera intención fue crear una clase a medida dentro de una ventana, pero esa solución no me valía porqué el flujo del programa es muy complicado de controlar pues las ventanas quedan independientes. Hubo otra propuesta de clase basada en diálogo utilizando la clase TPanel de FWH, y buscando ejemplos de esta clase me topé con la clase TScrollPanel que no conocía y de la que apenas hay documentación. Utilizando esta clase y el código que Mr. Rao había realizado para la clase TAlbum fue muy sencillo implementar la galería de imágenes.

Esta galería de imágenes la puedo utilizar, por ejemplo, para crear una galería de portadas de libros.

Ejemplo de galería de portadas de libros

Lo bueno de esta galería es que muestra las portadas en el orden de la rejilla de libros y si hay algún filtro activo la galería muestra unicamente los libros que aparecen en el filtro.

El código que he utilizado para crear la galería es el siguiente:

Function LiGaleria()
   LOCAL cAlias  := "LI"
   LOCAL nRecno  := ( cAlias )->( RecNo() )
   LOCAL nOrder  := ( cAlias )->( ordNumber() )
   local aImages := {}
   local aLabels := {}
   local aRecno  := {}
   local oDlgAlbum, oAlbum

   LI->(DbGoTop())
   WHILE ! LI->(EOF())
      IF ! Empty(Rtrim(LI->LiImagen))
         AAdd(aImages, Rtrim(LI->LiImagen))
         AAdd(aLabels, Rtrim(LI->LiTitulo))
         AAdd(aRecno, LI->(Recno()))
      ENDIF
      LI->(DbSkip())
   ENDDO
   LI->(DbGoTo(nRecno))

   DEFINE DIALOG oDlgAlbum SIZE oApp():oGrid:nWidth, oApp():oGrid:nHeight PIXEL TRUEPIXEL ;
      TITLE "Galería de portadas de libros - dobleclik para editar un libro"
   oDlgAlbum:SetFont(oApp():oFont)
   //
   oAlbum := TScrollPanel():New( 20, 20, oApp():oGrid:nHeight-50, oApp():oGrid:nWidth-20, oDlgAlbum, .f. )
   oAlbum:SetColor(CLR_WHITE, CLR_WHITE)
   oAlbum:SetFont( oDlgAlbum:oFont )

   @ oApp():oGrid:nHeight-40, oApp():oGrid:nWidth-96 BUTTON "Aceptar" ;
      SIZE 76, 24 PIXEL OF oDlgAlbum ACTION oDlgAlbum:End()

   ACTIVATE DIALOG oDlgAlbum ;
      ON INIT ( LiAlbum( oAlbum, aImages, aRecno, oDlgAlbum ), oDlgAlbum:Center( oApp():oWndMain ) )

   RETURN NIL  

function LiAlbum( oPanel, aPhotos, aRecno, oDlgAlbum )
   local nImgPerRow  := 8
   local nImgWidth   // := 180
   local nImgHeight  // := Int( nImgWidth * 4 / 3 )
   local nHGutter    := 10
   local nVGutter    := 20
   local nCols       := nImgPerRow 
   local nRows, nRow, nCol, x, y, nImage, xMax, nImages := Len( aPhotos )
   local oImage, oSay

   // el ancho del scrollbar es 16
   nImgWidth := INT((oPanel:nWidth-16-(nImgPerRow+1)*nHGutter)/nImgPerRow)
   nImgHeight:= Int( nImgWidth * 4 / 3 )
   nRows    := Ceiling( nImages / nCols )
   xMax     := nCols * ( nImgWidth * nHGutter )
   y        := nVGutter
   nImage   := 1
   do while nImage <= nImages
      x     := nHGutter
      nCol  := 1
      do while nCol <= nCols .and. nImage <= nImages
         // llamo a una funcion para conseguir detached locals
         LiAlbumImage(y, x, nImgWidth, nImgHeight, oPanel, aPhotos, aRecno, nImage, nVGutter, oDlgAlbum)
         nImage++
         nCol++
         x  += ( nImgWidth + nHGutter )
      enddo
      y  += ( nImgHeight + nVGutter )
   enddo
   //::nImgCols  := nCols
   // ::nHeight   := y
   oPanel:SetRange() // call this after defining all controls

return nil

Function LiAlbumImage(y, x, nImgWidth, nImgHeight, oPanel, aPhotos, aRecno, nImage, nVGutter, oDlgAlbum)
   local oImage, oSay, nLiRecno
   nLiRecno := aRecno[nImage]
   @ y, x XIMAGE oImage SIZE nImgWidth, nImgHeight OF oPanel NOBORDER
   oImage:SetSource( If( HB_ISARRAY( aPhotos[ nImage ] ), aPhotos[ nImage, 1 ], aPhotos[ nImage ] ) )
   oImage:nUserControl := 0
   oImage:lBmpTransparent := .f.
   oImage:bLDblClick := { || ( LiForm( oApp():oGrid, "edt", , nLiRecno, oDlgAlbum )) }

   //@ y+nImgHeight+(nVGutter/2), x SAY oSay PROMPT nLiRecno FONT oApp():oFont ;
   //   COLOR CLR_BLACK, CLR_WHITE ;
   //   SIZE nImgWidth, 2*nVGutter CENTER PIXEL OF oPanel
return NIL

En este código estoy utilizando tres funciones:

  • LaGaleria que recorre el fichero de libros para crear 3 arrays donde guardo las portadas, los títulos y los número de registro a que se refiere cada portada. Aquí creo el diálogo y el ScrollPanel.
  • LiAlbum donde recorro el array de imágenes para crear las imágenes dentro del ScrollPanel. Como luego quiero acceder a cada imagen para editar el libro haciendo doble click tengo que crear las imágenes en otra función utilizando la técnica de ‘detached locals’.
  • LiAlbumImage que es donde creo cada una de las imágenes, este código lo realizó Mr. Rao en el foro de FWH.

En una próxima actualización de Cuaderno de Bitácora incluiré galerías con las portadas de libros, discos y videos.