Skip to main content

Hello Sciter Program

Hello sciter program
Hello sciter program


As we are used to doing a hello world program for learning a new programming language or any framework.

In Sciter for GUI, you have to use web stacks [ means HTML/CSS] to create a UI of the application. Either you can bind HTML inside your go code or you can create a separate HTML file for it.

In some starting examples, we will go with a separate HTML file to make things easy to understand.
Easy thing first let start with GUI of the application as its just a simple HTML file

So here is the HTML file of [ GUI File ] Of the Application 


GUI FILE 


Hello.html

<html>
    <head>
        <title>Harmony</title>
        <!-- style definitions -->
        <style>
            h1{
                text-align: center
            }
        </style>        
    </head>
    <body>
        <h1> Hello Sciter </h1>     
    </body>
</html>

Don't think I have to explain upper code as its quite obvious and easy to understand for anyone who is doing programming and reading an online blog to learn sciter [ which is SDK to create GUI application with  web stack ]

GoLang File

This is the first example, yes "Hello Sciter" example. To get you excited about what you are going to learn. I have shown the important lines of code with blue colour and highlighted steps. The code is explained below the complication of code

Let's Start with the main function 

< Import necessary packages > 
func main(){
   // Code For Creating Sciter GUI App
}

To Create Sciter GUI We have to go through certain steps
Define window size you want
Define window type you want
Define GUI content that means HTML ( Or HTML file ) you want to load on that window

So Let start with defining the size of the window

func main(){
// Defines rectangle of 300,500 
rect := sciter.NewRect(100, 100, 600, 400)
...
}

Now Define what kind of window we are expecting. Type of windows means Main Window, Dialog Box, Window with Resize Controls etc.
So in our case, we need the main window having resizing controls. So

func main(){
// Defines rectangle of 300,500 
rect := sciter.NewRect(100, 100, 600, 400)

// Creating the main window with resizing control having
 // size of the rectangle we have defined above
window, _:= window.New(sciter.SW_MAIN|sciter.SW_CONTROLS,rect
...
}

Next is the GUI. From where sciter load the GUI. We are using an HTML file for now. So To Load HTML file as GUI in sciter 

func main(){
// Defines rectangle of 300,500 
rect := sciter.NewRect(100, 100, 600, 400)

// Creating the main window with resizing control having
 // size of the rectangle we have defined above
window, _ := window.New(sciter.SW_MAIN|sciter.SW_CONTROLS,rect

  // Indicatgin HTML file to be loaded as GUI
window.LoadFile("./hello.html")
...
}

Now Before we can run it, we have to set the title to the window so it can be shown on the title bar of the application.

func main(){
// Defines rectangle of 300,500 
rect := sciter.NewRect(100, 100, 600, 400)

// Creating the main window with resizing control having
 // size of the rectangle we have defined above
window,_ := window.New(sciter.SW_MAIN|sciter.SW_CONTROLS,rect) 

window.LoadFile("./hello.html")     
 // Set title for application
window.SetTitle("Hello ")
...
}

And at last, make window show and the do window running. Remember Make window show first and run at last. Run() should be the last call because it runs continuously and the window will be there while the run is the looping function().

func main(){
// Defines rectangle of 300,500 
rect := sciter.NewRect(100, 100, 600, 400)

// Creating the main window with resizing control having
 // size of the rectangle we have defined above
window, _ := window.New(sciter.SW_MAIN|sciter.SW_CONTROLS,rect) 

window.LoadFile("./hello.html")      

window.SetTitle("Hello ")
window.Show()
window.Run()
}

Hello Sciter
Hello Sciter


main.go [ complete code ]

package main

import (
 "github.com/fatih/color"
 "github.com/sciter-sdk/go-sciter"
 "github.com/sciter-sdk/go-sciter/window"
)

func main(){
// Defines rectangle of 300,500 
rect := sciter.NewRect(100, 100, 600, 400)

// Creating the main window with resizing control having
        // size of the rectangle we have defined above
window, windowsGenerateionError := window.New(
                            sciter.SW_MAIN|sciter.SW_CONTROLS, 
                            rect) 
if windowsGenerateionError != nil {
   color.RedString(
                               "Failed to generate sciter window ", 
                                windowsGenerateionError.Error())
}

uiLoadingError := window.LoadFile("./hello.html")
        if uiLoadingError != nil {
        color.RedString("Failed to load ui file ",
                                      uiLoadingError.Error())
}

window.SetTitle("Hello ")

window.Show()
window.Run()

}


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