Login

hindraj · (This post was last modified: 07-23-2012, 02:36 AM by hindraj.)

Hi All,

On my previous thread, I only trying to fix the aguapop theme back into a working state! (cause it's broken, since weberp version ???) and at this point it's basically has been fixed!!!.

But, now I'm thinking to fix the 'true' cause of it! i.e. the lack of appropriate theming support in the codes itself: most of the 'UI' stuff are still using tables (which is not intended for structuring UI Tongue

) and by the fact that the UI part is not well thought off in the code!

Well, allow me to humbly offering a fix, or an upgrade to a hopefully better UI framework for weberp... that will include a background image support for many of the UI part, easier theme making, etc., just like any modern web apps.

It will probably not going to be fast, as to be honest, I only a by-doing learner, ie. doing this programming while i'm learning it from 'google' Big Grin

alot of searching and reading from many resources on the web.

So, from now on, I'll mostly working on bringing the WebERP into a tableless UI design.... and I'll post my progress on this thread.

Any help from anyone moved by the same cause are very very welcomed.... Big Grin

Best regards!
Hindra Joshua

Here the first progress report (from here Smile

)

I'm working to replace most of the tables from the UI part of the WebERP with the DIVs to 'modernize' it into a tableless, CSS based UI, i.e. separating the presentation from the codes.... more or less Smile

here are some part of the work I've done:
=============================================
<?php
/* $Id: header.inc 5193 2012-04-01 17:56:40Z vvs2012 $ */

// Titles and screen header
// Needs the file config.php loaded where the variables are defined for
// $rootpath
// $title - should be defined in the page this file is included with
$StrictXHTML=False;

if (!headers_sent()){
if ($StrictXHTML) {
header('Content-type: application/xhtml+xml; charset=utf-8');
} else {
header('Content-type: text/html; charset=utf-8');
}
}
if($title == _('Copy a BOM to New Item Code')){//solve the cannot modify heaer information in CopyBOM.php scritps
ob_start();
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';

echo '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>' . $title . '</title>';
echo '<link rel="shortcut icon" href="'. $rootpath.'/favicon.ico" />';
echo '<link rel="icon" href="' . $rootpath.'/favicon.ico" />';
if ($StrictXHTML) {
echo '<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />';
} else {
echo '<meta http-equiv="Content-Type" content="application/html; charset=utf-8" />';
}
echo '<link href="' . $rootpath . '/css/'. $_SESSION['Theme'] .'/default.css" rel="stylesheet" type="text/css" />';
echo '<script type="text/javascript" src = "'.$rootpath.'/javascripts/MiscFunctions.js"></script>';
echo '</head>';

echo '<body>';

//HJ===========================================
echo '<div id="CanvasDiv">'; //start of CANVAS div
echo '<div id="HeaderDiv">'; //start of HEADER div
//HJ===========================================

//echo '<table class="HeaderTbl">'; //HJ=======================
echo '<div id="HeaderWrapDiv">';

//echo '<tr>';
//echo '<td colspan="2" rowspan="2">';

if (isset($title)) {
//echo '<table cellpadding="0" cellspacing="0" border="0" id="quick_menu" class="quick_menu">';
//echo '<tr>';
//echo '<td align="left" style="width:100%;" class="quick_menu_left">';
echo '<div id="AppInfoDiv">';
// Use icons for company and user data, saves screen realestate, use alt tag in case theme icon not avail.
echo '<img src="'.$rootpath.'/css/'.$theme.'/images/company.png" title="' . _('Company') . '" alt="' . _('Company') . '" />';
echo ' ' . stripslashes($_SESSION['CompanyRecord']['coyname']) . ' <a href="' . $rootpath . '/UserSettings.php"><img src="'.$rootpath.'/css/'.$theme.'/images/user.png" title="User" alt="' . _('User') . '" />' . stripslashes($_SESSION['UsersRealName']) . '</a>';
// Make the title text a class, can be set to display:none is some themes
echo '<br />' . $title . '</td>';
echo '</div>'; //AppInfoDiv

//echo '<td class="quick_menu_tabs">';
echo '<div id="QuickMenuDiv"> <ul>';
//echo '<table cellpadding="0" cellspacing="0" class="quick_menu_tabs"><tr>';

//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/index.php"><span style="text-decoration:underline;">1</span> ' . _('Main Menu') . '</a></td>';
echo '<li><a href="' . $rootpath . '/index.php"><span style="text-decoration:underline;">1</span> ' . _('Main Menu') . '</a></li>';

if (count($_SESSION['AllowedPageSecurityTokens'])>1){

//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/SelectCustomer.php"><span style="text-decoration:underline;">2</span> ' . _('Customers') . '</a></td>';
echo '<li><a href="' . $rootpath . '/SelectCustomer.php"><span style="text-decoration:underline;">2</span> ' . _('Customers') . '</a></li>';

//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/SelectProduct.php"><span style="text-decoration:underline;">3</span> ' . _('Items') . '</a></td>';
echo '<li><a href="' . $rootpath . '/SelectProduct.php"><span style="text-decoration:underline;">3</span> ' . _('Items') . '</a></li>';

//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/SelectSupplier.php"><span style="text-decoration:underline;">4</span> ' . _('Suppliers') . '</a></td>';
echo '<li><a href="' . $rootpath . '/SelectSupplier.php"><span style="text-decoration:underline;">4</span> ' . _('Suppliers') . '</a></li>';

//$DefaultManualLink = '<td class="quick_menu_tab" align="center"><a rel="external" href="' . $rootpath . '/doc/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></td>';
$DefaultManualLink = '<li><a rel="external" href="' . $rootpath . '/doc/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></li>';

if (mb_substr($_SESSION['Language'],0,2) !='en'){
if (file_exists('locale/' . $_SESSION['Language'] . '/Manual/ManualContents.php')){
//echo '<td class="quick_menu_tab" align="center"><a target="_blank" href="' . $rootpath . '/locale/' . $_SESSION['Language'] . '/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></td>';
echo '<li><a target="_blank" href="' . $rootpath . '/locale/' . $_SESSION['Language'] . '/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></li>';
} else {
echo $DefaultManualLink;
}
} else {
echo $DefaultManualLink;
}
}

//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/Logout.php" onclick="return confirm(\'' . _('Are you sure you wish to logout?') . '\');"><span style="text-decoration:underline;">0</span> ' . _('Logout') . '</a></td>';
echo '<li><a href="' . $rootpath . '/Logout.php" onclick="return confirm(\'' . _('Are you sure you wish to logout?') . '\');"><span style="text-decoration:underline;">0</span> ' . _('Logout') . '</a></l>';

//echo '</tr></table>';
echo '</ul></div>'; //HJ=== QuickMenuDiv
//echo '</td></tr></table>';
//echo '</td></tr></table>';

}

//echo '</td>';
//echo '</tr>';
//echo '</table>';
echo '</div>'; //HJ=== QuickMenuDiv

//HJ======================
echo '</div>'; //end of HEADER div
echo '<div id="BodyDiv">'; //start of BODY div - contains left menu, three columns menu, forms, data, etc
//HJ======================

?>
=======================================================

the CSS file for the 'theme' will be like this: (for the 'header' part only)

==========================================
/*** HEADER ***/

#HeaderDiv{
}
a:active, a:visited, a:link {
color: lightgreen;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: yellow;
text-decoration: none;
}
#HeaderWrapDiv{
background:olivedrab;
height:40px;
border:thin outset olivedrab;
padding-top:3px;
}
#AppInfoDiv{
background:olivedrab;
float:left;
height:40px;
}
#QuickMenuDiv{
background:olivedrab;
float:right;
width: 600px;
height: 40px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
}
#QuickMenuDiv ul{
list-style:none;
margin: 10px 1px 0px 3px;
}
#QuickMenuDiv ul li{
display:inline;
margin: 0px 10px;
float: right;
}
========================================

