B4J Library jWebImageView

Hi,

I found that the default ImageView class was not flexible enough, so I wrote my own ImageView class, based on webView.

To use it, just pass an AnchorPane to the first param of initialize:

Sub Process_Globals
    Private apWiv As AnchorPane
    Private iv1 As WebImageView
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    apWiv.Initialize("")

    iv1.Initialize(apWiv, Me, "iv")
    iv1.SetImage(File.Combine(File.DirAssets, "01.jpg"))
    iv1.BackColor = "Black" 'css color
    iv1.ImageFit = "CONTAIN"
    iv1.Tag = "WebImageView 1"
End Sub

Sub iv_MouseClicked(EventData As MouseEvent)
    Dim iv As WebImageView = Sender
    Log($"Clicked Tag: ${iv.Tag}"$)
End Sub

Basically it just loads images in a webview, but gives more flexibility on those points:

• Async loading of images, because WebView loads it's content on a separate thread. (I have a list of images to load, and loading one by one with imageView was too long)
• Images can be anchored
• Images can be rescaled
• Load images from URLs
• Set the Fitting of images in the view: Contain, Fill, Cover, None
• Set the background color in case of letterboxing
• Can write additional css.

With this post I attached the source code, so you can modify it as you need.

Note:
Don't forget to call the method "LoadImageDelayed" every time you modify something to reload the Html.

Note:
To fully test this library, try resizing the window and see how the different fit values affect the image.

Note:
the methods "ImagePosition" and "ImageOrientation" don't work at the moment. If someone can help figuring out why, that would be awesome.

Enjoy.

 

[Erel]

With the move to the internal designer, most B4J developers will never use an AnchorPane.

This is a good case to use the new custom view features introduced in v4.20. This will allow adding this control with the designer, and more importantly it will make it possible to use anchors (and other features) like done with any built-in control.

 

[jmon]

Ok I will do that. I haven't tried the new Custom View feature.

 

[Erel]

The most important code to add is:

@Override
   public void DesignerCreateView(final ConcretePaneWrapper base, LabelWrapper label,
       Map args) {
     base.AddNode([add the WebView], 0, 0, base.getWidth(), base.getHeight());
     new PaneWrapper.ResizeEventManager(base.getObject(), null, new Runnable() {
      
       @Override
       public void run() {
          NodeWrapper.SetSize([web view], base.getWidth(), base.getHeight())
       }
     });
   }
   @Hide
   @Override
   public void _initialize(BA ba, Object arg1, String EventName) {
     'initialize the object or call the current initialize method
   }