apigee / IgniteEngine-iOS

A platform for rapidly building native mobile applications using declarative JSON.
https://ignite.apigee.com
Other
21 stars 14 forks source link

Add explicit 'auto' property to handle variable height table cells. #82

Open brandonscript opened 9 years ago

brandonscript commented 9 years ago

It appears that variable height tables/collections are not working any longer and/or the auto-height of text controls is not working. Only time these would need to be variable height is when text or attributed text controls are used. Perhaps we need to use something like this to calculate the height of all text-based controls (not layouts or images)? To use variable height tables, you should also have to explicitly set the cell.size.h (or cell.size.height if you're using long-form) attribute to auto.

Here is an example of what should be required to set a variable height table cell (note auto height on cell.size and auto height on the text control).

{
    "_id": "collectionRestaurants",
    "_type": "Table",
    "attributes": {
        "cell.size": "100%,auto",
        "data.basepath": "entities",
        "datasource.id": "dataRestaurants"
    },
    "controls": [
        {
            "_id": "layoutRestaurantList",
            "_type": "Layout",
            "attributes": {
                "bg.color": "#fafafa",
                "size": "100%"
            },
            "controls": [
                {
                    "_type": "AttributedText",
                    "attributes": {
                        "color": "#FF4300",
                        "font": "FontAwesome:18",
                        "size": "50%,20",
                        "text": "[[$row.firstName]] [[$row.lastName]]",
                        "text.align": "center"
                    }
                },
                {
                    "_type": "Text",
                    "attributes": {
                        "align.v": "middle",
                        "color": "#6c6c6c",
                        "font": "HelveticaNeue-Light:11",
                        "size": "100%,auto",
                        "text": "UUID: [[$row.bio]]",
                        "text.align": "justify"
                    }
                }
            ]
        }
    ]
}
jeremyanticouni commented 9 years ago

Fixed. See https://github.com/ApigeeDelta/ignite-iOS-engine/commit/8c6b5729bd769f55ecf8ec8fa1aebe6efb48226a

Sample table with variable height cells shown below.

$view:

{
  "$view": {
    "attributes": {
      "statusBar.style": "light",
      "bg.color": "#ffffff"
    },
    "controls": [
      {
        "_id": "layoutMain",
        "_type": "Layout",
        "attributes": {
          "size.w": "100%",
          "size.h": "100%"
        },
        "controls": [
          {
            "_id": "tableTest",
            "_type": "Table",
            "attributes": {
              "size.h": "100%",
              "size.w": "100%",
              "separator.style": "default",
              "datasource.id": "dataTest",
              "data.basepath": "data",
              "cell.size.w": "100%"
            },
            "controls": [
              {
                "_id": "textKicker",
                "_type": "Text",
                "attributes": {
                  "padding": 10,
                  "size.w": "100%",
                  "color": "#4c4c4c",
                  "layoutType": "relative",
                  "font": "HelveticaNeue:14",
                  "text": "[[$row.text]]"
                }
              }
            ]
          }
        ]
      }
    ],
    "datasources": [
      {
        "_id": "dataTest",
        "_type": "JSON",
        "attributes": {
          "autoLoad.enabled": true,
          "baseUrl": "/test.json",
          "http.method": "GET"
        }
      }
    ]
  }
}

Raw Datasource:

{
    "data": [

        {
            "name": "1",
            "text": "Ice cream jelly-o lollipop pudding ice cream candy. Marzipan cupcake toffee. Jelly beans biscuit dragée gummi bears."
        },
        {
            "name": "2",
            "text": "Chocolate gummies pie. Candy canes muffin sweet cake jujubes chocolate bar tart candy lollipop. Gummies cupcake chocolate pudding gingerbread carrot cake toffee dragée gummi bears. Wafer halvah chocolate bar cookie gingerbread pastry candy pudding soufflé. Jelly-o liquorice jelly-o ice cream dessert gummi bears. Halvah brownie icing lollipop sweet chocolate bar biscuit toffee croissant."
        },
        {
            "name": "3",
            "text": "Chocolate muffin toffee chocolate cake. Oat cake toffee gummies lollipop cotton candy pudding. Icing gummi bears pastry chupa chups pastry icing sesame snaps. Lollipop macaroon jujubes marshmallow sesame snaps cake cake. Icing tart macaroon pastry pie candy canes sweet roll croissant. Croissant oat cake cheesecake croissant tart tiramisu bonbon sesame snaps. Cake marshmallow gummi bears sugar plum bonbon topping sweet roll cupcake dessert. Topping chocolate cake pastry bear claw wafer chupa chups bear claw chocolate bar tiramisu. Cupcake bonbon tiramisu tart brownie carrot cake tootsie roll tiramisu powder. Chocolate bar brownie pie gummies apple pie chocolate tootsie roll wafer dessert. Chocolate bar candy canes jelly-o gummi bears chocolate. Gummies candy chocolate bar ice cream tiramisu gummies croissant cotton candy jelly. Cotton candy sweet apple pie powder sesame snaps lollipop powder. Muffin jelly sugar plum fruitcake cookie. Chocolate sweet roll caramels lemon drops. Jelly beans jelly-o dragée jelly-o bear claw jujubes toffee jelly-o danish. Sweet roll powder sweet toffee. Chupa chups biscuit muffin pudding. Chupa chups cupcake toffee. Lollipop croissant jelly-o jelly."
        }
    ]
}

ios simulator screen shot apr 28 2015 2 12 33 pm

brandonscript commented 9 years ago

This should be specifically documented - also see note in original ticket about adding auto property to reduce ambiguity.

brandonscript commented 9 years ago

This is now documented. All that's left is to add auto attribute for explicitly defining auto height.