From 1df3108086ef4dd019766ad8d2e8e32bf924c18f Mon Sep 17 00:00:00 2001 From: JT Smith Date: Mon, 24 Feb 2003 06:36:12 +0000 Subject: [PATCH] continuing to add the tabs system. --- docs/gotcha.txt | 29 ++++++++++++ docs/upgrades/upgrade_5.1.2-5.2.0.sql | 19 ++++++++ lib/WebGUI/Operation/Page.pm | 6 +-- lib/WebGUI/Operation/Style.pm | 59 +++++++++++++++++++++++- lib/WebGUI/TabForm.pm | 65 ++++++++++++++++++++++++++- 5 files changed, 172 insertions(+), 6 deletions(-) diff --git a/docs/gotcha.txt b/docs/gotcha.txt index 033ffc48f..23b2c2e3f 100644 --- a/docs/gotcha.txt +++ b/docs/gotcha.txt @@ -7,6 +7,35 @@ upgrading from one version to the next, or even between multiple versions. Be sure to heed the warnings contained herein as they will save you many hours of grief. +5.2.0 +-------------------------------------------------------------------- + * You'll need to add a section to the style sheet of each one of + your styles so that the new tabs system in WebGUI looks + the way it should. For most people the following should do + quite nicely: + + .tab { + border: 1px solid black; + background-color: #eeeeee; + } + .tabBody { + border: 1px solid black; + border-top: 1px solid black; + border-left: 1px solid black; + background-color: #dddddd; + } + div.tabs { + line-height: 15px; + font-size: 14px; + } + .tabHover { + background-color: #cccccc; + } + .tabActive { + background-color: #dddddd; + } + + 5.1.0 -------------------------------------------------------------------- diff --git a/docs/upgrades/upgrade_5.1.2-5.2.0.sql b/docs/upgrades/upgrade_5.1.2-5.2.0.sql index 7fd3c3766..bb834898f 100644 --- a/docs/upgrades/upgrade_5.1.2-5.2.0.sql +++ b/docs/upgrades/upgrade_5.1.2-5.2.0.sql @@ -10,4 +10,23 @@ insert into international (internationalId,languageId,namespace,message,lastUpda insert into international (internationalId,languageId,namespace,message,lastUpdated) values (32,1,'MailForm','is not a valid email address.', 1045210016); update international set message="Possible Values" where namespace = "MailForm" and internationalId = 24 and languageId=1; alter table groups change ipFilter ipFilter text; +delete from international where languageId=1 and namespace='WebGUI' and internationalId=623; +insert into international (internationalId,languageId,namespace,message,lastUpdated) values (623,1,'WebGUI','Cascading Style Sheets (CSS) are a great way to manage the look and feel of any web site. They are used extensively in WebGUI.\r\n

\r\n\r\n\r\nIf you are unfamiliar with how to use CSS, Plain Black Software provides training classes on XHTML and CSS. Alternatively, Bradsoft makes an excellent CSS editor called Top Style.\r\n

\r\n\r\n\r\nThe following is a list of classes used to control the look of WebGUI:\r\n

\r\n\r\n\r\nA
\r\nThe links throughout the style.\r\n

\r\n\r\n\r\nBODY
\r\nThe default setup of all pages within a style.\r\n

\r\n\r\n\r\nH1
\r\nThe headers on every page.\r\n

\r\n\r\n\r\n.accountOptions
\r\nThe links that appear under the login and account update forms.\r\n

\r\n\r\n\r\n.adminBar
\r\nThe bar that appears at the top of the page when you\'re in admin mode.\r\n

\r\n\r\n\r\n.content
\r\nThe main content area on all pages of the style.\r\n

\r\n\r\n\r\n.formDescription
\r\nThe tags on all forms next to the form elements. \r\n

\r\n\r\n\r\n.formSubtext
\r\nThe tags below some form elements.\r\n

