Cursussen/Courses Codesnippets     Top 
B4A-lists - B4X pages design


1. Designer window
Now we are going to setup the pages: Category page, Subcategory page and Item page (which is the B4XMainPage or starting page).
Lets design the pages. Click on Designer / Open Designer.
A new designer window will appear.


2. Category design
In the designer click on File / New to make a new page design. Click on Save to give it a good name.
To add custom views (components) you need to select the necessary libraries. Go to the Main IDE window and click on the Libraries tab. In the list select the XUI and XUI Views libraries. They will appear on the top of the list.
Back in the designer window you can now select in the Add View menu CustomView / CustomListView.
Clicking on it will add the view to the Abstract Designer pane.
Make the selected CustomListView cover the entire background except for the bottom part.
Place a button in the bottom part in the middle.
To work easy we change the names: CustomListView1 becomes “clv2” and Button1 becomes “btn2”. We don’t use number 1 because the MainPage will contain a “clv1” and “btn1”.
You can change this in the Properties pane (after clicking on the view).
Click on File / Save to keep the settings (category_layout).


3. Subcategory design
Make a new file with the same layout as the category layout. Click File / New in the designer window. Leave some space on the top of the background for a combobox view.
To add the combobox select in the Add View menu: CustomView / B4XcomboBox.
The combobox (“cbx3”) will contain all the categories.
Save the file as: subcategory_layout.


4. Item list design
Select in the designer File / MainPage to open the MainPage layout.
Remove the button (click on it and press the delete key).
Add 2 comboboxes, 1 CustomListView and 1 button and give them a short name.
Save the file (MainPage).