Trying to convert a complex "table" from Mojo to Enyo

edited February 2012 in Enyo 1.0
I have a TouchPad educational app, which was actually developed using Mojo, that I'd like to convert to Enyo, now that it is available for use on a number of platforms. The unlying Javascript functionality will be virtually the same in both versions, but the screen layout is driving me mad. Here is a link to a screenshot from the Mojo app.

I can see a number of sub-layouts that I'd like to use:

1. Left flex:1 column
1.1 Row 1 = 1 x flex:2 cell (containing Picker) + 1 x flex:3 cell (containing Progress Bar)
1.2 Row 3 to 7 = 5 x flex:1 cells (containing Buttons)
2. Right flex:1 column
2.1 Row 1 = 1 x flex:1 cell (containing Text)
2.2 Row 2 = 1 x flex:3 cell (containing Text) + 1 x flex:2 cell (containing Text)
2.3 Left flex:3 column
2.3.1 Row 3 to 6 = 3 x flex:1 cells (containing Buttons)
2.4 Right flex:2 column
2.4.1 Row 3 = flex:1 cell (containing Picker)
2.4.2 Row 4 = flex: 1 cell (containing Button)

How do you control the size and position of a cell matrix like this in Enyo?

................Phil

Comments

  • edited February 2012
    You can still use tables if you'd like. Here's a quick example.
    enyo.kind({
        name:"ex.TableExample",
        kind:"Control",
        nodeTag:"table",
        components:[
            {nodeTag:"tr", components:[
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
            ]},
            {nodeTag:"tr", components:[
                {nodeTag:"td", domAttributes:{colspan:"2"}, components:[
                    {kind:"Button"}
                ]},
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
                {nodeTag:"td", components:[
                    {kind:"Button"}
                ]},
            ]}
        ]
    });
    You could also investigate HFlexBox/HFlexLayout as an alternative.
  • ryanduffy,

    The nodetag format is perfect, as I can convert my Mojo view HTML very easily to it, and it is way more compact, making it easier to check.

    Is nodetag documented in any detail, or is it in the same documentation category as enyo.Grid? ;-)

    Thanks............Phil
  • The only reference I found was in passing in the DomNode description. Fortunately, there's not much to say as it is just the DOM element that will be created when the control is rendered. Here's the code from enyo.js:
    createNode: function() {
    this.node = document.createElement(this.nodeTag), this.addToParentNode();
    },
Sign In or Register to comment.