Gnoga
What is Gnoga
Defining Gnoga is an important first step to using it. Gnoga is a framework and associated tools for developing GUI applications using the Ada language, leveraging web technologies to provide a rendering engine.
Gnoga should not be confused with a web development framework. While Gnoga is very capable of creating web applications and perform in that role and is even more capable than most web development frameworks, using Gnoga for web applications is only one possibility.
Native applications for desktop and mobile are just as easy to create, all using the same code base.
How does Gnoga works ?
A Gnoga application can be divided into three parts:
- The application code written in Ada using the Gnoga framework and tools;
- The communication layer;
- The GUI rendering surface, an HTML-5 compliant browser or an embedded widget for native platform development.
The communication layer is not passive as in typical web programming using HTTP, nor is it using Ajax calls to simulate a live-active connection. It is an active, open connection using HTML5 web sockets or direct access at the API level to an embedded widget.
Since the communication layer is always active there is a stateful constant connection to the rendering surface as there is in traditional desktop GUI development even if the rendering surface is a remote browser.
The idea of using publishing technologies to display a GUI is not new. Next used Postscript; Mac OS X uses PDF; and Gnoga uses HTML 5.
v22 project manager’s note: Gnoga is pure genius that was globally written in about three months by David Botton, with the help of Dmitri Kazakov for the network layer. Pascal Pignard later implemented UTF-8 in Gnoga with his remarkable UXString package. There really are some gifted people on this earth.
Singleton and multi-connect applications
In the multi-connect applications, we use the connection’s main view to store data specific for each user connection. It is often convenient to have a data structure containing the data specific to a connection. Gnoga offers a way to associate data to a connection and allow access to those data through any GUI element on that connection.
Directory structure when developing apps
If you use the gnoga_make tool it will set up a development directory structure in addition to creating a skeleton application. (See the Singleton and Multi-Connect examples). For reference the following directory structure is the basic structure:
App Dir
|
|___ bin - your gnoga app binary
|
|___ html - boot.html (or other boot loader used)
|
|___ js - must contain jquery.min.js and boot.js
|
|___ css - optional, all files served as CSS files
|
|___ img - optional, files served as graphics files
|
|___ src - Source code for your gnoga app
|
|___ obj - Build objects
|
|___ templates - optional, if using Gnoga.Server.Template_Parser
|
|___ upload - optional, optional directory for incoming filesPlugins and Modules
Users can write and publish to the Gnoga Marketplace two Gnoga-specific UI extension types, Plugins and Modules.
Plugins, including jQuery, jQueryUI, Boot_Strap, and Ace_Editor, are bindings to JavaScript libraries for use on the client side.
Modules are unique Gnoga-based UI elements written with Gnoga.
Gnoga Concepts: in and out of the DOM
An HTML document is a hierarchical collection of objects. In a browser window, the displayed document is the browser’s DOM, but it is possible within JavaScript to have objects that are not in the main DOM and have their own hierarchical collections, DOMs.
Gnoga maintains on the browser side JavaScript references to GUI elements it creates; these elements may or may not also be in the browser’s DOM. When creating a new object in Gnoga, if the parent is in the browser’s DOM, the child will be there as well. If not, it will just be part of the parent’s individual DOM and not be visible, and even changing the visibility of that object will not make it appear on the browser window since they are not in the Browser’s DOM.
To take an object and all its children out of the DOM use Gnoga.Gui.Element.Remove; to place it back in the DOM use one of the Place_* methods in Gnoga.Gui.Element.
Gnoga Concepts: Display, Visible, Hidden
HTML5 uses a few different independently working properties for visibility.
Visible will turn on or off the visibility of an element and its children, but the objects will still take the same space on the page.
Hidden will turn off visibility and the object and its children will no longer take up space on the page, either.
Display changes how the elements are laid out by the browser. Using Display (None) acts in the same fashion as Hidden.
Gnoga Concepts: Inner_HTML, Text and Value
Retrieving the contents of an Element in Gnoga differs depending on the type of Element. For form Elements the Value method is used. For others Text can be used to retrieve the text alone or Inner_HTML to retrieve the contents including any HTML tags present.
The reason there are different methods is based on the way the underlying HTML 5 works. Text and Inner\_HTML are retrieving all child nodes with in the element while Value is an attribute of Form elements. So Text or Inner_HTML will return the contents of every child.
Credits
Most of the information in this chapter is taken from the Gnoga documentation, written by Gnoga author David Botton.