B4J Tutorials

[BANanoWebix] Lesson 10 Lists

Ola

Lesson10_List.gif


Here we demonstrate how we can have a list with a pager linked to it and we animate the list.

First we create a pager element and give it a unique id with the size to show...
 

[BANAnoWebix] Lesson 11 Unit List

Ola

Unit lists enable one to group lists by common ground, e.g. first letter of alphabet for the selected field.

Lesson10_UnitList.gif


For this example, we use the dummy data generator and then unite...
 

[BANanoWebix] Lesson 12: Property Sheet

Hi

The property sheet / property bag allows one to have such an item on their apps. It accepts text, password, date, color, combo, select to mention of the few controls.

To Set the values to it...
 

[BANanoWebix] Lesson 13 The TreeView

Hi

The treeview is basically that, a tree view. You add items and children and can also trap the itemClick event for the item to get the key selected..

Lesson13.gif


Here we use .SetData to load...
 

[BANanoWebix] Lesson 15 Menus & Windows

Hi

This lesson covers 3 items being..

1. Menu
2. SideMenu
3. Window
4. Popup

Lesson15.gif


1. The menu

This can be a vertical or horizontal menu that one can have and it can also have...
 

[BANanoWebix] Lesson 16 - The Sidebar

Ola

Well this is one of my favourate elements.

Lesson16.gif


First lets add the toolbar in a row with badges and then after that we add the sidebar with the various icons. The structure of the...
 

[BANanoWebix] Lesson 17 - Comments / Chat Widget

Hi

The comments widget works like a chat screen. Now I need to learn BANanoWebsockets and feed that into this.

Lesson17.gif


One of the nice things about this component is that the users data...
 

[BANanoWebix] Lesson 18 GroupList

Ola

The grouplist enables one to group elements added easily. Thanks to code that @Brandsum for code to unflatten a list of map records to a tree.

Lesson18GroupList.gif


We create the grouplist...
 

[BANanoWebix] Lesson 14 - The TreeTable

Hi

The tree-table is a combination of the tree and the data-table.

Lesson14_TreeTable.png


To create the tree-table, one needs to add the columns they will need, then indicate which column should feature...
 

[BANanoWebix] Lesson 19 Contexts

Ola

This lesson is about the 'context' and 'contextmenu' widgets.

Context are popups that one can use in case they want to provide some help on the UX. Both the context and context menus appear...
 

[BANAnoWebix] Lesson 20 Google Map

Ola

Simply put, this google map allows one to display a google map on their apps. One is able to also add markers that properties can be set up for.

Lesson20GoogleMap.gif


One needs to get their own...
 

[BANanoWebix] Lesson 21 TabBar

Ola

The tab-bar as depicted below is placed at the bottom of the page...

B4X:
Dim tb As WixTabBar

    tb.Initialize("tb").SetHeight(60).SetTypeBottom(True).SetMultiView(True).SetAnimate(True)...
 

[BANanoWebix] Lesson 22 Uploader - Method 1

Hi

We are just left with almost 2 additional widgets to complete on the standard open-source license before we can start building a working app.

The uploader widget enables one to upload files...
 
Last edited:

[BANanoWebix] Lesson 22 Uploader Method 2

Ola

Lesson 22 Method 1

Lesson22.2.gif


Method 2 of the file uploader is a method that actually places an uploader on a form including a list that displays the files that have been selected...
 

[BANanoWebix] Lesson 22 - Method 3 (DropZone)

[BANanoWebix] Lesson 23 WixVideo

Ola

The video component allows one just to do that, show videos. Whilst one is able to set the height & width of their videos, this does not have much properties.

Lesson23.png


One is able to...
 

[BANanoWebix] Lesson 8.3 Datatable Pagination & Exporting to XLSX, PNG, PDF and CSV

Last edited by a moderator:

[BANanoWebix] Lesson 24 ScrollView

Phew...

Lesson 24 is about the scrollview. One can use this to host divs and other stuff that they might need to scroll.

Lesson24_ScrollView.gif


In this example we have created a scrollview with both X...
 

[BANanoWebix] Lesson 25 Template

Ola

The template is just also like the scrollview, enabling one to create elements..

Lesson25_Template.png


In this image we depict how we have created a container and then added templates on the row...
 

[BANanoWebix] Creating a Multi-Page Interface in a SPA

Ola

The latest release of BANanoWebix features a sidebar that when selected, it displays 'different pages' within the same 'index.html file.

LessonMP.gif


At the heart of every BANano based App...
 
Last edited:
Top