MANUAL BÁSICO DE MOCHAUI

MANUAL BÁSICO DE MOCHAUI

MochaUI: módulo de interfaz de usuario.1. Introducción2. Instalación y configuración3. Crear un escritorio4. Crear paneles y columnas5. Crear ventanas y pestañas6. Misceláneo

1. INTRODUCCIÓNEste módulo permite el desarrollo e implementación de una compleja interfaz javascript como interfaz de usuario de ventana; sólo con el uso de código 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. INSTALACIÓN Y CONFIGURACIÓNa) Descargue el módulo mochaUI, el módulo de interfaz de usuario para empezarb) Cambiar el nombre de la carpeta del módulo mocha a "mocha"c) Ponga la carpeta del módulo mocha en: play/miaplicacion\modules/

d) Agregue la siguiente línea en conf/dependencies.yml# Application dependencies

require: - play - play -> mocha

e) Incluya las rutas del módulo mocha en conf/routes, agregar :* / module:mochaAhora puede empezar a trabajar.

3. CREAR UN ESCRITORIOa) Incluir todos los archivos javascript

Lo primero, se debe incluir todos los archivos JavaScript en el marcado head de su aplicación. Debe utilizar #{mochaInclude /}<head> <title>#{get 'title' /}</title> #{mochaInclude /} #{get 'moreStyles' /} #{get 'moreScripts' /}</head>

b) Añadir el escritorioAhora puede agregar el escritorio de tu cuerpo con #{mochaDesktop }.<body> #{mochaDesktop } ... #{/mochaDesktop}</body>

c) Añadir la envoltura página Ahora puedes añadir la página 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>

d) Añadir un dock en el escritorioUsted puede, si lo desea, agregar un dock en el escritorio<body> #{mochaDesktop } #{mochaPage } #{doLayout /} #{/mochaPage }

#{mochaDock /}

#{/mochaDesktop}</body>

e) Añadir un pie de escritorioTambién puede añadir un pie de página escritorio. <body> #{mochaDesktop } #{mochaPage } #{doLayout /} #{/mochaPage } #{mochaDock /}

#{mochaDesktopFooter} <div>You can put here all the HTML code you want.</div> #{/mochaDesktopFooter}

#{/mochaDesktop} </body>

f) Agregar un encabezado de escritorioTambién puede agregar un encabezado de escritorio. <body> #{mochaDesktop } #{mochaDesktopHeader } this is my header. #{/mochaDesktopHeader}

#{mochaPage } #{doLayout /} #{/mochaPage } #{mochaDock /}

#{mochaDesktopFooter} <div>Poner aquí el código HTML que desee</div> #{/mochaDesktopFooter}

#{/mochaDesktop} </body>

Quedando al final así:<!DOCTYPE html>

<html> <head> <title>#{get 'title' /}</title> #{mochaInclude /} #{get 'moreStyles' /} #{get 'moreScripts' /} </head>

<body> #{mochaDesktop } #{mochaDesktopHeader } this is my header. #{/mochaDesktopHeader}

#{mochaPage } #{doLayout /} #{/mochaPage }

#{mochaDock /}

#{mochaDesktopFooter} <div style="margin-top:2px;float:left;font-size:24px;font-family: Arial"> <a target="_blank" href="http://www.playframework.org/">Play! Framework</a> & <a target="_blank" href="http://mochaui.org/">Mocha UI</a> </div > #{/mochaDesktopFooter}

#{/mochaDesktop} </body></html>

4. CREAR COLUMNAS Y PANELESa) Crear columnas

Debe utilizar # {mochaColumn /} marcado para crear una columna en el interior de la envoltura de la página. Debe establecer una identificación y una colocación (principal, izquierda o derecha).#{mochaColumn id:'sideColumn', placement:'right'} ...#{/mochaColumn}

b) Agregue paneles dentro de columnasPara 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 parámetro (es una ruta a una acción @Controler).#{mochaPanel contenturl:@Application.message(), title:'Main Panel 1', tabsURL:@Tabs.message() /}

c) Código completo de mi página de vistaEste 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 pestañas 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 PESTAÑASa) Crear una ventana

Si desea crear un vínculo para abrir una ventana, puede utilizar la marca #{mochaOpenWindow}. Este marcado crea un código HTML, añadir la clase "mochaOpenWindow" en el elemento y enlaza el evento click de javascript. Usted puede decidir qué marcas lo desea, puede añadir 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) ¿Cómo definir las pestañas en una vista (para la ventana o panel)Para definir las pestañas 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 título de la pestaña y sus selectores. La url debe definir una vista como @Application.form().Se puede ver un ejemplo completo de vista que definen pestañas:

#{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}

c) Código de mi vista Application.main() #{mochaOpenWindow element:'div', contentURL:@Application.message(), title:'Application : message', toolbarURL:@Tabs.message(),type:'modal' } Open content in window #{/mochaOpenWindow}

#{mochaOpenWindow url:@Application.form(), title:'Application : form',toolbarURL:@Tabs.form()} click to open form #{/mochaOpenWindow}

d) Crear fichas dynamicalyAhora quiere añadir una pestaña cuando se hace clic en un elemento html. No hay problema, debe utilizar la etiqueta #{mochaCreateTab}. Puedes ver el ejemplo de implementación más 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 FORMULARIOSPuede utilizar la etiqueta #{mochaSubmit} en paneles o ventanas para enviar un formulario sin recargar la página.

Ejemplo:#{mochaSubmit }Valid#{/mochaSubmit}

Un código más completo seria el siguiente.

#{if readonly } <b>Data sent : </b><br /><br /> Name: ${name} <br /> First name : ${firstname} <br /> Age : ${age} <br />#{/if}#{else} #{form @Application.form() } <input type="text" id="name" name="name" value="" /> Name<br /> <input type="text" id="firstname" name="firstname" value="" /> First name<br /> <input type="text" id="age" name="age" value="" /> Age<br /> #{mochaSubmit }Valid#{/mochaSubmit} #{/form}#{/else}

El formulario es enviado usando Ajax y los paneles o ventanas se vuelve a cargar automáticamente después. En este ejemplo yo envío los datos del formulario a la misma controladora.

Inicializar datosTodas 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 aplicación, como el ancho estándar de las ventanas. Estos datos pueden ser anular en el momento de la creación de este tipo de objetos.Ejemplo:#{mochaOpenWindow contentURL:@Application.form(), title:'Application : form 2',toolbarURL:@Tabs.form(), width:'100'} Click and display form#{/mochaOpenWindow}

El título de la ventana fue modificado a "Application : form 2 " y el ancho a 100px.

MANUAL BÁSICO DE MOCHAUI

Documents

Transcript of MANUAL BÁSICO DE MOCHAUI