MODIFY TABS

[Tommy Ngo]

I am trying to add seekbar and button on the using custom tab but they are not showing on the layout.it just show empty layout...

var skbDevicesItems=[0,1];
var tglDevicesItems=[0,1];

function OnStart()
{
lay = app.CreateLayout( "linear", "FillXY" );

//Create tabs.
var tabs = app.CreateTabs( "LIGHTS,CAMERAS,DEVICES", 1, 1, "VCenter" );

lay.AddChild( tabs );

//Add button to first tab.
layLights = tabs.GetLayout( "LIGHTS" );
layAbs = app.CreateLayout( "Linear", "Vertical,FillXY" );
// layAbs.SetBackColor( "black" );
layLights.AddChild( layAbs );
//OH status


//First row
layAbsH = app.CreateLayout( "Linear", "Horizontal" );
layAbs.AddChild( layAbsH);
//Create a image

skbDevicesItems[0]= app.CreateSeekBar(.2);
skbDevicesItems[0].SetRange( 100 );
skbDevicesItems[0].SetValue( 0 );
layAbsH.AddChild( skbDevicesItems[0] );
//Toggle button
tglDevicesItems[0] = app.CreateToggle( "LV LAMP #1", .2 );

layAbsH.AddChild(tglDevicesItems[0] );
app.AddLayout( lay );

}

//Tabs object.
function _Tabs( list, width, height, options )
{
var lst = list.split(",");
this.tabs = [];
var curTabName = null;

//Disable debug during creation.
app.SetDebugEnabled( false );

//Create main layout.
this.lay = app.CreateLayout( "Linear", "Vertical" );
//this.lay.SetBackColor("black");
this.lay.SetSize( width, height);
this.lay.OnChange = null;
this.lay.parent = this;

//Create top (tab strip) layout.
this.layTop = app.CreateLayout( "Linear", "Bottom,Horizontal,FillXY" );
// this.layTop.SetBackColor( "#ff000000" );
this.lay.AddChild( this.layTop );

//Create body layout.
this.layBody = app.CreateLayout( "Frame", "" );
this.layBody.SetSize( width, height-0.1);
this.lay.AddChild( this.layBody );

//Add a tab.
this.AddTab = function( name )
{
app.SetDebugEnabled( false );
this.layTab = app.CreateLayout( "Linear", "Vertical,VCenter" );
this.layTab.SetMargins( 0,0,0.002,0 );
this.layTab.SetSize( width/lst.length, 0.1 );
this.txtTab = app.CreateText( name, width/lst.length, 0.1, "FillXY,Bold" );
this.txtTab.SetBackground( "/Sys/Img/Tab.png" );
this.txtTab.SetPadding( 0,0.03,0,0 );
this.txtTab.SetOnTouch( _Tabs_OnTouch );
this.txtTab.tabs = this;
this.layTab.AddChild( this.txtTab );
this.layTop.AddChild( this.layTab );

//Save array of tab info.
this.tabs[name] = { txt:this.txtTab, content:null };

//Add tab content layout to body.
this.tabs[name].content = app.CreateLayout( "Linear", "fillxy"+options );
this.layBody.AddChild( this.tabs[name].content );
app.SetDebugEnabled( true );
}

//Set tab change callback.
this.lay.SetOnChange = function( cb ) { this.OnChange = cb; }

//Return layout for given tab.
this.lay.GetLayout = function ( name )
{
return this.parent.tabs[name].content;
}

//Set current tab.
this.lay.ShowTab = function( name )
{
app.SetDebugEnabled( false );

//Drop out if no change.
if( curTabName==name ) { app.SetDebugEnabled(true); return; }
curTabName = name;

//Get tab info.
var tab = this.parent.tabs[name];
if( !tab ) { app.SetDebugEnabled(true); return; }

//Clear all tab selections.
for ( var tb in this.parent.tabs ) {
// this.parent.tabs[tb].txt.SetBackground( "/Sys/Img/Tab.png" );
this.parent.tabs[tb].txt.SetBackground( "/Sys/Img/Tab.png" );
this.parent.tabs[tb].content.SetVisibility( "Show" );
}
//Select chosen tab.
//tab.txt.SetBackground( "/Sys/Img/TabHi.png" );
tab.txt.SetBackground( "/Sys/Img/TabHi.png" );
tab.content.SetVisibility( "Show" );

app.SetDebugEnabled( true );

//Fire callback if set.
if( this.OnChange )
this.OnChange( name );
}

//Add tabs.
for( var i=0; i<lst.length; i++ ) {
this.AddTab( lst[i] );
}

//Set default tab.
this.lay.ShowTab( lst[0] );

//Re-enable debug.
app.SetDebugEnabled( true );

//Return main layout to caller.
return this.lay;
}

//Handle tab clicks.
function _Tabs_OnTouch( ev )
{
if( ev.action=="Down" )
{
app.SetDebugEnabled( false );
var txt = ev.source;
txt.tabs.lay.ShowTab( txt.GetText() );
app.SetDebugEnabled( true );
}
}

[Steve Garman]

Tommy,
As you know what you have changed and we don't, perhaps you would like to talk us through the changes you have made to the _Tabs function.

Otherwise our only option is to plough through the whole function and see what it does.

Obviously you have changed the alignment of this.lay.Top to "Bottom" but what else have you done?

[Steve Garman]

Here is a modified version of the standard _Tabs function that just moves the tabs to the bottom.

All I have done is to move one line of code. The old line and the new are both marked
//sjg

lay.AddChild( tabs );

}

function _Tabs( list, width, height, options )
{
var lst = list.split(",");
this.tabs = [];
var curTabName = null;

//Disable debug during creation.
app.SetDebugEnabled( false );

//Create main layout.
this.lay = app.CreateLayout( "Linear", "Vertical" );

this.lay.SetBackColor("#ff303030");

this.lay.SetSize( width, height);
this.lay.OnChange = null;
this.lay.parent = this;

//Create top (tab strip) layout.

this.layTop = app.CreateLayout( "Linear", "Horizontal" );
this.layTop.SetBackColor( "#ff000000" );
//this.lay.AddChild( this.layTop );
//sjg

//Create body layout.
this.layBody = app.CreateLayout( "Frame", "" );
this.layBody.SetSize( width, height-0.1);
this.lay.AddChild( this.layBody );

this.lay.AddChild( this.layTop );
//sjg

this.parent.tabs[tb].txt.SetBackground( "/Sys/Img/Tab.png" );

this.parent.tabs[tb].content.SetVisibility( "Hide" );
}
//Select chosen tab.

[Steve Garman]

It might be easier to see as an spk

[Tommy Ngo]

Thanks....it is working now!!!..is it possible changing tabs layout by swipe left or right instead click on each tab...