I decided to include chocolatechip-ui because of its navigation features, but it seems not to be working.
As you may see in this web example it works, but it doesn't on Dukescript.
.icon.help {
background-image: url('https://cdn2.iconfinder.com/data/icons/bitsies/128/Info-128.png');
}
.icon.config {
background-image: url('https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_14-128.png');
}
.icon.about {
background-image: url('https://cdn0.iconfinder.com/data/icons/news-and-magazine/512/about_us-128.png');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui-3.0.4.min.js"></script>
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/chui.ios-3.0.4.min.css" rel="stylesheet" />
<nav class='current'>
<h1 id='mainTitle'>Unnofficial Oracle PL/SQL Developer Certified Associate Simulator</h1>
</nav>
<article id="main" class="current">
<h1 class="master">Menú Principal</h1>
<ul class="list">
<li class="comp" data-goto="config">
<aside>
<span class="icon config"></span>
</aside>
<h3>Configuración</h3>
</li>
<li class="comp" data-goto="help">
<aside>
<span class="icon help"></span>
</aside>
<h3>Ayuda</h3>
</li>
<li class="comp" data-goto="about">
<aside>
<span class="icon about"></span>
</aside>
<h3>Acerca de...</h3>
</li>
</ul>
<p>La mayoría de las marcas mencionadas son propiedad de © Oracle Inc.</p>
<p>Este simulador de exámen está basado en mi propio conocimiento y podría no ajustarse a sus encesidades específicas.</p>
</article>
<nav class="next">
<a href="#" class="button back">Menú</a>
<h1 id='recipeTitle'>Ayuda</h1>
</nav>
<article id="help" class="next">
<section>
<h2>Ayuda</h2>
<ul class="list">
<li>
<ul id='ingredients'></ul>
</li>
</ul>
<h2>Directions</h2>
<ul class="list">
<li>
<ol id='directions'></ol>
</li>
</ul>
</section>
</article>
<nav class="next">
<a href="#" class="button back">Menú</a>
<h1 id='recipeTitle'>Configuración</h1>
</nav>
<article id="config" class="next">
<section>
<h2>Configuración</h2>
<button value="some button" />
<h2>Directions</h2>
<ul class="list">
<li>
<ol id='directions'></ol>
</li>
</ul>
</section>
</article>
<nav class="next">
<a href="#" class="button back">Menú</a>
<h1 id='recipeTitle'>Acerca De...</h1>
</nav>
<article id="about" class="next">
<section>
<h2>Acerca De...</h2>
<button value="some button" />
<h2>¿Quien hizo esta app?</h2>
<p>
Esta aplicación fue hecha por Ruslan López
</p>
</section>
</article>Code
HTML:
<meta name="apple-mobile-web-app-title" content="OCA">
<title>Simulador no Oficial para la certificación de PL/SQL</title>
<style>
.icon.help {
background-image: url('https://cdn2.iconfinder.com/data/icons/bitsies/128/Info-128.png');
}
.icon.config {
background-image: url('https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_14-128.png');
}
.icon.about {
background-image: url('https://cdn0.iconfinder.com/data/icons/news-and-magazine/512/about_us-128.png');
}
</style>
<link href="css/chui/chui-ios-3.8.0.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/chui/chui-3.8.0.min.js" type="text/javascript"></script>
</head>
<body contenteditable="true">
<nav class='current'>
<h1 id='mainTitle'>Simulador no Oficial para la certificación de PL/SQL</h1>
</nav>
<article id="main" class="current">
<h1 class="master">Menú Principal</h1>
<ul class="list">
<li class="comp" data-goto="config">
<aside>
<span class="icon config"></span>
</aside>
<h3>Configuración</h3>
</li>
<li class="comp" data-goto="help">
<aside>
<span class="icon help"></span>
</aside>
<h3>Ayuda</h3>
</li>
<li class="comp" data-goto="about">
<aside>
<span class="icon about"></span>
</aside>
<h3>Acerca de...</h3>
</li>
</ul>
<p>La mayoría de las marcas mencionadas son propiedad de © Oracle Inc.</p>
<p>Este simulador de exámen está basado en mi propio conocimiento y podría no ajustarse a sus encesidades específicas.</p>
</article>
<nav class="next">
<a href="#" class="button back">Menú</a>
<h1 id='recipeTitle'>Ayuda</h1>
</nav>
<article id="help" class="next">
<section>
<h2>Ayuda</h2>
<ul class="list">
<li>
<ul id='ingredients'></ul>
</li>
</ul>
<h2>Directions</h2>
<ul class="list">
<li>
<ol id='directions'></ol>
</li>
</ul>
</section>
</article>
<nav class="next">
<a href="#" class="button back">Menú</a>
<h1 id='recipeTitle'>Configuración</h1>
</nav>
<article id="config" class="next">
<section>
<h2>Configuración</h2>
<button value="some button" />
<h2>Directions</h2>
<ul class="list">
<li>
<ol id='directions'></ol>
</li>
</ul>
</section>
</article>
<nav class="next">
<a href="#" class="button back">Menú</a>
<h1 id='recipeTitle'>Acerca De...</h1>
</nav>
<article id="about" class="next">
<section>
<h2>Acerca De...</h2>
<button value="some button">sss </button>
<h2>¿Quien hizo esta app?</h2>
<p>
Esta aplicación fue hecha por Ruslan López
</p>
</section>
</article>
<!-- ${browser.bootstrap} -->
</body>
</html>
Java:
For java just erased some things for the example code generated with the project.
package com.codermasters.simulators.ocaplsql;
import net.java.html.json.ComputedProperty;
import net.java.html.json.Function;
import net.java.html.json.Model;
import net.java.html.json.Property;
import com.codermasters.simulators.ocaplsql.js.Dialogs;
/** Model annotation generates class Data with
* one message property, boolean property and read only words property
*/
@Model(className = "Data", targetId="", properties = {
@Property(name = "message", type = String.class),
@Property(name = "rotating", type = boolean.class)
})
final class DataModel {
//preguntasFelices
//pregunta
//categoría
//respuestas
// mensaje
// es aceptable
@Function static void showScreenSize(Data model) {
model.setMessage(Dialogs.screenSize());
}
private static Data ui;
/**
* Called when the page is ready.
*/
static void onPageLoad() throws Exception {
ui = new Data();
ui.setMessage("Hello World from HTML and Java!");
ui.applyBindings();
}
}
Is it possible to fix the javascript navigation?