Using Windows On The Web - The Power and The Annoyance of JavaScript
Like Python, I have a love/hate relationship with JavaScript. I love the power of both languages, but sometimes their syntax, lack of binding, and debugging facilities leave me a little cold. With node.js taking over the world of processing, we must see JavaScript as the language which truly breaks away from a desktop/server-based infrastructure. A long time back, I gave up writing Windows programs (EXE), and converted all my code to Web-based versions. I also adopted the MVC (Model, View and Controller) approach to software design. Both these moves have helped me to create a solid foundation for my academic work.
I've been struggling a bit to get pop-up Windows to work on Web pages, but I've finally cracked it. I am using the Kendo JavaScript implementation, and while the demos work well on their site, it often takes a bit of experimentation to get them to work as they should. So here is my demo of using a Window on an iPad:
While it might not seem like a major challenge to do this, there are many issues when integrating it with live code. The two major stumbling blocks were to customise the window and then get rid of it. As I use ASP.NET MVC for my site, I integrated the Window component and set some parameters, and it creates the Window object for me. For this we create a Window with animation and use a ViewBag parameter to make the window visible or not (the ViewBag parameter is set in the controller). We then integrate an iframe to show the content:
@(Html.Kendo().Window().Name("window")
.Animation(true)
.Actions(actions => actions
.Close()
)
.Title("Information").Resizable()
.Content(@<text><iframe width="100%"
src="@Html.Display("tbiframe")" height="800px"></iframe></text>)
.Visible(@ViewBag.DisplayVideo)
.Modal(true)
.Draggable(true)
.Width(800)
)
The controller then sets whether the Window is viewable (through ViewBag.DisplayVideo), and also the HTML content of the iframe.
You can try here.
A major challenge was to find out how we can customise the Window, and after searching for information, I found it is CSS parameters of the k-window that need to be modified. In this case we set the style before we call the Window component.
Here is the setup for the titlebar to have white text and a grey background:
<style type="text/css">
div.k-window-titlebar
{
font-size: 1em;
line-height: 1.2;
color: #000000;
background-color:#f2ecec
}
</style>
One of the challenges, that I solved last night was to integrate a button into the content of the Window, as I didn't think the navigation buttons in the Window bar were displayed correctly. The solution was to add a button in the Window and give it the name of "close-button":
@(Html.Kendo().Window().Name("window")
.Content(@<text><button class="k-button close-button">Close</button>
<iframe width="100%" src="@Html.Display("tbiframe")" height="800px"></iframe></text>)
)
Next, in JavaScript, we add a click event method onto ".close-button":
<script>
$(document).ready(function () {
$(".close-button").click(function () {
$(this).closest(".k-window-content").
data("kendoWindow").close();
});
});
</script>
In this way, the button appears in the Window, and we can find the button and find the closest window to the button, and then close it.
Conclusions
Many years ago I said that JavaScript was dead, but it is still alive and kicking. You can do amazing things with it, but it isn't the easiest language in the world to integrate.
Anyway, go have some fun with my tests:
https://asecuritysite.com/tests
The should work on your mobile device too. If you have any feedback on how I could improve things, please email me.