How George Boole helped me in JavaScript, HTML, CSS

It’s quite simple example I have experienced recently. But I think to share notes on blog, so that I remember this case and maybe someone else might use it in future.

cool-boole-700x467

Task is about Multipart form with dropdown which defines (control) which part of UI to render (show/hide) and depend on file field values submit button should be enabled/disabled. Key point, that the logic of interaction should be one single function/formula.

multipart_form

Main part of HTML:

Main part of JavaScript:

Task implementation notes

  1. By default there should be only 1 dropdown – set of types how UI will behave when u select dropdown.
    • Used Knockout data-bind="options ..."
    • Used Knockout this.uiTypes = ko.observableArray() for array/set of types.
    • Used Knockout this.selectedType = ko.observable() for selected value in dropdown
    • Used Knockout this.selectedType.subscribe() approach to receive always new value to bind.
  2. When you select “1 field type” it should show one upload filed, but “Execute” button should be disabled, until u provide real file name.
    • Used this.showField1 = ko.observable(false);
  3. When you select “2 fields type” – almost the same, but both field’s values should be provided. And if you select 1st then 2nd or 2nd then 1st, logic must be the same.
    • Used this.showField2 = ko.observable(false);
    • And very special piece of code, where Boolean logic and my experience with microelectronics helped me function AndAndXnor()
  4. Data binding between dropdown, UI containers for upload fields, uplod file values, execution button and reset values on submit should be implemented with Knockout.JS.
    • Main “watcher/observation” function but in Knockout terms it’s “computed” – this.enableExecutionButton = ko.computed(function(){...})
    • Interesting Knockout feature – data-bind="submit: pseudoSubmitForm" for FORM tag

Special note about Boolean Logic as help and fun 🙂

Initially I had issue – as soon as I selected 1 upload field, button “Execute” was enabled, which is not ok.
So I started to think on more complex logic:

enableExecutionButton if (
 (showField1 AND showField2 AND field1Value AND fieldValue2)  // This is case for 2 fields
 OR 
 (showField1 AND NOT-showField2 AND field1Value AND NOT-fieldValue2) // This is case of 1 field only
)

So far so good – logic works fine. But it’s complicated a bit. So I simplified using Boolean rules:

(A*B*X*Y) + (A*!B*X*!Y) => (A*X) * (B*Y + !B*!Y);

schemeit-project-1
And again, so far all works fine.
But have a look, last part of formula is in fact inverted XOR operation – XNOR.
Unfortunately in JavaScript we have only bitwise XOR. So my try to simplify more – failed:

(a&&x) && !(b^y);

Because ^ is bitwise but not logical operation. So if we have Logical XNOR in JavaScript, then formula would look like this:

schemeit-project-2

Having this logical formula in mind, I gave a name to the function – “AndAndXnor“, used it but I returned to previous simplified formula (without XNOR inside).

You can try/see how it works here

Resources

 

george_boole_and_his_algebra

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s