04 - Creating a Window

In this chapter, we're going to create our own window. We're going to do this the same way we customized an $alert by giving it an object.

The function name for creating a window is $window and you can view it's documentation here, though I'll explain the important things here.

The same object you used earlier, being a WinObject, is used for this too, except we won't be using the msg property.

Using a WinObject

Let's start by giving a WinObject with the title "Example" to $window:

$window({
    title: "Example"
})

If you run this code, you'll now see a blank window with the title "Example". To show things within the window, we can use the url or html property. The url property can be the url to a website that will be displayed within the window, and the html property can be any text or html that should be displayed.

Please note you can't use the url property on sites that chose to disable iframing, which includes Google and Youtube.

We're going to use the url property later for more advanced stuff, but for now let's just use the html parameter to display "Hello World!"

$window({
    title: "Example",
    html: "Hello World"
})

Changing more properties

We're going to set an icon by setting the /c/ path to it (urls work too), we're going to make it non-resizable, we're going to wrap the html in a <b> tag so the text becomes bold, and we're going to make the window size 200x125 by setting the properties for all of those things.

$window({
    title: "Example",
    html: "<b> Hello World </b>",
    icon: "/c/sys/skins/w93/scan.png",
    maximizable: false,
    resizable: false,
    width: 200,
    height: 125
})

Tip: Don't forget you can see all the properties you can use on this page from the $window documentation. You'll have to use it later.

And we're done with this chapter! Next chapter we're going to show a html file in a window. You're pretty far at this point and know the basics of how to use these functions.

You can try looking around the documentation and trying things out before going to the next chapter.

You're also getting closer to our first project, a text editor!

--> [Next Chapter]