Skip to main content

Get Input In TIScript with sciter-sdk

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.

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.go
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()
}


Get Input In TIScript with sciter-sdk
Get Input In TIScript with sciter-sdk
Link to code

Comments

Popular posts from this blog

Google blogger Ideas panel

Google blogger Ideas  I opened by blogger today, and..   I got this.  Google blogger Ideas  A panel suggesting a topic on which I can write my next blog. It's fetching unanswered question from web according to your previous post and topics. It was something, I was really looking for, after all it takes time to finding subject on which to write next and still being in the same niche.  Awesome feature Blogger! 

Firebase - update a spacific fields of single element of object of array in firestore

Firebase - update a spacific fields of single element of object of array in firestore  Its actully advisable to use map instead of array when ever it is possible. But, there are cetain cases where you don't have option to do so.  For example, you are directly saving the response from some outer source without any modification and they send you an array. In this case you will have array to work with. Firestore does not support array here is why  "bad things can happen if you have multiple clients all trying to update or delete array elements at specific indexes. In the past, Cloud Firestore addressed these issues by limiting what you can do with arrays " For more details information you can refer to Kato Richardson post Best Practices: Arrays in Firebase .  Firestore document having array [ used from stackoverflow question ] Suppose you have array of object something like shown in array. Now you want to update endTime field of the object on the index [1]

Sciter : GUI Application with Golang using HTML/CSS

GUI library for golang sciter This is the words from Sciter's Web site, Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications. Various GUI frameworks offer different UI declaration and styling languages, such as QML and  XAML (Microsoft WPF) . On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.   Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs / ui  library   i already have written a post on it. You can read it on post gui programming with golang .  But this library is still under construction and has no support for production apps. Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb. Which is 15mb of go and other was the e