HTML formatting of Perl variables

[sterline]

How do I make the buttons in the code fragment below appear bold?

$s .= "\n";
# submit buttons
my %buttonNames = (
'a' => 'a',
'b' => 'b',
'c' => 'c',
);

my $buttonName = $buttonNames{$action};
$s .= $cgi->submit(
-style=>'width: 95;',
-value=>$buttonName
);

 

[Leland123]

Hi Sterline,

When you stream the HTML to the browser with a print command, enclose the viarable between the bold tags like:


#---------- begin snip of code -------------

$name = "Leland F. Jackson";

print qq
~
<b>$name</b>
~;
#---------- end snip of code -------------
Regards,

LelandJ


Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[KevinADC]

I don't think the <b> tag will work for form buttons but maybe it will for all I know.

You can simply add another style attribute to your existing form widget:

my $buttonName = $buttonNames{$action};
$s .= $cgi->submit(
-style=>'width: 95; font-weight: bold;',
-value=>$buttonName
);

you will need to test that to see if I got the attribute correct.

 

[Leland123]

Hi Sterline,

Disregard my post, as I don't think it applies to what you are doing. As a matter of fact, I don't think it applies to an html button; since, a html button element doesn't have a bold attribute. <g>. It would work to stream a perl variable to a browser using bold html tags, though.

Regards,

LelandJ

Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[sterline]

KevinADC's solution worked though it makes all the buttons bold. Turns out I need only one of the buttons to be bold. My question should have read 'How do I make only the Empty button bold? Thanks.

 

[KevinADC]

assuming that means the buttons name is "Empty":

my $buttonName = $buttonNames{$action};
my $style = 'width: 95;';
$style = 'width: 95; font-weight: bold;' if $buttonName eq 'Empty';

$s .= $cgi->submit(
-style=>$style,
-value=>$buttonName
);

 

[sterline]

Perfect! Thanks, KevinADC!

 

[Leland123]

Hi,

Whoops, I stand corrected, a submit button does have a bold. Here it is in a pure stream to browser without using CGI.pm

#--------------- test_it.pl --------------
#!/usr/bin/perl

print qq~Content-type: text/html\n\n~;

$the_button = qq
~
<INPUT
TYPE = "button"
VALUE = "Submit"
style =
"
width: 95;
font-weight: bold;
"
ONCLICK="mainSubmit()"
>
~;


print qq
~
$the_button
~;


exit;

#-------------- End Script ----------------


Regards,

LelandJ




Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[KevinADC]

you can modify the appearance of form widgets using CSS, there is at least one exception, the <input type=file> button, you can't change that one very much if at all, I assume because the operating system is generating the button and not the browser.

 

[Leland123]

Hi KevinADC,

I assume your talking about Gtk2perl. I'm using the Komodo IDE on FC2 and it has a neat "GUI Builder" tool that allow me to create forms with the ease of drag and drop, drag a widget onto the form, put focus on a widget like a button, label, textbox, etc and then open a properties dialog window with drop down menu to select widget properties like back/fore colors, bold, italic, etc.

Komodo automatically generates a GUI.pm module which can't be changed, because it is rebuilt automatically each time the builder saves a project. Komodo also creates a .pl program frame to go with the GUI.pm, This is where all my custom perl code goes. The .pl file holds a framework of subs with each sub associated with one of the widgets on a form. Each sub is labeled to indicate to which widget it is bound.

Then its just a matter of inserting my perl code inside a callback subs in the .pl, which is bound to a particular widget on the form

I can then run the perl program in the customary manner (eg perl myform.pl), and when the window appears, click on a button, etc and runs the code I entered in the callback sub which binds to the widget button.

This really make things easy.

Regards,

LelandJ


Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[KevinADC]

Actually, I was thinking more like cgi scripts which generally get displayed in and executed from a web browser. The browser does all the formatting of the display so you have to use whatever conventions browsers use (CSS, html, etc) to modify appearance, disregarding third party plugins like flash and such.

 

[Leland123]

Hi KevinADC,

