Sunday, December 4, 2011

Using EmbeddedContainer

EmbeddedContainer is a class I added to LWUIT 1.5 without much fanfare out of a simple necessity, the problem is that this necessity existed only within the GUI builder and the class makes no sense outside of the context of the GUI builder. How do you document something like that???
The necessity came about due to Triplay's application designs (our original GUI builder beta site), their design was iPhone inspired and so it relied on tabs (iPhone style tabs at the bottom of the screen) where different features of the application are within a different tab.

This didn't mesh well with the LWUIT GUI builder navigation logic and so we needed to rethink some of it. I wanted to reuse GUI as much as possible while still enjoying the advantage of navigation being completely managed for me.
Android does this with Activities and the iPhone itself has a view controller, I don't like both approaches and think they both suck. The problem is that you have what is effectively two incompatible hierarchies to mix and match which is why Android needed to "invent" fragments and Apple can't mix view controllers within a single application.

The Component/Container hierarchy is powerful enough to represent such a UI but we needed a "marker" to indicate to the UIBuilder where a "root" component exists so navigation occurs only within the given "root". Here EmbeddedContainer comes into play, its a simple container that can only contain another GUI from the GUI builder. Nothing else. So we can place it in any form of UI and effectively have the UI change appropriately and navigation would default to "sensible values".

Navigation replaces the content of the embedded container, it finds the embedded container based on the component that broadcast the event. If you want to navigate manually just use the showContainer() method which accepts a component, you can give any component that is under the EmbeddedContainer you want to replace and LWUIT will be smart enough to replace only that component.

You can see an example of building a simple Tab based UI with the GUI builder and embedded container in the video above. The nice part about this is that this UI can be very easily refactored to provide a more traditional form based UI without duplicating effort and can be easily adapted to a more tablet oriented UI (with a side bar) again without much effort.

7 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Very timely post, I just figured out how to use the embeddedcontainer for android style tabs last night but one thing I had trouble with is setting the icons for the tabs within the gui builder. When I click okay, it seems to just discard my changes. Any idea what I'm doing wrong?

    ReplyDelete
  3. Hey Shai,

    Can i get your email/IM contact?

    msg me on
    shai [at] the-futuresoft.com

    Thanks,
    Shai

    ReplyDelete
  4. There is an issue with the 1.5 icons in the gui builder. First set values for the tab strings. Then when editing the icons make sure you don't have any "invisible" icons at the top of the list (taking up 2 pixels), if you have such entries you must remove them and add the exact number of icons matching the amount of tabs you have.

    Unfortunately I don't conduct private correspondence since that tends to drag on and fill my overflowing inbox with more support messages than I can handle. If you have any details or specific information feel free to tell me/ask but unfortunately I have a policy of not answering personal email (before that policy was in place I was spending 6 hours a day on email).

    ReplyDelete
  5. Thanks for response Shai. I did give your instructions a try but still had same results, will just do it programmatically for now.

    ReplyDelete
  6. @Future soft, sorry about that its just overwhelming around here with all the work I need to do on all fronts (keep your eye's on the blog it will get "interesting" in January). If you truly need me specifically my email is my full name at gmail but use with discretion.

    @samih I spoke to both Chen and Omer (whom you might be familiar with) and I can't seem to find anyone who has the resources to support something like this at this time. I am ridiculously busy right now (you will find out why in January if you follow the blog) but I still make sure to answer as best as I can all LWUIT related issues I can find on the forum/stackoverflow and within this blog twice a week. I'm assuming you need more support than just answers to questions but I probably won't be able to provide that.

    @Eric I'll try to improve that for the next version. I'm doing a HUGE revision to the tool that would change pretty much everything in terms of its UI and some functionality.

    ReplyDelete
  7. Samih - if you'd like I may be able to help you, I'm with the LWUIT team at oracle, you can reach me at ofir dot leitner --at- gmail

    ReplyDelete