cpp
/
RmlUi
réplica de https://github.com/mikke89/RmlUi.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
							<rml>
<head>
<link type="text/template" href="../../../assets/window.rml"/>
<title>Data Binding Sample</title>
<style>
body.window
{
	width: 1300px;
	height: 750px;
	min-width: 1090px;
	min-height: 300px;
	max-width: -1px;
	max-height: -1px;
}
div#title_bar div#icon
{
	display: none;
}
div#content
{ 
	position: relative; 
}
tabset
{
	display: block;
}
tabs
{
    display: block;
	position: fixed;
	clip: none;
	text-align: right;
	top: -47px;
	left: 205px;
	right: 10px;
}
tab
{
	display: inline-block;
    width: 100px;
	padding: 0px 20px;
	line-height: 40px;
	
	font-size: 16px;
	color: #ddd;
	text-align: center;
	
	decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
	image-color: #cffc;
}
tab:hover
{
	image-color: #fffe;
	color: #fff;
}
tab:active, tab:selected
{
	image-color: #fff;
	color: #fff;
}
panels
{
    display: block;
}
panel
{
    display: block;
	padding: 30px;
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
}
h1
{
	margin: 1.4em 0 0.7em;
	font-size: 18px;
}
p.title
{
	font-size: 35px;
	color: #b33;
	font-effect: glow(2px #ed5);
}
.center {
	text-align: center;
}
.clickable
{ 
	cursor: pointer;
}
.red {
	color: #e44;
}
.big {
	font-size: 1.8em;
}
.mouse_detector {
	width: 300px;
	min-height: 2em;
	line-height: 30px;
	background-color: #909090;
	border: 1px #666;
	margin: 2em auto;
	cursor: pointer;
}


/***  Forms  ***/

form {
	display: block;
	text-align: left;
}
form input, form select {
	margin-left: 0;
}
form input.text, form input.password {
	width: 35%;
}
input.text.two-wide {
	width: 70%;
}
form h2 {
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin-top: 8px;
}
#rating {
	display: inline-block;
	width: 40px;
	padding-left: 1em;
}
#rating_emoji { 
	color: #ffd40f;
	font-size: 1.7em;
}
#controls textarea 
{
	font-size: 18px;
	font-effect: outline(2px #006600);
	color: #ddd;
}
</style>
</head>

<body template="window">
<tabset id="menu">
<tab>Basics</tab>
<panel data-model="basics">
	<h1>{{title}}</h1>
	<p data-if="show_text">The quick brown fox jumps over the lazy {{animal}}.</p>
	<input type="text" data-value="animal"/>
</panel>
<tab>Events</tab>
<panel id="welcome" data-model="events">
	<p class="title" style="margin-top: 1.8em;">{{hello_world}}<span style="color: blue;"> Rated: {{rating}}</span></p>
	<p>Data binding demo. We rate this a good old {{rating}}!</p>
	<input type="range" name="rating" min="0" max="100" step="1" value="50" data-value="rating"/>
	<div data-visible="rating > 50">Thanks for the <span data-if="rating < 80">good</span><span data-if="rating >= 80">awesome</span> rating!</div>
	<div class="mouse_detector" style="height: 70px;"
		data-event-mousemove="mouse_detector = 'x: ' + ev.mouse_x + '<br/>y: ' + ev.mouse_y"
		data-event-click="add_mouse_pos(); hello_world = 'Hello click!'"
		data-rml="mouse_detector">
	</div>
	<div class="mouse_detector" data-if="positions.size > 0" data-event-click="clear_positions">
		Recorded mouse positions.<br/>
		<span data-for="pos : positions"> x: {{ pos.x }}, y: {{ pos.y }}<br/></span>
	</div>
	<img sprite="icon-invader" data-style-image-color="rating < 80 ? 'black' : 'green'"/>
	<p>
		For loop with data expressions:<br/>
		<span style="padding-left: 1em;" data-for="i : list"> {{ i * 2 + (!(i < 10) ? ' wow!' | to_upper : '') }}</span>
	</p>
</panel>
<tab>Invaders</tab>
<panel id="invaders" data-model="invaders">
	<p>
		Incoming invaders:
		<input type="range" name="rating" min="0" max="20" step="5" data-value="incoming_invaders_rate"/>
		{{ incoming_invaders_rate }} / min.
	</p>
	<button data-event-click="launch_weapons">Launch weapons!</button>
	<div data-for="invader : invaders">
		<h1 data-class-red="invader.danger_rating > 70">{{invader.name}}</h1>
		<p>Invader {{it_index + 1}} of {{ invaders.size }}.</p>
		<img data-attr-sprite="invader.sprite" data-style-image-color="invader.color"/>
		<p>
			Shots fired (damage): <span data-for="invader.damage"> {{it}} </span>
		</p>
	</div>
	<h1 data-if="invaders.size == 0">It's all safe and sound, sir!</h1>
</panel>
<tab>Forms</tab>
<panel id="controls">
	<h1>Todo</h1>
	<form onsubmit="submit_form">
		<h2>Full name</h2>
		<div>
			<input class="two-wide" type="text" name="name"/>
		</div>
		<h2>Email and password</h2>
		<div>
			<input type="text" name="email"/>
			<input type="password" name="password"/>
		</div>
		<h2>Favorite animal</h2>
		<div>
			<input type="radio" name="animal" value="dog" checked/> Dog
			<input type="radio" name="animal" value="cat"/> Cat
			<input type="radio" name="animal" value="narwhal"/> Narwhal
			<input type="radio" name="animal" value="no"/> I don't like animals
		</div>
		<h2>Favorite meals</h2>
		<div>
			<input type="checkbox" name="meals" value="pizza" checked/> Pizza
			<input type="checkbox" name="meals" value="pasta" checked/> Pasta
			<input type="checkbox" name="meals" value="lasagne" checked/> Lasagne
		</div>
		<h2>Rating</h2>
		<div>
			<input type="range" name="rating" min="0" max="100" step="1" value="50" onchange="rating"/> <span id="rating"/><span id="rating_emoji">&nbsp;</span>
		</div>
		<h2>Subject</h2>
		<div>
			<select name="subject">
				<option value="none" selected>Choose your subject</option>
				<option value="feature">Feature request</option>
				<option value="bug">Bug report</option>
				<option value="praise">Praise</option>
				<option value="criticism">Criticism</option>
			</select>
		</div>
		<h2>Message</h2>
		<div>
			<textarea cols="25" rows="4" wrap="nowrap" name="message">😍 Hello 🌐 World! 😎</textarea>
		</div>
		<div style="margin-bottom: 15px;">
			<input type="submit">Submit</input>
		</div>
	</form>
</panel>
</tabset>
</body>
</rml>