domingo, 13 de agosto de 2017

Usando JavaScript, Html y Css en Gambas3


Hay mucho código en otros lenguajes que podemos utilizar en Gambas.
Aquí les dejo un ejemplo de como usar la librería chessboard-0.3.0.js JavaScript.
Es interesante puesto que debemos aprender a manejar, un archivo html y como vincular y manipular archivos javascript y css.

Necesario activar el componente gb.qt4.webkit

Archivo Html que incrustaremos en un WebView:

<!doctype html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>JavaScript, Html y css en Gambas</title>
<base href="http://chessboardjs.com/" />

<link rel="stylesheet" href="css/chessboard.css" />
</head>

<body>

<center><div id="board" style="width: 400px"></div>

<input type="button" id="setRookCheckmateBtn" value="Jake Mate" />
<input type="button" id="setStartBtn" value="Posición inicial" />
<input type="button" id="clearBoardBtn" value="Borrar piezas" />
<input type="button" id="flipOrientationBtn" value="Girar tablero" />

<p><a href="https://novatocodegambas.blogspot.com.uy/">https://novatocodegambas.blogspot.com.uy/</a></p>
<p><a href="http://chessboardjs.com/">http://chessboardjs.com</a></p>
</center>
<h6>by postapase</h6>

<script src="js/json3.min.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/chessboard.js"></script>
<script>

var init = function() {

//--- start example JS ---
var ruyLopez = 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R';
var board = ChessBoard('board', ruyLopez);

$('#setStartBtn').on('click', board.start);

$('#clearBoardBtn').on('click', board.clear);

$('#flipOrientationBtn').on('click', board.flip);

$('#setRookCheckmateBtn').on('click', function() {
board.position({
a4: 'bK',
c4: 'wK',
a7: 'wR'
});
});

}; // end init()
$(document).ready(init);

</script>
</body>
</html>


En el Formulario:

Public Sub Form_Open()

WebView1.Url = "js/Html1.html"

End



El ejemplo esta disponible para su descarga en la Granja de Gambas

Nota: si vos tenes algún proyecto o ejemplo de este tipo me gustaría que lo compartieras, saludos.

No hay comentarios.:

Publicar un comentario