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!!

 

[Mashiane]

1. Input

The code is as simple as...

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]

2. Toggle

wired.CreateToggle("tgl").SetOnChange(Me, "onToggle").SetVModel("tgl").SetChecked(True).render

 

[Mashiane]

3. TextArea

wired.CreateTextArea("txta").SetRows(9).SetPlaceholder("My text area").SetValue("Testing text area",False).Render

 

[Mashiane]

4. Radio / RadioGroup

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

For the radio group..

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]

5. Spinner

wired.CreateSpinner("spn1").SetSpinning("spin", True).SetColor("red").Render

 

[Mashiane]

6. Slider

wired.CreateSlider("slid").SetVModel("slid").SetOnChange(Me, "onSlider").SetKnobZeroColor("red").SetKnobColor("green").Render

 

[Mashiane]

7. Button

Dim btn As WButton = wired.CreateButton("btn").SetText("Submit")
    btn.SetBackgroundColor("yellow").SetOnClick(Me, "onSave")
    btn.render

 

[Mashiane]

8. FAB

wired.createfab("fab1").SetText("favorite").SetBackgroundColor("lightpink").SetColor("darkred").Render

 

[Mashiane]

9. IconButton

wired.CreateIconButton("ib1").SetText("favorite").SetColor("cyan").Render

 

[Mashiane]

10. Tabs

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]

11. Cards

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]

12. CheckBox

Dim chk As WCheckBox = wired.CreateCheckBox("chk1").SetText("I agree").SetVModel("chk1")
    chk.SetIconColor("red")
    chk.SetOnChange(Me, "onChange")
    chk.Render

 

[Mashiane]

13. ListBox

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]

14. Progress

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

 

[Mashiane]

15. Combo

Dim cbo As WCombo = wired.CreateCombo("combo")
    cbo.SetSelectedBackgroundColor("darkblue")
    cbo.SetSelected("two")
    cbo.AddItem("one","One")
    cbo.AddItem("two","Two")
    cbo.AddItem("three","Three")
    cbo.SetVModel("combo")
    cbo.SetOnSelected(Me, "onCombo")
    cbo.render