B4J Library [ABMaterial] Deciding on a Christmas gifts using Mermaid

Discussion in 'B4J Libraries & Classes' started by Mashiane, Dec 2, 2018.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    A long time ago I was requested to come up with a mermaid custom component for ABM. So Im taking a break today from everything and looking at it for @joulongleu

    Chritsmas.png

    I should be having this working soon, and the code seems to be simple enough..

    Code:
    shop.Initialize(Page,"shop").FlowChart.TopBottom
        shop.AddRectangle(
    "a","Christmas")
        shop.AddRoundEdges(
    "b","Go shopping")
        shop.AddRhombus(
    "c","Let me think")
        shop.AddRectangle(
    "d","Laptop")
        shop.AddRectangle(
    "e","iPhone")
        shop.AddRectangle(
    "f","fa:fa-car Car")
        shop.ArrowText(
    "a","b","Get money")
        shop.Arrow(
    "b","c")
        shop.Arrow(
    "c","d")
        shop.Arrow(
    "c","e")
        shop.Arrow(
    "c","f")
    1. We are doing a flowchart. There are a variety of components
    2. It should be a top to bottom flowchart, there are a variety, LR, RL, BT etc.
    3. We need to decide on what to get for Christmas gift.
    4. We need to go shopping but also get money.
    5. We also need to think about the present to buy.

    Component to be uploaded soon! Watch this space!
     
  2. Mashiane

    Mashiane Expert Licensed User

    The swimlanes kinda stuff seems to be working too..

    swimlanes.png

    Code:
    sg.Initialize(Page,"sg").FlowChart.TopBottom
        sg.AddRectangle(
    "c1","c1").AddRectangle("c2","c2")
        sg.AddRectangle(
    "a2","a2").AddRectangle("a1","a1")
        sg.AddRectangle(
    "b1","b1").AddRectangle("b2","b2")
        sg.Arrow(
    "c1","a2")
        sg.AddSubGraph(
    "one").Arrow("a1","a2").EndSubGraph
        
    'another subgraph
        sg.AddSubGraph("two").Arrow("b1","b2").EndSubGraph
        
    'another subgraph
        sg.AddSubGraph("three").Arrow("c1","c2").EndSubGraph
     
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    One can use a variety of different arrows between connections..

    1. Create rectangles A to I
    2. Between each rectangle, use the various types of links
    Arrows.png

    Code:
    links.Initialize(Page,"links").FlowChart.LeftRight
        links.AddRectangle(
    "a","A").AddRectangle("b","B").AddRectangle("c","C").AddRectangle("d","D").AddRectangle("e","E").AddRectangle("f","F")
        links.AddRectangle(
    "g","G").AddRectangle("h","H").AddRectangle("i","I")
        links.Arrow(
    "a","b")
        links.OpenLink(
    "b","c")
        links.OpenLinkText(
    "c","d","Open Link Text")
        links.ArrowText(
    "d","e","Arrow Text")
        links.ArrowDotted(
    "e","f")
        links.ArrowDottedText(
    "f","g","Dotted Text")
        links.ArrowThickLine(
    "g","h")
        links.ArrowThickLineText(
    "h","i","Think Line Text")
     
    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    Wanting a flowchart starting from the right to the left is also easy peasy... I have added here a clickable node that opens a website on a new tab. Hovering on "Click Me" node changes the mouse pointer to a hand automatically.

    RL.png

    Code:
    mer2.Initialize(Page,"merx1").FlowChart.RightLeft
        mer2.AddRectangle(
    "start","Start")
        mer2.AddRectangle(
    "stop","Click Me")
        mer2.OpenLinkText(
    "start","stop","OpenLinkText")
        mer2.AddURL(
    "stop","http://www.mbangas.com","Anele's Website")
     
    joulongleu likes this.
  5. Mashiane

    Mashiane Expert Licensed User

    This fortunately has different shapes that one can add too..

    shapes.png


    Code:
    mer1.Initialize(Page,"mer1").FlowChart.LeftRight
        mer1.AddRectangle(
    "start","Rectangle")
        mer1.AddRoundEdges(
    "step1","Rounded Edges")
        mer1.AddCircle(
    "step2","Circle")
        mer1.AddRhombus(
    "step3","Rhombus")
        mer1.AddSymetricShape(
    "stop","Stop")
        mer1.Arrow(
    "start","step1")
        mer1.ArrowDotted(
    "step1","step2")
        mer1.ArrowDottedText(
    "step2","step3","My link"
        mer1.ArrowThickLine(
    "step3","stop")
     
    joulongleu likes this.
  6. Mashiane

    Mashiane Expert Licensed User

    I think its kinda nice that one can style the nodes using pure css. This off course needs some knowledge of css. Check it out!

    stylesx.png

    Code:
    styles.Initialize(Page,"styles1").FlowChart.LeftRight
        styles.AddRectangle(
    "a","A")
        styles.AddRectangle(
    "b","B")
        styles.AddRectangle(
    "c","C")
        styles.AddRectangle(
    "d","D")
        styles.ApplyClass(
    "a","aclass")
        styles.ApplyClass(
    "b","bclass")
        styles.ApplyClass(
    "c","cclass")
        styles.Arrow(
    "a","b").Arrow("b","c").Arrow("c","d")
    One can use InjectCSS to add the CSS class definition..

    Code:
    .aclass > rect {
    fill:
    #FF0000 !important;
    stroke:
    #FFFF00 !important;
    stroke-width:4px !important;
    }
    .bclass > rect {
    fill:#f9f !important;
    stroke:#333 !important;
    stroke-width:4px !important;
    }
    .cclass > rect {
    fill:#ccf !important;
    stroke:#f66 !important;
    stroke-dasharray:5, 5 !important;
    stroke-width:2px !important;
    }
     
    joulongleu likes this.
  7. Mashiane

    Mashiane Expert Licensed User

    As noted earlier, one can use font awesome icons on their flowchart.. This explodes on that example.

    faexample.png

    Code:
    oe.Initialize(Page,"oe").FlowChart.TopBottom
        oe.AddRectangle(
    "b","fa:fa-twitter For peace").AddRectangle("c","fa:fa-ban forbidden")
        oe.AddRectangle(
    "d""fa:fa-spinner").AddRectangle("e""A fa:fa-camera-retro perhaps?")
        oe.Arrow(
    "b","c").Arrow("b","d").Arrow("b","e")
     
    joulongleu likes this.
  8. Mashiane

    Mashiane Expert Licensed User

    A left to right flowchart is also easily done...

    decisiontree.png

    Code:
    fc.Initialize(Page,"fc").FlowChart.LeftRight
        fc.AddRectangle(
    "a","Hard edge")
        fc.AddRoundEdges(
    "b","Round edge")
        fc.AddRhombus(
    "c","Decision")
        fc.AddRectangle(
    "d","Decision one")
        fc.AddRectangle(
    "e""Decision two")
        
    'add connections
        fc.Arrow("a","b")
        fc.Arrow(
    "b","c")
        fc.ArrowText(
    "c","d","One")
        fc.ArrowText(
    "c","e","Two")
     
    joulongleu and inakigarm like this.
  9. liulifeng77

    liulifeng77 Active Member Licensed User

    nice,hoping for full demo。:):):)
     
    Mashiane and joulongleu like this.
  10. Mashiane

    Mashiane Expert Licensed User

    Then there was sequence diagrams..

    SequenceDiagrams.png

    1.

    Code:
    sd.Initialize(Page,"sd").SequenceDiagram
        sd.AddParticipant(
    "a","Alice")
        sd.AddParticipant(
    "j","John")
        sd.AddSequence(
    "a","j","Hello John, how are you?")
        sd.AddSequenceDotted(
    "j","a","Great!")

    2.

    Code:
    sd1.Initialize(Page,"sd1").SequenceDiagram
        sd1.AddParticipant(
    "a","Alice")
        sd1.AddParticipant(
    "j","John")
        sd1.AddSequence(
    "a","j","Hello John, how are you?").ActivateParticipant("j")
        sd1.AddSequenceDotted(
    "j","a","Great!").DeActivateParticipant("j")
    3.

    Code:
    sd2.Initialize(Page,"sd2").SequenceDiagram
        sd2.AddParticipant(
    "a","Alice")
        sd2.AddParticipant(
    "j","John")
        sd2.AddSequence(
    "a","j","Hello John, how are you?").ActivateParticipant("j")
        sd2.AddSequence(
    "a","j","John, can you hear me?").ActivateParticipant("j")
        sd2.AddSequenceDotted(
    "j","a","Hi Alice, I can hear you!").DeActivateParticipant("j")
        sd2.AddSequenceDotted(
    "j","a","I feel great!").DeActivateParticipant("j")
     
    joulongleu likes this.
  11. Mashiane

    Mashiane Expert Licensed User

    Sequence Diagrams with notes..

    Notes.png

    1.

    Code:
    sd3.Initialize(Page,"sd3").SequenceDiagram
        sd3.AddParticipant(
    "j","John")
        sd3.AddNoteOnRightOfParticipant(
    "j","Text in note")
    2.

    Code:
    sd4.Initialize(Page,"sd4").SequenceDiagram
        sd4.AddParticipant(
    "a","Alice")
        sd4.AddParticipant(
    "j","John")
        sd4.AddSequence(
    "a","j","Hello John, how are you?")
        sd4.AddNoteOverParticipants(
    "a","j","A typical interaction")
     
    joulongleu likes this.
  12. Mashiane

    Mashiane Expert Licensed User

    SDs with loops, else, alt statements

    loops.png

    1.

    Code:
    sd5.Initialize(Page,"sd5").SequenceDiagram
        sd5.AddParticipant(
    "a","Alice")
        sd5.AddParticipant(
    "j","John")
        sd5.AddSequenceNoArrow(
    "a","j","Hello John, how are you?")
        sd5.AddLoop(
    "Every Minute").AddSequenceDottedNoArrow("j","a","Great!").AddEnd
    2.

    Code:
    sd6.Initialize(Page,"sd6").SequenceDiagram
        sd6.AddParticipant(
    "a","Alice")
        sd6.AddParticipant(
    "b","Bob")
        sd6.AddSequence(
    "a","b","Hello Bob, how are you?")
        sd6.AddAlt(
    "is sick").AddSequence("b","a","Not so good :(")
        sd6.AddElse(
    "is well").AddSequence("b","a","Feeling as fresh as a daisy")
        sd6.AddEnd
        sd6.AddOpt(
    "Extra Response").AddSequence("b","a","Thanks for asking")
        sd6.AddEnd
     
    joulongleu likes this.
  13. Mashiane

    Mashiane Expert Licensed User

    It has some kind of gantt chart too..

    gantt.png

    Code:
    gt.Initialize(Page,"gt").GanttChart.DateFormat("YYYY-MM-DD")
        gt.AddSection(
    "Phase 1")
        gt.AddTask(
    "t1","Task 1","2018-10-08","2018-10-31",0,False)
        gt.AddTask(
    "t5","Task 5","2018-11-01","2018-11-15",10,False)
        gt.AddSection(
    "Phase 2")
        gt.AddTask(
    "t2","Task 2","2018-10-20","2018-10-25",100,True)
        gt.AddTask(
    "t6","Task 6","2018-10-22","2018-10-25",20,False)
        gt.AddSection(
    "Phase 3")
        gt.AddTask(
    "t3","Task 3","2018-11-01","2018-11-10",10,True)
        gt.AddSection(
    "Phase 4")
        gt.AddTask(
    "t4","Task 4","2018-11-11","2018-11-30",100,False)
        gt.AddTask(
    "t7","Task 7","2018-12-01","2018-12-25",20,False)
     
    joulongleu likes this.
  14. Mashiane

    Mashiane Expert Licensed User

    Another flowchart example...

    simpleexample.png

    Code:
    aa.Initialize(Page,"aa").FlowChart.TopDown
        aa.AddRectangle(
    "a","A").AddRectangle("b","B").AddRectangle("c","C").AddRectangle("d","D")
        aa.Arrow(
    "a","b").Arrow("a","c").Arrow("b","d").Arrow("c","d")
     
    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