B4J Library [BANAnoWired] 15 Mockup Elements for your Prototypes

Ola

When I started working with the Mermaid library I also discovered this nice mockup js library called wired.

This lib is just for generating mockups/wireframes for anyone playful. We have 15 elements currently in the library. These are

1. Input
2. Toggle
3. TextArea
4. Radio / RadioGroup
5. Spinner
6. Slider
7. Button
8. FAB
9. IconButton
10. Tabs
11. Cards
12. Checkbox
13. ListBox
14. Progress
15. Combo

Let's look at each one below.

PS: This is an extension of my experiments with Vue here, https://www.b4x.com/android/forum/t...g-webapps-websites-with-vuejs.109579/#content but you can tweak it to be independent of that.

#PurelyDoneForTheFunOfIt!!
 

Attachments

  • BANanoWired.zip
    145.5 KB · Views: 390

Mashiane

Expert
Licensed User
Longtime User
1. Input

input.gif


The code is as simple as...

B4X:
Dim inpname As WInput = wired.CreateInput("firstname").SetName("firstname",False).SetPlaceholder("Enter first name")
    inpname.SetVModel("firstname")
    inpname.Render
    wired.AddBR
    '
    wired.CreateInputPassword("pwd").SetPlaceholder("Password").Render
    wired.addbr
    '
    wired.CreateInput("dis").SetPlaceholder("Disabled").SetDisabled(True).Render
    wired.addbr
    '
    wired.CreateInputSearch("search").SetPlaceholder("Search").Render
    wired.addbr
 

Mashiane

Expert
Licensed User
Longtime User
4. Radio / RadioGroup

radio.gif


B4X:
Dim rad As WRadio = wired.CreateRadio("rad1").SetText("A radio").SetVModel("rad1")
    rad.SetOnChange(Me, "onRadio")
    rad.Render

For the radio group..

B4X:
Dim rg As WRadioGroup = wired.CreateRadioGroup("rg")
    rg.SetSelected("one")
    rg.AddItem("one","One")
    rg.AddItem("two","Two")
    rg.AddItem("three","Three")
    rg.SetVModel("rg")
    rg.SetOnSelected(Me, "onRadioGroup")
    rg.render
 

Mashiane

Expert
Licensed User
Longtime User
10. Tabs

tabs.png


B4X:
Dim tabs As WTabs = wired.createtabs("tabs1").SetSelected("three")
    tabs.AddItem("one","One", wired.CreateLabel("").SetText("Content of Tab 1").label)
    tabs.AddItem("two","Two", wired.CreateLabel("").SetText("Content of Tab 2").label)
    tabs.AddItem("three","Three", wired.CreateLabel("").SetText("Content of Tab 3").label)
    tabs.AddItem("four","Four", wired.CreateLabel("").SetText("Content of Tab 4").label)
    tabs.Render
 

Mashiane

Expert
Licensed User
Longtime User
11. Cards

card.png


B4X:
Dim card1 As WCard = wired.CreateCard("card1")
    wired.CreateLabel("h3").SetSizeH3(True).SetText("Card 1").Pop(card1.Card)
    wired.CreateLabel("p1").SetSizeP(True).SetText("Lorem Ipsum....").Pop(card1.Card)
    card1.Render
    wired.AddBR
    '
    Dim card2 As WCard = wired.CreateCard("card2").SetElevation(3)
    Dim p2 As WLabel = wired.CreateLabel("p2").SetSizeP(True)
    p2.SetText("Lorem Ipsum....")
    card2.AddElement(p2.Label)
    card2.Render
    wired.AddBR
 

Mashiane

Expert
Licensed User
Longtime User
13. ListBox

listbox.gif


B4X:
Dim lbox As WListBox = wired.CreateListBox("lbox")
    lbox.SetSelected("two")
    lbox.AddItem("one","One")
    lbox.AddItem("two","Two")
    lbox.AddItem("three","Three")
    lbox.SetVModel("lbox")
    lbox.SetOnSelected(Me, "onListBox")
    lbox.render
    wired.AddBR
    '
    Dim lbox1 As WListBox = wired.CreateListBox("lbox1")
    lbox1.SetSelected("one").SetHorizontal(True)
    lbox1.AddItem("one","One")
    lbox1.AddItem("two","Two")
    lbox1.AddItem("three","Three")
    lbox1.SetVModel("lbox1")
    lbox1.SetOnSelected(Me, "onListBox1")
    lbox1.render
    wired.AddBR
 

Mashiane

Expert
Licensed User
Longtime User
14. Progress

progress.png


B4X:
wired.CreateProgress("prog1").SetValue("25",False).Render
    wired.AddBR
    '
    wired.CreateProgress("prog2").SetValue("10",False).SetMin(5).SetMax(15).Render
    wired.AddBR
    '
    wired.CreateProgress("prog3").SetValue("65",False).SetPercentage(True).Render
    wired.AddBR
    '
    wired.CreateProgress("prog4").SetValue("30",False).SetColor("rgba(220, 0, 50, 0.1)").SetLabelColor("green").SetFontSize("24px").SetWidth("300px").Render
    wired.AddBR
 
Top