\r\n\r\n\r\n.highlight
\r\nDenotes a highlighted item, such as which message you are viewing within a list.\r\n

\r\n\r\n\r\n.horizontalMenu
\r\nThe horizontal menu (if you use a horizontal menu macro).\r\n

\r\n\r\n\r\n.pagination
\r\nThe Previous and Next links on pages with pagination.\r\n

\r\n\r\n\r\n.selectedMenuItem
\r\nUse this class to highlight the current page in any of the menu macros.\r\n

\r\n\r\n\r\n.tableData
\r\nThe data rows on things like message boards and user contributions.\r\n

\r\n\r\n\r\n.tableHeader
\r\nThe headings of columns on things like message boards and user contributions.\r\n

\r\n\r\n\r\n.tableMenu
\r\nThe menu on things like message boards and user submissions.\r\n

\r\n\r\n\r\n.verticalMenu
\r\nThe vertical menu (if you use a vertical menu macro).\r\n

\r\n\r\n\r\nNOTE: Some wobjects and macros have their own unique styles sheet classes, which are documented in their individual help files.\r\n

\r\n\r\n\r\n', 1046067403); +delete from international where languageId=1 and namespace='WebGUI' and internationalId=668; +insert into international (internationalId,languageId,namespace,message,lastUpdated) values (668,1,'WebGUI','Style Sheets, Using', 1046067403); +delete from international where languageId=1 and namespace='WebGUI' and internationalId=889; +insert into international (internationalId,languageId,namespace,message,lastUpdated) values (889,1,'WebGUI','Style Sheets, Tabs', 1046067380); +delete from international where languageId=1 and namespace='WebGUI' and internationalId=890; +insert into international (internationalId,languageId,namespace,message,lastUpdated) values (890,1,'WebGUI','WebGUI has a sub-system that can create tabs. You\'ll see these in complex forms such as page editing. In order to make the tabs system look good and match your site, you\'ll need to add a section to your style\'s style sheet specifically for the tabs. \r\n

\r\nThe following style sheet classes are available:\r\n

\r\n\r\n.tab
\r\nThe default look of each tab.\r\n

\r\n\r\ndiv.tabs
\r\nThis also sets some properties for all of the tabs. This should be used for the text labels in the tabs.\r\n

\r\n\r\n\r\n.tabBody
\r\nThe content area for each tab. This is where the form will show up. Note that for best results the background color of this should match the background color of .tabActive.\r\n

\r\n\r\n\r\n.tabHover
\r\nThe look of a tab as the mouse hovers over it.\r\n

\r\n\r\n.tabActive
\r\nThe look of the tab that is currently visible.\r\n

\r\n\r\n\r\n\r\nExamples
\r\nYou can use these instead of creating your own if you wish. Or just use these as guidelines for creating your own.\r\n