Yeah, that is primarily what I'm doing. I'm writing a shopping kart app and creating my own class/modules to support it, so the framework is there next time I need it. I've taken html and incorporated it into an object oriented modules, probably much like CGI.pm does. Here is an example module used to create html forms. Notice how the html is turned into objects, which I suppose make the html object oriented. Here I create the table object complete with table properties and the tablestyle sub to create the table html. Once this is done, every .pl in the app can create an html table from this module and the app look and feel is very uniform throughout.


#----------begin Sm_css.pm --------------

#!/usr/bin/perl
# Class Sm_css
package Sm_css;

sub new
{
my $proto = shift;
my $class = ref( $proto ) || $proto;
my $self = {};

#======================= Colors =========================#
############# tablestyle #################

$self->{ TABLEALIGN } = "center";
$self->{ TABLECELLSPACE } = 0;
$self->{ TABLECELLPAD } = 0;
$self->{ TABLEBORDER } = 7;
$self->{ TABLETEXTALIGN } = "left";
$self->{ TABLEBACKCOLOR } = "#0000FF";
$self->{ TABLEFORECOLOR } = "#FFFFFF";
$self->{ TABLEFONT } = "Arial, Garamond, Times New Roman, serif";
$self->{ TABLEFONTSIZE } = "20px";
$self->{ TABLEFONTSTYLE } = "normal";
$self->{ TABLEFONTWEIGHT } = "100";

bless( $self, $class );
return $self;

}

###########################################################
## tablestyle
###########################################################
sub tablestyle
{
my $self = shift;

my ( $the_width, $thecellspace, $thecellpad ) = @_;

###print qq{Width $the_width}; ### Uncomment for debugging

if ( $thecellspace )
{
$self->{ TABLECELLSPACE } = $thecellspace;
}

if ( $thecellpad )
{
$self->{ TABLECELLPAD } = $thecellpad;
}

print qq
~
<TABLE
align = "$self->{TABLEALIGN}"
cellspacing = "$self->{TABLECELLSPACE}"
cellpadding = "$self->{TABLECELLPAD}"
BORDER = "$self->{TABLEBORDER}"
WIDTH = "$the_width"
style =
"
text-align : $self->{TABLETEXTALIGN};
color : $self->{TABLEFORECOLOR};
background-color : $self->{TABLEBACKCOLOR};
font-family : $self->{TABLEFONT};
font-size : $self->{TABLEFONTSIZE};
font-style : $self->{TABLEFONTSTYLE};
font-weight : $self->{TABLEFONTWEIGHT};
"
>
~;

}

1;

#################################################
#################################################
#################################################

=head1 NAME

Sm_css - class to implement cascading style sheets

=head1 SYNOPSIS

#=============== Some Base Colors ===============#

FFE4E1 = Mistyrose
FAF0E6 = Linen
E0FFFF = Lightcyan
F0FFF0 = Honeydue
Blanchedalmond
FFFFE0 = lightyellow
Aquamarine
AntiqueWhite
aliceblue

#==========================

=head1 DESCRIPTION

#------------- end Sm_css.pm ------------------


The Sm_css.pm class is inherited by the Smglobal.pm class along
with Sm_error_form.pm, Sm_report.pm, Sm_sessions.pm.

I can create uniform tables throught my app by call the table object like so:


#-------------- begin sample test.pl ----------------------

#!/usr/bin/perl

################################
## I keep all my modules in a directory
## named Sm, just below the my perl
## project home directory
################################
use lib "./Sm";

################################
## Move all the classes into
## memory namesapces
################################
use Sm::Smglobal;

###############################
## Create a reference to the
## Smglobal namespace
###############################
$oMy = Smglobal->new();

#############################
## Create a table from Sm_css.pm
## Remember the Sm_css.pm tablestyle sub
## is inherited by Sm_golbal.pm
##############################
$the_table = $oMy->tablestyle("75%");

print qq
~
$the_table
~;

exit;

#------------------ end test.pl --------------

This topic is of interest since it touches on what I'm doing in the app.

Regards,

LelandJ


Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[KevinADC]

Oh, I see what you are getting at now. I have never used that IDE, it sounds interesting.

 

[Leland123]

Yeah, perl is great. If you want to build an app for the local network (eg LAN), Gtk2_perl, using the komodo "GUI Builder" is a good way to go. Komodo is also good as a perl IDE for a WAN or web based app using html embedded in the perl script..

