B4J Question [ABMATERIAL] ABMSmartWizard in ABMModalSheet

[clarionero]

Hi. It's posible use the ABMSmartWizard component in a ABMModalSheet?

I want use it in a registration form. In the same page i have a Slider component and if i declare the ABMSmartWizard then the images in Slider aren't showed. Only the first image is showed. The second and followers images aren't visible.

When i open the ABMModalSheet then the Wizard structure is showed, but the content are empty, and the component is loading forever (blue rotating arrows).

Thanks


Rubén

 

[alwaysbusy]

Which version of ABM? Open it up in Chrome, press F12 to open the developer utils and go to the console and networks tabs. Press Ctrl+F5 See if there are any errors. I suspect there will be some, as this looks like not all javascript libraries are loaded (or one failes), hence all javascript execution for the slider stops.

Try adding the page.Needs... variable for the SmartWizard in the BuildPage() method and see if it is any different.

 

[clarionero]

Hi Alain. Thank you for your response.

I'm using the last ABM version (3.20). The content of copymewithjar.needs file seem correct:

ABMCacheSystem:2.0
ABMShared:NeedsEditor;NeedsChart;NeedsTable;NeedsSortingTable;NeedsCodeLabel;NeedsInput;NeedsTextArea;NeedsMask;NeedsOAuth;NeedsSmartWizard;NeedsCheckbox
Util:NeedsBadge;NeedsCards
ABMApplication:NeedsInput;NeedsTextArea;NeedsMask;NeedsOAuth;NeedsSmartWizard;NeedsCheckbox
BancoImagenes:NeedsImageSlider;NeedsInput;NeedsTextArea;NeedsMask
Fotografos:NeedsImageSlider;NeedsInput;NeedsTextArea;NeedsMask
Inicio:NeedsImageSlider;NeedsInput;NeedsTextArea;NeedsMask;NeedsOAuth;NeedsSmartWizard;NeedsCheckbox
Inicio_Simple:NeedsImageSlider;NeedsInput;NeedsTextArea;NeedsMask
Modelos:NeedsImageSlider;NeedsInput;NeedsTextArea;NeedsMask
OtrosProfesionales:NeedsImageSlider;NeedsInput;NeedsTextArea;NeedsMask
PageFirebaseEjemplo:NeedsCodeLabel
PageFirebaseTest:NeedsInput;NeedsTextArea;NeedsMask;NeedsUpload
Paises:NeedsInput;NeedsTextArea;NeedsMask;NeedsPagination;NeedsTable;NeedsSortingTable;NeedsActionButton
ThemesPage:NeedsCodeLabel;NeedsTable;NeedsSortingTable

The only diference of my code and your demo is i'm trying put the Smartwizard in a ABMModalSheet located in ABMShared. I use this ABMModalSheet from Inicio page.

I will try locate errors in Chrome like you recomend.

Thank you.

Rubén

 

[clarionero]

Hi Alain. I can't see errors when i execute the page with the issue. I just send you a mail with a sample project with the problem.

Thank you

Rubén

 

[alwaysbusy]

@clarionero Thank you for the sample project! The good news is I can reproduce it over here I'll let you know if I find something...

 

[clarionero]

Thank you Alain for your great and profesional work.


Rubén

 

[alwaysbusy]

I've found why the Wizard has the spinning blue circles: It appears you MUST create the step/finished events, as they are used when loading too.

As for why the slider does so weird, I have to dig into the javascript library source codes to figure that one out.

Sub wizA_NavigationToStep(fromReturnName As String, toReturnName As String)
   Dim modal As ABMModalSheet = page.ModalSheet("NuevoUsuario")  '<--- Careful in your case you need to get the modalsheet first   
   Dim wizA As ABMSmartWizard = modal.Content.Component("wizA") '<--- and then from the modalsheet, grab the wizard
   If fromReturnName.CompareTo(toReturnName) < 0 Then ' to the right   
     Select Case fromReturnName   
       Case "stepA1"
         Dim cont As ABMContainer = wizA.GetStep("StepA1")
         Dim emailinp As ABMInput = cont.Component("StepA1ContEmailInp")
         If emailinp.Text.IndexOf("@") = -1 Then
           wizA.SetStepState("stepA1", ABM.SMARTWIZARD_STATE_ERROR)     
           wizA.NavigateCancel(toReturnName) ' important                   
         Else
           SetWizardStepStates(wizA, toReturnName, "A")
           wizA.NavigateGoto(toReturnName) ' important
         End If
       Case "stepA2"
         Dim cont As ABMContainer = wizA.GetStep("StepA2")
         Dim nameinp As ABMInput = cont.Component("StepA2ContNameInp")
         If nameinp.Text = "" Then
           wizA.SetStepState("stepA2", ABM.SMARTWIZARD_STATE_ERROR)               
           wizA.NavigateCancel(toReturnName) ' important                   
         Else
           SetWizardStepStates(wizA, toReturnName, "A")
           wizA.NavigateGoto(toReturnName) ' important
         End If
       Case "stepA3"
         Dim cont As ABMContainer = wizA.GetStep("StepA3")
         Dim addressinp As ABMInput = cont.Component("StepA3ContAddressInp")
         If addressinp.Text = "" Then
           wizA.SetStepState("stepA3", ABM.SMARTWIZARD_STATE_ERROR)     
           wizA.NavigateCancel(toReturnName) ' important                   
         Else
           SetWizardStepStates(wizA, toReturnName, "A")
           wizA.NavigateGoto(toReturnName) ' important
         End If
       Case "stepA4"
         ' handled in NavigationFinished
     End Select
   Else If fromReturnName.CompareTo(toReturnName) > 0 Then ' to the left
     SetWizardStepStates(wizA, toReturnName, "A")
     wizA.NavigateGoto(toReturnName) ' important
   Else
     wizA.NavigateGoto(toReturnName) ' important
   End If
   wizA.Refresh ' important