\r\n
\r\nWhite or Light Colored Styles\r\n
\r\n.tab {\r\n  border: 1px solid black;\r\n   background-color: #eeeeee;\r\n}\r\n.tabBody {\r\n   border: 1px solid black;\r\n   border-top: 1px solid black;\r\n   border-left: 1px solid black;\r\n   background-color: #dddddd; \r\n}\r\ndiv.tabs {\r\n    line-height: 15px;\r\n    font-size: 14px;\r\n}\r\n.tabHover {\r\n   background-color: #cccccc;\r\n}\r\n.tabActive { \r\n   background-color: #dddddd; \r\n}\r\n
\r\n		\r\nBlack or Dark Colored Styles\r\n
\r\n.tab {\r\n  border: 1px solid white;\r\n   background-color: #333333;\r\n}\r\n.tabBody {\r\n   border: 1px solid white;\r\n   border-top: 1px solid white;\r\n   border-left: 1px solid white;\r\n   background-color: #444444; \r\n}\r\ndiv.tabs {\r\n    line-height: 15px;\r\n    font-size: 14px;\r\n}\r\n.tabHover {\r\n   background-color: #555555;\r\n}\r\n.tabActive { \r\n   background-color: #444444; \r\n}\r\n
\r\n
\r\n\r\n\r\n\r\n', 1046067380); +update style set name='WebGUI 3', styleSheet='','^AdminBar;\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n
^FlexMenu;
\r\n^L;\r\n		\r\n\r\n\r\n\r\n^-;\r\n\r\n
\r\n

\r\n

\r\n
\r\n©2001-2002 Plain Black Software
\r\n
\r\n' where styleId=-3; +update style set styleSheet='','^AdminBar;\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n
\"Plain\"User:\" ^@;\"My\"|\"\"Download\"\"|\"\"Home\"
^C;^D(\"%c %D, %y\");
\r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
^T(2);\r\n\r\n^-;\r\n\r\n

\"\"

\r\n\r\n\r\n \r\n \r\n\r\n
\"Copyright\"Make
\r\n\r\n' where styleId=-2; +update style set styleSheet='','^AdminBar;\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n

Your Company Name Here

Address: 1903 Sunrise St. City, State 65977
\r\nTel: 915.888.8888
\r\nEmail: service@company.com
\r\n\r\n \r\n \r\n \r\n \r\n
^t;
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n^M;\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n\r\n^-;\r\n\r\n
\r\n
\r\n\r\n\r\n
^H; · ^a;
\r\n\r\n\r\n\r\n' where styleId=-4; +update style set styleSheet='','^AdminBar;\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n
\"Plain\"User:\" ^@;\"My\"|\"\"Download\"\"|\"\"Home\"
^C;^D(\"%c %D, %y\");
\r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
^T(2);\r\n\r\n^-;\r\n\r\n

\"\"

\r\n\r\n\r\n \r\n \r\n\r\n
\"Copyright\"Make
\r\n\r\n' where styleId=-5; +update style set styleSheet='\r\n','\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
^AdminBar;\r\n\"Print!\"\r\n
\r\n\r\n\r\n \r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n
\r\n
User:\r\n ^a(^@;);
Location: ^C;
\r\n
\r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n\r\n\r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n
^FlexMenu;
\r\n \r\n 		\r\n\r\n\r\n^-;\r\n\r\n\r\n\r\n

\r\n

\r\n
^D(\"%c %D %y\");Powered by WebGUI
\r\n\r\n\r\n' where styleId=-6; +update style set styleSheet='\r\n','^AdminBar;\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
Home\r\n \r\n 		\r\n \r\n \r\n
Print!\r\n \r\n 		\r\n \r\n \r\n
My Account\r\n \r\n
\r\n
\r\n\r\n\r\n \r\n \r\n \r\n \r\n
^C;^?;
\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n
\r\n

Site Navigation

\r\n
\r\n \r\n \r\n \r\n \r\n
^T(0);
^L;
\r\n 		\r\n\r\n \r\n\r\n \r\n
\r\n \r\n\r\n^-;\r\n\r\n\r\n
\r\n
\r\n\r\n\r\n


This Design ©2002 OpenServe
\r\n\r\n
\r\n\r\n' where styleId=-7 +update style set styleSheet='','^AdminBar;\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
^C;User: ^a(^@;);
\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n
\r\n ^H;\r\n
\r\n ^FlexMenu;\r\n ^a;\r\n
\r\n
\r\n
\r\n
\r\n 		^-;
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n
\r\n\r\n\r\n' where styleId=-8; + + + + diff --git a/lib/WebGUI/Operation/Page.pm b/lib/WebGUI/Operation/Page.pm index 3b8a136a1..e370938b2 100644 --- a/lib/WebGUI/Operation/Page.pm +++ b/lib/WebGUI/Operation/Page.pm @@ -219,14 +219,14 @@ sub www_editPage { tie %tabs, 'Tie::IxHash'; %tabs = ( properties=>{ - name=>WebGUI::International::get(103) + label=>WebGUI::International::get(103) }, style=>{ - name=>WebGUI::International::get(105), + label=>WebGUI::International::get(105), uiLevel=>5 }, privileges=>{ - name=>WebGUI::International::get(107), + label=>WebGUI::International::get(107), uiLevel=>6 } ); diff --git a/lib/WebGUI/Operation/Style.pm b/lib/WebGUI/Operation/Style.pm index 1df87c4b8..773b8a68c 100644 --- a/lib/WebGUI/Operation/Style.pm +++ b/lib/WebGUI/Operation/Style.pm @@ -84,7 +84,64 @@ sub www_editStyle { tie %style, 'Tie::CPHash'; if ($session{form}{sid} eq "new") { $style{body} = "^AdminBar;\n\n\n\n^-;\n\n"; - $style{styleSheet} = ""; + $style{styleSheet} = ' + + '; } else { %style = WebGUI::SQL->quickHash("select * from style where styleId=$session{form}{sid}"); } diff --git a/lib/WebGUI/TabForm.pm b/lib/WebGUI/TabForm.pm index d6d2f6f17..9be1d3cac 100644 --- a/lib/WebGUI/TabForm.pm +++ b/lib/WebGUI/TabForm.pm @@ -1,10 +1,72 @@ package WebGUI::TabForm; +=head1 LEGAL + + ------------------------------------------------------------------- + WebGUI is Copyright 2001-2003 Plain Black LLC. + ------------------------------------------------------------------- + Please read the legal notices (docs/legal.txt) and the license + (docs/license.txt) that came with this distribution before using + this software. + ------------------------------------------------------------------- + http://www.plainblack.com info@plainblack.com + ------------------------------------------------------------------- + +=cut + + use strict; use WebGUI::Form; use WebGUI::HTMLForm; use WebGUI::Session; + +=head1 NAME + +Package WebGUI::TabForm + +=head1 DESCRIPTION + +Package that makes creating tab-based forms simple through an object-oriented API. + +=head1 SYNOPSIS + + use WebGUI::TabForm; + use Tie::IxHash; + my %tabs; + tie %tabs, 'Tie::IxHash'; + %tabs = ( + cool=>{ + label=>"Cool Tab", + uiLevel=>5 + }, + good=>{ + label=>"Good Tab", + uiLevel=>8 + } + ); + + $tabform = WebGUI::TabForm->new; + + $tabform->hidden($name, $value); + $tabform->submit(\%params); + + $html = $tabform->print; + + $HTMLFormObject = $tabform->getTab($tabname); + $HTMLFormObject->textarea( -name=>$name, -value=>$value, -label=>$label); + +The best and easiest way to use this package is to just call the methods on the tabs directly. + + $tabform->get($tabname)->textarea( -name=>$name, -value=>$value, -label=>$label); + +=head1 METHODS + +These methods are available from this class: + +=cut + + sub getTab { return $_[0]->{_tab}{$_[1]}{form}; } @@ -17,7 +79,6 @@ sub new { my ($class, $tabs) = @_; my $form = WebGUI::HTMLForm->new(1); foreach my $key (keys %{$tabs}) { - $tabs->{$key}{uiLevel} = 9 unless ($tabs->{$key}{uiLevel}); $tabs->{$key}{form} = WebGUI::HTMLForm->new; } bless {_submit=>WebGUI::Form::submit(),_form=>$form,_tab=>$tabs}, $class; @@ -42,7 +103,7 @@ sub print { if ($i == 1) { $tabs .= ' tabActive'; } - $tabs .= '">'.$_[0]->{_tab}{$key}{name}.' '; + $tabs .= '">'.$_[0]->{_tab}{$key}{label}.' '; $form .= '
'; $form .= $_[0]->{_tab}{$key}{form}->printRowsOnly; $form .= '
';