B4J Library [ABMaterial]: MashCarousel

Hi y'all

This is a carousel from the materialize framework that I've been trying out, source code included.

Known Stuff: This only works with the inclusion of...

page.AddExtraCSSFile("custom/materialize.css")
    page.AddExtraJavaScriptFile("custom/materialize.js")

With that its possible that your ABMaterial WebApp might just break as ABMaterial uses an 'adjusted' version of materialize, so be warned and USE AT OWN RISK.

mashc1.Initialize(page,"mashc1",False)
    mashc1.AddSlide("","#one!","../images/1.jpg")
    mashc1.AddSlide("","#two!","../images/2.jpg")
    mashc1.AddSlide("","#three!","../images/3.jpg")
    mashc1.AddSlide("","#four!","../images/4.jpg")
    mashc1.AddSlide("","#five!","../images/5.jpg")
    page.Cell(2,1).addcomponent(mashc1.ABMcomp)

 

[Cableguy]

Does it open a selected image? That would make it a complete solution (or just return an index upon an image click)

 

[Mashiane]

Does it open a selected image? That would make it a complete solution (or just return an index upon an image click)

Would try and add that and update.

 

[Mashiane]

By just replacing False to True in the initialization call, the carousel displays like this...

 

[Cableguy]

Still, one could want to use the carrousel as an image picker

 

[Mashiane]

A new click event has been added to version 1.01 of MashPlugIns to address image selection for the carousel.

This only works when...

mashc1.Initialize(page,"mashc1",False)
    mashc1.AddSlide("img1","#one!","../images/1.jpg")
    mashc1.AddSlide("img2","#two!","../images/2.jpg")
    mashc1.AddSlide("img3","#three!","../images/3.jpg")
    mashc1.AddSlide("img3","#four!","../images/4.jpg")
    mashc1.AddSlide("img5","#five!","../images/5.jpg")
    page.Cell(2,1).addcomponent(mashc1.ABMcomp)

and will return the id e.g. "img1", you can pass that the image path e.g. 1.jpg if you want to return the image name or use a map to link ids with images..

Sub mashc1_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

NB: The use of this component requires the reloading of the materialcss js and css files as you need to include MashPlugIns.NeedsMaterialize(page) in BuildPage. THIS IS NOT RECOMMENDED. I'm sure I will find a suitable carousel and replace this one soon enough.

 

[JOTHA]

Hello Mashiane,

MashPlugIns

i want to try your MashCarousel
but i could not find the MashPlugIns anywhere. The link is dead.

Do you have any working example of your MashCarousel?

 

[Mashiane]

@JOTHA Thanks for showing interest in MashPlugIns. For your convenience, here is the lib

In relation to MashCarousel, please note that I DO NOT recommend using it as adding the additional css and js files will DEFINITELY conflict with ABM. This is due to having to include the materialize css and js files TWICE just to make the carousel work. ABM already comes out with an adjusted version of these resources.

Rather try and find a carousel from the interweb that you can build as a custom element with as my experiments with the carousel broke my apps.

Ta!

 

[JOTHA]

Thank you Mashiane, but i prefer another solution ... but it is nice work from your side!