
richter at apache
Dec 8, 2008, 11:45 PM
Post #1 of 1
(1200 views)
Permalink
|
|
svn commit: r724632 [1/3] - in /perl/embperl/trunk: ./ eg/forms/ eg/forms/Embperl/ eg/forms/Embperl/MyForm/ eg/forms/Embperl/MyForm/Control/ eg/forms/Embperl/MyForm/DataSource/ eg/forms/css/ eg/forms/js/ eg/forms/lib/ eg/forms/pages/ eg/forms/wizard/
|
|
Author: richter Date: Mon Dec 8 23:45:11 2008 New Revision: 724632 URL: http://svn.apache.org/viewvc?rev=724632&view=rev Log: Embperl::Form example Added: perl/embperl/trunk/eg/forms/ perl/embperl/trunk/eg/forms/Embperl/ perl/embperl/trunk/eg/forms/Embperl/MyForm/ perl/embperl/trunk/eg/forms/Embperl/MyForm.pm perl/embperl/trunk/eg/forms/Embperl/MyForm/Control/ perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/ perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/languages.pm perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/netmask.pm perl/embperl/trunk/eg/forms/README.txt perl/embperl/trunk/eg/forms/css/ perl/embperl/trunk/eg/forms/css/EmbperlForm.css perl/embperl/trunk/eg/forms/js/ perl/embperl/trunk/eg/forms/js/EmbperlForm.js perl/embperl/trunk/eg/forms/js/prototype.js perl/embperl/trunk/eg/forms/lib/ perl/embperl/trunk/eg/forms/lib/footer.epl perl/embperl/trunk/eg/forms/lib/header.epl perl/embperl/trunk/eg/forms/lib/wizard.epl perl/embperl/trunk/eg/forms/lib/wizard.pl perl/embperl/trunk/eg/forms/pages/ perl/embperl/trunk/eg/forms/pages/loop.htm perl/embperl/trunk/eg/forms/wizard/ perl/embperl/trunk/eg/forms/wizard/action.epl perl/embperl/trunk/eg/forms/wizard/base.epl perl/embperl/trunk/eg/forms/wizard/do.epl perl/embperl/trunk/eg/forms/wizard/dsl.epl perl/embperl/trunk/eg/forms/wizard/exportslave.epl perl/embperl/trunk/eg/forms/wizard/finish.epl perl/embperl/trunk/eg/forms/wizard/gateway.epl perl/embperl/trunk/eg/forms/wizard/importslave.epl perl/embperl/trunk/eg/forms/wizard/inetconnect.epl perl/embperl/trunk/eg/forms/wizard/isdn.epl perl/embperl/trunk/eg/forms/wizard/name.epl perl/embperl/trunk/eg/forms/wizard/network.epl perl/embperl/trunk/eg/forms/wizard/organisation.epl perl/embperl/trunk/eg/forms/wizard/wizconfig.pl Modified: perl/embperl/trunk/README Modified: perl/embperl/trunk/README URL: http://svn.apache.org/viewvc/perl/embperl/trunk/README?rev=724632&r1=724631&r2=724632&view=diff ============================================================================== --- perl/embperl/trunk/README (original) +++ perl/embperl/trunk/README Mon Dec 8 23:45:11 2008 @@ -1,6 +1,6 @@ Embperl - Building dynamic Websites with Perl -Copyright (c) 1997-2005 Gerald Richter / ecos gmbh www.ecos.de +Copyright (c) 1997-2009 Gerald Richter / ecos gmbh www.ecos.de You may distribute under the terms of either the GNU General Public License or the Artistic License, as specified in the Perl README file. @@ -9,7 +9,6 @@ WARRANTIES, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTIBILITY AND FITNESS FOR A PARTICULAR PURPOSE. -$Id$ @@ -57,6 +56,9 @@ Changes: perldoc Changes.pod Examples: eg/README Sourcecode encryption: crypto/README +Documentation and example for +Embperl::Form can be found at: eg/forms + All the above and further information can be found at the Embperl website @@ -127,6 +129,8 @@ * Embperl::Inline allows to embedd Embperl code in normal Perl code +* Embperl::Form is a sophisticated library for building HTML forms + COMPATIBILITY @@ -140,7 +144,7 @@ perl5.005_01/02/03 perl5.6.1 perl5.8.x -apache_1.3.x, apache 2.0.x +apache_1.3.x, apache 2.0.x, apache 2.2.x apache + mod_ssl apache_ssl (Ben SSL) Stronghold 2.2 Added: perl/embperl/trunk/eg/forms/Embperl/MyForm.pm URL: http://svn.apache.org/viewvc/perl/embperl/trunk/eg/forms/Embperl/MyForm.pm?rev=724632&view=auto ============================================================================== --- perl/embperl/trunk/eg/forms/Embperl/MyForm.pm (added) +++ perl/embperl/trunk/eg/forms/Embperl/MyForm.pm Mon Dec 8 23:45:11 2008 @@ -0,0 +1,194 @@ + +package Embperl::MyForm ; + +use Embperl::Form ; + +use Embperl::Inline ; +use base 'Embperl::Form' ; + + +# --------------------------------------------------------------------------- + +sub form_id { 'topdiv' } + + +# --------------------------------------------------------------------------- + +sub setup_form_obj + { + my ($self, $options, $fields) = @_ ; + + my $key = ref $self ; + + return if (ref $self && $self -> {id}) ; + return $epreq->{forms}{$key} if (exists $epreq->{forms}{$key}) ; + + $options ||= {} ; + + + $self = $self -> new ($fields, + { formname => 'myform', + valign => 'top', + jsnamespace => 'top', + language => 'de', + %$options}, + $self -> form_id) ; + + $self -> layout ; + $key = ref $self ; + + return $epreq->{forms}{$key} = $self ; + } + +# --------------------------------------------------------------------------- + + +sub on_prepare_fdat + + { + my ($self, $epreq) = @_ ; + + $self = $self -> setup_form_obj ; + + $self -> prepare_fdat ($Embperl::req); + } + +# --------------------------------------------------------------------------- + +sub showfields + + { + my ($self, $fields, $options) = @_ ; + + $self = $self -> setup_form_obj($options, $fields) ; + + $self -> init_data ($Embperl::req) ; + $self -> show_controls ($Embperl::req); + } + +# --------------------------------------------------------------------------- +# +# get_control_packages +# +# returns an array ref with packges where to search for controls +# + +sub get_control_packages + { + my ($self) = @_ ; + + my $packages = $self ->SUPER::get_control_packages ; + + unshift @$packages, 'Embperl::MyForm::Control' ; + return $packages ; + } + +# --------------------------------------------------------------------------- +# +# get_datasrc_packages +# +# returns an array ref with packges where to search for data source classes +# + +sub get_datasrc_packages + { + my ($self) = @_ ; + + my $packages = $self ->SUPER::get_datasrc_packages ; + + unshift @$packages, 'Embperl::MyForm::DataSource' ; + return $packages ; + } + +1 ; + +__END__ + +##--> the following can be used to translate form content... + +#------------------------------------------------------------------------------------------ +# +# convert_label +# +# converts the label of a control to the text that should be outputed. +# By default does return the text or name paramter of the control. +# Can be overwritten to allow for example internationalization. +# +# in $ctrl Embperl::Form::Control object +# $name optional: name to translate, if not given take $ctrl -> {name} +# + +sub convert_label + { + my ($self, $ctrl, $name, $text) = @_ ; + + my $prefix = $ctrl -> {nameprefix} ; + + return _t ($prefix . ($name || $ctrl->{basename})) if ($prefix =~ /:/) ; + return _t ('attr:' . $prefix . ($name || $ctrl->{basename})) ; + } + +#------------------------------------------------------------------------------------------ +# +# convert_text +# +# converts the text of a control to the text that should be outputed. +# By default does return the text or name paramter of the control. +# Can be overwritten to allow for example internationalization. +# +# in $ctrl Embperl::Form::Control object +# + +sub convert_text + { + my ($self, $ctrl, $value, $text) = @_ ; + + my $prefix = $ctrl -> {nameprefix} ; + $value ||= $ctrl->{basename} ; + + return _t ($value) if ($value =~ /:/) ; + return _t ($prefix . $value) if ($prefix =~ /:/) ; + return _t ('info:' . $prefix . $value) ; + } + +#------------------------------------------------------------------------------------------ +# +# convert_options +# +# converts the values of a control to the text that should be outputed. +# By default does nothing. +# Can be overwritten to allow for example internationalization. +# +# in $ctrl Embperl::Form::Control object +# $values values of the control i.e. values that are submitted +# $options options of the control i.e. text that should be displayed +# + +sub convert_options + { + my ($self, $ctrl, $values, $options) = @_ ; + + my @options ; + my $prefix = $ctrl -> {nameprefix} ; + my $prefix1 = "val:$ctrl->{nameprefix}$ctrl->{basename}:" ; + my $prefix2 = $prefix =~ /:/?$prefix:"val:" ; + + foreach my $val (@$values) + { + my $value = ref $val?$val -> [0]:$val ; + my $val1 = $prefix1 . $value ; + my $val2 = $prefix2 . $value ; + + my $opt = _t ($val1) ; + $opt = _t ($val2) if ($opt eq $val1) ; + + push @options, $opt eq $val2?"$val1 | $val2":$opt ; + } + + return \@options ; + } + + + +1; + Added: perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/languages.pm URL: http://svn.apache.org/viewvc/perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/languages.pm?rev=724632&view=auto ============================================================================== --- perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/languages.pm (added) +++ perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/languages.pm Mon Dec 8 23:45:11 2008 @@ -0,0 +1,39 @@ + +package Embperl::MyForm::DataSource::languages ; + +use strict ; + +use base 'Embperl::Form::DataSource' ; + + +# --------------------------------------------------------------------------- +# +# get_values - returns the values and options +# + +sub get_values + + { + my ($self, $req, $ctrl) = @_ ; + + my @options ; + my @values ; + + if (!$ctrl -> {noblank}) + { + push @options, '---' ; + push @values, '' ; + } + + push @options, 'Deutsch','English' ; + push @values, 'de_DE','en_US' ; + + + return (\@values, \@options) ; + } + + +1 ; + +__END__ + Added: perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/netmask.pm URL: http://svn.apache.org/viewvc/perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/netmask.pm?rev=724632&view=auto ============================================================================== --- perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/netmask.pm (added) +++ perl/embperl/trunk/eg/forms/Embperl/MyForm/DataSource/netmask.pm Mon Dec 8 23:45:11 2008 @@ -0,0 +1,57 @@ + +package Embperl::MyForm::DataSource::netmask ; + +use strict ; + +use base 'Embperl::Form::DataSource' ; + + +# --------------------------------------------------------------------------- +# +# get_values - returns the values and options +# + +sub get_values + + { + my ($self, $req, $ctrl) = @_ ; + + my $i = 33 ; + my @netmaskvalues; + + my @netmaskoptions = map { $i-- ; push @netmaskvalues, $i ; "/$i ($_)" } ( + '255.255.255.255', + '255.255.255.254', + '255.255.255.252', + '255.255.255.248', + '255.255.255.240', + '255.255.255.224', + '255.255.255.192', + '255.255.255.128', + '255.255.255.0', + '255.255.254.0', + '255.255.252.0', + '255.255.248.0', + '255.255.240.0', + '255.255.224.0', + '255.255.192.0', + '255.255.128.0', + '255.255.0.0', + '255.254.0.0', + '255.252.0.0', + '255.248.0.0', + '255.240.0.0', + '255.224.0.0', + '255.192.0.0', + '255.128.0.0', + '255.0.0.0', + ) ; + + return (\@netmaskvalues, \@netmaskoptions) ; + } + + +1 ; + +__END__ + Added: perl/embperl/trunk/eg/forms/README.txt URL: http://svn.apache.org/viewvc/perl/embperl/trunk/eg/forms/README.txt?rev=724632&view=auto ============================================================================== --- perl/embperl/trunk/eg/forms/README.txt (added) +++ perl/embperl/trunk/eg/forms/README.txt Mon Dec 8 23:45:11 2008 @@ -0,0 +1,274 @@ + +Example Code for using Embperl::Forms and the wizard.pl application +=================================================================== + +This example assumes that Embperl is extracted under + + C:\perl\msrc\embperl + +and Apache is installed at + + C:\Programme\Apache Software Foundation\Apache2.2 + +In this example Embperl is installed on Windows and uses Apache as CGI script. + +The same should also work with mod_perl and Unix. You only have to modify +the httpd.conf accordingly. + +The example assumes the Perl is already install and available in your PATH. + + +1.) First of all install Embperl + +cd C:\perl\msrc\embperl +perl Makefile.PL + +-> Answer all question with 'N' (because we don't use mod_perl in this example) + +nmake +nmake install + + +2.) Copy CGI Script to Apache directory + + +copy epocgi.pl "C:\Programme\Apache Software Foundation\Apache2.2\cgi-bin" +copy embpcgi.pl "C:\Programme\Apache Software Foundation\Apache2.2\cgi-bin" + + + +3.) Modify the configuration file + +It is located at + + +C:\Programme\Apache Software Foundation\Apache2.2\conf\httpd.conf + +At the end add the following directives: + +# ---------------------------- + +AddType text/html .epl +AddType text/html .ehtml + + +Alias /forms c:/perl/msrc/embperl/eg/forms + +SetEnv PERL5LIB c:/perl/msrc/embperl/eg/forms + +SetEnv EMBPERL_OBJECT_ADDPATH c:/perl/msrc/embperl/eg/forms/lib +SetEnv EMBPERL_SESSION_HANDLER_CLASS no +# optAllFormData + optRawInput +SetEnv EMBPERL_OPTIONS 0x2010 + + +<Location /forms/pages> + Order allow,deny + Allow from all + + Action text/html /cgi-bin/embpcgi.pl + Options ExecCGI +</Location> + + +<Location /forms/wizard> + Order allow,deny + Allow from all + + Action text/html /cgi-bin/epocgi.pl + + Options ExecCGI + SetEnv Embperl_Appname setupwizard + SetEnv Embperl_Object_Base base.epl + SetEnv Embperl_Object_App wizard.pl + +</Location> + +# ---------------------------- + + + +4.) Start Apache on the command line + +cd C:\Programme\Apache Software Foundation\Apache2.2 + +bin\httpd + + +-> Apache will write it's logfiles in C:\Programme\Apache Software Foundation\Apache2.2\logs + +5.) Call a simple page + +Per default Apache listens on Port 8080 on Windows, in case you have installed +it on a different port please change the followings URLs accordingly. +Open the following URL in a browser: + + http://localhost:8080/forms/pages/loop.htm + + +This shows the environemnt of the CGI script. This is a very simple Embperl page. + + +6.) Calls the wizard + +Open + + http://localhost:8080/forms/wizard/action.epl + +This will show you a wizard where you can enter setup informations. The wizard will +ask page by page what is necssary. It will ask different things depending on your input. + +For example you can choose different ways to get to the internet and it will ask the +access data (can call different pages internaly) depending on your choise. + +If you choose "import" on the first page, you get an form that modifies itself dynamicly +depending on what type you chosse at the top of the page. + + + +7.) The files + +Here is an overview of all files underneath the eg/forms directory: + + + +- eg\forms/Embperl: + +Directory for modules of the Embperl::MyForm namespace which are used to customize +the forms and add addtional controls + +* MyForm.pm + +This defines the Embperl::MyForm Object which overwrites some methods to tell +Embperl::Form where to located additional objects. + + +- eg\forms/Embperl/MyForm/Control: + +Directory for Custom controls + +- eg\forms/Embperl/MyForm/DataSource: + +Directory for custom datasource objects. Datasource object are used to fill +select or radio controls, as far as they don't have static data in the form +definition itself. Use the datasrc => attribute to specify a datasource object. + +The example comes with two datasource +objects. These two only return static data, but datasource objects can return +any data for example from a database. + +* languages.pm +* netmask.pm + +- eg\forms/css: +* EmbperlForm.css + +Stylesheets + +- eg\forms/js: +* EmbperlForm.js +* prototype.js + +Necessary JavaScript code + +- eg\forms/lib: + +Generaly code + +* footer.epl + +This file is included in every page at the bottom. It is called from base.epl + +* header.epl + +This file is included in every page at the top. It is called from base.epl + +* wizard.epl + +This file contains the HTML layout for the wizard. It contains several methods +which can be overwritten in the page objects to customize the layout. + +* wizard.pl + +Thie is the controller object of the wizard. It controls the workflow. + +- eg\forms/pages: +* loop.htm + +Simpley Embperl page as example + +- eg\forms/wizard: + +This directory contains the actual pages of the wizard and it's configuration + +* base.epl + +This file defines the HTML layout of the page in which ths wizard is embedded. + +* wizconfig.pl + +This file contains the configuration of the wizard. + +The method "getpages" must return an array ref of all page files that are +used by the wizard. + +The method "init" is called on every request and can be used for initialization +purposes. + +Every of the remaining files in the directory define a page for the wizard: + +action.epl +do.epl +dsl.epl +exportslave.epl +finish.epl +gateway.epl +importslave.epl +inetconnect.epl +isdn.epl +name.epl +network.epl +organisation.epl + +Every page contains four methods: + +- title: + +Is used to specify the title of the page + +- condition: + +The page is only displayed if the method return true, otherwise it is skipped + +- show: + +This method contains the code and HTML which is actually shown for the page, +including the form elements. + +- verify: + +This method is called after the user has pressed Next. If it is used to verify +the user input. If the input is ok, it should return true, othwise it should +return 0 and set $fdat{-msg} to the error message. + + + +8.) Inclunding forms + +A form is defined by a fields definition which is passed to the showfields method. + +A fields definition consists of a set of controls. Each control has a set of +attributes. + +Available controls can be found at embperl/Embperl/Form/Control + +Each control contains a description of the possible attributes. + +Some controls (like select, selectdyn, radio, checkboxes) can get it's input +from a datasource control (see above). In the example code most of the datasrc +attributes are renamed to xdatasrc because the datasource object are not +included in the example code. + +Each control definition can also contain a validation rule. See Embperl::Form::Validate +for more informaion on validation rules. + Added: perl/embperl/trunk/eg/forms/css/EmbperlForm.css URL: http://svn.apache.org/viewvc/perl/embperl/trunk/eg/forms/css/EmbperlForm.css?rev=724632&view=auto ============================================================================== --- perl/embperl/trunk/eg/forms/css/EmbperlForm.css (added) +++ perl/embperl/trunk/eg/forms/css/EmbperlForm.css Mon Dec 8 23:45:11 2008 @@ -0,0 +1,446 @@ +table { + font-family: Geneva,Arial,Helvetica; + font-size: 11px; + empty-cells:show; + } + +.cBody { + background: #ffffff; + font-family: Geneva,Arial,Helvetica; + font-size: 11px; + margin: 0px 0px 0px 0px; + height: 100%; + border-left:solid 1px; + /* overflow: scroll; */ + } + +.cStd {background: #ffffff; color: #000000; font-family: Geneva,Arial,Helvetica; font-size: 11px; margin: 0px 0px 0px 0px; } +.cStdInput {background: #d4d4d4; color: #000000; font-family: Geneva,Arial,Helvetica; font-size: 11px; margin: 0px 0px 0px 0px; } +.cStdNoFrame {background: #ffffff; color: #000000; font-family: Geneva,Arial,Helvetica; font-size: 11px; } +.cStdText {background: #ffffff; color: #000000; font-family: Geneva,Arial,Helvetica; font-size: 13px; } +.cCenter { text-align: center ;} +.cFooterText, .cFooterTextCenter + {background: #ffffff; font-family: Geneva,Arial,Helvetica; font-size: 10px; color: #444444;} +.cFooterTextCenter {text-align: center;} +.cFooterTextBold {font-weight: bold; color: #000000; } +.cObjectDN {font-size: 11px; color: #bbbbbb; } +.cObjectInfo {font-size: 11px; color: #ff0000; font-weight: bold ;} +.cObjectText {font-size: 11px; color: #000000; margin-right: 17px } +.cError {font-size: 11px; color: #ff0000;} +.cWarn {font-size: 11px; color: #ff6600;} +.cOK {font-size: 11px; color: black;} + +.cHeadH1 {color: #fdd11a; font-size: 27px; font-weight: bold; margin: 10px; padding: 0px;} +.cHeadH2 {color: #ffffff; font-size: 17px; font-weight: bold; margin: 10px; padding: 0px;} + +.cWizardDiv {margin-left: auto; width: 850px ;margin-right: auto ; margin-top: 20px ;} +.cSetupWizardDiv {margin-left: auto; width: 730px ;margin-right: auto ; margin-top: 20px ;} +.cPopupDiv {margin-left: 20px; ;margin-right: 20px ; margin-top: 20px ;} + + +/* --- Embperl::Form --- */ + +.cBase {font-family: Geneva,Arial,Helvetica; font-size: 11px; } +.cTableDiv {background: #ffffff; border: black 1px solid; + padding: 2px; padding-left: 4px ; width: 100% ; + margin: 0px } +.cTableDivU {background: #ffffff; border: black 1px solid; border-top: 0px ; + padding: 2px; padding-left: 4px ; width: 100% ; + margin: 0px } +.cTable {background: #ffffff; border-collapse: collapse; width: 100% ; + margin: 0px; padding: 0px ;} +.cTableInput {table-layout: fixed ; } +.cLabelGroup { width: 150px } +.cControlGroup { width: 208px ; } +.cTableRow1 {background: #ffffff; } +.cTableRow {background: #ffffff; } +.cControlBox {background: #d4d4d4; color: #000000; margin: 0px 0px 0px 0px; + padding: 2px 3px 2px 3px; border: 2px white solid; vertical-align: middle ; text-align: left ; } +.xcControlBoxWidth1 { width: 570px ; /*80% ; */} +.xcControlBoxWidth2 { width: 214px ; /*30% ; */ } +.cControlBoxWidth4 { width: 40px ; /* 5% ; */ } +.cControlBoxWidth5 { width: 40px ; /* 5% ; */ } +.cControlBoxWidth6 { width: 40px ; /* 5% ; */ } +.cControlBoxWidth7 { width: 40px ; /* 5% ; */ } +.cControlButtonBox { text-align: center ; border: 2px white solid; padding: 6px;} +.cControlAddRemoveBox { text-align: center ; border: 0px ; margin-left: auto; margin-right: auto} +.cTransparentBox {margin: 0px 0px 0px 0px; + padding: 2px 3px 2px 3px; } +.cControl {border: 1px black solid; padding-left: 2px ; + font-family: Geneva,Arial,Helvetica; font-size: 11px;} +.cGridCell .cControl { border: 0px; padding: 0px ;} +.cControlWidthInput {margin-left: 0px ; width: 98%; } +.cControlWidthSelect {margin-left: 0px ; width: 85%; } +.cControlWidthNumber {margin-left: 0px ; width: 50%; text-align: right ; padding-right: 2px} +.cControlButton {background-image: url(/images/button_bg_off.gif); + background-position: 0px -4px ; + padding: 3px; padding-left: 25px ; + height: 20px ; + font-size: 11px; white-space: nowrap ; + margin: 0px ; + cursor:pointer; width: 150px ; + } +.cControlButton:hover {background-image: url(/images/button_bg_on.gif);} +.cControlButtonDiv {background-image: url(/images/button_bg_off.gif); + background-position: -22px -2px ; + padding: 2px; padding-left: 5px ; + + border: 1px black solid; + font-size: 11px; white-space: nowrap ; + margin: 0px ; + cursor:pointer; width: 150px ; + text-align: left ; + } +.cControlButtonDiv img { margin-bottom: -3px ; margin-right: 3px ;} +.cControlButtonDiv:hover {background-image: url(/images/button_bg_on.gif);background-position: -22px -2px ;} +.xcControlLine { border: 1px; color: black ; } + +.cControlAddonImg { border: 0px ; vertical-align: middle; position: relative; top: -3px ;} +.cControlAddonA { border: 0px ; } +.cLabelBox {background: #fdd11a; color: #000000; text-align: right; margin: 0px 0px 0px 0px; + padding: 2px 3px 2px 3px; border: 2px white solid; vertical-align: middle ;} +.xcLabelBoxWidth1 { width: 20% ; } +.xcLabelBoxWidth2 { width: 20% ; } +.xcLabelBoxWidth4 { width: 20% ; } + +.cTabTable {background: #ffffff; padding: 0px; margin: 0px; + border-collapse: collapse; + } +.cTabRow {background: #ffffff; padding: 0px; margin: 0px; width: 100%; + border-collapse: collapse; + vertical-align: bottom; } +.cTabTD {padding: 0px; margin: 0px; } +.cTabCellOn {background: white ; padding: 0px ; margin: 0px; border: 0px ; + vertical-align: bottom; } +.cTabCellOff {background: white ; padding: 0px ; margin: 0px; border: 0px ; + vertical-align: bottom; + } +.cTabCellBlank {background: white ; padding: 0px ; margin: 0px; border: 0px ; + border-bottom: 1px black solid; vertical-align: bottom; + width: 95%;} + +.cTabDivOn {background-image: url(/images/bg_tab_on.gif) ; background-repeat: repeat-x ; + border: black 1px solid; + border-bottom: none ; + border-left: #FFFFFF 1px solid; + padding: 4px; + font-weight: bold ; + font-size: 16px; white-space: nowrap ; + } + +.cTabDivOff {background-image: url(/images/bg_tab_off.gif); background-repeat: repeat-x ; + border: black 1px solid; padding: 4px; + border-left: #FFFFFF 1px solid; + font-size: 11px; white-space: nowrap ; + } + + +.cAutoCompDiv {position:relative;margin:0px;width:99%;} +.cAutoCompInput {position:relative;} +.cAutoCompContainer {width:300px;border:1px solid #404040;overflow:auto;height:200px;background-color:white;z-index:9999;} +.cAutoCompContainer ul {list-style-type:none; margin:0px; padding:0px;width:300px;} +.cAutoCompContainer li {list-style-type:none; + display:block; + margin:0; + padding:2px; + white-space:nowrap; + cursor:pointer;} +.cAutoCompContainer li.selected {background:highlight;color: white;} +.cAutoCompArrow {cursor:default; display: inline ; background-image: url(/images/todown.gif) ; width: 18px; height: 18px; background-position: center; } + +.cControlWidthSelectDyn {margin-left: 0px ; width: 99%; } + +.cGridTable {background: #ffffff; border-collapse: collapse; width: 100%; + border: 1px solid black; position: relative; } + +.cGridTable td {background: #ffffff; padding: 0px; margin: 0px; + border: 1px solid black; } + +.cGridTitle {background: #ffffff; padding: 0px; margin: 0px; + border-collapse: collapse; width: 100% ; } +.cGridControlBox {background: #fdd11a; text-align: right ; margin: 0px 0px 0px 0px; + padding: 2px 3px 2px 3px; border: 0px; } +.cGridLabelBox {background: #fdd11a; text-align: left; margin: 0px 0px 0px 0px; + padding: 2px 3px 2px 3px; border: 0px; } + +.cGridHeader td {background: #d4d4d4; padding: 2px; margin: 0px; + height: 16px ; border: 1px solid black;} + +.cGridTable input, .cGridTable select { font-size: 11px; border: 0px; padding: 1px; margin: 0px; width: 98%;} + +.cGridRowSelected, .cGridRowSelected input, .cGridRowSelected select, .cGridRowSelected td { background-color: lightblue} + + + + +/* ---------- The main calendar widget. DIV containing a table. ------------- */ + +.calendar { + position: relative; + display: none; + border-top: 2px solid #fff; + border-right: 2px solid #000; + border-bottom: 2px solid #000; + border-left: 2px solid #fff; + font-size: 11px; + color: #000; + cursor: default; + background: #c8d4d0; + font-family: tahoma,verdana,sans-serif; +} + +.calendar table { + border-top: 1px solid #000; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + border-left: 1px solid #000; + font-size: 11px; + color: #000; + cursor: default; + background: #c8d4d0; + font-family: tahoma,verdana,sans-serif; +} + +/* Header part -- contains navigation buttons and day names. */ + +.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ + text-align: center; + padding: 1px; + border-top: 1px solid #fff; + border-right: 1px solid #000; + border-bottom: 1px solid #000; + border-left: 1px solid #fff; +} + +.calendar .nav { + background: transparent url(menuarrow.gif) no-repeat 100% 100%; +} + +.calendar thead .title { /* This holds the current "month, year" */ + font-weight: bold; + padding: 1px; + border: 1px solid #000; + background: #788480; + color: #fff; + text-align: center; +} + +.calendar thead .headrow { /* Row <TR> containing navigation buttons */ +} + +.calendar thead .daynames { /* Row <TR> containing the day names */ +} + +.calendar thead .name { /* Cells <TD> containing the day names */ + border-bottom: 1px solid #000; + padding: 2px; + text-align: center; + background: #e8f4f0; +} + +.calendar thead .weekend { /* How a weekend day name shows in header */ + color: #f00; +} + +.calendar thead .hilite { /* How do the buttons in header appear when hover */ + border-top: 2px solid #fff; + border-right: 2px solid #000; + border-bottom: 2px solid #000; + border-left: 2px solid #fff; + padding: 0px; + background-color: #d8e4e0; +} + +.calendar thead .active { /* Active (pressed) buttons in header */ + padding: 2px 0px 0px 2px; + border-top: 1px solid #000; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + border-left: 1px solid #000; + background-color: #b8c4c0; +} + +/* The body part -- contains all the days in month. */ + +.calendar tbody .day { /* Cells <TD> containing month days dates */ + width: 2em; + text-align: right; + padding: 2px 4px 2px 2px; +} +.calendar tbody .day.othermonth { + font-size: 80%; + color: #aaa; +} +.calendar tbody .day.othermonth.oweekend { + color: #faa; +} + +.calendar table .wn { + padding: 2px 3px 2px 2px; + border-right: 1px solid #000; + background: #e8f4f0; +} + +.calendar tbody .rowhilite td { + background: #d8e4e0; +} + +.calendar tbody .rowhilite td.wn { + background: #c8d4d0; +} + +.calendar tbody td.hilite { /* Hovered cells <TD> */ + padding: 1px 3px 1px 1px; + border-top: 1px solid #fff; + border-right: 1px solid #000; + border-bottom: 1px solid #000; + border-left: 1px solid #fff; +} + +.calendar tbody td.active { /* Active (pressed) cells <TD> */ + padding: 2px 2px 0px 2px; + border-top: 1px solid #000; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + border-left: 1px solid #000; +} + +.calendar tbody td.selected { /* Cell showing selected date */ + font-weight: bold; + border-top: 1px solid #000; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + border-left: 1px solid #000; + padding: 2px 2px 0px 2px; + background: #d8e4e0; +} + +.calendar tbody td.weekend { /* Cells showing weekend days */ + color: #f00; +} + +.calendar tbody td.today { /* Cell showing today date */ + font-weight: bold; + color: #00f; +} + +.calendar tbody .disabled { color: #999; } + +.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */ + visibility: hidden; +} + +.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ + display: none; +} + +/* The footer part -- status bar and "Close" button */ + +.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */ +} + +.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */ + background: #e8f4f0; + padding: 1px; + border: 1px solid #000; + background: #788480; + color: #fff; + text-align: center; +} + +.calendar tfoot .hilite { /* Hover style for buttons in footer */ + border-top: 1px solid #fff; + border-right: 1px solid #000; + border-bottom: 1px solid #000; + border-left: 1px solid #fff; + padding: 1px; + background: #d8e4e0; +} + +.calendar tfoot .active { /* Active (pressed) style for buttons in footer */ + padding: 2px 0px 0px 2px; + border-top: 1px solid #000; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + border-left: 1px solid #000; +} + +/* Combo boxes (menus that display months/years for direct selection) */ + +.calendar .combo { + position: absolute; + display: none; + width: 4em; + top: 0px; + left: 0px; + cursor: default; + border-top: 1px solid #fff; + border-right: 1px solid #000; + border-bottom: 1px solid #000; + border-left: 1px solid #fff; + background: #d8e4e0; + font-size: 90%; + padding: 1px; + z-index: 100; +} + +.calendar .combo .label, +.calendar .combo .label-IEfix { + text-align: center; + padding: 1px; +} + +.calendar .combo .label-IEfix { + width: 4em; +} + +.calendar .combo .active { + background: #c8d4d0; + padding: 0px; + border-top: 1px solid #000; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + border-left: 1px solid #000; +} + +.calendar .combo .hilite { + background: #048; + color: #aef; +} + +.calendar td.time { + border-top: 1px solid #000; + padding: 1px 0px; + text-align: center; + background-color: #e8f0f4; +} + +.calendar td.time .hour, +.calendar td.time .minute, +.calendar td.time .ampm { + padding: 0px 3px 0px 4px; + border: 1px solid #889; + font-weight: bold; + background-color: #fff; +} + +.calendar td.time .ampm { + text-align: center; +} + +.calendar td.time .colon { + padding: 0px 2px 0px 3px; + font-weight: bold; +} + +.calendar td.time span.hilite { + border-color: #000; + background-color: #667; + color: #fff; +} + +.calendar td.time span.active { + border-color: #f00; + background-color: #000; + color: #0f0; +} Added: perl/embperl/trunk/eg/forms/js/EmbperlForm.js URL: http://svn.apache.org/viewvc/perl/embperl/trunk/eg/forms/js/EmbperlForm.js?rev=724632&view=auto ============================================================================== --- perl/embperl/trunk/eg/forms/js/EmbperlForm.js (added) +++ perl/embperl/trunk/eg/forms/js/EmbperlForm.js Mon Dec 8 23:45:11 2008 @@ -0,0 +1,454 @@ +function set_grid_display(doc, elm, display) + { + var elements = elm.getElementsByTagName('table'); + for (var i = 0; i < elements.length ; i++) + { + if(elements[i].className.search('cGridTable') != -1) + { + elements[i].style.display = display; + } + } + } + +function set_display(doc, value,display) + { + var elm ; + if (elm = doc.getElementById(value)) + { + elm.style.display = display ; + set_grid_display(doc, elm,display); + } + j = 10 ; + dummy= value + j; + while (elm = doc.getElementById(dummy) ) + { + elm.style.display = display ; + j++ ; + dummy= value + j; + } + } + +function set_class(doc, name, classval) + { + var obj = doc.getElementById(name) ; + if (obj) + obj.className = classval ; + } + +function show_id_setobj(doc, value, name) + { + var obj = doc.getElementById(name) ; + if (obj) + obj.value = value ; + + set_display(doc, value, "") ; + } + + +function tab_selected(doc, value, name) + { + var obj = doc.getElementById(name) ; + + if (obj && obj.value) + { + set_display(doc, obj.value, "none") ; + set_class(doc, '__tabs_' + obj.value, 'cTabDivOff') ; + } + + set_class(doc, '__tabs_' + value, 'cTabDivOn') ; + show_id_setobj(doc, value, name) ; + } + +function show_selected(doc, obj) + { + var i ; + var x = obj.selectedIndex ; + var name = obj.name ; + var elm ; + var baseid = name + '-' ; + for (i=0;i<obj.options.length;i++) + { + if (obj.options[i].value != '') + { + elm = doc.getElementById(baseid + (i + 1)) ; + if (elm) + { + if (i == x) + { + elm.style.display = "" ; + } + else + { + elm.style.display = "none" ; + } + } + j = 10 ; + dummy = baseid + i + '-' + j; + while (elm = doc.getElementById(dummy) ) + { + if (i == x) + { + elm.style.display = "" ; + } + else + { + elm.style.display = "none" ; + } + j++ ; + dummy = baseid + i + '-' + j; + } + } + } + } + + +function show_checked(doc, obj) + { + var i ; + var x = obj.checked?0:1 ; + var name = obj.name ; + var elm ; + var baseid = name + '-' ; + for (i=0;i<2;i++) + { + elm = doc.getElementById(baseid + i) ; + if (elm) + { + if (i == x) + { + elm.style.display = "" ; + } + else + { + elm.style.display = "none" ; + } + } + j = 10 ; + dummy = baseid + i + '-' + j; + while (elm = doc.getElementById(dummy) ) + { + if (i == x) + { + elm.style.display = "" ; + } + else + { + elm.style.display = "none" ; + } + j++ ; + dummy = baseid + i + '-' + j; + } + } + } + +function show_radio_checked(doc, obj,x,max) + { + var i ; + var name = obj.name ; + var elm ; + var baseid = name + '-' ; + + for (i=0;i<=max;i++) + { + elm = doc.getElementById(baseid + i) ; + if (elm) + { + if (i == x) + { + elm.style.display = "" ; + } + else + { + elm.style.display = "none" ; + } + } + j = 10 ; + dummy = baseid + i + '-' + j; + while (elm = doc.getElementById(dummy) ) + { + if (i == x) + { + elm.style.display = "" ; + } + else + { + elm.style.display = "none" ; + } + j++ ; + dummy = baseid + i + '-' + j; + } + } + } +function submitvalue (form, name, value) + { + var e=form.ownerDocument.createElement('input'); + e.type='hidden'; + e.name=name; + e.value=value; + form.appendChild(e); + form.submit() + } + +function addremoveInitOptions (doc, src, dest, send, removesource) + { + var i ; + var j ; + var found = 0 ; + var val ; + var vals = send.value.split("\t") ; + for (i = 0; i < vals.length; i++) + { + val = vals[i] ; + found = 0 ; + for (j = 0; j < src.length; j++) + { + if (src.options[j].value == val) + { + found = 1 ; + break ; + } + } + if (found) + { + var newopt = doc.createElement('OPTION') ; + var oldopt = src.options[j] ; + newopt.text = oldopt.text ; + newopt.value = oldopt.value ; + dest.options.add(newopt) ; + } + } + if (removesource) + { + for (i = 0; i < src.length; i++) + { + val = src.options[i].value ; + for (j = 0; j < vals.length; j++) + { + if (vals[j] == val) + { + src.options[i] = null ; + i-- ; + break ; + } + } + } + } + } + +function addremoveBuildOptions (dest, send) + { + var i ; + var val = '' ; + for (i = 0; i < dest.length; i++) + { + val += dest.options[i].value ; + if (i < dest.length - 1) + val += "\t" ; + } + send.value=val ; + } + +function addremoveAddOption (doc, src, dest, send, removesource) + { + if (src.selectedIndex >= 0) + { + var newopt = doc.createElement('OPTION') ; + var oldopt = src.options[src.selectedIndex] ; + newopt.text = oldopt.text ; + newopt.value = oldopt.value ; + dest.options.add(newopt) ; + if (removesource) + src.options[src.selectedIndex] = null ; + addremoveBuildOptions (dest, send) ; + } + else + alert ("Bitte einen Eintrag zum Hinzufügen auswählen") ; + + } + +function addremoveRemoveOption (doc, src, dest, send, removesource) + { + if (dest.selectedIndex >= 0) + { + if (removesource) + { + var newopt = doc.createElement('OPTION') ; + var oldopt = dest.options[dest.selectedIndex] ; + newopt.text = oldopt.text ; + newopt.value = oldopt.value ; + src.options.add(newopt) ; + } + //dest.options.remove(dest.selectedIndex) ; + dest.options[dest.selectedIndex] = null ; + addremoveBuildOptions (dest, send) ; + } + else + alert ("Bitte einen Eintrag zum Entfernen auswählen") ; + + } + +// ----------------------------------------------------------------------------- + + + +var Grid = Class.create() ; + +Grid.prototype = { + +initialize: function (tableelement, rowelement, maxelement) + { + this.rowelement = rowelement ; + this.maxelement = maxelement ; + this.tableelement = tableelement ; + Event.observe(this.tableelement, "click", this.onClick.bindAsEventListener(this)); + Event.observe(this.tableelement, "focus", this.onClick.bindAsEventListener(this)); + Event.observe(this.tableelement, "keyup", this.onClick.bindAsEventListener(this)); + + rows = this.tableelement.getElementsByTagName('tr'); + lastrow = rows[rows.length - 1] ; + newid = this.tableelement.id ; + newid = newid + '-row-' ; + lastid = lastrow.id ; + idlength = newid.length ; + this.lastnum = parseInt (lastid.substr(idlength)) ; + if (isNaN(this.lastnum)) + this.lastnum = -1 ; + }, + + +addRow: function () + { + var rows = this.tableelement.getElementsByTagName('tr'); + var lastrow = rows[rows.length - 1] ; + + this.lastnum = this.lastnum + 1 ; + var inserttext = this.rowelement.innerHTML ; + var newtext = inserttext.replace (/%row%/gi, this.lastnum) ; + newtext = newtext.replace (/<tbody>/gi, '') ; + newtext = newtext.replace (/<\/tbody>/gi, '') ; + newtext = newtext.replace (/<x-script/gi, '<script') ; + newtext = newtext.replace (/<\/x-script/gi, '</script') ; + new Insertion.After (lastrow, newtext) ; + this.maxelement.value = this.lastnum + 1 ; + }, + +focusRow: function () + { + var next = this.currRow ; + if (next && next.className == 'cGridRow') + { + next.className='cGridRowSelected' ; + while (next && (next.tagName != 'INPUT' || next.tagName != 'SELECT')) + { + next = next.firstChild ; + } + if (next) + next.focus() ; + } + }, + +delRow: function (row) + { + if (row != undefined) + this.currRow = row ; + if (this.currRow) + { + var next = this.currRow.nextSibling ; + var p = this.currRow.parentNode ; + p.removeChild(this.currRow) ; + this.currRow = next ; + this.focusRow () ; + } + }, + +upRow: function (row) + { + if (row != undefined) + this.currRow = row ; + if (this.currRow) + { + var prev = $(this.currRow).previous () ; + if (prev && prev.className == 'cGridRow') + { + var currorder = this.currRow.getElementsByTagName('input'); + var prevorder = prev.getElementsByTagName('input'); + var n = currorder[0].value ; + currorder[0].value = prevorder[0].value ; + prevorder[0].value = n ; + + var p = this.currRow.parentNode ; + var currdata = p.removeChild(this.currRow) ; + this.currRow = p.insertBefore(currdata, prev) ; + + this.focusRow () ; + } + } + }, + +downRow: function (row) + { + if (row != undefined) + this.currRow = row ; + if (this.currRow) + { + var next = $(this.currRow).next () ; + if (next && next.className == 'cGridRow') + { + var currorder = this.currRow.getElementsByTagName('input'); + var nextorder = next.getElementsByTagName('input'); + var n = currorder[0].value ; + currorder[0].value = nextorder[0].value ; + nextorder[0].value = n ; + + var next2 = next.next () ; + var p = this.currRow.parentNode ; + var currdata = p.removeChild(this.currRow) ; + this.currRow = p.insertBefore(currdata, next2) ; + + this.focusRow () ; + } + } + }, + + +onClick: function (e) + { + var elem = e.target?e.target:e.srcElement ; + if (e.type == 'keyup' && ((e.which && e.which == e.DOM_VK_ADD) || e.keyCode == 107) && e.altKey) + { + this.addRow () ; + e.cancelBubble = true ; + return false ; + } + + var p = elem ; + while (p && p.tagName != 'TR') + { + p = p.parentNode ; + } + if (p) + { + if (this.currRow) + this.currRow.className='cGridRow' ; + + if (p.className == 'cGridRow') + { + p.className='cGridRowSelected' ; + this.currRow=p ; + } + else + { + this.currRow=null ; + } + if (this.currRow && e.type == 'keyup' && ((e.which && e.which == e.DOM_VK_SUBTRACT) || e.keyCode == 109) && e.altKey) + { + this.delRow (this.currRow) ; + e.cancelBubble = true ; + return false ; + } + } + //alert ('t='+elem.tagName +' p='+ p.id+' c='+p.className) ; + } + + } + --------------------------------------------------------------------- To unsubscribe, e-mail: embperl-cvs-unsubscribe[at]perl.apache.org For additional commands, e-mail: embperl-cvs-help[at]perl.apache.org
|