Creating your own Ajax datagrid in Hyperlambda using Micro 2

In the following youtube video, I am demonstrating the “opposite” of what I demonstrated in my previous blog. This time, instead of overriding the databind Active Event, I polymorphistically override the actual extension widget itself.

This allows me to declare my columns without repeating myself, while still being able to inject my own custom widgets in its column headers.

The code can be found below the video.

First run the following code through your System42’s executor.

create-event:micro.samples.widgets.grid-1

  /*
   * Used to separated arguments from the rest of our lambda object.
   */
  .signal

  /*
   * Adding [rows] into [micro.widgets.grid] invocation.
   */
  add:x:/../*/micro.widgets.grid
    src:x:/@.signal/--/rows

  /*
   * Looping through each [columns] specified, and creating a
   * link-button out of each header cell.
   */
  for-each:x:/@.signal/--/columns/*
    add:x:/../*/micro.widgets.grid/*/columns
      src:x:/@_dp/#?name
    eval-x:x:/+/**/a/*/innerValue
    add:x:/../*/micro.widgets.grid/*/columns/0/-
      src
        widgets
          a
            href:#
            role:button
            innerValue:x:/@_dp/#?name
            onclick
              create-widgets
                micro.widgets.modal:my-modal
                  class:micro-modal
                  widgets
                    h3
                      innerValue:You clicked a column header
                    p
                      innerValue:Implement sorting here ...
                    div
                      class:right
                      widgets
                        button
                          innerValue:Close
                          onclick
                            delete-widget:my-modal

  /*
   * Invoking "mother event" and returning results.
   */
  micro.widgets.grid:x:/../*/_arg?value
    columns
  add:x:/+
    src:x:/@micro.widgets.grid/*
  return

Then create a new lambda page in your CMS, and make sure you set its “template” settings to “empty”, and paste in the following code.

create-widget
  class:container
  oninit
    p5.web.include-css-file:@MICRO/media/main.css
    p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
  widgets
    div
      class:row
      widgets
        div
          class:col bg shaded rounded
          widgets
            micro.samples.widgets.grid-1:my-grid
              columns
                Name
                Email
                Phone
              rows
                item
                  Name:Thomas Hansen
                  Email:thomas@gaiasoul.com
                  Phone:90909090
                item
                  Name:John Doe
                  Email:john@doe.com
                  Phone:91919191

It is easy to dismiss Hyperlambda as being a not “real” programming language, because of its lack of traditional OOP mechanisms. However, as you can clearly see above, even polymorphistically overriding existing Active Events, is still easily accomplished, allowing you to reuse pre-existing functionality.

In fact, arguably the inheritance and polymorphism mechanisms in Hyperlambda, are far superior to polymorphism in traditional class based OOP programming languages – Because it makes the Liskov Substitution Principle (LSP) obsolete.

Leave a Reply

Please log in using one of these methods to post your comment:

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