bananowebix

Phew... Lesson 24 is about the scrollview. One can use this to host divs and other stuff that they might need to scroll. In this example we have created a scrollview with both X and Y scrolling active. To demonstrate this we set the width and height of the scrollview to be minimal and just...

Ola Lesson 8.1 Lesson 8.2 Lesson 8.3 Lesson 8.4 As per subject matter this lesson is about a data-table with a pager and also functionality to export its contents to PNG, PDF, CSV and XLSX. It's so amazing that with just a few object (map) settings and then a few simple calls webix does...

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. One is able to set autoplay and controls for visibility. Here we add a row to the page and then add the video to that page...

Ola Lesson 22 - Method 1 Lesson 22 - Method 2 This method involves the dropzone where one can drag and drop files into the uploader. A list is placed on a page.. Dim lst As WixList lst.Initialize("mylist").SetTypeUploader(True).SetHeight(600).SetWidth(300).SetScroll(False) '...

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. There are a various ways this works and we will now look at Method 1. We use this and we link it to...

Ola The tab-bar as depicted below is placed at the bottom of the page... Dim tb As WixTabBar tb.Initialize("tb").SetHeight(60).SetTypeBottom(True).SetMultiView(True).SetAnimate(True) tb.AddItem("listView", "List", "wxi-file") tb.AddItem("formView", "Form", "wxi-columns")...

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. One needs to get their own google map key to use this on their app. In this instance, we create a google map instance, set its map type, add...

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 when the right mouse button is clicked and can be linked to any element on the page. In this...

Hi The tree-table is a combination of the tree and the data-table. To create the tree-table, one needs to add the columns they will need, then indicate which column should feature the tree structure and then add data to it. To create columns we use the WixDataColumn class we saw for the...

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. We create the grouplist, each record with a 'parentid' property and each record as a map. Dim gl As WixGroupList...

Hi The comments widget works like a chat screen. Now I need to learn BANanoWebsockets and feed that into this. One of the nice things about this component is that the users data, the comments can be hosted and fed directly from any source type of data. For example in our example, we have...

Ola Well this is one of my favourate elements. 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 menu has been borrowed greatly from the WixMenu element. The ToolBar We initialize a menu and add buttons to...

Hi This lesson covers 3 items being.. 1. Menu 2. SideMenu 3. Window 4. Popup 1. The menu This can be a vertical or horizontal menu that one can have and it can also have sub-menus. For each menu item one is able to indicate the icon and badge to mention a few. Dim menu As WixMenu...

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.. Here we use .SetData to load data to the treeview the normal way and also execute an AddNode method to both add an element and its child...

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, one uses the .SetValues page call passing it the map of values and to get its values one uses...

Ola Unit lists enable one to group lists by common ground, e.g. first letter of alphabet for the selected field. For this example, we use the dummy data generator and then unite the list by the title after the page is rendered. This has an effect of using a callback to set the unit list...

Ola 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 being 10 records. We add this to our page.. Private pgr As WixPager...

Ola Get your own copy of BANanoWebix The data view is also one of the elements to view data from data sources. One feeds it whatever template they need to display it it. For example here we have used.. <div id='tmp' class='webix_strong' style='background-color:#ffeaea !important;'...

Ola Lesson 8.1 Lesson 8.3 Lesson 8.4 Get your copy of BANanoWebix This is the second installment about the databable. Here we look at how to add our own columns in the data-table, we will not use .SetAutoConfig(True) as that will over-write our settings for the columns. To make this work, we...

Ola Lesson 8.2 Get your copy of BANanoWebix The datatable is an editable table for data that one can use. Like the rest of the components, one is able to apply to it any css they need. For example here, we have provided our own css for the hover color using.. #if css .dthover...