B4J Question [ABMaterial] Solved: image events

udg · Apr 23, 2016

Hello,

today I started experimenting with what appears to be a great framework.
I'm having a problem with image click event.

I set up a "row" to contain a few images. My goal is to react to a click on each image not writing as many subs as there are images. So I tried:

B4X:

   ....
   Dim img As ABMImage
   img.Initialize(page,"1","../images/370.png",1.0)
   img.Caption="Num.1"
   img.Tag=1
   img.IsResponsive=True
   page.Cell(5,1).AddArrayComponent(img,"myimg")
   Dim img2 As ABMImage
   img2.Initialize(page,"2","../images/515.png",1.0)
   img2.Caption="Num.2"
   img2.Tag=2
   img2.IsResponsive=True
   page.Cell(5,2).AddArrayComponent(img2,"myimg")  
   ....

Sub myimg_clicked(Target As String)
  Dim img As ABMImage = page.Component(Target)
  Dim title As String = img.Caption
  page.ShowToast("toast1", "toastgreen", "Clicked " & title, 5000)
End Sub

First problem is that i can't see any Caption on top (or bottom) of my images.
Secondly (and more important), looking at the Log I see event "eventname=myimg1_clicked" and "eventname=myimg2_clicked" when clicking on the images so the common sub is never called.
I tried an empty string on each image ID, that called the common myimg_clicked sub but ended up in Exception "signature doesn't match".

So, please, can you show me how am I supposed to program the above simple scenario? Thank you.

BTW, where do we find all the events associated to a control?

udg

alwaysbusy · Apr 26, 2016

The caption should appear when you click on the image (when it goes in 'materialbox' mode). It is not visible in 'mini mode'.

e.g. in http://prd.one-two.com:51042/demo/AboutPage/abmaterial-about.html?14
when you click on one of the three screenshots, you see some text at the bottom of the screen.

What is the version of ABMaterial you are using? The wrong array name looks like something from an older version.

udg · Apr 26, 2016

Hi Alain,
thank you for your reply. About the caption problem..it was just a misunderstanding on my part since I believed it was intended as a "title" for an image, like a label showing on top/bottom of it. Looking at prd.one-two.com I now understand its use.

I checked the ABM version and it appears to be version 1.07; should I upgrade to 1.08 to solve the problem in post #1?

Lastly, is there somewhere a wiki or other doc that shows a complete list of events available for a component?

Thank you

alwaysbusy · Apr 26, 2016

No, still haven't found the time to document the framework. I was planning to do some this cycle, but transforming the framework to be fully dynamic has taken most of my time. I'll let you know if it is fixed in 1.08 (else I have to correct it in my current 1.09 cycle)

alwaysbusy · Apr 27, 2016

Ok, I looked further into this and adding images as an ArrayComponent did not raise the correct event. I've made the changes to 1.09. Also a new property "IsClickable" is introduced (default = true), so you can avoid unneeded click raises to your server if you're not doing something with it anyway.

Note that a 'MaterializeBoxed' image still never raises an event (all is taken care of in the materializebox library, so you cannot interfere).

udg · Apr 27, 2016

Thanks for the update! Keep on with your great work.
I'll experiment a bit more with the numerous features and eventually post some more questions.

Umberto

CGP · Sep 2, 2016

Hi,

Any news?

TIA!

alwaysbusy · Sep 2, 2016

CGP said:
Any news?

On what subject exactly?

If it is about the click on an image added as array component, then this should be fixed in 1.12

CGP · Sep 2, 2016

I have 3(for example) ABMimages with same id but different caption/tag. How can I know which caption/tag have clicked image?

TIA!

alwaysbusy · Sep 2, 2016

Never. Every component must have a unique ID (HTML requirement).

But, I've build something so you can do (pseudo code, check out the demo code for a real example of AddArrayComponent()):

B4X:

for i = 1 to 3
     Dim image as ABMImage
     image.initialize(1, ...)  ' notice I do not name it here in the ID, just the number
     ' do your stuff
     page.AddArrayComponent(image, "myNameOfTheImage")
next

so now you can use the clicked() event

B4X:

Sub myNameOfTheImage_Clicked(Target As String)
   log(Target) ' should return something like: myNameOfTheImage1 or myNameOfTheImage2 or myNameOfTheImage3
   Dim image as ABMImage = page.component(Target)
   ' do your stuff
End Sub

Note that an image using MaterialBoxed will never raise this event!

CGP · Sep 2, 2016

It works, thanks!

Harris · Sep 2, 2016

I wrote a simple tutorial using AddArray

https://www.b4x.com/android/forum/threads/abmaterial-addarraycomponent-simple-example.69213/

Nice you have it working...

udg · Oct 2, 2016

Hi, all.
I didn't start a new thread because I feel I have a question strictly related to those same image events cited for post#1.
When using an image like

B4X:

   Dim imgowl As ABMImage
   imgowl.Initialize(page,"id1","../images/brand.png",90.0)
   imgowl.SetFixedSize(320,137)
   page.Cell(1,2).AddArrayComponent(imgowl,"myimg")

everything now works correctly (thanks Alain). But using a Container to hold the image, I read about an error due to a missing item "myimgid11 - No component found with id myimgid11".

B4X:

  'adding container
  Dim cont1 As ABMContainer
  cont1.Initialize(page, "cont1", "")
  cont1.AddRowsM(3,False,0,0,"").AddCellsOS(6,0,0,0,1,1,2,"")
  cont1.BuildGrid
  cont1.Cell(1,1).UseTheme("xxx")
  Dim img1 As ABMImage
  img1.Initialize(page,"id11","../images/icon1.png",100.0)
  img1.Caption="Num.1"
  img1.Tag=1
  img1.IsResponsive=False
  cont1.Cell(1,1).AddArrayComponent(img1,"myimg")
  ......
  Sub myimg_clicked(Target As String)
     Log(Target)
     Dim img As ABMImage = page.Component(Target)
     Dim title As String = img.Caption
     page.ShowToast("toast1", "toastgreen", "Clicked " & title, 5000)
   End Sub

For what I understand the framework assumes that an image (part of an Array Component) is placed directly on the page, never inside a Container.
Correct me if I'm wrong and eventually show if (or when) we will be able to use images the way coded as above.

TIA

udg

alwaysbusy · Oct 3, 2016

The image is an array component on the container, not the page. (1 container, multiple images on that container and the images are added as array components).

So you have to take the container first and then the image component from this container:

B4X:

Sub myimg_clicked(Target As String)
    Log(Target)
    Dim cont1 As ABMContainer = page.Component("cont1")
    Dim img As ABMImage = cont1.Component(Target)
    Dim title As String = img.Caption
    page.ShowToast("toast1", "toastgreen", "Clicked " & title, 5000)
End Sub

udg · Oct 3, 2016

So you have to take the container first and then the image component from this container:

Thank you Alain.
That's exactly what i tried to accomplish but I erroneously wrote it as
Dim img As ABMImage = page.Component("cont1").Component(Target)

udg

B4J Question [ABMaterial] Solved: image events

udg

Expert

alwaysbusy

Expert

udg

Expert

alwaysbusy

Expert

alwaysbusy

Expert

udg

Expert

CGP

Member

alwaysbusy

Expert

CGP

Member

alwaysbusy

Expert

CGP

Member

Harris

Expert

udg

Expert

alwaysbusy

Expert

udg

Expert

B4J Question [ABMaterial] Solved: image events

Expert

Expert

Expert

Expert

Expert

Expert

Member

Expert

Member

Expert

Member

Expert

Expert

Expert

Expert

Privacy & Transparency

Privacy & Transparency