B4J Library [BANanoZUI] Creating Zoomable User Interfaces with ZircleUI

Ola

Download

Playlist on YouTube

IMPORTANT: You will find tutorials using LiveSwapping to develop BANanoZU interfaces, here




Well I have been wanting to create something like this for a very long time eversince I saw Prezi. So I decided that during my breaks I will explore this. Fortunately its such a small lib so we will finish it within a couple of hours. Let's say an hour a day.

So I found this nifty library and decided to test it out. Its called ZircleUI The nice thing is its very simple and you can also use your imagination here. This is a VueJS based library. As a first lesson, we will just create a "Hello World" application.

This is what we will do... and we will add to this as we go along. Let's have an open mind..

Reproduction. (We will follow the examples in the websites to create this)

1. Drop a VHTML on the designer and give it a tag of "div" and a name of "app" - THIS IS A COMPULSORY NAME.
2. Drop another VHTML inside it and give it a "z-canvas" tag, you can name it whatever you want. Update the "attributes" to be

:views=$options.components

3. Drop another VHTML inside the "app", div, give it a tag of "div", set VShow to "placeholder", we want this hidden when the app runs. Save the layout as pagezircle.

 

[Mashiane]

Home:

Let's create the home "Hello World" Layout. This will display Welcome to Smart Home Dashboard

1. Create a new layout, call it "homelayout"
2. Drop a VHTML on the layout, set a tag of "div" for it
3. Drop a VHTML layout insize it, give it a tag of "z-view", update the "text" to be "Welcome to Smart Home Dashboard"
4. Save the layout.

 

[Mashiane]

Creating the UI

Now its time to create the UI.

1. Here we load the first layout to set our stage.
2. We initialize the Vue app.
3. We hide the placeholder with placeholder=false.
4. We Build the home z-view
5. Because the z-canvas is created with the designer we need to link it to the VueJS app we are creating.
6. We then serve the app so that it runs on the browser.
7. We initialize the BANanoZUI library, this needs to be done after we serve our app.
8. We then set the main view as home.

Sub Init
    BANano.LoadLayout("#body", "pagezircle")
    'initialize the vue instance, we will render it to #app div element
    MyApp.Initialize(Me, "#app", "#body")
    'hide the placeholder
    MyApp.SetData("placeholder", False)
  
    'build the components
    BuildHome
  
    'link main component to app
    canvas.AddToApp(MyApp)
    'serve the webapp
    MyApp.Serve
    '
    'initialize zui
    zui.Initialize(MyApp.zircle)
   
    'show the home page
    zui.SetView("home")
  
  
    Log(MyApp.Template)
  
End Sub

So the HTML from these layouts will be something like this...

<div id="app"><z-canvas id="canvas" :views="$options.components"></z-canvas><div id="placeholder" v-show="placeholder"></div></div>

Let's see how we built the home code to manipulate our second layout.

1. We load the home layout we created, this had just 1 z-view. This is loaded to our invisible placeholder layout.
2. We create a VueJS component, this is like another VueJS instance, we give it a name of "home". Each component should have a very unique name.
3. We then read the HTML of the placeholder and inject it to our VueJS component.
4. We then add the component to the App itself.

'build the home screen
Sub BuildHome
    'load the home layout
    BANano.LoadLayout("#placeholder", "homelayout")
    'create a home component
    Dim home As VMElement
    home.Initialize(Me, "home", "home")
    'set the contents from the home layout
    home.SetBANanoTemplate("#placeholder")
    '
    'add component to page
    MyApp.AddComponent(home)
End Sub

That's it. We have just finished our introduction to this library.

Ta!

 

[Mashiane]

Update: Updated the source code to include BANanoShared, this was in my Shared folder.

 

[Mashiane]

In the example above, we mostly used a generic VHTML component to create the views in the abstract designer. It can only be sensible that we create custom views for this library.

Lets create the z-canvas custom element.




Reference:

Tool: BANano Custom View Creator

Ta!

 

[Mashiane]

Interactivity

In our second example we create an interactive app that opens up URLs on our browser.

The source code is available on the first post, this has been created with the abstract designer using the examples in the documentation.

 

[Mashiane]

Lets code our way using Live Swapping...

Ola, #Dreams do come true

The source code for this is in the Demos\3. LiveSwapping folder

Previsouly I explored the BANano LiveSwapping feautures with BANanoVueMaterial/Vuetify. The experience was sooo good. With my new library BANanoZUI (Zoomable User Interfaces), the experience is smooth and worth the ride. You should really explore this!

Here we code our zoomable user interface, this is just a beginner experience. The built up for this lib is great! The library is complete (less than 10 custom views, all created with the BANano Custom View Creator off course) and one with their existing knowledge of BANano and B4X, can code to their desires.

The ZircleUI website comes with tons of examples and documentation, I'm also playing with them myself, we will display maps and charts also as we go along.

Let's do this!

 

[Mashiane]

This is a code snippet to create a view with multi-lines..

'create the view
    Dim zview As ZUIZview
    zview.Initialize(Me, "homeview", "homeview")
    zview.AddText("11:53 PM").AddBR
    zview.AddText("Monday, Oct.").AddBR.AddBR
    zview.AddElement("", "h1", Null, Null, Null, Null, "Night mode").AddBR
    zview.AddText("Outside 29˚C, sunny").AddBR
    zview.AddText("Inside 25˚C")
    zview.AddToPlaceholder

Ta!

PS: Will be included in the next release.

 

[Mashiane]

The Smart Home ZUI Development