on the following screenshot, you can see that the 'header' part are all using DIVs now:

[Image: attachment.php?aid=84]

I'm still working to get the rest done...

Wish me luck! Smile

Hindra Joshua

***phil*** · 07-23-2012, 08:15 AM,

Well, I see you have removed the table formatting and set the quick menu up as a series of in-line bullets ?

Why??

I guess it removes some of the xhtml clutter from the code which is good - once all the commented out lines go.

If it's to be done though it must be done consistently throughout the code - what style we adopt in one script must follow through all scripts.

If there was wide support for this approach I would consider rewriting the code to suit ... but I am not sure if there is? I my immediate reaction is:

"If it ain't broke ... why fix it?"

but could be swayed if there is wide support for this proposal and many hands to lighten the load.
This is a big project indeed.

Rock*Star · 07-23-2012, 09:02 AM,

(07-23-2012, 08:15 AM)phil Wrote: "If it ain't broke ... why fix it?"

This is a big project indeed.

Just what I was thinking. Will webERP run faster with different HTML? I am wondering what the tangible benefit would be and indeed all scripts would have to be changed while the code was "frozen".

hindraj · (This post was last modified: 07-23-2012, 12:46 PM by hindraj.)

(07-23-2012, 09:02 AM)Rock*Star Wrote:
(07-23-2012, 08:15 AM)phil Wrote: "If it ain't broke ... why fix it?"

This is a big project indeed.

Just what I was thinking. Will webERP run faster with different HTML? I am wondering what the tangible benefit would be and indeed all scripts would have to be changed while the code was "frozen".

Well, I'm not actually trying to 'fix' it because it ain't broke really!

A more appropriate term of what I'm really going to do is:

1. Changing the web design philosophy from table-based into tableless

For more info of why we should do it, please take a look at this links:
- From wikipedia
- From adobe
- From w3school

2. Take into consideration the UI design well into the codes

So, theming will be much easier to be made, and maintain, and flexible enough for even nicer themes

Yes, if we're going to change it, it must be consistently changed trough out the codes... but, we'should do it gradually....

Best regards,
Hindra Joshua

Using DIV will make theming easier...

For example, in this screenshot, a rounded corner is just a simple attribute, without using any image background:

That means, a nice UI can be achieve with lighter load for the browser, and it means faster, more effective use of bandwidth!