Perl can also be used very effectively to create system admin scripts, so Perl really has all the bases covered.

Regards,

LelandJ

Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[arn0ld]

doesn't
if ( $thecellspace )
{
$self->{ TABLECELLSPACE } = $thecellspace;
}

change the calling object? so that (assuming $oMy can be used in the followiing manner):

$the_table1 = $oMy->tablestyle("75%",1);

$the_table2 = $oMy->tablestyle("65%");# has TABLECELLSPACE of $the_table1

Also, Damien's "Object Oriented Perl" suggests the use of hashes for optional-parameter calling lists, e.g.,
$oMy->tablestyle(WIDTH->"75%",TABLECELLPAD->1)
or
$oMy->tablestyle("75%",TABLECELLPAD->1);# width is mandatory

 

[Leland123]

Hi arnOLD,

#---- ArnOLD said ----------------
doesn't

if ( $thecellspace )
{
$self->{ TABLECELLSPACE } = $thecellspace;
}

change the calling object? so that (assuming $oMy can be used in the followiing manner):

$the_table1 = $oMy->tablestyle("75%",1);

$the_table2 = $oMy->tablestyle("65%");# has TABLECELLSPACE of $the_table1

Also, Damien's "Object Oriented Perl" suggests the use of hashes for optional-parameter calling lists, e.g.,
$oMy->tablestyle(WIDTH->"75%",TABLECELLPAD->1)
or
$oMy->tablestyle("75%",TABLECELLPAD->1);# width is mandatory

#------------------------------------

Yes it would. If the $thecellspace scalar is populated by passing it a value by reference, then it overrides the hard coded value of the class property. I could also override the hard coded value of the class property by addressing it directly. You can see an example of how this might be done below.

I'll have to give your style a try. Usually, when I want to change a property, I access it directly; although, it is my understanding that it is recommended that properties only be accessed via the class method. Also, my class are different since the user will set the hard coded properties themselfs.

I'm build a custom set of classes just for my app, and to have a foundation for any other app I might program. My custom classes will not be on cpan, and will be distributed with the app in a directory named Sm, located one hop below the home directory branch of the tree.


#######################################
## Example of changing the properties, directly,
## of the SM_css.pm class just
## prior to streaming the html to
## the browser by calling the tablestyle sub.
## I usually refer to a sub as a method
## when it is in a class.
###################################

#### Set the appropriate properties in the Sm_css.pm class ####

$oMy->{ TABLEBACKCOLOR } = "NAVY";
$oMy->{ TABLEFORECOLOR } = "LINEN";

################################################
## Now I stream the html to the browser
## by calling the tablestyle method in Sm_css.pm
#################################################

$oMy->tablestyle("80%");



Regards,

LelandJ


Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[Leland123]

Hi arnOLD,

Yes, hashes work very well. Here is an exaple of how I'm passing them to a class for easy track of scalars by using hidden values embedded in html:

#-------- sub of the test.pl program ------------

