What if you can not get input from the user in your application. This example is to show you how you can get user input from TIScript and process it with TIScript. Yes processing input on GUI Side.
Input tag is to get input while we will listen for click action on button. So lets just define HTML first.
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Simple Input</h1>
<label for="">Your Name</label></br>
<!-- We are using sugar syntax provided by sciter
we are defining below that
input element is going to accept input as text
by saying "input|text"
if you want integer insted you can use "input|integer" also..
and by #name we are giving it id name
Sciter referance
https://sciter.com/sciter-html-parsing-flavour/
-->
<input|text #name>
// defining button element with id btn1
<button #btn1 >That's My Name</button>
...
</body>
</html>
We have created Input element that accepts data as text now we have to process it in TIScript.
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Simple Input</h1>
<label for="">Your Name</label></br>
<!-- We are using sugar syntax provided by sciter
we are defining below that
input element is going to accept input as text
by saying "input|text"
if you want integer insted you can use "input|integer" also..
and by #name we are giving it id name
-->
<input|text #name>
// defining button element with id btn1
<button #btn1 >That's My Name</button>
<script type="text/tiscript">
// sciter refernce for events
// https://sciter.com/tag/events/
// In the scrpit below
// On click event on #btn1 we are
// creating a msgbox saying hi with
// concatinating value of name textbox to it
event click $(#btn1){
view.msgbox("Hi "+ self#name.text)
}
</script>
</body>
</html>
Event are easy to understand. If you are reading from eariler day. You might have seen some differnt code which was using jquery like syntax, like self$(selectore).on(...). Which was not looking ok.
If you are doing some process on some event ( like click ) then handle it with event ! right. It also make code more readble that this code is going to be executed on some event. It makes it looking different from normal functions.
package main
import (
"fmt"
"github.com/fatih/color"
"github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
)
func main() {
rect := sciter.NewRect(100, 100, 300, 300)
window, _:= window.New(sciter.SW_MAIN|
sciter.SW_CONTROLS|sciter.SW_ENABLE_DEBUG, rect)
window.LoadFile("./main.html")
window.SetTitle("Simple Input")
window.Show()
window.Run()
}
Link to code
GUI File
Making basic HTML layout with use of sugar syntax supported by sciter. I am using sciter syntax over defult HTML which also supported by sciter because its more consice and provieds more functionality like, we can define type of data input should accept on the tag itself so we don't have to do any datatype converions later on in TIScript.Input tag is to get input while we will listen for click action on button. So lets just define HTML first.
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Simple Input</h1>
<label for="">Your Name</label></br>
<!-- We are using sugar syntax provided by sciter
we are defining below that
input element is going to accept input as text
by saying "input|text"
if you want integer insted you can use "input|integer" also..
and by #name we are giving it id name
Sciter referance
https://sciter.com/sciter-html-parsing-flavour/
-->
<input|text #name>
// defining button element with id btn1
<button #btn1 >That's My Name</button>
...
</body>
</html>
We have created Input element that accepts data as text now we have to process it in TIScript.
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Simple Input</h1>
<label for="">Your Name</label></br>
<!-- We are using sugar syntax provided by sciter
we are defining below that
input element is going to accept input as text
by saying "input|text"
if you want integer insted you can use "input|integer" also..
and by #name we are giving it id name
-->
<input|text #name>
// defining button element with id btn1
<button #btn1 >That's My Name</button>
<script type="text/tiscript">
// sciter refernce for events
// https://sciter.com/tag/events/
// In the scrpit below
// On click event on #btn1 we are
// creating a msgbox saying hi with
// concatinating value of name textbox to it
event click $(#btn1){
view.msgbox("Hi "+ self#name.text)
}
</script>
</body>
</html>
Event are easy to understand. If you are reading from eariler day. You might have seen some differnt code which was using jquery like syntax, like self$(selectore).on(...). Which was not looking ok.
If you are doing some process on some event ( like click ) then handle it with event ! right. It also make code more readble that this code is going to be executed on some event. It makes it looking different from normal functions.
Golang File
main.gopackage main
import (
"fmt"
"github.com/fatih/color"
"github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
)
func main() {
rect := sciter.NewRect(100, 100, 300, 300)
window, _:= window.New(sciter.SW_MAIN|
sciter.SW_CONTROLS|sciter.SW_ENABLE_DEBUG, rect)
window.LoadFile("./main.html")
window.SetTitle("Simple Input")
window.Show()
window.Run()
}
 |
| Get Input In TIScript with sciter-sdk |
Comments
Post a Comment