B4J Tutorial FlickrViewer

This example downloads an html page, parses it and finds the image links. It then uses a class named ImageDownloader to download the images and show them.

The layout is made with a GridPane that holds 9 ImageViews. Note that all the ImageViews share the same id.
GridPane is currently not exposed as a B4J type.

It is therefore declared as a general pane variable:

Sub Process_Globals
   Private MainUrl As String = "http://www.flickr.com/explore/interesting/7days/"
   Private fx As JFX
   Private MainForm As Form
   Dim btnConnect As Button
   Dim ivs As List
   Private imageLinks As List
   Private downloader As ImageDownloader
   Dim PB1 As ProgressIndicator
   Dim GridPane As Pane
End Sub

The ImageViews should be clickable. We use this code to go over all the ImageViews and set a different mouse cursor so the user will know that the ImageViews can be clicked:

For Each n As Node In MainForm.RootPane.GetAllViewsRecursive
   If n Is ImageView Then
     n.MouseCursor = fx.Cursors.HAND
   End If
Next

When an ImageView is clicked we show the image in a new form:

Sub ImageView_MouseClicked (EventData As MouseEvent)
   Dim iv As ImageView = Sender
   Dim img As Image = iv.GetImage
   If img.IsInitialized Then
     Dim frm As Form2
     frm.Initialize(img, MainForm)
     frm.Show
   End If
End Sub

Form2 is a class module. By using a class module we can easily make many instances of this form.

Form2 class module:

'Class module
Sub Class_Globals
   Private fx As JFX
   Private frm As Form
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize (Image1 As Image, Owner As Form)
   frm.Initialize("frm", Image1.Width, Image1.Height)
   frm.Resizable = False
   frm.Title = "Form2"
   frm.SetOwner(Owner)
   Dim iv As ImageView
   iv.Initialize("")
   iv.SetImage(Image1)
   frm.RootPane.AddNode(iv, 0, 0, frm.Width, frm.Height)
End Sub

Public Sub Show
   frm.Show
End Sub

 

[TomDuncan]

Using this as an example can I make each image a selectable button.
i.e. having mouse over and mouse down visual indications.
What I need is to be able to select 1 or more images, then find which have been selected etc.
Have tried to make one a button with an image, but it will not load the image.

Tom

 

[Erel]

This thread shows how you can download multiple images. Please start a new thread for your question.

 

[United Technical Support]

Erel,

After running the https://www.b4x.com/android/forum/threads/flickrviewer.34608/ on B4J 3.5, it shown the runtime error.

Error occurred on line: 98 (main).
java.lang.RuntimeException: Object should first be initialized (List).

97 Sub GridPane_Resize(Width As Double, Height As Double)
98 For Each iv As ImageView In ivs
99 iv.Height = Height / 3
100 iv.Width = Width / 3
101 Next
102 End Sub

 

[Erel]

Add this line at the beginning of the GridPane_Resize event:

  if ivs.IsInitialized = false then Return

 

[United Technical Support]

Hi Erel,

But Line 11 "Dim ivs As List" in Process_Globals area and it already Initialize in line 24 "ivs.Initialize".
Add this line means disable the Resize function!

Is this a workaround solution, or I cannot define my Global variable like this forever?

 

[Erel]

The Resize event fires before the list is initialized. Right after the layout is loaded.

This line will only disable the resize during the layout loading.