Simple YTabPanel

[Ykee]

Hi All

Sorry for my English...

I have read it Component: TabPanel, and I think, that I have found other way.
My component does not need other new files JavaScript, as it uses with existing files (Prototype.js).

The usage is:

Code:

<com:YTabPanel [ID="MyTabPanelID"]
      [CssClass = "(@string)"]
      [PageCssClass = "@string"]
      [ActiveTabCssClass = "(@string)"]
      [InactiveTabCssClass = "(@string)"]  >
   <com:YTabPage Caption="(@string)" Text="(@string)" />
   <com:YTabPage Caption="(@string)">
      Content (other controls)
   </com:YTabPage>
</com:YTabPanel>

[ ] - optional parameters
CssClass - default name: tab-panel
PageCssClass - default name: tab-page
ActiveTabCssClass - tab-active
InactiveTabCssClass - tab-inactive

Caption is required.

Like You see - We need four css class in order to display our TabPanel

Simple TabPanel
In my Css files i wrote this code:

Code:

.tab-panel {
  position: relative;
  margin: 3px;
  padding: 0;
  z-index: 1;
  height: 100px;
}

.tab-menu-active {
  position: relative;
  z-index: 4;
  background: white;
  border-top: solid 1px #aba9aa;
  border-left: solid 1px #aba9aa;
  border-right: solid 1px #737373;
  padding: 5px 5px 3px 5px;
  display: block;
  float: left;
}
.tab-menu-inactive {
  position: relative;
  border-top: solid 1px #aba9aa;
  border-left: solid 1px #aba9aa;
  border-right: solid 1px #737373;
  top: 1px;
  z-index: 2;
  margin-right: -1px;
  padding: 3px;
  display: block;
  float: left;
}
.tab-page {
  position: absolute;
  width: 90%;
  top: 21px;
  padding: 3px;
  display: block;
  clear: both;
  background: white;
  z-index: 3;
  border-top: solid 1px #aba9aa;
  border-left: solid 1px #aba9aa;
  border-right: solid 1px #737373;
  border-bottom: solid 1px #737373;
  height: 70px;
}

hmm... That's all! I hope You liked it...

Changes and suggestions is required.

ps. Lourival Júnior thanks for You work.

File has been deleted... Look below

[rojaro]

Great work

[Ykee]

thanks! 

...any sugestions?

[eirikhm]

Nice work. This is a neat and handy control that we should have included in the Prado Framework. Cross your fingers for someone to notice it

[Lourival Júnior]

Excellent Work ! Prototype has amazing tools that we can use, avoiding other libraries and reusing what we already have in PRADO. My suggestion is to avoid the use of obtrusive javascript code, and write a json class to your component. For example, you can replace the onclick attribute and write in this file a Event.observe() function handling the event. Just a suggestion . See prototype documentation for more examples..

Regards,

[Ykee]

Hi!
Due to for suggestion Lourival Júnior. I think of it earlier, but I did not penetrate to problem deeper. Problem of time.
While I have found in code small bug, but I have corrected it already

Error relied on it, that if we had two panels, JavaScript code not working.

but now You can (for example):

Code:

<com:YTabPanel [ID="MyTabPanelID"]
      [CssClass = "(@string)"]
      [PageCssClass = "@string"]
      [ActiveTabCssClass = "(@string)"]
      [InactiveTabCssClass = "(@string)"]  >
   <com:YTabPage Caption="(@string)" Text="(@string)" />
   <com:YTabPage Caption="(@string)">
      Content (other controls)
   </com:YTabPage>
   <com:YTabPage Caption="(@string)">
      <com:YTabPanel [ID="MyOtherTabPanelID"]
            [... css clases ... if you want...]
         <com:YTabPage Caption="(@string)" >
            Content
         </com:YTabPage>
         <com:YTabPage Caption="(@string)" Text="(@string)" />
      </com:YTabPanel>
   </com:YTabPage>
</com:YTabPanel>

Now i read prototype documentation... 

[wei]

Look great! I actually like the way you described your component

Code:

<com:YTabPanel [ID="MyTabPanelID"]
      [CssClass = "(@string)"]
      [PageCssClass = "@string"]
      [ActiveTabCssClass = "(@string)"]
      [InactiveTabCssClass = "(@string)"]  >

may be this can be used to describe the components automatically in some documentation (with links and colouring).

[Ykee]

Thanks wei!

Tell me please, how You have use my component to "...describe the components automatically in some documentation" ?
I can't imagine this. 

Meantime, i added 'DefaultPage' property in to my component.
Now it is possible to be checked off indicate which tab is active in first display:

Code:

<com:YTabPanel [ID="MyTabPanelID"]
               [CssClass = "(@string)"]
               [PageCssClass = "@string"]
               [ActiveTabCssClass = "(@string)"]
               [InactiveTabCssClass = "(@string)"]  >
   <com:YTabPage Caption="(@string)" Text="(@string)" />
   <com:YTabPage Caption="(@string)"    DeafultPage="true" >
      Content (other controls)
   </com:YTabPage>
   <com:YTabPage Caption="(@string)" >
[...]
   </com:YTabPage>
</com:YTabPanel>

It will be displayed like:
                            _______
| inactive | inactive | active | inactive |
--------------------            -------------
|                                                        |
------------------------------------------

