NAME

A1z::HTML5::Template - Fast and easy Web Apps

VERSION

version 0.22

SYNOPSIS

    use A1z::HTML5::Template;
    my $h = A1z::HTML5::Template->new();

    This directory should be writable by the web server, required to create/hold page content files.
	This may also contain your custom JavaScript/CSS libraries.
	Works for both Windows and Linux
	
		use lib '/home/user/path/to/app';
		or
		use lib 'C:/Inetpub/wwwroot/path/to/app';

	# for features like 'say'
	use 5.10.0;

	my $h = A1z::HTML5::Template->new(); 

	Fast, Easy, and Simple: Just Two Lines!
	
		say $h->head( -title => "My Brand Name" );
		say $h->body( -content => qq{ Coming Soon });

	For More Control/Customization: Not for the lazy!
	
	say $h->header('utf8');  
	say $h->start_html(); 
	say $h->head_title("My New App"); 
	say $h->head_meta(); 

	Load basic/required JavaScript/CSS libraries
	say $h->head_js_css(); 

	Add your own custom JavaScript/CSS files
	say $h->head_js_css('/url/to/app/Template.css'); 

	say $h->end_head(); 
	say $h->begin_body();

	say qq{<h1>My New App/Website</h1>};

	say qq{<main class="container">}; 

		# output file content as menu
		say $h->body_accordion( $h->open_file("/home/user/path/to/app/open_file_example.txt", 'menu', 'Menu') ); 

		# as a HTML5 table 
		say $h->body_accordion( $h->open_file("$sys{cgibase}/open_file_example.txt", 'table', 'Table Header') );
		
		# Simple mathematics 
		say $h->body_article( header => "Simple Mathematics", content => $h->math1("2", "4") );

		# Times Table  
		say $h->body_article( header => "Times Table", content => $h->timestable("2") );

	say qq{</main>};

	Required/Default JavaScript libraries.
		say $h->body_js_css(); 
	
	Add your own JavaScript libraries:
		say $h->body_js_css("complete-url_or_path-to-js-css-libraries")	

	say $h->end_body();
	say $h->end_html();

NAME

Fast and Easy Web Apps

"A1z::HTML5::Template" provides customizable HTML5 tags for creating "Fast and Easy Web Apps."

VERSION

0.22

Installation

cpan install A1z::HTML5::Template 
or
cpanm A1z::HTML5::Template

METHODS

header start_html head_title head_meta head_js_css end_head begin_body body_js_css body_topnavbar body_accordion end_body end_html

new

use A1z::HTML5::Template;
my $h = A1z::HTML5::Template->new();

math1

$h->math1(num1, num2);

$h->body_article( header => "Math", content => $h->math1(num1, num2) );

timestable

$h->timestable("Number");

Provides HTML Content-Header 

$h->header("");

start_html

Provides doctype html

Default includes utf-8

	$h->start_html();

Or, add your own charset to your app:

	$h->start_html('DifferentCharset');

body_js_css

Add/include javascript and css files just above </body> section 

Typically, CSS files should/are not be used here. 

Default behavior: 

	$h->body_js_css();
	
	Includes 
		jquery 1.12.4, jquery ui 1.11.4, bootstrap 3.3.0, 
		javascript for #dialog function, #menu, #accordion, #tabs 

Add your own .js file: 
	
	use $h->body_js_css("/path/to/js/file.js");
	
You can use both to include default .js files and your own custom .js file.

end_html

Provides </html>

head_title

Provides <title></title>

$h->head_title("App/Page Title");

head_meta

Provides <meta ... >. Includes the following by default:
	IE=Edge
	HandheldFriendly
	viewport

$h->head_meta();

Just like body_js_css, you can use both to add default values and your own meta

body_topnavbar

Provides top nav bar optionally.

By default it is loaded from www.a1z.us which probably be removed in a future version.
So, get a copy from bootstrap 3 and store it on your server.

head_js_css

provides the ability to add/include .js/.css files in the </head> tag.

