{"action":"created","issue":{"url":"https://api.github.com/repos/eclipsesource/tabris-js/issues/576","labels_url":"https://api.github.com/repos/eclipsesource/tabris-js/issues/576/labels{/name}","comments_url":"https://api.github.com/repos/eclipsesource/tabris-js/issues/576/comments","events_url":"https://api.github.com/repos/eclipsesource/tabris-js/issues/576/events","html_url":"https://github.com/eclipsesource/tabris-js/issues/576","id":100317348,"number":576,"title":"Consider splitting layoutData into separate properties","user":{"login":"ralfstx","id":255637,"avatar_url":"https://avatars.githubusercontent.com/u/255637?v=3","gravatar_id":"","url":"https://api.github.com/users/ralfstx","html_url":"https://github.com/ralfstx","followers_url":"https://api.github.com/users/ralfstx/followers","following_url":"https://api.github.com/users/ralfstx/following{/other_user}","gists_url":"https://api.github.com/users/ralfstx/gists{/gist_id}","starred_url":"https://api.github.com/users/ralfstx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ralfstx/subscriptions","organizations_url":"https://api.github.com/users/ralfstx/orgs","repos_url":"https://api.github.com/users/ralfstx/repos","events_url":"https://api.github.com/users/ralfstx/events{/privacy}","received_events_url":"https://api.github.com/users/ralfstx/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/eclipsesource/tabris-js/labels/API","name":"API","color":"5319e7"},{"url":"https://api.github.com/repos/eclipsesource/tabris-js/labels/enhancement","name":"enhancement","color":"009800"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-11T13:58:34Z","updated_at":"2015-08-11T14:24:07Z","closed_at":null,"body":"Currently all aspects of a widget's position are defined by a single property `layoutData`, which supports an object with a combination of the following attributes:\r\n\r\n`left`, `right`, `top`, `bottom`, `centerX`, `centerY`, `baseline`, `width`, `height`\r\n\r\nThis results in a system of nested properties and leads to an additional level of nesting in JSON that is applied using the `apply` method.\r\n\r\n```js\r\npage.apply({\r\n  \"#submit\", {\r\n    text: \"Submit\",\r\n    layoutData: {\r\n      top: 10,\r\n      centerX: 10\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nFor declarative UI, we'd need a string representation.\r\n\r\n```xml\r\n<Button text=\"Submit\" layoutData=\"top: 10; centerX: 10;\" />\r\n```\r\n\r\nIt could be possible to support all of the layoutData attributes as properties of their own. This would avoid the nesting and also make declarative UIs easier:\r\n\r\n```js\r\npage.apply({\r\n  \"#submit\", {\r\n    text: \"Submit\",\r\n    top: 10,\r\n    centerX: 10\r\n  }\r\n});\r\n```\r\n```xml\r\n<Button text=\"Submit\" top=\"10\" centerX=\"10\" />\r\n```\r\n\r\nThe latter looks like a simpler system to me. What implications could this change have?"},"comment":{"url":"https://api.github.com/repos/eclipsesource/tabris-js/issues/comments/129902574","html_url":"https://github.com/eclipsesource/tabris-js/issues/576#issuecomment-129902574","issue_url":"https://api.github.com/repos/eclipsesource/tabris-js/issues/576","id":129902574,"user":{"login":"ralfstx","id":255637,"avatar_url":"https://avatars.githubusercontent.com/u/255637?v=3","gravatar_id":"","url":"https://api.github.com/users/ralfstx","html_url":"https://github.com/ralfstx","followers_url":"https://api.github.com/users/ralfstx/followers","following_url":"https://api.github.com/users/ralfstx/following{/other_user}","gists_url":"https://api.github.com/users/ralfstx/gists{/gist_id}","starred_url":"https://api.github.com/users/ralfstx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ralfstx/subscriptions","organizations_url":"https://api.github.com/users/ralfstx/orgs","repos_url":"https://api.github.com/users/ralfstx/repos","events_url":"https://api.github.com/users/ralfstx/events{/privacy}","received_events_url":"https://api.github.com/users/ralfstx/received_events","type":"User","site_admin":false},"created_at":"2015-08-11T14:24:07Z","updated_at":"2015-08-11T14:24:07Z","body":"When changing the positioning of a widget using the `apply` method, other layout properties may need to be reset. For example, to change the horizontal alignment of a widget by means of a CSS class, the following could work:\r\n\r\n```json\r\n{\r\n  \".left-aligned\": {\r\n    \"left\": 10,\r\n    \"right\": null,\r\n    \"centerX\": null\r\n  },\r\n  \".right-aligned\": {\r\n    \"left\": 10,\r\n    \"right\": null,\r\n    \"centerX\": null\r\n  },\r\n  \".center-aligned\": {\r\n    \"left\": null,\r\n    \"right\": null,\r\n    \"centerX\": 0\r\n  }\r\n}\r\n```\r\n\r\nHaving to reset other properties explicitly can be seen as a drawback, however, with layoutData it is **not possible at all** to replace only the *horizontal* positioning of a widget.\r\n\r\nProperties would have to have to be resettable by a value like `null` or `\"auto\"`."}}