{ "id": "63774", "key": "TIMOB-3142", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [ { "id": "11244", "name": "Release 1.7.0", "archived": true, "released": true, "releaseDate": "2011-06-13" }, { "id": "11247", "name": "Sprint 2011-12", "archived": true, "released": true, "releaseDate": "2011-03-28" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2011-05-05T15:33:40.000+0000", "created": "2011-04-15T03:37:55.000+0000", "priority": { "name": "Trivial", "id": "5" }, "labels": [ "android", "defect", "enterprise", "release-1.7.0", "reported-1.6.0", "rplist" ], "versions": [], "issuelinks": [ { "id": "10246", "type": { "id": "10003", "name": "Relates", "inward": "relates to", "outward": "relates to" }, "inwardIssue": { "id": "64776", "key": "TIMOB-3706", "fields": { "summary": "Confirm TIMOB-3142", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "priority": { "name": "High", "id": "2" }, "issuetype": { "id": "5", "description": "The sub-task of the issue", "name": "Sub-task", "subtask": true } } } } ], "assignee": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "updated": "2011-05-05T15:33:40.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10202", "name": "Android", "description": "Android Platform" } ], "description": "{html}

Problem

\n

The height of a table and a text field in a tabbed window is\ninconsistent when the keyboard pops up. Consider an app with two\ntabs, and the first tab has a table and a text field on it. Touch\ninto the text field, and the keyboard pops up over the window. The\nlayout of the current tab does not change at all. Switch to the\nsecond tab, and then back to the first tab, and everything will\nhave resized to accomodate for the keyboard. This \"resize\" does not\noccur if the table is not added to the tab.

\n

Expected Behavior

\n

The tab should either resize or not. The presence of the table\nshould not affect this.

\n

Sample Code

\n

Follow the instructions of the visible text -- \"Touch 1st\", 2nd,\nand 3rd. After touching the 1st one, notice the keyboard pops up\nand the layout is NOT adjusted. Touch 2nd and 3rd, and now notice\nthe tab has been scrunched up.

\n
\n// create our main window, which is a table with a text field\nvar mainWindow = Titanium.UI.createWindow({\n    backgroundColor:'yellow',\n    title:'Touch Me 3rd'\n});\n\n// add a table view -- note that if you comment out this line, the resize issue will disappear!\nmainWindow.add(Ti.UI.createTableView());\n\n// add a text field\nmainWindow.add(Titanium.UI.createTextField({\n    width:300,\n    height:50,\n    value: 'Touch Me 1st',\n    backgroundColor:'white'\n}));\n\n// add a footer view\nmainWindow.add(Ti.UI.createView({\n    backgroundColor:'#3b5d7c',\n    bottom: 0,\n    height: 45\n}));\n\n// add our main window to a tab group\nvar tabGroup = Titanium.UI.createTabGroup();\ntabGroup.addTab(Titanium.UI.createTab({\n    window: mainWindow,\n    title: 'Touch Me 3rd'\n}));\ntabGroup.addTab(Titanium.UI.createTab({\n    window:Titanium.UI.createWindow({\n        backgroundColor: 'cyan',\n        title: 'Touch Me 2nd'\n    }),\n    title: 'Touch Me 2nd'\n}));\ntabGroup.open();\n
\n

Tested On

\n

Titanium SDK version: 1.6.0 (02/10/11 14:34 9db0685...)
\nAndroid Epic 4G 2.1

\n

Associated Helpdesk Ticket

\n

http://developer.appcelerator.com/helpdesk/view/72891

{html}", "attachment": [], "flagged": false, "summary": "Android: Inconsistent Sizing of Tabbed Window with Table and Textfield", "creator": { "name": "dtoth", "key": "dtoth", "displayName": "Dawson Toth", "active": true, "timeZone": "America/New_York" }, "subtasks": [], "reporter": { "name": "dtoth", "key": "dtoth", "displayName": "Dawson Toth", "active": true, "timeZone": "America/New_York" }, "environment": null, "comment": { "comments": [ { "id": "130146", "author": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "body": "{html}

(from [73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6])\nGive TabGroup the windowSoftInputMode property that windows also\nenjoy, so that pan/resize behavior can be more predictable.\n[#3142] \nhttps://github.com/appcelerator/titanium_mobile/commit/73b9a48bfcaf...

{html}", "updateAuthor": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "created": "2011-04-15T03:37:57.000+0000", "updated": "2011-04-15T03:37:57.000+0000" }, { "id": "130147", "author": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "body": "{html}

(from [0adfd459e883edf0661d4ff259b18c3151f06d51])\nAdd windowSoftInput property to TabGroup documentation [#3142]\n\nhttps://github.com/appcelerator/titanium_mobile/commit/0adfd459e883...

{html}", "updateAuthor": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "created": "2011-04-15T03:37:57.000+0000", "updated": "2011-04-15T03:37:57.000+0000" }, { "id": "130148", "author": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "body": "{html}

(from [064abfdece16638592e2a60d2d527b4e39a3e2ec])\nFix Ti.UI.Window documentation which erroneously refers to property\n\"softInputMode\" -- it's actually \"windowSoftInputMode\" [#3142]\n\nhttps://github.com/appcelerator/titanium_mobile/commit/064abfdece16...

{html}", "updateAuthor": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "created": "2011-04-15T03:37:57.000+0000", "updated": "2011-04-15T03:37:57.000+0000" }, { "id": "130149", "author": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "body": "{html}

What you're seeing is Android's non-specific behavior when the\nwindowSoftInputMode is not explicitly set. See\nAndroid's doc re \nthe unspecified setting, which states \"if neither of these [PAN\nvs RESIZE] are set, then the system will try to pick one or the\nother depending on the contents of the window\".

\n

In step 1 of the sample code, Android (for whatever reason) is\nchoosing the \"Pan\" mode -- the window moves up slightly to (just\nbarely) accomodate the text field when the soft keyboard appears.\nIn step 3, Android decides to use the \"Resize\" mode -- again, for\nwhatever reason.

\n

Android's pan-and/or-resize stuff gets particularly strange and\nornery when a scrollable view -- such as a ListView, which is the\nnative control of the TableView -- is on the Window. You see this\nin a video I made (no sound):

\n

http://screencast.com/t/PlRIxPUMseei

\n

The video shows a native (non-Titanium) Android application. The\nblue part near the top of the tabbed window is just a \"layout\",\nwhich is like a \"View\" in titanium -- it can hold children. Inside\nit, the grey part is a ListView, which is what Titanium's TableView\nis based on. When I touch into the text field, the non-specific\npan-or-resize that Android does (or doesn't do) totally mucks up,\nas you see. If I just take out that child ListView, then everything\nworks okay.

\n

Anyway, the point here is that we want to be able to predict how\nAndroid will behave, rather than the non-specified behavior. So\nI've added the windowSoftInputMode property to\nTabGroup, just like we have it for\nWindow. Because \"behind\" the TabGroup is an Android\nWindow which is responsible for the panning/resizing. So you can\nthink of it as there being 3 windows in play here: the \"outside\"\nwindow which contains the TabGroup (and which you do not specify in\nTitanium code -- it's just there already when you create the\nTabGroup), and then the two windows that you created, one each per\ntab.

\n

It's that outside window -- the one holding the entire TabGroup\n-- that is responsible for resizing/panning. But until just now,\nTitanium did not have a way for you to tell that outside window\nwhich pan/resize mode you want Android to use for the TabGroup.

\n

Now you can specify that. I've added the\nwindowSoftInputMode property to TabGroup. So if I\nmodify your code, it will look like this:

\n
\n// create our main window, which is a table with a text field\nvar mainWindow = Titanium.UI.createWindow({\n    backgroundColor:'yellow',\n    title:'Touch Me 3rd'\n});\n\n// add a table view -- note that if you comment out this line, the resize issue will disappear!\nmainWindow.add(Ti.UI.createTableView());\n\n// add a text field\nmainWindow.add(Titanium.UI.createTextField({\n    width:300,\n    height:50,\n    value: 'Touch Me 1st',\n    backgroundColor:'white'\n}));\n\n// add a footer view\nmainWindow.add(Ti.UI.createView({\n    backgroundColor:'#3b5d7c',\n    bottom: 0,\n    height: 45\n}));\n\n// add our main window to a tab group\nvar tabGroup = Titanium.UI.createTabGroup({\n    windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_ADJUST_RESIZE  // <--- THAT'S NEW!!!\n});\ntabGroup.addTab(Titanium.UI.createTab({\n    window: mainWindow,\n    title: 'Touch Me 3rd'\n}));\ntabGroup.addTab(Titanium.UI.createTab({\n    window:Titanium.UI.createWindow({\n        backgroundColor: 'cyan',\n        title: 'Touch Me 2nd'\n    }),\n    title: 'Touch Me 2nd'\n}));\ntabGroup.open();\n
\n

If you run that, you'll get the \"resize\" mode right away when\nyou click into the text field.

\n

NOTA BENA: I discovered while working on this\nthat our current, live, production documentation is wrong: It shows\n- in Ti.UI.Window - that the property name is\nsoftInputMode, when in fact it is\nwindowSoftInputMode.

{html}", "updateAuthor": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "created": "2011-04-15T03:37:58.000+0000", "updated": "2011-04-15T03:37:58.000+0000" }, { "id": "130150", "author": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "body": "{html}

QE Testing:

\n

Take the code from my just-previous comment and run it as your\napp.js. When you click in the text field, the window should\n\"resize\", giving the impression that it compresses and moves the\ntext field up and away from the soft keyboard.

{html}", "updateAuthor": { "name": "billdawson", "key": "billdawson", "displayName": "Bill Dawson", "active": true, "timeZone": "Europe/Berlin" }, "created": "2011-04-15T03:37:58.000+0000", "updated": "2011-04-15T03:37:58.000+0000" } ], "maxResults": 5, "total": 5, "startAt": 0 } } }