HEllo,
Yesterday I started working on this great tool thanks to alwaysbusy. I have a problem. I created my first page modified the left side menu, and added a imageslider to top of my page and there is no problem with that.
Than i tried to add a chart bewlow to the slider but i tried many different things but couldnt manage to add the line chart. ( I am just trying to add 1 chart ) I think maybe i have a problem in my grid building i, I tried many different variations but never saw the chart this is my code. Can you check why are not they showing ? ( i checked the www folder for css and js files they are ok )
Yesterday I started working on this great tool thanks to alwaysbusy. I have a problem. I created my first page modified the left side menu, and added a imageslider to top of my page and there is no problem with that.
Than i tried to add a chart bewlow to the slider but i tried many different things but couldnt manage to add the line chart. ( I am just trying to add 1 chart ) I think maybe i have a problem in my grid building i, I tried many different variations but never saw the chart this is my code. Can you check why are not they showing ? ( i checked the www folder for css and js files they are ok )
B4X:
'Class module
Sub Class_Globals
Private ws As WebSocket 'ignore
' will hold our page information
Public page As ABMPage
' page theme
Private theme As ABMTheme
' to access the constants
Private ABM As ABMaterial 'ignore
' name of the page, must be the same as the class name (case sensitive!)
Public Name As String = "girispage" '<-------------------------------------------------------- IMPORTANT
' will hold the unique browsers window id
Private ABMPageId As String = ""
' your own variables
End Sub
'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize
' build the local structure IMPORTANT!
BuildPage
End Sub
Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
Log("Connected")
ws = WebSocket1
ABMPageId = ABM.GetPageID(page, Name,ws)
Dim session As HttpSession = ABM.GetSession(ws, ABMShared.SessionMaxInactiveIntervalSeconds)
If ABMShared.NeedsAuthorization Then
If session.GetAttribute2("IsAuthorized", "") = "" Then
ABMShared.NavigateToPage(ws, ABMPageId, "../")
Return
End If
End If
ABM.UpdateFromCache(Me, ABMShared.CachedPages, ABMPageId, ws)
If page.ComesFromPageCache Then
' refresh the page
page.Refresh
' because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
page.FinishedLoading
Else
' Prepare the page
page.Prepare
' load the dynamic content
ConnectPage
End If
Log(ABMPageId)
End Sub
Private Sub WebSocket_Disconnected
Log("Disconnected")
End Sub
Sub Page_ParseEvent(Params As Map)
Dim eventName As String = Params.Get("eventname")
Dim eventParams() As String = Regex.Split(",",Params.Get("eventparams"))
If eventName = "beforeunload" Then
Log("preparing for url refresh")
ABM.RemoveMeFromCache(ABMShared.CachedPages, ABMPageId)
Return
End If
If SubExists(Me, eventName) Then
Params.Remove("eventname")
Params.Remove("eventparams")
Select Case Params.Size
Case 0
CallSub(Me, eventName)
Case 1
CallSub2(Me, eventName, Params.Get(eventParams(0)))
Case 2
If Params.get(eventParams(0)) = "abmistable" Then
Dim PassedTables As List = ABM.ProcessTablesFromTargetName(Params.get(eventParams(1)))
CallSub2(Me, eventName, PassedTables)
Else
CallSub3(Me, eventName, Params.Get(eventParams(0)), Params.Get(eventParams(1)))
End If
Case Else
' cannot be called directly, to many param
CallSub2(Me, eventName, Params)
End Select
End If
End Sub
public Sub BuildTheme()
' start with the base theme defined in ABMShared
theme.Initialize("pagetheme")
theme.AddABMTheme(ABMShared.MyTheme)
' add additional themes specific for this page
' add additional themes specific for this page
theme.AddChartTheme("chart1theme")
theme.Chart("chart1theme").Serie(ABM.CHART_SERIEINDEX_C).LinePointStrokeWidthPx=8
theme.Chart("chart1theme").Serie(ABM.CHART_SERIEINDEX_C).LineStrokeWidthPx=5
theme.AddChartTheme("chart2theme")
theme.Chart("chart2theme").ZDepth = ABM.ZDEPTH_1
theme.Chart("chart2theme").BackColor = ABM.COLOR_WHITE
theme.AddChartTheme("chart4theme")
theme.Chart("chart4theme").ZDepth = ABM.ZDEPTH_1
theme.Chart("chart4theme").BackColor = ABM.COLOR_WHITE
theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_A).BarStrokeWidthPx = 25
theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_A).Color = ABM.COLOR_AMBER
theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_B).BarStrokeWidthPx = 25
theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_B).Color = ABM.COLOR_ORANGE
theme.AddChartTheme("chart5theme")
theme.Chart("chart5theme").LabelColor = ABM.COLOR_WHITE
End Sub
public Sub BuildPage()
' initialize the theme
BuildTheme
' initialize this page using our theme
page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
page.ShowLoader=True
page.PageHTMLName = "index.html"
page.PageTitle = "Tahminhane - Ana Sayfa"
page.PageDescription = "Tahminhane Ana Sayfa"
page.PageKeywords = ""
page.PageSiteMapPriority = ""
page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_YEARLY
' we are using a plugin for chartist. Make sure the js is in the www/js/ and the css in the www/css/ folder!
page.AddExtraJavaScriptFile("chartist-plugin-axistitle.min.js")
page.AddExtraJavaScriptFile("chartist-plugin-legend.js")
page.AddExtraJavaScriptFile("chartist-plugin-pointlabels.min.js")
page.AddExtraJavaScriptFile("chartist-plugin-zoom.min.js")
page.AddExtraCSSFile("chartist-plugin-tooltip.css")
page.AddExtraJavaScriptFile("chartist-plugin-tooltip.min.js")
' adding a navigation bar
ABMShared.BuildNavigationBar(page, "Ana Sayfa", "../images/logo.png", "", "Layouts", "")
'page.NavigationBar.AddTopItem("Contact", "", "mdi-action-account-circle", "", False)
' create the page grid
page.AddRows(1,True, "").AddCells12(1,"")
page.AddRows(1,True, "").AddCellsOS(1,0,0,0,12,12,12, "")
page.AddRows(1,True, "").AddCells12(1,"")
page.AddRows(1,True, "").AddCells12(1,"")
page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
End Sub
public Sub ConnectPage()
' your stuff
ABMShared.ConnectNavigationBar(page)
' create slider
Dim slider As ABMImageSlider
slider.Initialize(page, "slider", "slider300")
' add images
slider.AddSlideImage("../images/slider5.jpg","En İyi Basketbol Tahminleri", "Sezonsal Bazda %70 Başarı", 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)
page.Cell(2,1).AddComponent(slider)
' 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 cell
' move one row , first param = 1
page.Cell(4,1).AddComponent(chart1)
page.Refresh ' IMPORTANT
' NEW, because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
page.FinishedLoading 'IMPORTANT
page.ShowToast("toast1", "toastred", "Tahmihane'ye Hoşgeldiniz", 5000)
page.RestoreNavigationBarPosition
End Sub
' clicked on the navigation bar
Sub Page_NavigationbarClicked(Action As String, Value As String)
page.SaveNavigationBarPosition
End Sub
