[TIMOB-125] Layouts are too limited

Description

Attachments

Comments

1. Kevin Holland 2011-04-15

   attaching images links didnt work too well.

2. Kevin Holland 2011-04-15

   another

3. Kevin Holland 2011-04-15

   A little more information. I went ahead and mocked up what might work for the tiapp.xml formatting.

   Basically everything inside "layouts" will be looped over and inserted into the native view at the specified coordinates with the provided widths and heights. Also note i put "backgroundImage" on the window properties as well, not sure if this currently exists or not but for my layouts i'd apply a background image to the entire view and then place my tableview in the correct position.

   Now the webview stuff for header and footer is a little iffy. I am not quite sure that would work because the webview itself would overlay ontop of the views background image. Was hoping we'd be able to use those for headers, but it seems like we might need direct access to create UIImageViews and place them inside native views instead. So instead of the header and footer we would use imageviews in the place...

   just brainstorming here, just trying to figure up a way to "clone" layouts of current apps in the app store.

      <windows>
          <window>
              <id>initial</id>
              <type>native</type>
              <layouts>
                  <layout>
                      <type>webview</type>
                      <url>header.html</url>
                      <x>0</x>
                      <y>0</y>
                      <width>320</width>
                      <height>20</height>
                  </layout>
                  <layout>
                      <type>tableview</type>
                      <x>10</x>
                      <y>21</y>
                      <width>300</width>
                      <height>280</height>
                  </layout>
                  <layout>
                      <type>webview</type>
                      <url>footer.html</url>
                      <x>0</x>
                      <y>301</y>
                      <width>320</width>
                      <height>20</height>
                  </layout>
              </layouts>
              <backroundImage>blah.jpg</backgroundImage>
              <icon>ti://featured</icon>
              <barColor>#000</barColor>
              <fullscreen>false</fullscreen>
          </window>
          <window>
              <id>about</id>
              <url>about.html</url>
              <backgroundColor>#111</backgroundColor>
              <icon>ti://top rated</icon>
              <barColor>#000</barColor>
              <fullscreen>false</fullscreen>
          </window>
      </windows>
      

4. Jeff Haynie 2011-04-15

   Very good ideas ... let us talk a bit and we'll get back to you ...

   I'm also wondering if some of this is just layering of views on windows. Right now views are 1 dimensional and you can only have 1 view per 1 window visible at a time. I wonder if we should just allow you to have layering or z-ordering or something like that...

5. Jeff Haynie 2011-04-15

   also on the image viewer, that's something going to support very soon, too.

6. Jeff Haynie 2011-04-15

   OK we chatted about this and blain's going to write this up. I think we could support your requirements pretty easily... if we could support this, would you be willing to work with us to port your games (at least one)? (i just downloaded your iMob online -- freaking cool, BTW)

7. Kevin Holland 2011-04-15

   Oops. sorry. I am not the creator of iMob. i was just giving examples or the many many similar knock offs on the appstore. I am however working on a similar (but much more complicated and in my opinion content rich) game. I had planned to scrap the objective c version and go with Titanium from this point on if it could provide everything needed layout wise :)

8. Kevin Holland 2011-04-15

   I could however make a knock off mob game with the same feature set as imob just to show off titanium to new comers if you like.

9. Blain Hamon 2011-04-15

   We could do layouts in Tiapp.xml, or also in javascript. We've been talking about this in earnest beforehand (it's listed as 'support multiple views within a page' on the road map) and the possible code would be along the lines of:
   

      //Set up views
      var table = Titanium.UI.createTableView(...);
      var webby = Titanium.UI.createWebView(...);
      var webby2 = Titanium.UI.createWebView(...);
      var webby3 = Titanium.UI.createWebView(...);
      //Set up layout
      var layout = Titanium.UI.createLayout();
      layout.addView(webby,{y:0,height:100});
      layout.addView(webby2,{height:100});
      layout.addView(table,{y:100});
      layout.addView(webby3,{x:60,y:300,width:150,height:50,z:1});
      //Use layout
      Titanium.UI.currentWindow.setLayout(layout);
      // +---------+
      // |  Webby  |
      // |         |
      // +---------+
      // |  Table  |
      // |         |
      // |  +---+  |
      // +--+Wb3|--+
      // |  +---+  |
      // | Webby2  |
      // +---------+
      

   There needs to be more thought about the algorithm, but the general idea is constraint-based layout, where views with undefined constraints will take up the unoccupied space in that layer in a first-come, first served format. Note that table, webby and webby2 did not have defined x nor width constraints, so that they take up the entire width of the window. Similarly, Webby is given a height and y to pin it to the top, webby 2 is given a height but no y to pin it to the bottom, and it serves to frame table to fill in the rest.

   The advantage to allowing undefined constraints would be for the possibility of the layout automatically adjusting for any changes in orientation change (IE, were the device to rotate from portrait to landscape, webby, webby2, and table would be become wider, webby2 would still hug the bottom, and the table would become shorter. However, this poses a problem with webby3. Hrm. Perhaps if the option is given for portrait and landscape positioning? Perhaps layering and webby3 would be dropped until this is figured out)

   Autopositioning algorithm aside, much of the native structure is already there due to a detail of the flip and curl transitions.

