B4J Tutorial [BANanoWebix] Dragging N Dropping Things with the Form Designer

Discussion in 'B4J Tutorials' started by Mashiane, Jul 26, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    Version 1.19+ with drag n drop support.



    The next iteration of BANanoWebixApp (Library + Demo + Form Builder) will include drag and drop functionality to design forms.

    Whilst still early days, this is rather an exciting time in the BANanoWebix world.

    In the video above we do the following:

    1. Drag and drop a database link to the tree, we confirm the action by saving it.
    2. Drag and drop a table to the database, we confirm the action by saving it.
    3. Drag and drop fields to the table and save them.
    4. Drag and drop a form to the tree and save it.
    5. Drag and drop the fields from the table to the form, this creates text fields that are automatically saved and the tree refreshed.
    6. In the end we have a form with some text fields.

    Still building stuff up and debugging. It still needs some patience when running.

    Ta

    PS: Webix uses objects/maps to create the UX.
     
    Last edited: Jul 26, 2019
    ThRuST, swamisantosh and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    Let's add a GoogleMap to our form...

    GoogleMap.gif

    We can change the properties before we save it.
     
    joulongleu and ThRuST like this.
  3. Mashiane

    Mashiane Expert Licensed User

    Let's add an image to our form...

    Image.gif
     
    ThRuST and joulongleu like this.
  4. ThRuST

    ThRuST Well-Known Member Licensed User

    WOW. Hey this is quite an amazing work you're doing. The short and effective tutorials is spot on. Admirable :rolleyes: TA!
     
    joulongleu and Mashiane like this.
  5. Mashiane

    Mashiane Expert Licensed User

    Lets create a toolbar with some buttons, a search textbox and an icon. A toolbar acts the same as a form, you need however to change the AddingMethod on the child elements to .AddColumns and not .AddRows.

    We drag a toolbar to the form and save it. Then we drag each element we want to create on the toolbar, saving each item as we go along.

    ToolBar.gif
     
    joulongleu and ThRuST like this.
  6. Mashiane

    Mashiane Expert Licensed User

    Let's drag and drop an iframe into the form. These are used to show other web-pages. So far this works internally..

    IFrame.gif
     
    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice