B4J Tutorial [ABMaterial]: Exploring Creative Tim

Hi there

I found a material framework called Creative Tim, impressive, thought I could use some of the components for my upcoming webapp. Wishfully, the stats dashboards could not be as close as to theirs. I understand this could be a conflict within the css cards etc...

 

[Mashiane]

Reproduction:

In your Class Globals

Dim CTCard As CreativeTimCardStats
    Dim CTCard1 As CreativeTimCardStats
    Dim CTCard2 As CreativeTimCardStats
    Dim CTCard3 As CreativeTimCardStats
Dim ctNP As CreativeTimNavPills
    Dim ctNP1 As CreativeTimNavPills
    Dim lbl1 As CreativeTimLabel
    Dim lbl2 As CreativeTimLabel
    Dim lbl3 As CreativeTimLabel
    Dim lbl4 As CreativeTimLabel
    Dim lbl5 As CreativeTimLabel
    Dim lbl6 As CreativeTimLabel

Add the stats card in ConnectPage

ABMShared.AddSubHeader(page,"l1","Statistics Cards",1,1)
    CTCard.Initialize(page,"stats1", ABM.COLOR_GREEN, ABM.intensity_normal ,"mdi-store","Revenue","R34,245")
    CTCard.SetFooter("mdi-date_range","Last 24 Hours",CTCard.EnumTheme.none)
    page.Cell(2,1).AddComponent(CTCard.ABMComp)
   
   
    CTCard1.Initialize(page,"stats2",ABM.COLOR_ORANGE,ABM.intensity_normal,"mdi-content_copy","Used Space","49/50<small>GB</small>")
    CTCard1.SetFooter("mdi-warning","Get More Space",CTCard.EnumTheme.danger)
    CTCard1.SetFooterURL("#pablo")
    page.Cell(2,2).AddComponent(CTCard1.ABMComp)
   
    CTCard2.Initialize(page,"stats3", ABM.color_red,ABM.intensity_normal,"mdi-info_outline","Fixed Issues","75")
    CTCard2.SetFooter("mdi-local_offer","Tracked from Github",CTCard.EnumTheme.none)
    page.Cell(2,3).AddComponent(CTCard2.ABMComp)
   
    CTCard3.Initialize(page,"stats4",ABM.color_blue,ABM.intensity_normal,"fa-twitter","Followers","+245")
    CTCard3.SetFooter("mdi-update","Just Updated",CTCard.EnumTheme.none)
    page.Cell(2,4).AddComponent(CTCard3.ABMComp)
   
    'add a creative tim card: charts
    CTCard4.Initialize(page,"dailySalesChart",ABM.color_green,ABM.intensity_normal,"Daily Sales","55% increase in today's sales.")
    CTCard4.SetFooter("mdi-access_time","Updated 4 minutes ago",CTCard.EnumTheme.success)
    CTCard4.SetCategoryIcon("fa fa-long-arrow-up")

Add the navpills and labels.

ABMShared.AddSubHeader(page,"l1","NavPills",3,1)
    'add creative tim navpills
    ctNP.Initialize(page,"np",True)
    ctNP.SetTheme(ctNP.EnumTheme.primary)
    ctNP.SetBorder("grey",1,2,"solid")
    ctNP.AddPill("dashboard",False,"mdi-dashboard", "Dashboard","#dashboard")
    ctNP.AddPill("schedule", True, "mdi-schedule", "Schedule","#schedule")
    ctNP.AddPill("tasks",False,"mdi-list","Tasks","#tasks")
    page.Cell(4,1).AddComponent(ctNP.ABMComp)
   
    ctNP1.Initialize(page,"np1",False)
    ctNP1.SetTheme(ctNP1.EnumTheme.danger)
    ctNP1.SetBorder("grey",1,2,"solid")
    ctNP1.AddPill("dashboard1",False,"mdi-dashboard", "Dashboard","#dashboard1")
    ctNP1.AddPill("schedule1", True, "mdi-schedule", "Schedule","#schedule1")
    ctNP1.AddPill("tasks1",False,"mdi-list","Tasks","#tasks1")
    ctNP1.AddPill("dashboard2",False,"mdi-dashboard", "Dashboard","#dashboard2")
    ctNP1.AddPill("schedule2", True, "mdi-schedule", "Schedule","#schedule2")
    ctNP1.AddPill("tasks2",False,"mdi-list","Tasks","#tasks2")
    page.Cell(4,2).AddComponent(ctNP1.ABMComp)
   
    'labels
    ABMShared.AddSubHeader(page,"l5","Playing with Labels",5,1)
    lbl1.Initialize(page,"lbl1","default","Defaut")
    lbl2.Initialize(page,"lbl2","primary","Primary")
    lbl3.Initialize(page,"lbl3","success","Success")
    lbl4.Initialize(page,"lbl4","info","Info")
    lbl5.Initialize(page,"lbl5","warning","Warning")
    lbl6.Initialize(page,"lbl6","danger","Danger")
   
    page.Cell(5,1).AddComponent(lbl1.ABMComp)
    page.Cell(5,1).AddComponent(lbl2.ABMComp)
    page.Cell(5,1).AddComponent(lbl3.ABMComp)
    page.Cell(5,1).AddComponent(lbl4.ABMComp)
    page.Cell(5,1).AddComponent(lbl5.ABMComp)
    page.Cell(5,1).AddComponent(lbl6.ABMComp)

By default the navpills do not have a border. I added that for just a nicer appearance. The labels here anyway are not so relevant.. I tried to be smart here and use the ABMColors and ABMIntensity constants so that these got converted to the proper code, will experiment some more..

 

[Mashiane]

Here are the components...

Happy coding...

Known Issue: As these components use cards, the headers of the cards here as compared to materialcss cards are cut off and don't show as per Creative Tim ones. I thought I could achieve the same look and feel, dololo.

The external dependencies are..

page.AddExtrajavascriptfile("custom/bootstrap.min.js")
    page.AddExtraJavaScriptFile("custom/material.min.js")
    page.AddExtraJavaScriptFile("custom/material-dashboard.js")
    page.AddExtraCSSFile("custom/bootstrap.min.css")
    page.AddExtraCSSFile("custom/material-dashboard.css")

whether this will cause conflict with other ABMaterial components has not been tested as yet with the exception of the cards as mentioned.