Mejoras del PHPMaker 9.2
- Menús horizontales generados con los permisos de usuario
- Menus con iconos
- Mostrar el login name en el header
- Traducción de la pagina web a través de google traductor
Limitaciones:
- Se dejan de soportar los menús para dispositivos móviles.
- Solo se soporta un nivel de submenú.
Ventajas:
- No se han de traducir todos los campos para soportar el multilenguaje,
- Los campos que no queremos que se traduzcan se pueden marcar con un tag. Así por ejemplo, los nombres y apellidos no se traducen.
- Podemos agregar paginas en los menús que no estén generadas automaticamente, y estas aparecen en los menús.
Requisitos
- Phpmaker 9.2
- La carpeta de plantillas. Generalmente se ubica en DocumentsPHPMakerTemplatesphpv92.zip
- La librería jscookmenu ubicada en http://sourceforge.net/projects/jscook/files/JSCookMenu/2.0.4/jscookmenu-2.0.4.zip/download
- La plantilla de estilos http://sourceforge.net/projects/jscook/files/JSCookMenu%20Themes/ThemeOffice/ThemeOffice-1.1.zip/download
- iconos para los menus. Yo los he descargado de . Generadlos de 20x20 pixels.
Pasos previos
- Copiar la Carpeta ThemeOffice donde tengamos ubicada el proyecto de phpmaker
- Copiar del fichero jscookmenu.zip los ficheros jscookmenu.js y effects.js a donde tengamos ubicada el proyecto de phpmaker/phpjs
- Copiar las dos imágenes necesarias a la carpeta donde tengamos ubicada el proyecto de phpmaker/phpimages
- Entrar en y registrad vuestra pagina web para que la traduzca. Os daran 2 códigos que se habran de poner dentro de la plantilla para que se traduzca automaticamente.
Paso a paso
Modificar el fichero phpcommon.php. Este construye linea a linea el menú. No nos interesa el menú Login. Lo quitamos.
Fichero: document/phpmaker/templates/script/phpcommon.php
Código modificado
##-->
$RootMenu->AddMenuItem(-2, $Language->Phrase("ChangePwd", <!--##=ew_DoubleQuote(sFnChangePwd, 1)##-->, -1, "", IsLoggedIn() && !IsSysAdmin());
<!--##
}
##-->
$RootMenu->AddMenuItem(-1, $Language->Phrase("Logout", <!--##=ew_DoubleQuote(sFnLogout, 1)##-->, -1, "", IsLoggedIn());
<!--##
Modificar el fichero en ewmenu.php. Este fichero llama al constructor del menu. Quitamos los codigos html
Fichero: document/phpmaker/templates/script/ewmenu.php
Código modificado
<!--##session menu##-->
<!-- Begin Main Menu -->
<?php $RootMenu = new cMenu("RootMenu"; ?>
<!--##include phpcommon.php/render-menu##-->
<!-- End Main Menu -->
<!--##/session##-->
Modificar plantilla template.php. Esta plantilla genera el header.php. Aqui insertamos los estilos, los scripts js y la parte del traductor de google
Fichero: phpmaker/templates/script/template.php
Código: Agregamos el estilo del menú centrado en la página
<head>
<title><?php echo $Language->ProjectPhrase("BodyTitle" ?></title>
<style type="text/css">
div#container
{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
</style>
Fichero: phpmaker/templates/script/template.php
Código: Agregamos el código de google translate para traducir la página antes del cierre de head. PONED EL VUESTRO
<meta name="google-translate-customization" content="b4b935ffe3aadse-991257sede2034c9-gc86b5ecfce8156eb-11"></meta>
</head>
Aqui ponemos los javascript y los estilos necesarios para hacer funcionar el menu.
Fichero: phpmaker/templates/script/template.php
Código:
<?php
<!--##~SYSTEMFUNCTIONS.GetServerScript("Global","Page_Head"##-->
?>
<!--## } ##-->
<script type="text/javascript" src="phpjs/JSCookMenu.js"></script>
<link rel="stylesheet" href="ThemeOffice/theme.css" type="text/css">
<script type="text/javascript" src="ThemeOffice/theme.js"></script>
<!--##~SYSTEMFUNCTIONS.GetClientScript("Global","Client Script"##-->
Aquí modificamos el header.php . Mostramos el usuario y la selección de idioma. Substituir todo lo que hay entre las líneas. Substituir la imagen logo.jpg por el nombre de vuestra imagen.
Fichero: phpmaker/templates/script/template.php
Código:
<!-- header (begin) --><!-- *** Note: Only licensed users are allowed to change the logo *** -->
<div id="container">
<div id="wb_Image3" style=position:absolute;left:0px;top:0px;width:308px;height:119px;z-index:0;>
<img src="phpimages/logo.jpg" id="Image3" alt="" style=width:308px;height:119px;></div>
<img src="phpimages/img0001.png" align="top" alt="" border="0" style=position:relative;left:311px;top:0px;height:115px;>
<div id="google_translate_element" style=position:absolute;left:700px;top:80px;width:170px;height:19px;line-height:19px;z-index:5;></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<input type="text" id="Editbox1" style=position:absolute;left:700px;top:50px;width:170px;height:19px;line-height:19px;z-index:5; name="Editbox1" value= <?php echo $_SESSION[EW_SESSION_USER_PROFILE_USER_NAME]; ?> >
<div id="wb_Text1" style=position:absolute;left:650px;top:50px;width:54px;height:16px;z-index:6;text-align:left;>
<span style=color:#000000;font-family:Tahoma;font-size:13px;>Usuario:</span></div>
</div>
<!-- header (end) -->
Aqui poner esto para que muestre el menú solo si se esta logueado
Fichero: phpmaker/templates/script/template.php
Código:
<!-- content (begin) -->
<?php } else { ?>
<!-- content (begin) -->
<?php if ($_SESSION[EW_SESSION_USER_PROFILE_USER_NAME] != "" { ?> // para que no salga el menu en la pantalla login.php si no hay nadie logueado
<!--##=SYSTEMFUNCTIONS.IncludeFile("menu",""##-->
<?php } ?>
<?php } ?>
Modificar el fichero ewshared.php. Es el encargado de renderizar el menú, yo lo he modificado para que construya el menú como queremos. NOTA – No soporta 2 niveles o mas de submenú. Modificad los nombres de los ficheros de imágenes por los dos que tengais
Fichero: phpmaker/templates/script/ewshared.php
Código: Modificar la function cmenu render por esta otra
// Render the menu
function Render($ret = FALSE) {
// creamos el menu
$str = "<script type=" . '"text/javascript">' . "<!--n";
$str .= "var myMenu =n";
$str .= "[n";
foreach ($this->ItemData as $item) {
$str .= "['', '$item->Text', '', '', '$item->Text'";
if (!is_null($item->SubMenu)) {
foreach ($item->SubMenu->ItemData as $subitem) {
if ($this->RenderItem($subitem)) { // el subitem puede ser mostrado
$str .= ",['<img class="seq1" src="phpimages/arrow.gif" /><img class="seq2" src="phpimages/159.gif" />' , '$subitem->Text' , '$subitem->Url' , '_self' , '']";
}
}
}
else {
if ($this->RenderItem($item)) {// el item puede ser mostrado
$str .= ",['' , '$item->Text' , '$item->Url' , '_self', '$item->Text']n";
}
}
$str .= "],n";
$str .= "_cmSplit,n";
}
$str .= "]n--></script>n";
// creamos el contenedor html
$str .= "<div id=" . '"' . "wb_MenuBar1" . '"' . " style=.'' . "position:relative;left:7px;top:3px;width:975px;height:40px;z-index:1000;" .'"' . ">n";
// definimos el menu
$str .= "<div id="myMenuID"></div>n";
// ejecutamos el renderizado del menu
$str .= "<script type="text/javascript"><!--n" . "cmDraw ('myMenuID', myMenu, 'hbr', cmThemeOffice);n" . "--></script>n";
// cerramos el contenedor html
$str .= "</div>n";
if ($ret) // Return as string
return $str;
echo $str; // Output
}
}
// Menu item class
Y ya esta. Ahora se puede compilar con phpmaker. NOTA – si pregunta que las plantillas difieren , poner keep para mantenerlas, sino perderemos los cambios.
Para evitar que se traduzca un campo determinado
En phpmaker - div tag attributes - custom attributes- poner 'class="notranslate"'
Para que el menu acepte una pagina no generada por phpmaker.
Simplemente en el menu editor, creamos un menu item y en el campo URL ponemos el nombrefichero.php
NOTA - En el phpmaker, al compilar, si pregunta que las plantillas difieren , poner keep para mantenerlas, sino
perderemos los cambios.
Seguramente habremos de editar el fichero ThemeOffice/theme.js para que en su primera linea ponga esto
// directory of where all the images are
var cmThemeOfficeBase = 'ThemeOffice/';
Si no nos gustan los colores del tema o el tamaño de la letra, se pueden cambiar editando el fichero ThemeOffice/Theme.css
SI NO OS GUSTA SIMPLEMENTE SE DESHACEN LOS CAMBIOS EN EL PHPMAKER CON TOOLS - DELETE TEMPLATE CACHE.
SI OS GUSTA, COPIAD LA CARPETA documentos/phpmaker/templates/php92.zip para evitar que se pierdan los cambios.
- Menús horizontales generados con los permisos de usuario
- Menus con iconos
- Mostrar el login name en el header
- Traducción de la pagina web a través de google traductor
Limitaciones:
- Se dejan de soportar los menús para dispositivos móviles.
- Solo se soporta un nivel de submenú.
Ventajas:
- No se han de traducir todos los campos para soportar el multilenguaje,
- Los campos que no queremos que se traduzcan se pueden marcar con un tag. Así por ejemplo, los nombres y apellidos no se traducen.
- Podemos agregar paginas en los menús que no estén generadas automaticamente, y estas aparecen en los menús.
Requisitos
- Phpmaker 9.2
- La carpeta de plantillas. Generalmente se ubica en DocumentsPHPMakerTemplatesphpv92.zip
- La librería jscookmenu ubicada en http://sourceforge.net/projects/jscook/files/JSCookMenu/2.0.4/jscookmenu-2.0.4.zip/download
- La plantilla de estilos http://sourceforge.net/projects/jscook/files/JSCookMenu%20Themes/ThemeOffice/ThemeOffice-1.1.zip/download
- iconos para los menus. Yo los he descargado de . Generadlos de 20x20 pixels.
Pasos previos
- Copiar la Carpeta ThemeOffice donde tengamos ubicada el proyecto de phpmaker
- Copiar del fichero jscookmenu.zip los ficheros jscookmenu.js y effects.js a donde tengamos ubicada el proyecto de phpmaker/phpjs
- Copiar las dos imágenes necesarias a la carpeta donde tengamos ubicada el proyecto de phpmaker/phpimages
- Entrar en y registrad vuestra pagina web para que la traduzca. Os daran 2 códigos que se habran de poner dentro de la plantilla para que se traduzca automaticamente.
Paso a paso
Modificar el fichero phpcommon.php. Este construye linea a linea el menú. No nos interesa el menú Login. Lo quitamos.
Fichero: document/phpmaker/templates/script/phpcommon.php
Código modificado
##-->
$RootMenu->AddMenuItem(-2, $Language->Phrase("ChangePwd", <!--##=ew_DoubleQuote(sFnChangePwd, 1)##-->, -1, "", IsLoggedIn() && !IsSysAdmin());
<!--##
}
##-->
$RootMenu->AddMenuItem(-1, $Language->Phrase("Logout", <!--##=ew_DoubleQuote(sFnLogout, 1)##-->, -1, "", IsLoggedIn());
<!--##
Modificar el fichero en ewmenu.php. Este fichero llama al constructor del menu. Quitamos los codigos html
Fichero: document/phpmaker/templates/script/ewmenu.php
Código modificado
<!--##session menu##-->
<!-- Begin Main Menu -->
<?php $RootMenu = new cMenu("RootMenu"; ?>
<!--##include phpcommon.php/render-menu##-->
<!-- End Main Menu -->
<!--##/session##-->
Modificar plantilla template.php. Esta plantilla genera el header.php. Aqui insertamos los estilos, los scripts js y la parte del traductor de google
Fichero: phpmaker/templates/script/template.php
Código: Agregamos el estilo del menú centrado en la página
<head>
<title><?php echo $Language->ProjectPhrase("BodyTitle" ?></title>
<style type="text/css">
div#container
{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
</style>
Fichero: phpmaker/templates/script/template.php
Código: Agregamos el código de google translate para traducir la página antes del cierre de head. PONED EL VUESTRO
<meta name="google-translate-customization" content="b4b935ffe3aadse-991257sede2034c9-gc86b5ecfce8156eb-11"></meta>
</head>
Aqui ponemos los javascript y los estilos necesarios para hacer funcionar el menu.
Fichero: phpmaker/templates/script/template.php
Código:
<?php
<!--##~SYSTEMFUNCTIONS.GetServerScript("Global","Page_Head"##-->
?>
<!--## } ##-->
<script type="text/javascript" src="phpjs/JSCookMenu.js"></script>
<link rel="stylesheet" href="ThemeOffice/theme.css" type="text/css">
<script type="text/javascript" src="ThemeOffice/theme.js"></script>
<!--##~SYSTEMFUNCTIONS.GetClientScript("Global","Client Script"##-->
Aquí modificamos el header.php . Mostramos el usuario y la selección de idioma. Substituir todo lo que hay entre las líneas. Substituir la imagen logo.jpg por el nombre de vuestra imagen.
Fichero: phpmaker/templates/script/template.php
Código:
<!-- header (begin) --><!-- *** Note: Only licensed users are allowed to change the logo *** -->
<div id="container">
<div id="wb_Image3" style=position:absolute;left:0px;top:0px;width:308px;height:119px;z-index:0;>
<img src="phpimages/logo.jpg" id="Image3" alt="" style=width:308px;height:119px;></div>
<img src="phpimages/img0001.png" align="top" alt="" border="0" style=position:relative;left:311px;top:0px;height:115px;>
<div id="google_translate_element" style=position:absolute;left:700px;top:80px;width:170px;height:19px;line-height:19px;z-index:5;></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<input type="text" id="Editbox1" style=position:absolute;left:700px;top:50px;width:170px;height:19px;line-height:19px;z-index:5; name="Editbox1" value= <?php echo $_SESSION[EW_SESSION_USER_PROFILE_USER_NAME]; ?> >
<div id="wb_Text1" style=position:absolute;left:650px;top:50px;width:54px;height:16px;z-index:6;text-align:left;>
<span style=color:#000000;font-family:Tahoma;font-size:13px;>Usuario:</span></div>
</div>
<!-- header (end) -->
Aqui poner esto para que muestre el menú solo si se esta logueado
Fichero: phpmaker/templates/script/template.php
Código:
<!-- content (begin) -->
<?php } else { ?>
<!-- content (begin) -->
<?php if ($_SESSION[EW_SESSION_USER_PROFILE_USER_NAME] != "" { ?> // para que no salga el menu en la pantalla login.php si no hay nadie logueado
<!--##=SYSTEMFUNCTIONS.IncludeFile("menu",""##-->
<?php } ?>
<?php } ?>
Modificar el fichero ewshared.php. Es el encargado de renderizar el menú, yo lo he modificado para que construya el menú como queremos. NOTA – No soporta 2 niveles o mas de submenú. Modificad los nombres de los ficheros de imágenes por los dos que tengais
Fichero: phpmaker/templates/script/ewshared.php
Código: Modificar la function cmenu render por esta otra
// Render the menu
function Render($ret = FALSE) {
// creamos el menu
$str = "<script type=" . '"text/javascript">' . "<!--n";
$str .= "var myMenu =n";
$str .= "[n";
foreach ($this->ItemData as $item) {
$str .= "['', '$item->Text', '', '', '$item->Text'";
if (!is_null($item->SubMenu)) {
foreach ($item->SubMenu->ItemData as $subitem) {
if ($this->RenderItem($subitem)) { // el subitem puede ser mostrado
$str .= ",['<img class="seq1" src="phpimages/arrow.gif" /><img class="seq2" src="phpimages/159.gif" />' , '$subitem->Text' , '$subitem->Url' , '_self' , '']";
}
}
}
else {
if ($this->RenderItem($item)) {// el item puede ser mostrado
$str .= ",['' , '$item->Text' , '$item->Url' , '_self', '$item->Text']n";
}
}
$str .= "],n";
$str .= "_cmSplit,n";
}
$str .= "]n--></script>n";
// creamos el contenedor html
$str .= "<div id=" . '"' . "wb_MenuBar1" . '"' . " style=.'' . "position:relative;left:7px;top:3px;width:975px;height:40px;z-index:1000;" .'"' . ">n";
// definimos el menu
$str .= "<div id="myMenuID"></div>n";
// ejecutamos el renderizado del menu
$str .= "<script type="text/javascript"><!--n" . "cmDraw ('myMenuID', myMenu, 'hbr', cmThemeOffice);n" . "--></script>n";
// cerramos el contenedor html
$str .= "</div>n";
if ($ret) // Return as string
return $str;
echo $str; // Output
}
}
// Menu item class
Y ya esta. Ahora se puede compilar con phpmaker. NOTA – si pregunta que las plantillas difieren , poner keep para mantenerlas, sino perderemos los cambios.
Para evitar que se traduzca un campo determinado
En phpmaker - div tag attributes - custom attributes- poner 'class="notranslate"'
Para que el menu acepte una pagina no generada por phpmaker.
Simplemente en el menu editor, creamos un menu item y en el campo URL ponemos el nombrefichero.php
NOTA - En el phpmaker, al compilar, si pregunta que las plantillas difieren , poner keep para mantenerlas, sino
perderemos los cambios.
Seguramente habremos de editar el fichero ThemeOffice/theme.js para que en su primera linea ponga esto
// directory of where all the images are
var cmThemeOfficeBase = 'ThemeOffice/';
Si no nos gustan los colores del tema o el tamaño de la letra, se pueden cambiar editando el fichero ThemeOffice/Theme.css
SI NO OS GUSTA SIMPLEMENTE SE DESHACEN LOS CAMBIOS EN EL PHPMAKER CON TOOLS - DELETE TEMPLATE CACHE.
SI OS GUSTA, COPIAD LA CARPETA documentos/phpmaker/templates/php92.zip para evitar que se pierdan los cambios.