Different layouts for different platforms

I want to have different layouts for different platforms. Don't get me wrong - enyojs does handle this very nicely in most cases. However, what I really need is a way to provide a different layout of the components but still have the same supporting code (i.e. the methods in the kind).

I have a site that (among other things) shows pictures with a scrolling list of thumbnails at the bottom.

Desktop layout:
         Menu items | Share button
     Logo  |  Page Info  |  Self-promoting ad
             [ The Image ]
  Left arrow | [Scrolling thumbnails | Right arrow
Mobile portrait layout:
 Menu items | Page Info  | Share button
             [ The Image]
        [Scrolling thumbnails]
(See how I got rid of a whole "row" of stuff by condensing just the important items into one row? Also, no left/right arrows are needed in a touch environment)

Mobile landscape layout:
scrolling       Menu items | Page Info  | Share button
thumbs                 [ The Image]
(The same as Mobile portrait but with the scrolling thumbnails vertically on the left instead of horizontally on the bottom as they are in Mobile portrait. )

Ok, so if you are still with me: I tried a variety of things, such as changing the layoutKind at runtime (doesn't seem to work, even with .reflow), dynamically adding/removing components at run time (becomes a horrendous mess), and even having multiple sets of components layed out in the 3 different ways (this necessitates 3 different "names" for some of the items, which is a mess to keep track of). I even considered 3 copies of the whole thing (layout plus code), but that makes for a support nightmare - 3 copies of essentially the same code.

If I could separate the layout of the components from the supporting code, then I could have 3 different layouts but only one copy of the supporting code.

Is there a recommended solution for this type of situation?

Comments

  • Using CSS media queries should be your first plan of attack. It'll be the better performing option and should allow you to hide/show the elements for the different screen sizes. The thumbnails might be a bit more complex and require hooking the resize event in enyo to toggle the scrolling direction.

    To your last comment, it is completely feasible to separate the components block from the supporting code using the inheritance model of enyo. Here's a simplified version of your example. The shareTapped handler is wired in all views but only implemented in the base view.

    http://jsfiddle.net/SRaPu/
  • Ah, using inheritance is brilliant! I tried to think of a solution like that, but my brain was stuck thinking about using sub-kinds to add logic to super-kinds, not that a sub-kind could simply be a different layout of a super-kind.
  • @theryanjduffy - thanks you very much !!

    Using CSS media queries should be your first plan of attack.
    In your fiddle I can not find that technique.
    Is there anything predefined in Enyo that takes care about such CSS media queries for you? Is there some Enyo kind that implement that function for me?
    ( Assume - I have no idea what "CSS media queries" are and I want some kind that takes care about this)
  • i didn't illustrate media queries as there's nothing "enyo" about them. As far as I know, there's nothing in the enyo core that provides this because its a feature of CSS and not of the framework (or javascript in general).
Sign In or Register to comment.