B4J Library [ABMaterial] New component ABMCustomCard in 2.01

ABMCustomCard allows you to build revealing cards using all kind of other ABMComponents.

Here is an example where on the front we have a ABMChart, an ABMLabel with flowText as title and some custom buttons. When revealed, we have an ABMEditor.

Dim card As ABMCustomCard
card.Initialize(page, "custcard", "")
   
' create a line chart
Dim chart1 As ABMChart
chart1.Initialize(page, "chart1", ABM.CHART_TYPELINE, ABM.CHART_RATIO_GOLDENSECTION, "chart1theme")
     
' add the labels
chart1.AddLabels(Array As String("Mon", "The", "Wed", "Thu", "Fri", "Sat", "Sun"))
' set some options
chart1.OptionsLine.FullWidth=True
chart1.OptionsLine.ChartPaddingRight=60 ' because we set fullwidth, we have to adjust so the final label also fits
chart1.OptionsLine.Serie(ABM.CHART_SERIEINDEX_A).LineSmooth = ABM.CHART_LINESMOOTH_NONE
chart1.OptionsLine.Serie(ABM.CHART_SERIEINDEX_C).LineSmooth = ABM.CHART_LINESMOOTH_SIMPLE
chart1.OptionsLine.Serie(ABM.CHART_SERIEINDEX_C).ShowArea = True
chart1.AddPluginDefinition("Chartist.plugins.ctPointLabels({textAnchor: 'middle'})")
   
' add some series   
Dim SerieA As ABMChartSerie
SerieA.InitializeForLine(ABM.CHART_SERIEINDEX_A)
SerieA.SetValues(Array As Int(30,50,70,80,ABM.CHART_NULLVALUE,140,170))
chart1.AddSerie(SerieA)
   
Dim SerieC As ABMChartSerie
SerieC.InitializeForLine(ABM.CHART_SERIEINDEX_C)
SerieC.SetValues(Array As Int(100,120,180,150,190,100,70))
chart1.AddSerie(SerieC)
   
' add the chart to the top part of the card
card.SetFrontTopComponent(chart1)

' add a label   
Dim FrontTitle As ABMLabel
FrontTitle.Initialize(page, "fronttitle", "A TITLE USING TEXTFLOW{BR}With some sub text", ABM.SIZE_SPAN, True, "")
FrontTitle.IsFlowText = True
' add the label to the title part of the card
card.SetFrontTitleComponent(FrontTitle)
   
' add a editor
Dim back As ABMEditor
back.Initialize(page, "editor", True, True, "editor")
back.SetHTML("<div>Alain is aan het testen</div>")
' add the editor to the 'back' of the card
card.SetBackComponent(back)

' make some buttons as actions   
Dim btn2 As ABMButton
btn2.InitializeRaised(page, "btn2", "fa fa-home", ABM.ICONALIGN_LEFT, "BUTTON", "bluegrey")
card.AddAction(btn2)
   
Dim btn3 As ABMButton
btn3.InitializeRaised(page, "btn3", "mdi-image-palette", ABM.ICONALIGN_RIGHT, "BUTTON", "bluegrey")
card.AddAction(btn3)

' add the card to the page   
page.Cell(2,1).AddComponent(card)

Alwaysbusy

 

[johnerikson]

I will present photos with their text. I saw the idea of making own cards for various presentations "Customcard". I have made a simple card with picture and a title, and a button. The back should have an editor just like the example above.

However, I have encountered a few problems!

Editor window on the back does not appear and thus no text either.

Since I'm relatively small gifts cards on the pages, I have to be able to identify which card/photo/text the user referred to. The event, from the picture works but does not show what card/picture clicked on unless I have clicked subs for all cards, which I did not know how many.

The same applies to button!

I wonder if CustomCard is intended for a small number of cards that are used at the same time, or am I doing something wrong?

Why can´t I see and use the Editor on backside?

Sub BuildCustCard (sId As String, sImage As String, sTitle As String, sText As String, iCell As Int, iCol As Int)
   
    Dim card As ABMCustomCard
    card.Initialize(page, "custcard", "")  
      
    ' add the image to the top part of the card
    Dim Image As ABMImage
    Image.Initialize(page, sId, "../images/" & sImage,1)
    card.SetFrontTopComponent(Image)

    ' add a label  
    Dim FrontTitle As ABMLabel
    FrontTitle.Initialize(page,  "fronttitle", sTitle, ABM.SIZE_H6, True, "")
       
    ' add the label to the title part of the card
    card.SetFrontTitleComponent(FrontTitle)

    ' add a editor. Doesn´t work !!!!!!!!!!!!!!!!
    Dim back As ABMEditor
    back.Initialize(page, "editor",  True, True, "")
    back.SetHTML("<div>" & sText & "</div>")
    ' add the editor to the 'back' of the card
    card.SetBackComponent(back)

    ' make some button as actions  
    Dim btn2 As ABMButton
    btn2.InitializeRaised(page, "btn2", "fa fa-home", ABM.ICONALIGN_LEFT, "BUTTON", "bluegrey")
    card.AddAction(btn2)

    ' add the card to the page  
    page.Cell(iCell,iCol).AddComponent(card)
End Sub


Sub image_clicked (target As String) 'work on one card or make subs for each image, I don´t know how many
    Log (target)
End Sub

Sub custcard_clicked (target As String) 'Doesn´t work
    Log (target)   
End Sub
Sub btn2_clicked (Target As String) ' Work but I can´t identify  the card
    Log (Target )   
End Sub

 

[alwaysbusy]

ABMCustom card has indeed never been intended to be used in this way (which doesn't mean I can't make it so). It was meant as a being a unique object e.g. for on a dashboard with completely different custom cards. Note that 'custcard_clicked' is an event that does not exist on a ABMCustomCard.

Editor is going to be a very tricky one, as its id NEEDS to be unique (internal it is an iFrame).

I'm now already in the middle of the next version of ABMaterial but contact me through mail, I'll see what we can come up with.