$h->head_js_css();

	Default includes the following:
	
		bootstrap 3.3.0 .css from maxcdn 
		navbar-fixed-top.css from www.a1z.us
		jquery 1.12.1 smoothness theme from code.jquery.com 
		Shim and Respond.js from maxcdn 

$h->head_js_css("/path/to/.js")
$h->head_js_css("/path/to/.css")

end_head

Provides </head>

$h->end_head();

begin_body

provides <body> tag.

$h->begin_body();

body_accordion

The accordion in 'body_accordion' is misleading. It is not limited to just an accordion but all kinds of content.

C<say $h->body_accordion( $h->open_file("/path/to/app/open_file_example.txt", 'Type', 'Heading') );>

C<say $h->body_accordion( $h->open_file("/path/to/app/open_file_example.txt", "table", "Name and Price");

C<say $h->body_accordion( $h->open_file("/path/to/app/open_file_example.txt", "tabs", "Space Saving Tabs");

body_article

provides the ability to add content into <main> tags. 

$h->body_article( header => "", content => "");

end_body

provides </body> tag.

$h->end_body();

body_form

Form, lists items from a directory in a neat drop-down list with each item's file size in KB!

Should be in the exact format like below: 

$h->body_form("vars;METHOD;Action.cgi;select,NameForSelectTag,DefaultOptionSelected,AbsPathToDir,TextForSelectLabel;hidN1---hidV1,hidN2---hidV2,hidN3---hidV3");

defaults_begin

Internal Use Only

Provides defaults for very lightweight template for those in a hurry; Can be used for apps/sites that are under construction! 

$h->defaults_begin();

defaults_end

Internal Use Only.

provides defaults for lightweight or under construction app/website. 

$h->defaults_end();

HTML Hash

For Internal/Future Use

Hash contains -defaultjquery which is used in body.

-defaultjquery includes 
	
	jquery                1.12.4       from code.jquery
	jquery ui             1.11.4       
	bootstrap             3.3.0        from maxcdn
	blueimp-gallery
	ie-10 workaround                   from a1z.us
	
	functions
	
		tabs, dialog, menu, accordion

html_bootstrap_css

For Internal/Future Use

Used in $h->head and $h->body internally.

All methods starting with 'html_' are used internally!

Include bootstrap.min.css, #3.3.0 from maxcdn and navbar-fixed-top.css from a1z.us
	
	$h->html_bootstrap_css()

html_jqueryui_css

For Internal/Future Use

Includes jquery ui theme jquery-ui.css #1.12.0

html_shim_respond

For Internal/Future Use

html5shiv.min.js   #3.7.2
respond.min.js     #1.4.2

html_navbar

For Internal/Future Use

Customizations for top-nav-bar.js from a1z.us

$h->html_navbar(
	-nbMenuName => "menuName", 
	-nbPageName => "pageName", 
	-nbServer => "serverName", 
	-nbLinks => "dropDownLinks: URLs separated by a dash, mostly relative URLs. E.g., blog-support-help-contact-sale"
);

html_bootstrap_js

For Internal/Future Use

bootstrap.min.js, #3.3.0, from maxcdn

html_setTitle

For Internal/Future Use

setTitle javascript function 

Used in body

Includes the C<script> tag pair

C<$h->html_set_title( ta => "Text001", tb => "TExt002", tc => "TeXt003" );>

html_humanejs_css

For Internal/Future Use

humane-js #3.2.2 cdnjs.cloudflare
fonts.googleapis.com

html_bootstrap_bluimp

For Internal/Future Use

bootstrap gallery lightbox controls for use immediately after C<body> tag

C<&html_bootstrap_bluimp;>

Used internally in C<$h->body()>

head

$h->head();

$h-head (
	-type 	=> "Content-Type: text/html;charset=utf-8\n\n", 
	-bootstrap 	=> html_bootstrap_css, 
	-jqueryui 	=> html_jqueryui_css, 
	-htmlshim	=> html_shim_respond, 
	-humanejs  => html_humanejs_css, 
	-title 		=> "A1Z .us", 
	-cssLinks => "https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css,https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css,https://www.a1z.us/A1z/HTML5/Template.css", 
	-cssCode => "", 
	-mobilemeta => qq{<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
}, 
	-charsetmeta => qq{<meta charset="utf-8">}, 
	-usermeta => "",
	-titleRotatingText => qq{text1,text2,text3}	
);

body

$h->body();

$h->body(
	-h1	=> qq{A1Z .us},
	-onload => qq{setTitle();},  
	-nbhead => qq{},
	-nbpage => qq{}, 
	-nbmenu => qq{More}, 
	-defaultjquery => qq{$HTML{-defaultjquery}}, 
	-humanejs => qq{<script src="https://cdnjs.cloudflare.com/ajax/libs/humane-js/3.2.2/humane.min.js">},
	-userjquery => qq{}, 
	-navbar => html_navbar( $in{-nbmenu}, $in{-nbpage}, "", ""), 
	-content => qq{<div class="content">Content</div>}, 
	-footer => qq{All rights reserved &copy; A1Z .us}, 	
	-bootstrapbluimp => html_bootstrap_bluimp,
	-nbLinks => qq{contact-help-feedback}		
);

open_file

Used for loading all kinds of custom elements for different output formats stored in simple text files.

$h->open_file("/path/to/file", "outputFormat", "outputHeader");

$h->open_file("C:/Inetpub/wwwroot/MyApp/menu.txt", "menu", "Menu");

This is the heart of the App.

OUTPUT FORMAT OPTIONS:

table, accordion, menu, as is; where "as is" is the default

$h->open_file( file => "abs/path/to/file", output_format => "table", output_header => "Heading" );

edit_file

	Edit your app/page/site. Customize HTML produced by A1z::HTML5::Template. 

	Creates a form to edit contents of a file. 

	The contents of this file should be in a special format. See open_file_example.txt. 

	Data is stored in simple text files in the app's home dir.  

	We recommend creating a separate file for editing/writing purposes, e.g., "TemplateAdmin.cgi"

	use lib '/path/to/app';

	use A1z::HTML5::Template;
	my $h = A1z::HTML5::Template->new();

	say $h->header('utf8');
	say $h->start_html(); 
	say $h->head_title("Edit App"); 
	say $h->head_meta();
	say $h->head_js_css();  
	say $h->end_head(); 
	say $h->begin_body();

	# Show edit form

 	say $h->body_article( 

		header => "Edit page items", 

		action => "TemplateAdmin.cgi",

		content => $h->edit_file( file => "/absolute/path/to/app/open_file_example.txt") 
	);

	# Save Customizations back to the same file.

	# include write_file if you submit form to the same file ( TemplateAdmin.cgi )

	say $h->body_article( 

		header => "<a href='$sys{cgiurl}/TemplateAdmin.cgi' title='Refresh to get the latest/saved content'>Refresh</a> ", 

		content => $h->write_file( file => "/absolute/path/to/app/open_file_example.txt")
	 
	);

	say $h->body_js_css(); 
	say $h->end_body();
	say $h->end_html();

write_file

See documentation for 'edit_file.'

display_gallery_thumbnails

my $images = $h->display_gallery_thumbnails(

	images_dir => "{images_dir}",
	thumbs_dir => "{thumbs_dir}",
	
	images_url => "{images_url}",
	thumbs_url => "{thumbs_url}",

	width => "100",
	height => "100"
);

BUGS

Please report any bugs or feature requests to bug-a1z-html5-template at rt.cpan.org, or through the web interface at https://rt.cpan.org/NoAuth/ReportBug.html?Queue=A1z-HTML5-Template. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.

SUPPORT

You can find documentation for this module with the perldoc command.

perldoc A1z::HTML5::Template

You can also look for information at:

RT: CPAN's request tracker (report bugs here)

https://rt.cpan.org/NoAuth/Bugs.html?Dist=A1z-HTML5-Template
AnnoCPAN: Annotated CPAN documentation

http://annocpan.org/dist/A1z-HTML5-Template
CPAN Ratings

https://cpanratings.perl.org/d/A1z-HTML5-Template
Search CPAN

https://metacpan.org/release/A1z-HTML5-Template

ACKNOWLEDGEMENTS

I am greatly indebted to my family for letting me be 'addicted' and 'married' to my computers.

LICENSE AND COPYRIGHT

This program is free software; you can redistribute it and/or modify it under the terms of the the Artistic License (2.0). You may obtain a copy of the full license at:

http://www.perlfoundation.org/artistic_license_2_0

Any use, modification, and distribution of the Standard or Modified Versions is governed by this Artistic License. By using, modifying or distributing the Package, you accept this license. Do not use, modify, or distribute the Package, if you do not accept this license.

If your Modified Version has been derived from a Modified Version made by someone other than you, you are nevertheless required to ensure that your Modified Version complies with the requirements of this license.

This license does not grant you the right to use any trademark, service mark, tradename, or logo of the Copyright Holder.

This license includes the non-exclusive, worldwide, free-of-charge patent license to make, have made, use, offer to sell, sell, import and otherwise transfer the Package with respect to any patent claims licensable by the Copyright Holder that are necessarily infringed by the Package. If you institute patent litigation (including a cross-claim or counterclaim) against any party alleging that the Package constitutes direct or contributory patent infringement, then this Artistic License to you shall terminate on the date that such litigation is filed.

Disclaimer of Warranty: THE PACKAGE IS PROVIDED BY THE COPYRIGHT HOLDER AND CONTRIBUTORS "AS IS' AND WITHOUT ANY EXPRESS OR IMPLIED WARRANTIES. THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT ARE DISCLAIMED TO THE EXTENT PERMITTED BY YOUR LOCAL LAW. UNLESS REQUIRED BY LAW, NO COPYRIGHT HOLDER OR CONTRIBUTOR WILL BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING IN ANY WAY OUT OF THE USE OF THE PACKAGE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

AUTHOR

Sudheer Murthy <pause@a1z.us>

COPYRIGHT AND LICENSE

This is free software; you can redistribute it and/or modify it under the same terms as the Perl 5 programming language system itself.

To install A1z::HTML5::Template, copy and paste the appropriate command in to your terminal.

cpanm

cpanm A1z::HTML5::Template

CPAN shell

perl -MCPAN -e shell
install A1z::HTML5::Template

For more information on module installation, please visit the detailed CPAN module installation guide.

	Global
`s`	Focus search bar
`?`	Bring up this help dialog

	GitHub
`g` `p`	Go to pull requests
`g` `i`	go to github issues (only if github is preferred repository)

	POD
`g` `a`	Go to author
`g` `c`	Go to changes
`g` `i`	Go to issues
`g` `d`	Go to dist
`g` `r`	Go to repository/SCM
`g` `s`	Go to source
`g` `b`	Go to file browse

	Search terms
module: (e.g. module:Plugin)
distribution: (e.g. distribution:Dancer auth)
author: (e.g. author:SONGMU Redis)
version: (e.g. version:1.00)

NAME

VERSION

SYNOPSIS

NAME

VERSION

Installation

METHODS

new

math1

timestable

header

start_html

body_js_css

end_html

head_title

head_meta

body_topnavbar

head_js_css

end_head

begin_body

body_accordion

body_article

end_body

body_form

defaults_begin

defaults_end

HTML Hash

html_bootstrap_css

html_jqueryui_css

html_shim_respond

html_navbar

html_bootstrap_js

html_setTitle

html_humanejs_css

html_bootstrap_bluimp

head

body

open_file

OUTPUT FORMAT OPTIONS:

edit_file

write_file

display_gallery_thumbnails

BUGS

SUPPORT

ACKNOWLEDGEMENTS

LICENSE AND COPYRIGHT

AUTHOR

COPYRIGHT AND LICENSE

Module Install Instructions