How to implement Cascading assets with Proteus Android Layout Engine

273 Views Asked by At

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" : ""
        }
      ]
    }
  ]
}
1

There are 1 best solutions below

1
On

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"
    }
  ]
}