TabPanel

[Lourival Júnior]

Hi All!

I've done a component TabPanel based on this project: http://webfx.eae.net/dhtml/tabpane/tabpane.html.

The usage is:

Code:

<com:TabPanel ID="MyTabPanel" Mode="Default">
       <com:TabPage ID="MyTabPage1" Text="Tab 1">
                  Content goes here
       </com:TabPage>
       <com:TabPage ID="MyTabPage2" Text="Tab 2">
                  Content goes here
       </com:TabPage>
</com:TabPanel>

It's working for tabs. But I dont know why the content dont renders  .

Please, I done this component coping and pasting some codes from others components that I've seen here. I want suggestions to finalize and improve it. Be free to change the code.

That's all.

[durgis]

I did this in application.xml file:

<paths>
    <using namespace="Application.Components.*" />
  </paths>

Inside that folder I put your component file. But it fails. I've tried your solutions too, but I still got errors. I've tried others components using this configuration, and they work. Have you any other ideia?

I am getting the same results with your components... what OS are you running? There must be an encoding difference...

Yes, it's definitley file encoding or something. When I copy the text of your files into new ones, they work just fine. But the do not work as they are.

[Lourival Júnior]

I've finished my component. Now it's working  . The usage is:

Code:

<com:TabPanel ID="MyTabPanel1" Mode="Windows">
<com:TabPage ID="TabPage1" Text="Tab1">
Content One!
</com:TabPage>
<com:TabPage ID="TabPage2" Text="Tab2">
Content Two!
</com:TabPage>
<com:TabPage ID="TabPage3" Text="Tab3">
<com:TabPanel ID="MyTabPanel2" Mode="Windows">
<com:TabPage ID="TabPage11" Text="Tab1">
Content One with a TLabel <com:TLabel Text="here"></com:TLabel>!
</com:TabPage>
<com:TabPage ID="TabPage12" Text="Tab2">
Content Two!
</com:TabPage>
</com:TabPanel>
</com:TabPage>
</com:TabPanel>

Where the Mode property could be Windows, WebFX and the default layout. To make it working put the file TabPanel.php in your protected directory, set the application.xml properly, and put the directory TabPanel in the same directory level of your index.php

I hope you enjoy it. Changes and suggestions will be accepted

[durgis]

Just a simple suggestion:

If you use publishAsset then you do not need to have the TabPanel directory outside of the protected directory; then the component just works "out of the box" without altering any directory structure.

These are the only changes I would make; notice the use of publishAsset for the js, css, and png files:

Code:

const STYLE_SHEET_DIR = 'TabPanel/css/';
const JAVASCRIPT_DIR = 'TabPanel/js/';

public function onInit($param)
{
parent::onInit($param);

if( ($CssFile=$this->getCssFile())==='' ){
$mode = ($this->Mode) ? $this->Mode : null;

switch ($mode){
case "Windows":
$CssFile=$this->publishAsset(self::STYLE_SHEET_DIR.'tab.winclassic.css');
break;
case "WebFX":
$CssFile=$this->publishAsset(self::STYLE_SHEET_DIR.'tab.webfx.css');
break;
default:
$CssFile=$this->publishAsset(self::STYLE_SHEET_DIR.'luna/tab.css');
$this->publishAsset(self::STYLE_SHEET_DIR.'luna/tab.active.png');
$this->publishAsset(self::STYLE_SHEET_DIR.'luna/tab.hover.png');
$this->publishAsset(self::STYLE_SHEET_DIR.'luna/tab.png');
break;
      }
      $this->setCssFile($CssFile);
   }     
 
 
if( ($JSFile=$this->getJSFile())===''){
$JSFile=$this->publishAsset(self::JAVASCRIPT_DIR.'tabpane.js');
$this->setJSFile($CssFile);
}
         
$csm = $this->getPage()->getClientScript();
if(!$csm->isStyleSheetFileRegistered('tabpanel'))
$csm->registerStyleSheetFile('tabpanel', $CssFile,'screen');
if(!$csm->isScriptFileRegistered('tabpanel'))
$csm->registerScriptFile('tabpanel', $JSFile);
}

Oh yes, and a mod to setCssFile and setJSFile functions:

Code:

/**
* @param string TabPanel CssFile
*/
public function setCssFile($value)
{
$this->setViewState('CssFile',TPropertyValue::ensureString($value),'');
}

...

/**
* @param string TabPanel JSFile
*/
public function setJSFile($value)
{
$this->setViewState('JSFile',TPropertyValue::ensureString($value),'');
}

[Lourival Júnior]

Dear durgis,

Thanks for your suggestions! In fact this is the better way to publish the component's files. The modifications are attached.

Please, if someone have any other suggestion or modifications be free to post here.

Regards

[durgis]

Welcome,

Karma ++

[gori]

Hi. Your component is very useful Can you add Active (Ajax) functionality to it? As for me it will be great to use dynamic hiding/showing of panels..

Thanks in advance.

[Lourival Júnior]

Hi. Thanks for your comment  . The Ajax functionality I will take a time to do because I have study how to do what you want. Who knows someone can help us in how we can do this. I was thing about the Dojo library. There is a lot of component there that could be ported to a Prado component. Take a look and thing about

Regards!

[wiktor]

Thanks for the component. It's really great!

[drigolin]

I don't know why you didn't add the Javascript calls needed to use WebFX tab panel at best.
Whitout them at every postback you will see tab panal flashing until your browser will do the final rendering appling stylesheet.
This can make the user interaction really bad.

I'm modifing the tabpanel to invoke right methods:
tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );

and for every tab page:
tp1.addTabPage( document.getElementById( "tabPage2" ) );

I added couple of properties:

Persistent: (boolean)
If true, the first page will be selected when isn't a postback.

UseCookies: (boolean)
If the tab status should be persisted into cookies or not.

I'm looking to add a property to TabPanel to explicit set the selected TabPage.
Stay tuned...

[drigolin]

Some small fixes...

[Lourival Júnior]

Hi drigolin!

Thanks for your improvements. Be free to change what you thing is wrong. I wrote this component in a feel hours, so problems are normal. But with it, more people from the community can modify and suggest more improvements.

Regards!

[asdf]

thank's to all of you

this is the one of great prado's component
 

[rickware]

cool,

keep it up!

 

/* brazuca mandando ver */

[daab]

Hi all,

nice work

How make:   

$this->MyTabPanel->setSelectedIndex(1);

drigolin said: I'm looking to add a property to TabPanel to explicit set the selected TabPage. When?

thanks

daab