How about that Big Grin

Rgds

hindraj · (This post was last modified: 07-23-2012, 02:59 PM by hindraj.)

Now the footer is done...

<?php

/* $Id: footer.inc 5316 2012-05-05 05:04:04Z daintree $*/

echo '</div>'; // BodyWrapDiv ===HJ===
echo '</div>'; // BodyDiv ===HJ===

echo '<div id="FooterDiv">'; //===HJ===
echo '<div id="FooterWrapDiv">'; //===HJ===

echo '<div id="FooterLogoDiv">'; //===HJ===
echo '<img src="'. $rootpath . '/' . $_SESSION['LogoFile'] . '" width="120" alt="webERP" title="webERP ' . _('Copyright') . ' © weberp.org - ' . date('Y') . '" /></td>';
echo '</div>';

echo '<div id="FooterVersionDiv">'; //===HJ===
echo 'webERP ' ._('version') .' ' . $_SESSION['VersionNumber'];
echo '</div>';

echo '<div id="FooterTimeDiv">'; //===HJ===
echo DisplayDateTime();
echo '</div>';

// if(http_file_exists('http://sflogo.sourceforge.net/sflogo.php')) {
// echo '<tr><td class="footer"><a href="https://sourceforge.net/projects/web-erp"><img src="http://sflogo.sourceforge.net/sflogo.php?group_id=391629&type=12" width="120" height="30" border="0" alt="Get webERP web-based ERP Accounting at SourceForge.net. Fast, secure and Free Open Source software downloads" /></a></td></tr>';
// }

echo '</div>'; // FooterWrapDiv ===HJ===
echo '</div>'; // FooterDiv ===HJ===

echo '</body>';
echo '</html>';

?>

And the CSS for the footer part now can be as simple as this Big Grin

#FooterDiv{
background:olivedrab;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
border:medium outset olivedrab;
height:50px;
color:lightgreen;
}
#FooterWrapDiv{
padding:5px;
}
#FooterLogoDiv{
float:left;
background:white;
border-radius:8px;
padding:5px;
}
#FooterVersionDiv{
float:left;
padding:12px;

}
#FooterTimeDiv{
float:right;
padding:12px 0 12px 12px;
}

And the result is like this

Notice the white backdrop for the logo is a DIV region for the logo with a white background and rounded corners to match the logo. Nice isn't it? Blush

Best regards,
Hindra Joshua

***phil*** · 07-23-2012, 03:08 PM,

I guess we could do this for the header and footer and fix the existing css for the other themes without too much of an issue ... if you want?
Would need to remove the redundant styles from the other default.css scripts too.

Tim reckons we don't need the Copyright statement there at all now in any event. Didn't think it was there is 4.08.2??

hindraj · 07-23-2012, 04:16 PM,

(07-23-2012, 03:08 PM)phil Wrote: I guess we could do this for the header and footer and fix the existing css for the other themes without too much of an issue ... if you want?
Would need to remove the redundant styles from the other default.css scripts too.

Tim reckons we don't need the Copyright statement there at all now in any event. Didn't think it was there is 4.08.2??

Ok then... I guess I'll upload my recent updated files for you take a look...

The header part might need to be fine-tuned again in the futurre, and 'body' part (index.php) is still not done!

All other files for each modules is not touched yet!

Here's the files:

.zip

modified files v0.02.zip (Size: 4.78 KB / Downloads: 12)

My *new* theme "Green Pasture":

.zip

Green Pasture v0.02.zip (Size: 93.81 KB / Downloads: 19)

Screenshot:

Best regards!
Hindra Joshua

opto · 07-24-2012, 04:52 PM,

the table approach to display data has one definite advantage:
using jquery and the datatables addon, one gets sorting of the tables for free, can reorder the columns, a cookie stores the user's settings, one can search across various table columns, etc....

I think this gives a real enhancement in use. Long ago added an example to a post on nabble.
Very little to do for that:
add thead's and tbody's to tables. Include recent jquery. One line of call for the datatables addon. Set page length to very long in weberp settings (the adon works only on the currently displayed table part. If I set that to 100 or 200 lines, I can sort, search etc. without page reload.

Klaus

hindraj · 07-24-2012, 05:28 PM,

You're right, tables should be used for data.

My aim is *not* to replace all tables.... but to minimized the 'abused' of tables in the UI part, which is not right, because HTML already provide one for composing page, which is DIVs...

The use of DIVs actualy can make codes cleaner...

But, the main aim for me is to provide reasonable support for better theming, that is to make WebERP themes easier to make and maintained.

Better, nicer themes will attracts more peoples / users to WebERP, doesn't it?

We'll see if my project is worth the time or not Smile

I'm still working on it. Soon it will be available for us all to test and evaluate Big Grin

Rgds,
Hindra

***phil*** · 07-24-2012, 05:52 PM,

So do the changes in these files stuff the existing themes?
Do the existing themes have default.css elements defining the new div styles or does this effectively orphan all the existing themes?
The work needs to be done consistently across all themes of course.

Login
Username:
Password:	Lost Password?
	Remember me