End Sub

Sub wizA_NavigationFinished(ReturnName As String) 
  Dim modal As ABMModalSheet = page.ModalSheet("NuevoUsuario")  '<--- Careful in your case you need to get the modalsheet first   
  Dim wizA As ABMSmartWizard = modal.Content.Component("wizA") '<--- and then from the modalsheet, grab the wizard

   Dim cont As ABMContainer = wizA.GetStep("StepA4")
   Dim chk As ABMCheckbox = cont.Component("StepA4ContChk")
   If chk.State = False Then
     wizA.SetStepState("stepA4", ABM.SMARTWIZARD_STATE_ERROR)     
     wizA.NavigateCancel(ReturnName) ' important     
   Else
     ' reset the wizard   
     cont = wizA.GetStep("StepA1")
     Dim emailinp As ABMInput = cont.Component("StepA1ContEmailInp")
     emailinp.Text = ""
     emailinp.Refresh
     cont = wizA.GetStep("StepA2")
     Dim nameinp As ABMInput = cont.Component("StepA2ContNameInp")
     nameinp.Text = ""
     nameinp.Refresh
     cont = wizA.GetStep("StepA3")
     Dim addressinp As ABMInput = cont.Component("StepA3ContAddressInp")
     addressinp.Text = ""
     addressinp.Refresh
     chk.State = False
     chk.Refresh
     SetWizardStepStates(wizA, "stepA1", "A")
     wizA.NavigateGoto("stepA1") ' important
   End If
   wizA.Refresh ' important
End Sub

 

[alwaysbusy]

I don't know why, but it is purely the ABMImageSlider which causes all the trouble (I've never been happy with the implementation done by Materialize CSS, so in the future I may completely rewrite that one myself).

Also, the ABMImageSlider doesn't play well with the section bullets. Maybe create a seperate row for it, only 10 width:

page.AddRowsM(NumAreas*NumLineasArea,False,0,0, "").AddCellsOSMP(1,0,0,0,1,1,1,2,2,10,10,"").AddCellsOSMP(1,0,0,0,10,10,10,2,2,10,10,"")
page.AddRowsM(NumAreas*NumLineasArea,False,0,0, "").AddCells12MP(12,2,2,10,10,"")
page.BuildGrid

As a side note, are you aware that your AddRowM() method adds 5 rows, each with 12 cells with a width of 12 blocks? Maybe it is a typo? And it should be:

page.AddRowsM(NumAreas*NumLineasArea,False,0,0, "").AddCells12MP(1,2,2,10,10,"")

You can solve your problem for now by adding the ABMImageSlider in ConnectPage(), AFTER page.RestoreNavigationBarPosition:

public Sub ConnectPage()
   '   connecting the navigation bar
   ABMShared.ConnectNavigationBar(page)
   
   ' add a modal sheet template to enter contact information
   page.AddModalSheetTemplate(ABMShared.ConnectLoginSheet(page))
   page.AddModalSheetTemplate(ABMShared.ConnectWrongInputModalSheet(page))
   page.AddModalSheetTemplate(ABMShared.ConnectUsuarioSheet(page))
   page.AddModalSheetTemplate(ABMShared.BuildNuevoUsuarioSheet(page))
     
   ' refresh the page
   page.Refresh
   ' Tell the browser we finished loading
   page.FinishedLoading
   ' restoring the navigation bar position
   page.RestoreNavigationBarPosition
   
   '   create slider
   Dim slider As ABMImageSlider
   slider.Initialize(page, "slider", "myslider")
   
   '   add images
   slider.AddSlideImage("../images/about1.png", "","", ABM.IMAGESLIDER_RIGHT)
   slider.AddSlideImage("../images/about2.png", "","", ABM.IMAGESLIDER_RIGHT)
   slider.AddSlideImage("../images/about3.png", "","", ABM.IMAGESLIDER_RIGHT)
   slider.AddSlideImage("../images/about4.png", "","", ABM.IMAGESLIDER_CENTER)
   slider.AddSlideImage("../images/about5.png", "","", ABM.IMAGESLIDER_RIGHT)
   slider.AddSlideImage("../images/about6.png", "","", ABM.IMAGESLIDER_RIGHT)
   slider.AddSlideImage("../images/about7.png", "","", ABM.IMAGESLIDER_RIGHT)
     
   page.Cell(1,2).AddComponent(slider)
   
   page.Refresh
End Sub

 

[clarionero]

You are right, like ever. I had put this code in ABMApplication. Wrong place. Puting it in page code it works right.

When i want use the same common Navitation Bar Top Item option in various pages, how can i reuse the same events functions in diferent pages? i must repeat the code in each page or is posible use a common place? I have put the common ABMModalSheet in ABMShared but currently the events must repeat in each page.

Thank you very much and sorry for waste your valious time.

Rubén

 

[clarionero]

I just see you response about Slider. Thank you. It's very useful. The issue only ocurr when i use the ABMSmartWizard control. If disable it then the slider works.
The only issue i saw in it is using it in phones. When i make a manual image change, sometimes the image stop and doesn't change, showing then two images in slider.

I will try your code.

Thank you very much.

Rubén

 

[clarionero]

Hi Alain. Yo are right. With your changes for the slider controls it is visible again

Thank you

Rubén