###############################################
## oops_hidden_values
###############################################
sub oops_hidden_values
{
my ( $one, $two, $three ) = @_;

## hidden_values
if ( $one eq "true" )
{
%hidden_values =
(
is_demo => $FORM{ "is_demo" },
customSQL => $FORM{ "customSQL" },
number_of_pages => $FORM{ "number_of_pages" },
main_first_page => $FORM{ "main_first_page" },
affiliateno => $FORM{ "affiliateno" },

);

$oMy->hidden_values( %hidden_values );
}

## hidden values2
if ( $two eq "true" )
{
%hidden_values = (
clientno => $FORM{ "clientno" },
firstname => $FORM{ "firstname" },
lastname => $FORM{ "lastname" },
cdate => $FORM{ "cdate" },
ccompany => $FORM{ "ccompany" },
cstreet => $FORM{ "cstreet" },
ccity => $FORM{ "ccity" },
cstate => $FORM{ "cstate" },
czipcode => $FORM{ "czipcode" },
ccountry => $FORM{ "ccountry" },
cbusph => $FORM{ "cbusph" },
cfax => $FORM{ "cfax" },
cidno => $FORM{ "cidno" },
ctaxable => $FORM{ "ctaxable" },
cemail => $FORM{ "cemail" },
website => $FORM{ "website" },
cardtype => $FORM{ "cardtype" },
cardholder => $FORM{ "cardholder" },
cardnumber => $FORM{ "cardnumber" },
cardmonth => $FORM{ "cardmonth" },
cardyear => $FORM{ "cardyear" },
comment => $FORM{ "comment" },
cleared => $FORM{ "cleared" },
rows_per_page => $FORM{ "rows_per_page" },
acct_choice_1 => $FORM{ "acct_choice_1" }

);

$oMy->hidden_values( %hidden_values );
}

## hidden_values3
if ( $three eq "true" )
{
%hidden_values = (
col_firstname => $FORM{ "col_firstname" },
col_lastname => $FORM{ "col_lastname" },
col_cdate => $FORM{ "col_cdate" },
col_ccompany => $FORM{ "col_ccompany" },
col_cstreet => $FORM{ "col_cstreet" },
col_ccity => $FORM{ "col_ccity" },
col_cstate => $FORM{ "col_cstate" },
col_czipcode => $FORM{ "col_czipcode" },
col_ccountry => $FORM{ "col_ccountry" },
col_cbusph => $FORM{ "col_cbusph" },
col_cfax => $FORM{ "col_cfax" },
col_cidno => $FORM{ "col_cidno" },
col_ctaxable => $FORM{ "col_ctaxable" },
col_cemail => $FORM{ "col_cemail" },
col_web_site => $FORM{ "col_web_site" },
col_comment => $FORM{ "col_comment" },
col_cleared => $FORM{ "col_cleared" },
col_thetime => $FORM{ "col_thetime" },
col_affiliate_no => $FORM{ "col_affiliate_no" }
);
$oMy->hidden_values( %hidden_values );
}

}


### Here is the hidden_values method of the class ###

#############################################
############ hidden_values ###################
#############################################
sub hidden_values
{

my $self = shift;

my ( %hidden_values ) = @_;

while ( ( $key, $value ) = each( %hidden_values ) )
{
$self->{ HIDDEN_VALUES } = $self->{ HIDDEN_VALUES } . qq
~
<input type="hidden" name="$key" value="$value">
~;
}

return $self->{ HIDDEN_VALUES };

}


The html hidden values are stored in the $self->{HIDDEN_VALUES} property via the above method of the class. When I'm ready to stream the html hidden values to the browser, I execute the following code from the .pl

print qq~$oMy->{HIDDEN_VALUES}~;

Regards,

LelandJ

Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox

 

[cradletoenslave]

On a small note for html attributes and formatting, I dug up an extremely useful site: bignosebird.com. They cover many of the elements and attributes.

Also be careful when using html in perl. I don't know how many times I type a line like this:

print "<table width=" and so on

and forget to escape a quote.

 

[Leland123]

Hi cradletoenslave,

It is not necessary to escape the html, if you use the double quote (e.g. qq ). The [qq] handles all the quoting for you within the qq block. Any character can be used to create the qq block of text. I selected the [ ~ ] since it doesn't conflict with anything I'm doing.