10. Kevin Holland 2011-04-15

    Very interesting. Either in tiapp or javascript or both is fine with me. As long as there's a way to do it. :)

    I think that sounds like it might work, however i still think at the very least the window should have a native "view" built in that you can apply a few basic styles too. background etc. The reasoning is that you can apply a background color of transparent to a tableview so the background shows through. Web views each have their own individual background colors behind them correct since its essentially a web page in each one. So this would make a layout that is a full screen background image behind everything rather difficult, you'd have to slice stuff up and fuss with lining everything up.

    So perhaps a mix or what is described above with a simple UIView defaulting to a window as the container element. So in my case i would do something like this.

         UIView
        

    +-+-----------+-+ | | ImageView | | <---- outer UIView container has full screen background image that shows through table | | | | | My header images and footers have png transparency so it shows though those as well +-+-----------+-+ | | UITable | | | | | | | | | | +-+-----------+-+ | | ImageView | | | | | | +-+-----------+-+

    as far as the undefined constraints, yea it should definately support that as most things would probably use it unless it needed to be fixed constraints which could override the auto fill behavior.

11. Kevin Holland 2011-04-15

    OOPS. forgot code block

        UIView
        +-+-----------+-+ 
        | | ImageView | | <---- outer UIView container has full screen background image that shows through table 
        | |           | |     | My header images and footers have png transparency so it shows though those as well 
        +-+-----------+-+ 
        | |  UITable  | | 
        | |           | | 
        | |           | | 
        +-+-----------+-+ 
        | | ImageView | | 
        | |           | | 
        +-+-----------+-+
        

12. Blain Hamon 2011-04-15

    I was going to link to the codestrong api mention, but it looks like the function wasn't listed. Yes, documentation is in need of work. It also looks like the accessor functions are missing, so you'll have to take my word on this.

    in Tiapp.xml or as an argument to createWindow, use the backgroundColor to set the background color of the window, and backgroundImage to set the background image (where the path provided for backgroundImage is relative to the calling html (Or in the case of Tiapp.xml, the resources root)

    In this case, if you truly want image views around the table with no user interaction, it'd be a layout with the table in the middle, the background image serving as the frame as well. If you want to have buttons or other UI outside the table view, use a webView and use the UI.createButton and friends as appropriate.

    As of this writing, and up to 0.7, Titanium doesn't expose customization of the table view. This will change in the future, where the table view can be transparent to leak through the background image, and cells can have custom (stretchable) images.

13. Kevin Holland 2011-04-15

    Awesome. I figured the backgroundimage would probably be there or be easy to add. The main problem now is it taking up the whole view. If the layout changes you described were added then yes, this would likely be enough.

    "If you want to have buttons or other UI outside the table view, use a webView and use the UI.createButton and friends as appropriate."

    Wouldnt that result in a block of (whatever bg color the html in the webview has set) in the middle of the background image the window has set ?

    I do see how you could frame the tableview using only a background image, however in my interfaces i also have UIImageViews with animation in them as part of the core layout (i have a header image above table with animated imageviews in different positions) for things such as flickering torches or dripping water, etc. This still is not possible without being able to place objects directly onto the window (or a native view) itself.

14. Blain Hamon 2011-04-15

    The webviews have been set to have a transparent background underneath the web page. So if you set the body's css to have a background-color of 'transparent', the background image should leak through. While the background image is indeed a static image, images in web views can be animated gifs or programmatic.

    The intent is that the web view is the basic building block. It's why the UIImageView wasn't exposed as a widget like the slider or the button, because it would be too redundant compared to an img tag.

15. Kevin Holland 2011-04-15

    True. the only problem is that animated gifs are very poor quality. I'm dealing with fairly high quality png images that the uiimageview animates quite nicely in sequence. If i used animated gifs it would look like nothing better than a geocities page. =\

    Also i thought haynie said image views were coming?? look above in ticket.

    "also on the image viewer, that's something going to support very soon, too."

16. Jeff Haynie 2011-04-15

    Yeah, we're planning a full features image view... Nolan can provide some
    insight on when but I hope very soon.

17. Kevin Holland 2011-04-15

    Very cool. I'm excited. Well i guess let me know when layout tweaks are in place that allow for the creation of these sorts of layouts, i'll be anxious to port my games progress to titanium.

    thanks guys!

18. Nolan Wright 2011-04-15

    composite view added in 0.7.0

19. Kevin Holland 2011-04-15

    Is there any documentation about how to use this? Would like to test it out

20. Nolan Wright 2011-04-15

    not right now. if you go to the views tab in Kitchen Sink, there are
    3 examples:

    • Composite View 1 (composite_views.html)
    • Composite View 2 (composite_views2.html)
    • Custom Events (custom_events.html)
21. Jeff Haynie 2011-04-15

    I also have a number of advanced demos that use it that are documented here:

    http://www.codestrong.com/timobile/guides/iphone_module_development/"> http://www.codestrong.com/timobile/guides/iphone_module_development/

    hoping to get this documented today

22. Kevin Holland 2011-04-15

    I haven't had any luck creating the layout that is described in this ticket. Perhaps i'm missing something.

    I used the custom events example. I tried taking the height out of the middle web view hoping it would add a scrollbar if the content went over (but still retain the header and footer at top and bottom). No dice.

    What is the "proper" way to achieve this currently with titanium layouts?

    Thanks

JSON Source