Cursussen/Courses Codesnippets     Top 
B4A-budget - category layout


1. cat_layout
Create a new module for the categories and name it CategoryPage
In the IDE menu select Project / Add New Module / Class Module / B4XPage. A new tab is created: CategoryPage.
Click on the CategoryPage tab and go to the designer.
Create the category layout (cat_layout).
Now click on the generate members menu item and check: clv3 and its ItemClick event and sbtn3 and its Click event.


2. B4X page and menu
If you want to use the CategoryPage then you have to write code for it.
In the B4XMainPage Class_Globals subroutine declare a variable for the page:
private catpage as CategoryPage
Add the following code to the B4XPage_Created subroutine below the LoadLayout statement:
B4XPages.SetTitle(Me,"Mybudget")
catpage.Initialize					' don't forget to initialize!
B4XPages.AddPage("Category",catpage)
We also provided a title for our app in the first line we added.
In the CategoryPage tab add code for the loading of the layout and for setting the page title.
Private Sub B4XPage_Created (Root1 As B4XView)
	Root = Root1
	'load the layout to Root
	Root.LoadLayout("cat_layout")
	B4XPages.SetTitle(Me,"Mybudget - category")
End Sub
This code takes care of the loading of the Category page but we can't access it yet.
We need a menu item on the application bar.
In a previous tutorial you can find how to do this. Link:B4A-Lists section B4XMainPage.
Insert a line of code in the subroutine B4XPage_created from the B4XMainPage tab to call the menu item below the line to add the page.
menuitem_add(Me, "Category")


3. listview testdata
You know how to add items to a CustomListView from the previous section.
Create a B4XPage_appear subroutine and call a fill_clv3 subroutine. Create the fill_clv3 subroutine and write the for loop code.


4. dragger class
The use of the CLVDragger class was explained in a previous tutorial. Link: B4A-lists section Fine tuning / CLVDragger setup.
The changes to the CategoryPage in this project are as follows:
In the Class_Globals subroutine:
Private dragger As CLVDragger
In the B4XPage_created subroutine:
	dragger.Initialize(clv3)
	dragger.AddDragButtons
In the fill_clv3 subroutine below the for-loop:
	If clv3.Size > 0 Then
		dragger.Initialize(clv3)
		dragger.AddDragButtons
	End If


5. Compile and run
Run the app and check the changes for the CategoryPage.
You can change the background color from clv3 to a color of your choice. Go to the designer window and open the cat_layout file. Now click on the clv3 listview and change the color in the properties section Drawable. Save the layout file. Run the app again and check the Category page.
The light blue looks much better.
You can change the color of the dragger button to yellow by changing a line in the CLVDragger tab.
In the subroutine AddDragButtons find the line:
			xlbl.Color = Colors.Green 		'dBackground
Change the color to Colors.Yellow for instance or use the variable dBackground.
Run the app again and check the color and the dragger functionality.
This is how the category page looks like now: