How to implement Cascading assets with Proteus Android Layout Engine

Question

i want to generate a cascading assets from Proteus library. I'm new to android development and i was managed to build a dynamic view with the library with the help of @adithya ( developer of Proteus).

what i want simple is assume that there is a radio button with the value of radio button i need to add more assets to the below of the radio button

its like do you have children ? if yes how many children text-box should load below

like this

{
  "survey":[
    {
      "value" : "What's your name?",
      "type" : "TextView",
      "cascade" : "0",
      "show" :"true",
      "survey" : "",
      "id" : "1"
    },
    {
      "value" : "What's your age?",
      "type" : "TextView",
      "cascade" : "0",
      "show" :"true",
      "survey" : "",
      "id" : "2"
    },
    {
      "value" : "Do you have any children?",
      "type" : "SelectionController",
      "cascade" : "1",
      "show" :"true",
      "id" : "3",
      "option" : [
        {
          "value": "YES",
          "cascade": "1",
          "type": "option",
          "show": "false",
          "id" : "3.1",
          "survey": [
            {
              "value" : "How many children?",
              "type" : "TextView",
              "cascade" : "0",
              "show" :"false",
              "id" : "3.1.1",
              "survey" : ""
            },
            {
              "value" : "How many are married",
              "type" : "TextView",
              "cascade" : "0",
              "show" :"false",
              "id" : "3.1.2",
              "survey" : ""
            }
          ]
        },
        { "value": "No",
          "cascade": "0",
          "type": "option",
          "show": "false",
          "id" : "3.2",
          "survey": ""
        }
      ]
    },
    {
      "value" : "What's your address?",
      "type" : "TextView",
      "cascade" : "0",
      "show" :"true",
      "id" : "4",
      "survey" : ""
    },
    {
      "value" : "What is your status?",
      "type" : "SelectionController",
      "cascade" : "1",
      "id" : "5",
      "show" :"true",
      "option" : [
        {
          "value" : "Graduate",
          "type" : "option",
          "cascade" : "1",
          "id" : "5.1",
          "show" :"false",
          "survey" : [
            {
              "value" : "Which year?",
              "type" : "TextView",
              "cascade" : "0",
              "show" :"false",
              "id" : "5.1.1",
              "survey" : ""
            },
            {
              "value" : "Which faculty?",
              "type" : "TextView",
              "cascade" : "0",
              "show" :"false",
              "id" : "5.1.2",
              "survey" : ""
            }
          ]
        },
        {
          "value" : "Undergraduate",
          "type" : "option",
          "cascade" : "1",
          "show" :"false",
          "id" : "5.2",
          "survey" : [
            {
              "value" : "where are you studying?",
              "type" : "SelectionController",
              "cascade" : "1",
              "show" :"false",
              "id" : "5.2.1",
              "option" : [
                {
                  "value" : "APIIT",
                  "type" : "option",
                  "cascade" : "1",
                  "show" :"false",
                  "id" : "5.2.1.1",
                  "survey": [
                    {
                      "value" : "What is your GPA?",
                      "type" : "TextView",
                      "cascade" : "0",
                      "show" :"false",
                      "id" : "5.2.1.1.1",
                      "survey" : ""
                    },
                    {
                      "value" : "How was APIIT?",
                      "type" : "TextView",
                      "cascade" : "0",
                      "show" :"false",
                      "id" : "5.2.1.1.2",
                      "survey" : ""
                    }
                  ]
                },
                {
                  "value" : "SLIIT",
                  "type" : "option",
                  "cascade" : "0",
                  "show" :"false",
                  "id" : "5.2.1.2",
                  "survey" : ""
                },
                {
                  "value" : "UCSC",
                  "type" : "option",
                  "cascade" : "1",
                  "show" :"false",
                  "id" : "5.2.1.3",
                  "survey": [
                    {
                      "value" : "How long being in UCSC?",
                      "type" : "TextView",
                      "cascade" : "0",
                      "show" :"false",
                      "id" : "5.2.1.3.1",
                      "survey" : ""
                    },
                    {
                      "value" : "How is UCSC?",
                      "type" : "TextView",
                      "cascade" : "0",
                      "show" :"false",
                      "id" : "5.2.1.3.2",
                      "survey" : ""
                    }
                  ]
                },
                {
                  "value" : "UOM",
                  "type" : "option",
                  "cascade" : "0",
                  "show" :"false",
                  "id" : "5.2.1.4",
                  "survey" : ""
                }
              ]
            }
          ]
        }
      ]
    },
    {"value" : "Are you tired of studying?",
      "type" : "SelectionController",
      "cascade" : "0",
      "show" :"true",
      "id" : "6",
      "option" : [
        {
          "value" : "YES",
          "type" : "option",
          "cascade" : "1",
          "show" :"false",
          "id" : "6.1",
          "survey": ""
        },
        {
          "value" : "NO",
          "type" : "option",
          "cascade" : "0",
          "show" :"false",
          "id" : "6.2",
          "survey" : ""
        }
      ]
    }
  ]
}

Do you want to render multiple views below the radio button? What are you referring to as an `assets`? Can you please add some mocks/screenshots of how you want to the UI to look and JSON data if any. — vader, Dec 21 '17 at 05:24
Can you also share mocks of how the screen should look like? — vader, Dec 29 '17 at 07:29

score 0 · Answer 1 · answered Jan 02 '18 at 09:25

If data-driven views is what you are looking for then the children attribute can be a bound object as the following example

{
  "type": "LinearLayout",
  "orientation": "horizontal",
  "children": {
    "@": {
      "collection": "@{user.tags}",
      "layout": {
        "type": "LinearLayout",
        "orientation": "horizontal",
        "data": {
          "tag": "@{user.tags[$index]}"
        },
        "children": [
          {
            "type": "TextView",
            "text": "@{tag.title}"
          }
        ]
      }
    }
  }
}

collection must be json array.

Here collection is the data set, i.e. is how many times items in the array of data.

layout must be a layout definition or reference

What layout to inflate for every item of the collection. Note the data attribute and the use of $index in the layout.

This will work with a data set like the following:

{
  "tags": [
    {
      "title": "alpha"
    },
    {
      "title": "beta"
    },
    {
      "title": "gamma"
    },
    {
      "title": "delta"
    },
    {
      "title": "niner"
    }
  ]
}

but when it cascading it will be an issue. im using recursion in order to go to child's chidren. and thought of creating elements. and those elements can be depended. example -| are you schooling -> if user select yes -> what is your school(Q); if user select no -> why you not study (Q) like wise — Thilina Dinith Fonseka, Jan 23 '18 at 05:50

How to implement Cascading assets with Proteus Android Layout Engine

1 Answers1