This mean I can have an entire html page within the [ qq ] block and should not have any problems. I use the [ " ] to quote the actual html.

So this would work:

print qq
~

#########################################
#### A complete html page from your favor
#### IDE could be pasted here
#########################################
~;

Once the perl script has streamed the html to the browser, the following link can be used to test the html for errors:

http://validator.w3.org/detailed.html

#### Here is an actual example ######

##################################################
################# get_crc #######################
##################################################
sub get_crc
{
my $self = shift;

my ( $key_no ) = @_;

$thesearch = qq
~
SELECT
crcno,
ddate,
dcompany,
dfirst,
dlast,
daddress1,
daddress2,
dcity,
dstate,
dzip,
dphone1,
dphone2,
dfax,
demail,
dweb_site,
dpercent,
dcomment,
dthetime
FROM crc
WHERE crcno = $key_no
~;

$dbh = $self->sql_dbh( $self->{SU_LOGGED} );
$sth = $self->sql_exec( $thesearch, "", "kart_sales_main.pl" );

$array_ref = $sth->fetchall_arrayref();

foreach my $row ( @$array_ref )
{
(
$edit_crcno,
$edit_ddate,
$edit_dcompany,
$edit_dfirst,
$edit_dlast,
$edit_daddress1,
$edit_daddress2,
$edit_dcity,
$edit_dstate,
$edit_dzip,
$edit_dphone1,
$edit_dphone2,
$edit_dfax,
$edit_demail,
$edit_dweb_site,
$edit_dpercent,
$edit_dcomment,
$edit_dthetime
) = @$row
}

if ( defined( $dbh ) )
{
$dbh->disconnect();
}

print qq
~
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>

<html lang="en">

<head>
<title>Software - Master (TM) Shopping Cart</title>\n
<body>

<br>

<FORM ACTION = "$self->{MAIN_PATH}/kart_due_affi.pl" METHOD="POST">
~;

$self->tablestyle( "65%", "", "15" );

print qq
~
<tr>
<td colspan=2 align="middle">
~;
if ( $self->{ DO_ICONS } eq "true" )
{
$self->go_back();
}
else
{
print qq
~
<center>
<input type="Button" title="Click on me to go back to previous page" alt="Back" value="Back" onclick="history.back()">
</center>
~;
}
print qq
~
</td>
</tr>

~;

$self->new_headstyle
(
qq
~
2
~,
qq
~
View of Revenue Center
~
);

print qq
~
<tr>
<td ALIGN="middle" VALIGN="top">
~;

$self->{HIDDENBORDER} = 0;
$self->{HIDDENBACKCOLOR} = $self->{SHAREDFORMSBACKCOLOR};
$self->{HIDDENFORECOLOR} = $self->{SHAREDFORMSFORECOLOR};

$self->hiddentable();

print qq
~
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>

<TD align="right">Uniquie ID Number:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_crcno</TD>
</TR>

<TD align="right">Company:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dcompany</TD>
</TR>

<TR>
<TD align="right">First Name:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dfirst</TD>
</TR>

<TR>
<TD align="right">Last Name:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dlast</TD>
</TR>

<TR>
<TD align="right">Main Address:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_daddress1</TD>
</TR>

<TR>
<TD align="right">Second Address:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_daddress2</TD>
</TR>

<TR>
<TD align="right">City:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dcity</TD>
</TR>

<tr>
<td align="right">State:&nbsp;&nbsp;&nbsp;</td>
<td ALIGN="left" VALIGN="middle">$edit_dstate</td>
</tr>

<TR>
<TD align="right">Zip Code:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dzip</TD>
</TR>

<TR>
<TD align="right">Main Phone:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dphone1</TD>
</TR>

<TR>
<TD align="right">Second Phone:&nbsp;&nbsp;&nbsp;</FONT></TD>
<td ALIGN="left" VALIGN="middle">$edit_dphone2</TD>
</TR>

<TR>
<TD align="right">Fax:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dfax</TD>
</TR>

<TR>
<TD align="right">Email:&nbsp;&nbsp;&nbsp;</TD>
<td><a href="mailto:$edit_demail">$edit_demail</a></a></td>
</TR>

<TR>
<TD align="right">Web Site:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle"><a href="$edit_dweb_site">$edit_dweb_site</a></TD>
</TR>

<TR>
<TD align="right">Percentage:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle">$edit_dpercent</TD>
</TR>

<TR>
<TD align="right">Comments:&nbsp;&nbsp;&nbsp;</TD>
<td ALIGN="left" VALIGN="middle"><TEXTAREA cols="70" rows="4" wrap="soft" align="middle">$edit_dcomment</TEXTAREA></TD>
</TR>

<tr>
<td colspan="2">
&nbsp;
</td>
</tr>

~;

print qq
~
</table>

</td>
</tr>
~;

print qq
~
<tr>
<td colspan=2 align="middle">
~;
if ( $self->{ DO_ICONS } eq "true" )
{
$self->go_back();
}
else
{
print qq
~
<center>
<input type="Button" title="Click on me to go back to previous page" alt="Back" value="Back" onclick="history.back()">
</center>
~;
}
print qq
~
</td>
</tr>

~;

print qq
~

</table>

</FORM>

</body>
</html>
~;

exit

}


Regards,

LelandJ

Leland F. Jackson, CPA
Software - Master (TM)

http://www.smvfp.com

Nothing Runs Like the Fox