B4J Question ABMaterial - ABMImageSlider does not work together with ABMCalendar

[Javier Lovay]

I have a problem when inserting an ABMImageSlider component together with ABMCalendar, if they are together, ABMImageSlider does not show any image and appears in a gray rectangle. On the contrary, without ABMCalendar, ABMImageSlider works perfectly. How can I solve that? I need them to be working together. Greetings and thanks.

 ' Crear control deslizante
Control deslizante de atenuación como ABMImageSlider
slider. Inicializar(página, "slider", "slider300")
 
' agregar imágenes
slider. AddSlideImage(".. /images/slider1.jpg","This is our big Title!", "Here's a small slogan.", ABM. IMAGESLIDER_LEFT)
slider. AddSlideImage(".. /images/slider2.jpg","This is our big Title!", "Here's a small slogan.", ABM. IMAGESLIDER_CENTER)
slider. AddSlideImage(".. /images/slider3.jpg","This Is our big Title!", "Here's a small slogan.", ABM. IMAGESLIDER_RIGHT)
slider. AddSlideImage(".. /images/slider4.jpg","This is our big Title!", "Here's a small slogan.", ABM. IMAGESLIDER_CENTER)
 
página. Celda(2,1). AddComponent(control deslizante)

'    Dim calendario As ABMCalendar
' DateTime.DateFormat = "aaaa-MM-dd"
' calendario. Initialize(page, "calendario", DateTime.Date(DateTime.Now), 0, "es", ABM. CALENDAR_DEFAULTVIEW_WEEK, "calendario")
' DateTime.DateFormat = "dd/MM/aaaa"
' calendario. Editable = Verdadero
' calendario. IsPrintable = Verdadero
' calendario. ChangeEventsEditable(True)
' página. Celda(2,1). AddComponent(calendario)
[/CÓDIGO] [/CÓDIGO] [/CÓDIGO]

 

[alwaysbusy]

I've identified the problem. It looks like the calendar overwrites the slider method attached to the jQuery element. Unfortunately I can not release a new version of ABM at this time as it has already been converted for Jetty 4.00, which an official final version has not been released yet.

A temporary workaround could be this:

Open the file 'core.4.96.min.js' in the www/js/ folder. Do a find for (only one occurence):

f.fn.slider

And replace it by:

f.fn.abmslider

Save the file.

In your code AFTER you've added both components AND did the page.refresh, add this snippet:

' adding your 2 components
...
' refresh the page
page.Refresh    
' Tell the browser we finished loading
page.FinishedLoading
' restoring the navigation bar position
page.RestoreNavigationBarPosition
...
' --------------- add this -------------------------
Dim Script As String = $"$('#slider').find('li').removeClass('active');
$('#slider').find('.indicator-item').removeClass('active');
$('#slider').find('.indicators').remove();
$('#slider').abmslider({full_width: true ,indicators: true ,height: 400 ,transition: 500 ,interval: 6000});"$

page.ws.Eval(Script, Null)
page.ws.Flush
' ----------------------------------------

Alwaysbusy

 

[Javier Lovay]

Muchas gracias Alain por su respuesta tan rápida y excelente solución. ¡¡¡¡¡¡ERES EL MEJOR!!!!!!

 

[Javier Lovay]

Alain, cuando los componentes están dentro de un ABMContainer la solución propuesta no funciona. Seguro que encuentras algún consejo para darme. Muchas gracias.

 

[Javier Lovay]

Alain, cuando los componentes están dentro de un ABMContainer la solución propuesta no funciona. Seguro que encuentras algún consejo para darme. Muchas gracias.

public Sub ConnectPage()
'NUEVO
ABMShared.ConnectNavigationBar(página)
    
Dim cont_calendario como ABMContainer
cont_calendario. Initialize(página, "cont_calendario", "")
cont_calendario. MarginLeft = "-70px"
cont_calendario. MarginRight = "-70px"
página. Celda(1,1). AddComponent(cont_calendario)
cont_calendario. AddRowsM(1,True,25,0,""). AddCells12(1,"")
cont_calendario. BuildGrid ' ¡IMPORTANTE!

