Share My Creation [ReAct Bootstrap]: Testing the waters

Discussion in 'B4J Share Your Creations' started by Mashiane, Sep 14, 2017.

  1. Mashiane

    Mashiane Expert Licensed User

    Hi there...

    For a while now Facebook has been working on ReAct, their flagship javascript library to create UIs. There is a variant of this called ReAct-Bootstrap but however I just wanted to try and test if I was going to be able to do this first before I really decide on taking it further, towards a React-Native hybrid app developer.

    For now, this is just a single HTML 5 page created with the ReActBootstrap framework based on a b4j "could-be" library.

    There is nothing really fancy as of yet, you can create a navigation bar, the buttons, the form controls and the buttons and also a grid based on bootstrap.

    ReactBootStrap.png

    My Main code is like...

    Code:
    Dim app As RBApp
        app.Initialize
        app.AppName = 
    "ReactBootstrapMash"
        app.appid = 
    "com.Mashy.ReactBootstrapMash"
        app.Version = 
    "1.00"
        app.Author = 
    "Anele Mashy Mbanga"
        app.Website = 
    "http://www.mbangas.com"
        app.Email = 
    "anele@mbangas.com"
     
        
    '*****build the pages
        Dim myIndex As pgIndex
        myIndex.Initialize(app,
    "index")
        myIndex.Build
         
        
    'add the pages to the app
        app.addpage(myIndex.page)
     
        
    'build the app
        app.Build
     
        
    'open the compiled app
        app.open
    This creates the necessary "index.html" file with its components and then opens the page in the browser. I've tried to follow React's way of doing things i.e.

    1. create a div and give it an id
    2. create a component and or assign it to a variable
    3. react the component to the div
     
    Last edited: Sep 14, 2017
    joulongleu, BPak and JakeBullet70 like this.
  2. Mashiane

    Mashiane Expert Licensed User

    The pgIndex class code...

    Code:
    Sub Class_Globals
        
    Public Page As RBPage
        
    Public Keywords As String
        
    Public Description As String
        
    Private App As RBApp
        
    Public HTMLName As String
    End Sub

    'Initializes the object. You can add parameters to this method if needed.
    Public Sub Initialize(pApp As RBApp,pgName As String)
        
    'define the app the page belongs to
        App = pApp
        
    'initialize the page
        Page.Initialize(App,pgName)
        HTMLName = 
    Page.htmlname
    End Sub

    'build the page
    Sub Build
        
    Page.KeyWords = "react,bootstrap,mashy,b4x"
        
    Page.Description = "RBMash seeks to provide a tool to create ReactBootstrap based apps using B4J"
        
    'Page.BackgroundColorIntensity = App.EnumIntensity.LIGHTEN5
        Page.Title = "Chapter 1"
       
        
    'add a navbar
        Dim nav As RBElement = Page.AddDiv("nav")
       
        
    'create an element on the page
        Dim hello As RBElement = Page.AddDiv("hello")
       
        
    'create the element to react to the previously added component
        Dim h1 As RBElement = Page.AddHeading(1,"Hello world!")
        h1.ReAct(hello)
       
        
    '************chapter :2
        'fluid container
        Dim fc As RBElement: fc = fc.CreateFluidContainter(Page,"")
        
    'row
        Dim r1 As RBElement: r1 = r1.CreateRow(Page,"")
        
    'column
        Dim c1 As RBElement: c1 = c1.CreateColumnOS(Page,"",0,0,0,6,6,6)
        
    'form
        Dim frm As RBElement: frm = frm.CreateFORM(Page,"")
        frm.AddHeading(
    1,"Login Form")
        frm.AddHR
        frm.AddEmail(
    "emailInput","Email address","Email")
        frm.AddPassword(
    "passwordInput","Password","Password")
        frm.AddSubmitButton(
    "save","Submit",9,3)
       
        
    'add form to the column
        c1.AddForm(frm)
        
    'add column to row
        r1.AddColumn(c1)
        
    'add row to container
        fc.AddRow(r1)
        fc.AssignTo(
    "loginFormHTML")
        fc.ReAct(hello)
       
        
    '**********chapter 3
        Page.navbar.Title = "EIS"
        
    Page.NavBar.AddNavItem("home","Home","#",True)
        
    Page.NavBar.AddNavItem("editprofile","Edit Profile","#",False)
        
    Page.navBar.AddDropDownMenuItem("helpdesk","viewtickets","View Tickets","#")
        
    Page.navBar.AddDropDownMenuItem("helpdesk","newticket","New Ticket","#")
        
    Page.NavBar.AddDropDownMenu("helpdesk","Help Desk")
        
    'Page.NavigationBar.AddSearch
        Page.NavBar.ReAct(nav)
       
        
    '********** chapter 4
        'App.ReactBootstrap = True
        'Page.AddHr
        Dim nav1 As RBElement = Page.AddDiv("nav1")
        
    Page.RBNavBar.Title = "EIS"
        
    Page.RBNavBar.AddNavItem("home","Home","#",1)
        
    Page.RBNavBar.AddNavItem("editprofile","Edit Profile","#",2)
        
    Page.RBNavBar.AddDropDownMenuItem("helpdesk","viewtickets","View Tickets","#","3.1")
        
    Page.RBNavBar.AddDropDownMenuItem("helpdesk","newticket","New Ticket","#","3.2")
        
    Page.RBNavBar.AddDropDownMenu("helpdesk","Help Desk",3)
        
    'Page.RBNavBar.ReAct(nav1)
        'add container to page
        'fc.Add2Page
       
        
    'other things
        Dim fc As RBElement: fc = fc.CreateContainter(Page,"")
        fc.AddHR
        
    'row
        Dim r1 As RBElement: r1 = r1.CreateRow(Page,"")
        
    'column
        Dim c1 As RBElement: c1 = c1.CreateColumnS(Page,"sidebar",3,3,3)
        
    Dim c2 As RBElement: c2 = c2.createcolumnS(Page,"",9,9,9)
        c2.addclass(
    "profile-desc")
       
        
    'add column to row
        r1.AddColumn(c1)
        r1.AddColumn(c2)
        
    'add row to container
        fc.AddRow(r1)
        
    'add container to page
        fc.Add2Page
       
        
    'add the navbar to the page
        'Page.NavigationBar.Add2Page   ' IMPORTANT
    End Sub
     
  3. inakigarm

    inakigarm Well-Known Member Licensed User

    Have you tested Skeleton library for B4J? Is light & easy to learn (buy you'll have to understand javascript to make complex webapps)
     
  4. Mashiane

    Mashiane Expert Licensed User

    Yes I have checked that out and its brilliant. My plan though is to develop something using the ReAct Web / Native framework towards a hybrid app developer. This will NOT use jServer but just be HTML5 and Javascript.
     
    ShaneG30 and inakigarm like this.
  5. Mashiane

    Mashiane Expert Licensed User

    My components are based on an HTML element builder, called RBElement. This has most of HTML tags and other things. I have followed this approach to make element building flexible for my approach without having to have elements defined using text in my code. This means I can chop and change an element each time without having to rewrite the code.

    Here is the source code so long...

    https://mega.nz/#!VvBxDaBL!yQdHLzG1Ha8rOVb0VIIzFvv3W9krPcmrfYDapZf1A9Q
     
    inakigarm likes this.
  6. alwaysbusy

    alwaysbusy Expert Licensed User

    Nice, but just be very careful using the React framework. Facebook recently changed their patent clause, which even affects WordPress https://ma.tt/2017/09/on-react-and-wordpress/. Many big projects are now forced to move to another library.
     
    ShaneG30 likes this.
  7. Mashiane

    Mashiane Expert Licensed User

    Thanks for the heads up @alwaysbusy , just read the issues and they are a big hit, affecting the community in not a nice way... Eish jah neh!!!
     
  8. Mashiane

    Mashiane Expert Licensed User

  9. ShaneG30

    ShaneG30 Well-Known Member Licensed User

  10. Mashiane

    Mashiane Expert Licensed User

  11. Mashiane

    Mashiane Expert Licensed User

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