Introduction
This module allow the developper to implement a complex javascript interface like Mocha UI only with using html markup. You don’t need to know javascript or ajax.
You have to insert html markup into you view (or play! tags) to use the most part of Mocha UI.
Create a desktop
1. Include all javascript files
In a first time you must include all javascipt files in the head markup of your application.
You must use #{mochaInclude /} markup.
<head>
<title>#{get 'title' /}</title>
#{mochaInclude /}
#{get 'moreStyles' /}
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/project.css'}">
#{get 'moreScripts' /}
</head>
2. Add the desktop
You can now add the desktop in your body with #{mochaDesktop }.
<body>
#{mochaDesktop }
...
#{/mochaDesktop}
</body>
3. Add the page wrapper
You can now add the page in your desktop with #{mochaPage}. I use #{doLayout /} for include other views in my desktop but it’s not mandatory.
<body>
#{mochaDesktop }
#{mochaPage }
#{doLayout /}
#{/mochaPage }
#{/mochaDesktop}
</body>
4. Add a dock in my desktop
You can, if you want, add a dock in the desktop
<body>
#{mochaDesktop }
#{mochaPage }
#{doLayout /}
#{/mochaPage }
#{mochaDock /}
#{/mochaDesktop}
</body>
5. Add a desktop footer
You can also add a desktop footer.
<body>
#{mochaDesktop }
#{mochaPage }
#{doLayout /}
#{/mochaPage }
#{mochaDock /}
#{mochaDesktopFooter}
<div>You can put here all the HTML code you want.</div>
#{/mochaDesktopFooter}
#{/mochaDesktop}
</body>
6. Add a desktop header
You can also add a desktop header.
<body>
#{mochaDesktop }
#{mochaDesktopHeader }
this is my header.
#{/mochaDesktopHeader}
#{mochaPage }
#{doLayout /}
#{/mochaPage }
#{mochaDock /}
#{mochaDesktopFooter}
<div>You can put here all the HTML code you want.</div>
#{/mochaDesktopFooter}
#{/mochaDesktop}
</body>
7. Full code
Code from main.html
<!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>
Create columns and panels
1. Create columns
You must use #{mochaColumn /} markup to create a column inside the page wrapper.
You must set an id and a placement(main, left or right). You can see all column options on MochaUI website.
Mocha UI columns
#{mochaColumn id:'sideColumn', placement:'right'}
...
#{/mochaColumn}
2. Add panels inside columns
To set html content in column you must include one or many panels with #{mochaPanel}. The html content is set in panel with the parameter contenturl(It’s a route like @Controler.action). You can see all panel options on MochaUI website.
Mocha UI panels
#{mochaPanel contenturl:@Application.message(), title:'Main Panel 1', tabsURL:@Tabs.message() /}
3. Full code of my view page
This view extends main.html which is used to create the desktop.
I created 2 columns, the first with 3 panels(the first panel composed of tabs and content) and the second with one 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}
Create windows and tabs
1. Create a window
If you want to create a link to open a window, you can use the #{mochaOpenWindow} markup. This markup create a html markup, add the class “mochaOpenWindow” at the element and bind the javascript event on click. You can decide which markup you want, you can add a class or other element property.
The property toolbarURL call the view where it has been defined all tabs.
The property contentURL call the view where it has been defined the html content of window.
The property type can be set to “modal” if you want a modal window.
You can also use all windows options you can see on MochaUI website.
Mocha UI window
You can see below an example of window link.
#{mochaOpenWindow contentURL:@Application.form(), title:'Application : form 2',toolbarURL:@Tabs.form()}
Click and display form
#{/mochaOpenWindow}
2. How to define tabs on a view (for window or panel)
To define tabs you must use 2 tags, #{mochaTabs} and #{mochaTab}.
#{mochaTabs} : you have to define an id. You can add other html element property.
#{mochaTab} : you must define the link (url), the title of tab and whitch is selected.
url must define a view like @Application.form().
You can see a full example of view who define tabs below :
#{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}
3. Full code of my view 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}
4. Create tabs dynamicaly
Now you want to add a tab when you click on a html element.
No problem, you must use the tag #{mochaCreateTab}. You can watch the implementation example below.
#{mochaCreateTab url:@Application.form(), title:'My new title',text:'My new tab'}
Create a tab in the current window or panel
#{/mochaCreateTab}
Miscellaneous
Submit forms
you can use #{mochaSubmit} tag in panels or windows to submit a form without reload page.
Example :
#{mochaSubmit }Valid#{/mochaSubmit}
Full code of my view form.html
#{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}
The form is submit with ajax and panel or window are automaticaly reload after.
In this exemple I submit form datas to the same controler.
Initialize datas
All datas used to initialize windows, columns or panes are define in mocha/public/javascript/initialize.js. These datas define default behavior of your application, like standard width of windows. These datas can be override at the creation moment of these type of objects.
Example:
#{mochaOpenWindow contentURL:@Application.form(), title:'Application : form 2',toolbarURL:@Tabs.form(), width:'100'}
Click and display form
#{/mochaOpenWindow}
the title of window was overrided at “Application : form 2” and its width at 100px. You can read the documentation Mocha UI Documentation to know all parameters.