I've been tinkering around with TI to see if i could port a game\nI've been working on over from obj-c to TI. In the process i've\ndiscovered that the apps you can create with TI are severely\nlimited in layout options. I feel this is an issue that could prove\nfatal to the mass adoption of TI in general and hinder it's\ngrowth.
\nThe issue comes to light when you wish to create an app with a\ncustom designed layout, such as a layout with a fixed header and\nthen a fixed height / width tableview beneath it. Currently ti only\nlets you use a webview or tableview for your views and they both\ntake up the full real estate of the screen. There's no way to embed\na tableview with a fixed height inside a webview (i dont think this\nis possible with apples api)
\nWhy don't you use HTML to mimic a tableview you might ask? I\nthought of that and in my testing found that if you make a fixed\nheight div with overflow:auto the iphone webkit ignores it and\nsimply expands the height of the div to display all the content (no\nscrollbars sadly). While the same page loads fine with scrollbars\nin the regular safari.
\nThe lack of an embedable tableview makes apps / games such as\nthese examples impossible in Titanium's current form. If you go\nsearching for games on the appstore youll find that probably 60% or\nmore of the rpg ish games use this layout.
\nhttp://www.upchan.com/img/large/6d6b5d6f8696c26a6625e45131c206d48b0c231e.jpg
\nhttp://www.upchan.com/img/large/126aed1d15f44e92d0b55dfaf5b2f9c6873e8585.jpg
A possible solution would be i think to make a new \"native\" view\ntype that you could embed both webviews and / or tableview inside\nof it. This would allow you to have the main view be native and you\ncould mix and match web views and table views to create the desired\ncustom layout. The obvious restriction of only being able to insert\nnative objects in the native would be likely be needed.
\nWhile i'm on the subject. I would also love it if a ImageView\nobject would be accessible for TI users to create. UIImageView has\na built in animation system that is very very good and easy to use.\nI looked into doing something similar in jQuery frameworks and it's\nactually quite cumbersome. The only flipbook / slideshow custom\nanimation class i could find was at least a few hundred lines of\nbloated code. While all you do with a UIImageView is provide an\narray of image file names and specify duration and whether or not\nit should repeat.
\nexample:
\nNSArray flameimages = [[NSArray alloc] initWithObjects:\n[UIImage imageNamed:@\"flame1.png\"], [UIImage\nimageNamed:@\"flame2.png\"], [UIImage imageNamed:@\"flame3.png\"],\n[UIImage imageNamed:@\"flame4.png\"], [UIImage\nimageNamed:@\"flame5.png\"], nil];
\nflame_left.animationImages = (NSArray ) flameimages;
\nflame_left.animationDuration = .90;
\n[flame_left startAnimating];
attaching images links didnt work too well.
another
A little more information. I went ahead and mocked up what might\nwork for the tiapp.xml formatting.
\nBasically everything inside \"layouts\" will be looped over and\ninserted into the native view at the specified coordinates with the\nprovided widths and heights. Also note i put \"backgroundImage\" on\nthe window properties as well, not sure if this currently exists or\nnot but for my layouts i'd apply a background image to the entire\nview and then place my tableview in the correct position.
\nNow the webview stuff for header and footer is a little iffy. I\nam not quite sure that would work because the webview itself would\noverlay ontop of the views background image. Was hoping we'd be\nable to use those for headers, but it seems like we might need\ndirect access to create UIImageViews and place them inside native\nviews instead. So instead of the header and footer we would use\nimageviews in the place...
\njust brainstorming here, just trying to figure up a way to\n\"clone\" layouts of current apps in the app store.
\n\n<windows>\n <window>\n <id>initial</id>\n <type>native</type>\n <layouts>\n <layout>\n <type>webview</type>\n <url>header.html</url>\n <x>0</x>\n <y>0</y>\n <width>320</width>\n <height>20</height>\n </layout>\n <layout>\n <type>tableview</type>\n <x>10</x>\n <y>21</y>\n <width>300</width>\n <height>280</height>\n </layout>\n <layout>\n <type>webview</type>\n <url>footer.html</url>\n <x>0</x>\n <y>301</y>\n <width>320</width>\n <height>20</height>\n </layout>\n </layouts>\n <backroundImage>blah.jpg</backgroundImage>\n <icon>ti://featured</icon>\n <barColor>#000</barColor>\n <fullscreen>false</fullscreen>\n </window>\n <window>\n <id>about</id>\n <url>about.html</url>\n <backgroundColor>#111</backgroundColor>\n <icon>ti://top rated</icon>\n <barColor>#000</barColor>\n <fullscreen>false</fullscreen>\n </window>\n</windows>\nVery good ideas ... let us talk a bit and we'll get back to you\n...
\nI'm also wondering if some of this is just layering of views on\nwindows. Right now views are 1 dimensional and you can only have 1\nview per 1 window visible at a time. I wonder if we should just\nallow you to have layering or z-ordering or something like\nthat...
also on the image viewer, that's something going to support very\nsoon, too.
OK we chatted about this and blain's going to write this up. I\nthink we could support your requirements pretty easily... if we\ncould support this, would you be willing to work with us to port\nyour games (at least one)? (i just downloaded your iMob online --\nfreaking cool, BTW)
Oops. sorry. I am not the creator of iMob. i was just giving\nexamples or the many many similar knock offs on the appstore. I am\nhowever working on a similar (but much more complicated and in my\nopinion content rich) game. I had planned to scrap the objective c\nversion and go with Titanium from this point on if it could provide\neverything needed layout wise :)
I could however make a knock off mob game with the same feature\nset as imob just to show off titanium to new comers if you\nlike.
We could do layouts in Tiapp.xml, or also in javascript. We've\nbeen talking about this in earnest beforehand (it's listed as\n'support multiple views within a page' on the road map) and the\npossible code would be along the lines of:
\n//Set up views\nvar table = Titanium.UI.createTableView(...);\nvar webby = Titanium.UI.createWebView(...);\nvar webby2 = Titanium.UI.createWebView(...);\nvar webby3 = Titanium.UI.createWebView(...);\n//Set up layout\nvar layout = Titanium.UI.createLayout();\nlayout.addView(webby,{y:0,height:100});\nlayout.addView(webby2,{height:100});\nlayout.addView(table,{y:100});\nlayout.addView(webby3,{x:60,y:300,width:150,height:50,z:1});\n//Use layout\nTitanium.UI.currentWindow.setLayout(layout);\n// +---------+\n// | Webby |\n// | |\n// +---------+\n// | Table |\n// | |\n// | +---+ |\n// +--+Wb3|--+\n// | +---+ |\n// | Webby2 |\n// +---------+\n\nThere needs to be more thought about the algorithm, but the general\nidea is constraint-based layout, where views with undefined\nconstraints will take up the unoccupied space in that layer in a\nfirst-come, first served format. Note that table, webby and webby2\ndid not have defined x nor width constraints, so that they take up\nthe entire width of the window. Similarly, Webby is given a height\nand y to pin it to the top, webby 2 is given a height but no y to\npin it to the bottom, and it serves to frame table to fill in the\nrest.\nThe advantage to allowing undefined constraints would be for the\npossibility of the layout automatically adjusting for any changes\nin orientation change (IE, were the device to rotate from portrait\nto landscape, webby, webby2, and table would be become wider,\nwebby2 would still hug the bottom, and the table would become\nshorter. However, this poses a problem with webby3. Hrm. Perhaps if\nthe option is given for portrait and landscape positioning? Perhaps\nlayering and webby3 would be dropped until this is figured out)
\nAutopositioning algorithm aside, much of the native structure is\nalready there due to a detail of the flip and curl transitions.
Very interesting. Either in tiapp or javascript or both is fine\nwith me. As long as there's a way to do it. :)
\nI think that sounds like it might work, however i still think at\nthe very least the window should have a native \"view\" built in that\nyou can apply a few basic styles too. background etc. The reasoning\nis that you can apply a background color of transparent to a\ntableview so the background shows through. Web views each have\ntheir own individual background colors behind them correct since\nits essentially a web page in each one. So this would make a layout\nthat is a full screen background image behind everything rather\ndifficult, you'd have to slice stuff up and fuss with lining\neverything up.
\nSo perhaps a mix or what is described above with a simple UIView\ndefaulting to a window as the container element. So in my case i\nwould do something like this.
\n\n UIView\n\n+-+-----------+-+ | | ImageView | | <---- outer UIView\ncontainer has full screen background image that shows through table\n| | | | | My header images and footers have png transparency so it\nshows though those as well +-+-----------+-+ | | UITable | | | | |\n| | | | | +-+-----------+-+ | | ImageView | | | | | |\n+-+-----------+-+
\nas far as the undefined constraints, yea it should definately\nsupport that as most things would probably use it unless it needed\nto be fixed constraints which could override the auto fill\nbehavior.
OOPS. forgot code block
\n\nUIView\n+-+-----------+-+ \n| | ImageView | | <---- outer UIView container has full screen background image that shows through table \n| | | | | My header images and footers have png transparency so it shows though those as well \n+-+-----------+-+ \n| | UITable | | \n| | | | \n| | | | \n+-+-----------+-+ \n| | ImageView | | \n| | | | \n+-+-----------+-+\nI was going to link to the codestrong api mention, but it looks\nlike the function wasn't listed. Yes, documentation is in need of\nwork. It also looks like the accessor functions are missing, so\nyou'll have to take my word on this.
\nin Tiapp.xml or as an argument to createWindow, use the\nbackgroundColor to set the background color of the window, and\nbackgroundImage to set the background image (where the path\nprovided for backgroundImage is relative to the calling html (Or in\nthe case of Tiapp.xml, the resources root)
\nIn this case, if you truly want image views around the table\nwith no user interaction, it'd be a layout with the table in the\nmiddle, the background image serving as the frame as well. If you\nwant to have buttons or other UI outside the table view, use a\nwebView and use the UI.createButton and friends as appropriate.
\nAs of this writing, and up to 0.7, Titanium doesn't expose\ncustomization of the table view. This will change in the future,\nwhere the table view can be transparent to leak through the\nbackground image, and cells can have custom (stretchable)\nimages.
Awesome. I figured the backgroundimage would probably be there\nor be easy to add. The main problem now is it taking up the whole\nview. If the layout changes you described were added then yes, this\nwould likely be enough.
\n\"If you want to have buttons or other UI outside the table view,\nuse a webView and use the UI.createButton and friends as\nappropriate.\"
\nWouldnt that result in a block of (whatever bg color the html in\nthe webview has set) in the middle of the background image the\nwindow has set ?
\nI do see how you could frame the tableview using only a\nbackground image, however in my interfaces i also have UIImageViews\nwith animation in them as part of the core layout (i have a header\nimage above table with animated imageviews in different positions)\nfor things such as flickering torches or dripping water, etc. This\nstill is not possible without being able to place objects directly\nonto the window (or a native view) itself.
The webviews have been set to have a transparent background\nunderneath the web page. So if you set the body's css to have a\nbackground-color of 'transparent', the background image should leak\nthrough. While the background image is indeed a static image,\nimages in web views can be animated gifs or programmatic.
\nThe intent is that the web view is the basic building block.\nIt's why the UIImageView wasn't exposed as a widget like the slider\nor the button, because it would be too redundant compared to an img\ntag.
True. the only problem is that animated gifs are very poor\nquality. I'm dealing with fairly high quality png images that the\nuiimageview animates quite nicely in sequence. If i used animated\ngifs it would look like nothing better than a geocities page.\n=\\
\nAlso i thought haynie said image views were coming?? look above\nin ticket.
\n\"also on the image viewer, that's something going to support\nvery soon, too.\"
Yeah, we're planning a full features image view... Nolan can\nprovide some
\ninsight on when but I hope very soon.
Very cool. I'm excited. Well i guess let me know when layout\ntweaks are in place that allow for the creation of these sorts of\nlayouts, i'll be anxious to port my games progress to titanium.
\nthanks guys!
composite view added in 0.7.0
Is there any documentation about how to use this? Would like to\ntest it out
not right now. if you go to the views tab in Kitchen Sink, there\nare
\n3 examples:
I also have a number of advanced demos that use it that are\ndocumented here:
\n\nhttp://www.codestrong.com/timobile/guides/iphone_module_development/
\nhoping to get this documented today
I haven't had any luck creating the layout that is described in\nthis ticket. Perhaps i'm missing something.
\nI used the custom events example. I tried taking the height out\nof the middle web view hoping it would add a scrollbar if the\ncontent went over (but still retain the header and footer at top\nand bottom). No dice.
\nWhat is the \"proper\" way to achieve this currently with titanium\nlayouts?
\nThanks