Manual Basico de Mochaui

MANUAL BSICO DE MOCHAUI
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
e) Incluya las rutas del mdulo mocha en conf/routes, agregar :

* / module:mocha
Ahora puede empezar a trabajar.
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>
b) Aadir el escritorio Ahora puede agregar el escritorio de tu cuerpo con #{mochaDesktop }.

<body> #{mochaDesktop } ... #{/mochaDesktop} </body>
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>
d) Aadir un dock en el escritorio Usted puede, si lo desea, agregar un dock en el escritorio

<body> #{mochaDesktop } #{mochaPage } #{doLayout /} #{/mochaPage } #{mochaDock /} #{/mochaDesktop} </body>
e) Aadir un pie de escritorio Tambin puede aadir un pie de pgina 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 escritorio Tambin puede agregar un encabezado de escritorio.

<body> #{mochaDesktop } #{mochaDesktopHeader } this is my header. #{/mochaDesktopHeader} #{mochaPage } #{doLayout /} #{/mochaPage } #{mochaDock /} #{mochaDesktopFooter} <div>Poner aqu el cdigo 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 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}
c) Cdigo 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 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}
Un cdigo ms 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 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}
El ttulo de la ventana fue modificado a "Application : form 2 " y el ancho a 100px.

Manual Basico de Mochaui

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Basico de Mochaui

Uploaded by

Copyright:

Available Formats

MANUAL BSICO DE MOCHAUI

e) Incluya las rutas del mdulo mocha en conf/routes, agregar :

Ahora puede empezar a trabajar.

b) Aadir el escritorio Ahora puede agregar el escritorio de tu cuerpo con #{mochaDesktop }.

d) Aadir un dock en el escritorio Usted puede, si lo desea, agregar un dock en el escritorio

e) Aadir un pie de escritorio Tambin puede aadir un pie de pgina escritorio.

f) Agregar un encabezado de escritorio Tambin puede agregar un encabezado de escritorio.

Quedando al final as:

c) Cdigo de mi vista Application.main()

Un cdigo ms completo seria el siguiente.

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

You might also like