Control deslizante de atenuación como ABMImageSlider
slider. Initialize(página, "slider", "myslider")
slider. AddSlideImage(".. /images/about1.png", "No se requiere conocimiento de HTML o CSS","Over 35 Material controls!", ABM. IMAGESLIDER_RIGHT)
slider. AddSlideImage(".. /images/about2.png", "All controlable with pure B4J code","Over 35 Material controls!", ABM. IMAGESLIDER_RIGHT)
slider. AddSlideImage(".. /images/about3.png", "Los controles están animados",¡Más de 35 controles de material!, ABM. IMAGESLIDER_RIGHT)
slider. AddSlideImage(".. /images/about4.png", "Interactuar con los controles","Over 35 Material controls!", ABM. IMAGESLIDER_CENTER)
slider. AddSlideImage(".. /images/about5.png", "Helpers create effects like Parallax","Over 35 Material controls!", ABM. IMAGESLIDER_RIGHT)
slider. AddSlideImage(".. /images/about6.png", "Controles de aspecto moderno",¡Más de 35 controles de materiales!, ABM. IMAGESLIDER_RIGHT)
slider. AddSlideImage(".. /images/about7.png", "Advanced easy to implement upload files","Over 35 Material controls!", ABM. IMAGESLIDER_RIGHT)
slider. AddSlideImage(".. /images/about8.png", "Crea tus propios controles con el lienzo","Over 35 Material controls!", ABM. IMAGESLIDER_CENTER)
cont_calendario. Celda(1,1). AddComponent(control deslizante)
cont_calendario. Celda(1,1). AddComponent(control deslizante)
        
    Dim calendario As ABMCalendar
DateTime.DateFormat = "aaaa-MM-dd"
calendario. Initialize(page, "calendario", DateTime.Date(DateTime.Now), 0, "es", ABM. CALENDAR_DEFAULTVIEW_WEEK, "calendario")
DateTime.DateFormat = "dd/MM/aaaa"
calendario. Editable = Verdadero
calendario. IsPrintable = Verdadero
calendario. ChangeEventsEditable(True)
cont_calendario. Celda(1,1). AddComponent(calendario)
    
' agregue también los componentes al pie de página
ABMShared.ConnectFooterFixed(página)
        
página. ¡Refrescar ' IMPORTANTE!
' NUEVO, porque usamos ShowLoaderType=ABM. LOADER_TYPE_MANUAL
página. AcabadoCarga 'IMPORTANTE
    
    myToastId = myToastId + 1
página. ShowToast("toast" & myToastId, "toastorange", "ABMaterial" & ABM. Versión & " (" & ABM.versionName & ")!", 5000, False)
    
página. RestoreNavigationBarPosition
    
    Dim Script As String = $"$('#cont_calendario-slider').find('li').removeClass('active');
$('#cont_calendario-slider').find('.indicator-item').removeClass('active');
$('#cont_calendario-slider').find('.indicators').remove();
$('#cont_calendario-slider').abmslider({full_width: true ,indicators: true ,height: 400 ,transition: 500 ,interval: 6000});" $
    page.ws.Eval(Script, Null)
    page.ws.Flush
Fin sub[/CÓDIGO]
[/QUOTE]

 

[alwaysbusy]

Can we continue in English as I don't speak Spanish. Also there is something wrong with the code you post as it seems to be translated to Spanish too which makes it pretty unusable for me to test.

If something is in a container, you do indeed have to change the ID in the snippet. This is because ABM makes sure an ID in html is unique (it has to be) and with nested tags (like a label in a container) it does it by concatenating the parent IDs + (optional) Array + label ID.

Here is a helper method that uses one of my Debug methods that can be helpful to find the real ID of a component in the browser by code:

public Sub GetRealID(ID As String) As String
    Dim spl() As String = Regex.Split(",", ID)
    Return spl(0).SubString2(8,spl(0).Length-1) & spl(1).SubString2(11,spl(1).Length-1) & spl(2).SubString2(4,spl(2).Length-1)
End Sub

Usage:

Log(GetRealID(btn2.GetDebugID)) ' <--- converts the debug ID to the real ID

It is something you normally don't have to worry about, as ABM will take care of it. But in case you manipulate the html outside of ABM (e.g. with a javascript), you have to do this yourself.

Alwaysbusy

 

[Javier Lovay]

Sorry, I translated the text to English, but I have Chrome's automatic translation activated and it returned it to Spanish. Your solution works perfect. Thank you very much for your help.