Cursussen/Courses Codesnippets     Top 
B4A-calendar - Fill the Panel


1. Show month
The panel object (pnl1) has a method called AddView(). With this method you can add the labels. But first lets make a subroutine to show the month and all its components.
In the main window of the IDE you write code in the B4XMainPage tab.
In the Class_Globals subroutine you provide a declaration for the panel. You can do this from the designer window (Tools / Generate Members check pnl1 and click the Generate Members button). This takes care of the initialization of the panel object.
Private pnl1 As Panel
In the B4Xpage_Created subroutine you can add a title to the title bar:
B4XPages.SetTitle(Me,"My Calendar")
And to call the subroutine to show the month you add:
show_month(5,2022)
To test you can just give the subroutine a month integer and a year integer.
Private Sub show_month(mnth As Int, yr As Int)
	Private lblmonth As Label
	lblmonth.Text = mnth & " / " & yr
	pnl1.AddView(lblmonth,0dip,0dip,340dip,50dip)
End Sub
This code throws an exception because the lblmonth label is not initialized:
In the Logs panel of the IDE all the errors appear and you can see what the problem is. So lets add an initialization for the label after the declaration of the label:
lblmonth.Initialize("")
The code editor also gives an explanation of the method and how to use it. Hover with the mouse over the word Initialize and you will see.
The AddView method of the Panel object requires a few arguments:
The first argument indicates which object you want to add to the panel. The next 2 arguments position the object in the panel (dip = display independent pixels) and the last 2 arguments specify the dimensions of the object.
This is how it looks like now:


2. Day names
The next row to add is the day names row. For this you can use a list of day names (or shorter versions of the names):
Private lstdaynames As List
lstdaynames.Initialize
lstdaynames = Array As String("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
And then you loop through them, create a label for the day name, initialize the label, set the text of the label and add the label to the panel.
For i = 1 To 7
	Private lbldayname As Label
	lbldayname.Initialize("")
	lbldayname.Text = lstdaynames.Get(i-1)
	pnl1.AddView(lbldayname,0dip+50dip*(i-1),0dip+50dip,50dip,50dip)
Next
Remember that a list (or array) starts with index 0!
The app now looks like this:


3. Day number labels
The positioning is important. Lets improve that a little.
Declare variables for the positions (first lines of code in the show_month subroutine:
Private leftpos As Int = 0dip
Private toppos As Int = 0dip
Private boxwidth As Int = 50dip
Private boxheight As Int = 50dip
And then change the AddView line:
pnl1.AddView(lbldayname,leftpos+boxwidth*(i-1),toppos+boxheight,boxwidth,boxheight)
The loop variable i is used to calculate the left position. The first time (i-1) = 0 and 0 dips are added. The second time (i-1) = 1 the boxwidth dips are added. The third time (i-1) = 2 the boxwidth dips are multiplied by 2 and then added. And so on.
We add the boxheight from the month/year label to the top position to display the day names row.
Did you change the line for the AddView of the month/year label?
It should look like this:
pnl1.AddView(lblmonth,leftpos,toppos,7*boxwidth,boxheight)
The total width of the lblmonth label spans 7 columns.
Now we add the 6 rows of 7 columns of day number labels. Declare a day number integer at the beginning of the show_month subroutine and initialize it at 1:
Private daynumber As Int = 1
We use 2 for loops to do this:
For r = 1 To 6
	For c = 1 To 7
		Private lbl As Label
		lbl.Initialize("")
		lbl.Text = daynumber
		pnl1.AddView(lbl, leftpos+boxwidth*(c-1), toppos + (boxheight*2) + boxheight*(r-1), boxwidth, boxheight)
		daynumber = daynumber + 1
	Next
Next
First we make a label object and set the text property to the day number. Then we add the label object to the panel. And then we add 1 to the day number for the next label.
The left position is calculated with the column variable c and the top position is calculated with the row variable r. The first 2 rows from the calendar take up space to so we add the boxheight * 2 to the top position.
The app now looks like this:


4. Set label
You may have noticed that we created a label object many times in the code. We can improve on that by creating a subroutine to create a label. In this subroutine we declare the object variable, initialize the object, set properties of the object and give it a text to display.
Like so:
private Sub set_label(lbltext As String) As Label
	Private lbl As Label
	lbl.Initialize("")
	lbl.Text = lbltext
	Return lbl
End Sub
The subroutine takes as an argument the text for the label. A private label variable is declared and initialized. The property Text gets the text to display on the label. The subroutine then returns the label object.
In the code we can then change the label lines to 1 line.
Private lblmonth As Label = set_label(mnth & " / " & yr)
	'Private lblmonth As Label
	'lblmonth.Initialize("")
	'lblmonth.Text = mnth & " / " & yr
…
		Private lbl As Label = set_label(lstdaynames.Get(i-1))
		'Private lbl As Label
		'lbl.Initialize("")
		'lbl.Text = lstdaynames.Get(i-1)
…
			Private lbl As Label = set_label(daynumber)
			'Private lbl As Label
			'lbl.Initialize("")
			'lbl.Text = daynumber
The layout of the labels now only needs to be adjusted in one subroutine! We will add more functionality to this subroutine in what follows.