1. *** New version of B4J is available ***
    B4J v7.8
    Dismiss Notice

B4J Tutorial FlickrViewer

Discussion in 'B4J Tutorials' started by Erel, Nov 18, 2013.

  1. Erel

    Erel Administrator Staff Member Licensed User

    [​IMG]

    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:
    Code:
    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:

    Code:
    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:
    Code:
    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:
    Code:
    '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, 
    00, frm.Width, frm.Height)
    End Sub

    Public Sub Show
       frm.Show
    End Sub
     

    Attached Files:

    maXim likes this.
  2. TomDuncan

    TomDuncan Active Member Licensed User

    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
     
  3. Erel

    Erel Administrator Staff Member Licensed User

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

    United Technical Support Member Licensed User

    Erel,

    After running the http://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
     

    Attached Files:

  5. Erel

    Erel Administrator Staff Member Licensed User

    Add this line at the beginning of the GridPane_Resize event:
    Code:
    if ivs.IsInitialized = false then Return
     
  6. United Technical Support

    United Technical Support Member Licensed User

    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?
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice