April 29th, 2017

Bindows using ASP .NET14

Today a customer made me aware of the fact that we have no sample for
creating Bindows apps using ASP .Net. He wanted a sample on how to add a
gauge and setting dynamic properties in the XML definition.

Of course we need ASP .Net samples. The forum can be seen as a sample on
server communication, but it uses Perl for the backend. I decided to make
a small and simple, yet instructive sample. I hope I was successful.

An application generated from dynamic sources is not much different from one
made of static sources. You still need an ‘HTML file’ and an ‘XML file’.
The difference is that both these ‘files’ are generated on demand and their
content can be different from one request to another based on server logic.

This sample was made using the free gauges. You can download them
here.
It is not difficult to translate the lessons learned in this sample to a
full Bindows application (ADF). Just replace the script in the ‘HTML file’
with application.start(…) or biExec(…) just as you would with static
HTML and XML sources.

For this sample my ‘HTML file’ is Default.aspx, the file that is
automatically generated by the WebSite project template. I edited its
content with the following:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html>
<head>
    <title></title>
    <!-- Load free Bindows Gauges package -->
    <script type="text/javascript" src="bindows_gauges/bindows_gauges.js"></script>
</head>
<body>
<p>This is a very simple sample displaying a gauge.</p>
<div id="gaugeDiv" style="width: 250px; height: 250px;"></div>

<script type="text/javascript">
  var gauge = bindows.loadGaugeIntoDiv("Gauge.aspx", "gaugeDiv");
  function setNeedleValue(nValue) {
      gauge.needle.setValue(nValue);
      gauge.value.setText(nValue);
  }

//  setNeedleValue(25);
  gauge.unit.setText("[kW]");
</script>
</body>
</html>

Then I added a new aspx file (Gauge.aspx) using a random template. ;) This
also created a code-behind file (Gauge.aspx.cs) that I deleted. Because I
deleted that I also edited the file header of the aspx file to remove the
reference. All I kept was this bit:

<%@ Page Language="C#" %>

In the content I pasted the sample gauge from the free gauges package and
edited it up a bit to suit my purposes. I added a <% %>
section at the top, where I initialized some C# variables:

<%
	// Two values setting the start locations for warning hints on the gauge scale.
	// These could be configured from user preferences.
	int warnLow = 25;
	int warnHigh = 180;
	int value = 125;

	// Error handling / range assertions.
	if (warnLow > warnHigh)
		throw new ArgumentException("The low range must be less than the high range.");
	else if (warnHigh < 0 || warnLow < 0 || value  300 || warnLow > 300 || value > 300)
		throw new ArgumentException("Values must be between 0 - 300.");
%>

Further down in the gauge XML I referenced these variables. Here’s an example:

<Gauge2RadialScale startValue="0" endValue="300">
	<!-- Needle -->
	<Gauge2RadialNeedle id="needle" value="<%=value%>" stroke="#000000" strokeWidth="3"
						innerRadius="0" innerWidth="40"
						outerRadius="360" outerWidth="5">
		<Gauge2RadialNeedle.Filler>
			<Gauge2RadialGradientFiller color1="#808080" color2="#000000"/>
		</Gauge2RadialNeedle.Filler>
	</Gauge2RadialNeedle>
</Gauge2RadialScale>

View Gauge.aspx source

Download entire web site source code (ZIP).

New Menu Implementation2

Introduction

Browsers have changed since the first menu implementations of Bindows were created. New restrictions caused various issues for our old menu implementations. For Bindows 4.0, I have been working on a brand new implementation written with these restrictions in mind. As a bonus, we now have nicer themes and we can expand the range of browsers we support. I hope you like what we’ve created.

Reasons for the change

In Bindows 3.0 (and previous versions) we had two different implementations for menus, XUL popups for Firefox and WebFX DHTML Menus 4 for Internet Explorer. These implementations allowed menus to be displayed anywhere on the screen. In Bindows 4.0 we have discarded these implementations and wrote a brand new one. Apart from unifying the two browsers, there are few additional reasons for this.

Security issues

The ability to display a popup anywhere can be used maliciously (e.g. by hiding and impersonating an element of the main browser window). Since these implementations were first created, browser security patches have forbidden popups from being displayed outside the window (or even the frame) where they were created. As a result, Bindows menus that were placed near the bottom edge of the window/frame displayed some strange behavior. We were able to solve several of these issues, but some proved too difficult.

Additional browser support

Bindows 4.0 introduces support for WebKit based browsers (i.e. Safari and Google Chrome). Neither of the menu implementations would work for these browsers, so we would have to add a new implementation anyway. We might as well write one that would work for all browsers, and solve our menu issues at the same time.

API Changes

As a result of the new implementation there has been one major API change. The left and top properties no longer relate to the screen, but to the parent component (which is usually the BiApplicationWindow).

Two new methods have been added: popupAtComponent(oComponent) and popupAtMouse(oMouseEvent). The first sets the component property and displays the menu just below oComponent. The latter uses the mouse coordinates (from oMouseEvent) to display the menu.

Themes

The fact that we have a single implementation for all supported browsers means we also have only one set of CSS styles (for each theme), which applies to all users. When we created our brand new themes for Bindows 4.0, we took this opportunity to revamp the theme properties for menus, making the CSS classes consistent with the rest of Bindows. Your old themes will not be compatible with Bindows 4.0 without some changes. The good news is that we have many compatible themes, free to download at http://www.bindows.net/download/themes/.

Imhotep theme designed by Chris Lin. Proudly powered by Wordpress.
XHTML | CSS | RSS | Comments RSS