Академический Документы
Профессиональный Документы
Культура Документы
MochaUI: mdulo de interfaz de usuario. 1. Introduccin 2. Instalacin y configuracin 3. Crear un escritorio 4. Crear paneles y columnas 5. Crear ventanas y pestaas 6. Miscelneo
1. INTRODUCCIN Este mdulo permite el desarrollo e implementacin de una compleja interfaz javascript como interfaz de usuario de ventana; slo con el uso de cdigo HTML. No es necesario saber Ajax o javascript. Usted tiene que insertar el formato html en vistas (o con tags) para utilizar la mayor parte de Mocha UI.
2. INSTALACIN Y CONFIGURACIN a) Descargue el mdulo mochaUI, el mdulo de interfaz de usuario para empezar b) Cambiar el nombre de la carpeta del mdulo mocha a "mocha" c) Ponga la carpeta del mdulo mocha en: play/miaplicacion\modules/ d) Agregue la siguiente lnea en conf/dependencies.yml
# Application dependencies require: - play - play -> mocha
3. CREAR UN ESCRITORIO a) Incluir todos los archivos javascript Lo primero, se debe incluir todos los archivos JavaScript en el marcado head de su aplicacin. Debe utilizar #{mochaInclude /} <head> <title>#{get 'title' /}</title> #{mochaInclude /} #{get 'moreStyles' /} #{get 'moreScripts' /} </head>
c) Aadir la envoltura pgina Ahora puedes aadir la pgina en su escritorio con #{mochaPage}. Yo uso #{doLayout /} para incluir otros puntos de vista en mi escritorio, pero no es obligatorio.
<body> #{mochaDesktop } #{mochaPage } #{doLayout /} #{/mochaPage } #{/mochaDesktop} </body>
4. CREAR COLUMNAS Y PANELES a) Crear columnas Debe utilizar # {mochaColumn /} marcado para crear una columna en el interior de la envoltura de la pgina. Debe establecer una identificacin y una colocacin (principal, izquierda o derecha).
#{mochaColumn id:'sideColumn', placement:'right'} ... #{/mochaColumn}
b) Agregue paneles dentro de columnas Para definir el contenido HTML en la columna, debe incluir uno o varios paneles con #{mochaPanel}. El contenido HTML se encuentra en el panel con el contenturl parmetro (es una ruta a una accin @Controler).
#{mochaPanel contenturl:@Application.message(), title:'Main Panel 1', tabsURL:@Tabs.message() /}
c) Cdigo completo de mi pgina de vista Este punto de vista se extiende main.html que se utiliza para crear el escritorio. He creado dos columnas: la primera con 3 paneles (el primer panel compuesto por pestaas y contenido) y el segundo con un panel.
#{extends 'main.html' /} #{set title:'Mocha UI Module' /} #{mochaColumn id:'mainColumn', placement:'main'} #{mochaPanel contenturl:@Application.message(), title:'Main Panel 1', tabsURL:@Tabs.message() /} #{mochaPanel contenturl:@Application.flashContent(), title:'Main flash content 2' /} #{mochaPanel contenturl:@Application.contentTab(), title:'Main content 3' /}
#{/mochaColumn} #{mochaColumn id:'sideColumn', placement:'right'} #{mochaPanel contenturl:@Application.form(), title:'Side Panel 1' /} #{/mochaColumn}
5. CREAR VENTANAS Y PESTAAS a) Crear una ventana Si desea crear un vnculo para abrir una ventana, puede utilizar la marca #{mochaOpenWindow}. Este marcado crea un cdigo HTML, aadir la clase "mochaOpenWindow" en el elemento y enlaza el evento click de javascript. Usted puede decidir qu marcas lo desea, puede aadir una clase o propiedad de otro elemento. La propiedad toolbarURL llamar a la vista en la que se ha definido todas las paneles. La propiedad contentURL llamar a la vista en la que se ha definido el contenido HTML de la ventana. El tipo de propiedad se puede establecer en "modal" si desea que una ventana modal.
#{mochaOpenWindow contentURL:@Application.form(), title:'Application : form 2',toolbarURL:@Tabs.form()} Click and display form #{/mochaOpenWindow}
b) Cmo definir las pestaas en una vista (para la ventana o panel) Para definir las pestaas debe utilizar dos etiquetas, # {mochaTabs} y #{mochaTab}. # {} mochaTabs: Hay que definir un id. Usted puede agregar otras propiedades del elemento html. # {} mochaTab: Hay que definir el enlace (url), se selecciona el ttulo de la pestaa y sus selectores. La url debe definir una vista como @Application.form(). Se puede ver un ejemplo completo de vista que definen pestaas:
#{mochaTabs id:'formTabs' } #{mochaTab url:@Application.form(),title:'Form', selected:true }Form tab1#{/mochaTab} #{mochaTab url:@Application.contentTab('test3'),title:'Content' }My content3#{/mochaTab} #{/mochaTabs}
d) Crear fichas dynamicaly Ahora quiere aadir una pestaa cuando se hace clic en un elemento html. No hay problema, debe utilizar la etiqueta #{mochaCreateTab}. Puedes ver el ejemplo de implementacin ms adelante.
#{mochaCreateTab url:@Application.form(), title:'My new title',text:'My new tab'} Create a tab in the current window or panel #{/mochaCreateTab}
6. ENVIAR FORMULARIOS Puede utilizar la etiqueta #{mochaSubmit} en paneles o ventanas para enviar un formulario sin recargar la pgina. Ejemplo:
#{mochaSubmit }Valid#{/mochaSubmit}
El formulario es enviado usando Ajax y los paneles o ventanas se vuelve a cargar automticamente despus. En este ejemplo yo envo los datos del formulario a la misma controladora.
Inicializar datos
Todas los datos se utilizan para inicializar las ventanas, columnas o paneles; esto se definen en mocha/public/javascript/initialize.js. Estos datos definir el comportamiento por defecto de la aplicacin, como el ancho estndar de las ventanas. Estos datos pueden ser anular en el momento de la creacin de este tipo de objetos. Ejemplo:
#{mochaOpenWindow contentURL:@Application.form(), title:'Application : form 2',toolbarURL:@Tabs.form(), width:'100'} Click and display form #{/mochaOpenWindow}