Dejo en claro primeramente que hay varias formas de hacer la integracion, yo use un poco de HTML desde genexus para hacer la carga de los items del menu y para referenciar al css que contenia el estilo del menu.
Otra forma podria haber sido crear un user control (mas practico en caso que trabajen en equipo o quieran cargar los items dinamicamente, usando sdts por ejemplo)
En la pagina http://cssmenumaker.com/ pueden encontrar varios menus prediseñados, en donde podran descargar tanto el css como un ejemplo de como cargar el menu desde su pagina HTML.
En este ejemplo vamos a usar el menu opera-drop-down-menu
Si siguen el link, van a encontrar en la pagina, la opcion Download Source.
Lo que descargarian en este ejemplo seria un .rar que contiene un css llamado style.css y un html de nombre index.html.
En archivo index.html tienen un ejemplo de como cargar el menu y como referenciar al style.css.
Pueden fijarse que desde el <head> tendriamos que hacer referencia al css, la linea que hace referencia en el ejemplo seria la siguiente:
<link rel="stylesheet" href="styles.css">
Y pueden fijarse que en el <body> del html se cargan justamente los items del menu junto con los enlaces de cada item.Ejemplo:
<li><a href='#'><span>Home</span></a></li>
Los items del menu estan dentro de un div que hace referencia al id='cssmenu' definido en el css. No quiero entrar mucho en detalle en cuanto a la definicion del html ni del css ya que la idea principal mostrales una forma de integrar dicho menu dentro de un webpanel genexus o en la propia masterpage.Referenciar el archivo css desde un webpanel
Lo primero que tienen que hacer, y es fundamental, es referenciar al css desde su webpanel, dijimos que eso lo hariamos dentro del <head> del html.
Como el editor html de genexus solamente permite trabajar sobre en body, entonces vamos a utilizar la propiedad del form HeaderRawHTML en el evento start.
Entonces quedaria de la sgte manera:
Form.HeaderRawHTML = '<link rel="stylesheet" href="/KBJavaEnvironment/static/Resources/Spanish/styles.css">'Fijense que el styles.css debe estar en el direcorio /static/Resources/Spanish/ de su kb, pueden cambiar la ruta, lo importante es referenciarlo bien y que el styles.css este alojado fisicamente en el directorio referenciado.
Luego cuando generen su aplicacion el mismo styles.css lo estaria llevando en su tomcat por ejemplo si estan protitipando con java.
Cargar los items del menu
Ahora tenemos que trabajar sobre el body de nuestro Web Panel.
La forma mas sencilla, copiar el contenido del body que se encuentra dentro del archivo de ejemplo descargado "index.html" y pegarlo en el editor HTML de Genexus del webPanel.
Ejemplo:
<li><a href="/JavaEnvironment/servlet/com.ejemplo.principal"><span>Inicio</span></a>
Ejecutar la Aplicacion, ingresar al web Panel y podran visualizar el menu dentro de su webPanel.
Abajo se muestra el mismo menu agregado como component dentro de la masterPage de la app, con algunas modificaciones realizadas en el css para adaptar mejor al tema de la aplicacion.
muy buenas estoy intentando hacer el ejemplo y no me muestra el menu me parece que es algo del href="/KBJavaEnvironment/static/Resources/Spanish/styles.css">'
ResponderEliminarque no me fuciona si corro esto en el explorer si me muestra el css pero no me muestra el menu en genexus
D:/PROYECTOS%20-%20MJ/Genexus/Modelos-Ev3/MenuCSS/CSharpModel/web/Menu/styles.css
Hola Baruc,
EliminarFijate en el HTML de nuestro web panel desde genexus la primera linea es div id='cssmenu'>, me di cuenta en algunos upgrades de Genexus que al generar cambia el nombre del id. Por ejemplo lo deja todo en mayusculas div id='CSSMENU'> . Al cambiar de nombre o dejarlo en mayusculas ya no coincide con lo que se definio dentro del styles.css.
La solucion mas rapida y sencilla que encontre: Ir al style.css y cambiar todas las ocurrencias 'cssmenu' por el valor que te asigno al generar.Por ejemplo si solamente te cambio el nombre a mayusculas, cambiar 'cssmenu' por 'CSSMENU'
Con notepad++ podes reemplazar todas las ocurrencias de una sola vez.
Buenas luis,
ResponderEliminarcambie el css de 'cssmenu' por 'CSSMENU' y no me funciona cuando levanto el navegador y le doy clic derecho ver codigo se ve que esta insertando el siguiente codigo en el head
link rel="stylesheet" href="Resources/Spanish/styles.css"/head
si inserta el css y en el body si me inserta el id:CSSMENU
Pero igual no me funciona
Buenas Baruc, si en el body ves con id:CSSMENU y ya lo tienes asi definido en el style.css probablemente estamos referenciando mal la ubicacion del style.css
EliminarTu creaste en la raiz de tu aplicacion el directorio Resources?
Porque dices que en el head lo tenes asi:
link rel="stylesheet" href="Resources/Spanish/styles.css
si Resources esta en la raiz de tu aplicacion lo que te faltaria es agregar el nombre del directorio de tu app.
Por ejemplo si se llama KBJavaEnvironment el href quedaria asi:
href="/KBJavaEnvironment/Resources/Spanish/styles.css
Si el style.css lo copiaste exactamente donde yo lo copie, te faltaria tambien referenciar el subdirectorio static.
Yo por ejemplo lo tengo asi en el head:
link rel="stylesheet"
href="/KBJavaEnvironment/static/Resources/Spanish/styles.css"
(Fijate que Resource esta dentro de static)