DefaultPage property default is false .....

Greetings for all

[durgis]

Hello, I have been using your component, and noticed that there is an XHTML validation problem. since YTabPage is rendering as a div element, there are nested divs with the same id. I'm not sure how you would like to refactor this, but I would suggest one of the following.

Change the YTabPage class to make it so that it only renders it's contents, and not a tag.

Code:

class YTabPage extends TControl
{
/**
* @return string
*/   
public function getCaption()
{
    return $this->getViewState('Caption','');
  }
  /**
* @param string
*/
public function setCaption($value)
{
$this->setViewState('Caption',TPropertyValue::ensureString($value),'');
}
/**
* @return string
*/   
public function getText()
{
    return $this->getViewState('Text','');
  }
  /**
* @param string
*/
public function setText($value)
{
$this->setViewState('Text',TPropertyValue::ensureString($value),'');
}

  /**
* Renders body contents of the table cell.
* @param THtmlWriter the writer used for the rendering purpose.
*/
public function renderContents($writer)
{
if(($text=$this->getText())!=='')
$writer->write($text);
else if($this->getHasControls())
parent::renderContents($writer);
else
$writer->write('&nbsp;');
}
}

Or change the following line in YTabPanel renderContents function to remove the id of the div element there.

Code:

Old: $writer->write('<div class="'.$this->getPageCssClass().'" id="'.$tabpage->getClientID().'"');
New: $writer->write('<div class="'.$this->getPageCssClass().'"');

[Ykee]

Hello

Dear Durgis, I appologize, but i don't know, if I be able to help You, because i dont see error. Tell me please, in which moment error appears?
I have made my component so, in order to each had uniqe 'id' - PRADO transmits Unique ID, hwo I overwrite for HTML tag.

Look heare: when Prado render YTabPanel, and YTabPages, we receive such code as:

Code:

<div class="tab-panel" id="ctl0">  ................................ ctl0           PRADO uniqe ID, meybe different in somebody other
   <span id="tm_ctl1"  class="tab-active"> .................. tm_ctl1     PRADO unique ID with my prefix 'tm' - For distinguishing from Control with this ID
      <a href="#" onclick=" .... some js code ...">Caption 1</a>
   </span>
   <span id="tm_ctl2"  class="tab-inactive">
      <a href="#" onclick=" .... some js code ...">Caption 2</a>
   </span>

   <div class="tab-page" id="ctl1"> ...........................  ctl1         PRADO unique ID
      <div>.... some content 1 .... </div> ................. this is rendered YTabPage
   </div>
   <div class="tab-page" id="ctl2" style="display: none;">
      <div> .... some content 2 .... </div>
   </div>
</div>

$writer->write('<div class="'.$this->getPageCssClass().'" id="'.$tabpage->getClientID().'"');

I need this 'id' in order to JavaScript code acted ...

Tell me more about You problem please...

I tested my Component in IE, FF and OP... and working fine... but meybe i don't see something

[Ykee]

OK Durgis, i see now my bad... You have right...

I think i know, how to rebuild... but tomorow...

bye

[durgis]

I can't wait to see it. Thanks for making this wonderful component.

[Ykee]

I greet all, who follow evolution of this component...

a now version 0004 from day 29.04.2007 (meybe better from night...)

What has been changed:

1. rebuild it a bit and now no XHTML validation problem... - i hope;
2. No 'DefaultPage' on YTabPage, now You have 'DefaultPageIndex' and 'DefaultPageID' (on YTabPanel) for mark, which page has to be displayed as first...
3. Better - i hope - JS code - more elegant. I write a json class, but best as I can... And still You don't need additional JS files. Prototype will suffice.


 

Code:

 *   <com:YTabPanel [CssClass = "(@string)"]
 *                  [PageCssClass = "@string"]
 *                  [ActiveTabCssClass = "(@string)"]
 *                  [InactiveTabCssClass = "(@string)"]
 *                  [DefaltPageIndex="(@Integer)" | DefaultPageID="(@string)"]   >
 *     <com:YTabPage [ID="(@string)"] Caption="(@string)" Text="(@string)" />
 *     <com:YTabPage [ID="(@string)"] Caption="(@string)">
 *       Content (other controls)
 *     </com:YTabPage>
 *   </com:YTabPanel>
 

 LEGEND:
 [ ] - optional parameters
 CssClass - default name: tab-panel
 PageCssClass - default name: tab-page
 ActiveTabCssClass - default name: tab-active
 InactiveTabCssClass - default name: tab-inactive
 DefaultPageIndex - param: @integer - index of page for first display
 DefaultPageID - param: @string - this same as DefaultPageIndex, but param is a ID (PRADO) of page for first display

IMPORTAND: DefaultPageID has highest priority(!), and DefaultPageIndex value (if it use both, and both are correct) will be ignored!   
IMPORTAND: Unsuitable values in DefaultPageIndex or DefaultPageID, will be ignored!

How work it:
Example: http://www.polecam.to.pl/demos/YTabPanel/

Any suggestion is indispensable...

I salute...

[durgis]

I plugged in the new file, and it just worked; nice work, and thanks for the updates.

[Ykee]

[...], and it just worked;

And there had to be so. It fairest accolade. Thanks