Starting Your Project

To initiate our project, we can use either the new_app or new_webapp method, similar to our last session. The key difference is that new_webapp automatically integrates the Session extension, along with the Files extension from Toolips and a public directory for file routing. In contrast, new_app is typically suited for static sites. For our current project, we will choose the new_webapp method, which takes a project name as a positional argument.

Upon creating our new project directory, we will import the necessary packages:

using Toolips

using ToolipsSession

Additionally, the Files and Session extensions will be included in our server extensions' Vector:

extensions = Vector{ServerExtension}([Logger(), Files(), Session()])

Starting the Web Server

The start function initializes the WebServer as follows:

function start(IP::String = "127.0.0.1", PORT::Integer = 8000)

ws = WebServer(IP, PORT, routes = routes, extensions = extensions)

ws.start()

end

We will also find ToolipsSession included in our Project.toml file. Although we will not need any additional extensions for this project, I would like to briefly outline how to add them. Navigate to your project directory (where Project.toml is located) using Julia's cd method, bash, or the Julia shell REPL. Once in the correct folder, enter the Pkg REPL by pressing ]. After that, type activate . and add your desired extension using the add command.

pkg> add ToolipsMarkdown

Understanding Extensions

Extensions are categorized under ServerExtensions, which can accommodate various extensions themselves. You can access more information by using the ? command:

help?> ToolipsSession

Created in June 2022 by the Chifi team, ToolipsSession is an open-source module that enables interactivity on web pages simply by integrating the Session extension into your ServerTemplate.

Example Setup

To illustrate the functionality of ToolipsSession, we will begin by editing our home function, currently set to a default hello world application:

function home(c::Connection)

end

Next, we'll craft a body for this function:

function home(c::Connection)

ourbody = body("ourbody")

end

We can create a centered div and a greeting heading:

newdiv = div("newdiv", align = "center")

newheading = h("newheading", 2, text = "Hello there!")

Now, we will add a button that will change the alignment whenever clicked:

newbutton = button("newbutton", text = "click me to change alignment")

We need to establish an event connection with the button to perform the alignment change using the on method:

on(c, newbutton, "click") do cm::ComponentModifier

cm[newdiv] = "align" => "right"

end

Finally, we will push the components into our body and write this to the Connection:

function home(c::Connection)

ourbody = body("ourbody")

newdiv = div("newdiv", align = "center")

newheading = h("newheading", 2, text = "Hello there!")

newbutton = button("newbutton", text = "click me to change alignment")

on(c, newbutton, "click") do cm::ComponentModifier

cm[newdiv] = "align" => "right"

end

push!(newdiv, newheading, newbutton)

push!(ourbody, newdiv)

write!(c, ourbody)

end

Using the Development Server

Next, we will include dev.jl to start our development server. When the button is clicked, it will change the alignment of the div. You can even track the alignment state by using getindex to retrieve the property directly.

Additional Styling Options

We can further enhance our components by modifying their styles. For instance, we can set the heading's color to red:

style!(newheading, "color" => "red")

We can even implement a transition effect for a smoother experience:

style!(newheading, "color" => "red", "transition" => "5s")

In our next tutorial, we will create a simple website called DarkMode.jl, where we will explore two new packages: ToolipsMarkdown and ToolipsDefaults.

YouTube Video Insights

To deepen your understanding, check out the following video:

JuliaCon 2020 | Write a WebApp in Julia with Dashboards.jl | Dhairya Gandhi

This presentation covers how to build a web application using Julia's Dashboards.jl framework.

Another useful video is:

Create a web app with Genie Builder GUI - Julia Tutorial

This tutorial walks you through building a web application using the Genie Builder GUI in Julia.