144919140 Manual Basico de Mochaui

MANUAL BÁSICO DE MOCHAUI

MochaUI: módulo de interfaz de usuario.

1. Introducción

2. Instalación y configuración

3. Crear un escritorio

4. Crear paneles y columnas

5. Crear ventanas y pestañas

6. Misceláneo

1. INTRODUCCIÓN

Este 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ÓN

a) Descargue el módulo mochaUI, el módulo de interfaz de usuario para empezar

b) 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: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 aplicación. Debe utilizar

#{mochaInclude /}

<head>

<title>#{get 'title' /}</title>

#{mochaInclude /}

#{get 'moreStyles' /}

#{get 'moreScripts' /}

</head>

b) Añadir el escritorio

Ahora 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 escritorio

Usted puede, si lo desea, agregar un dock en el escritorio <body>

#{mochaDesktop }

#{mochaPage }

#{doLayout /}

#{/mochaPage }

#{mochaDock /}

#{/mochaDesktop}

</body>

e) Añadir un pie de escritorio

Tambié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 escritorio

También puede agregar un encabezado de escritorio. <body>

#{mochaDesktop }

#{mochaDesktopHeader }

this is my header.

#{/mochaDesktopHeader}

#{mochaPage }

#{doLayout /}

#{/mochaPage }

#{mochaDock /}


<div>Poner aquí el código HTML que desee</div>


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


<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 >


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

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 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 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 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 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ÑAS

a) 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 dynamicaly

Ahora 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 FORMULARIOS

Puede 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 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 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.

Documents

144919140 Manual Basico de Mochaui