Page 52 - MSDN Magazine, October 2017

Figure 4 Mapping Up AJAX Event Handlers to Create a New List Item
makes it extremely easy to declare an AJAX widget hierarchy. Combine p5.ajax with Hyperlambda to consume an AJAX TreeView widget, and some impressive efficiencies show up.
Let’s explore this. First, in addition to Phosphorus Five, you need to download System42 and put it into the main p5.webapp folder according to the instructions at bit.ly/2vbkNpg. Then start up System42, which contains an ultra-fast AJAX TreeView widget, open up “CMS,” create a new lambda page by clicking the +, and paste the code shown in Figure 5.
Click Settings, choose empty as your Template, click OK, save your page and click View page.
Try expanding the AJAX TreeView while inspecting what goes over the wire in your HTTP requests, and realize that you just built a folder browsing AJAX TreeView with 24 lines of Hyperlambda that will display your folders from your p5.webapp folder, and that its initial total bandwidth consumption was only 10.9KB!
If you compare these results with any other AJAX toolkit, you’ll often find that other toolkits require downloading several mega- bytes of JavaScript—in addition to all the other stuff that goes over the wire—while Hyperlambda TreeView has no more than 4.8KB of JavaScript.
This AJAX TreeView was built with a total of 717 lines of code, in pure Hyperlambda, using nothing but the Literal, Container and Void widgets. Most of its code is made up of comments, so roughly 300 lines of code were required to create the AJAX TreeView con- trol. The widget was consumed with 24 lines of Hyperlambda, which let you browse your folders on disk. But it would require thousands of lines of code to create the control with anything else, and hundreds of lines to consume it, as was done in the 24 lines of code in Figure 5.
If you wanted, you could now exchange three lines of code in the Hyperlambda example and end up with your own specialized Active Event custom widget, which would let you consume your specialized widget with a single line of code. Read how to do that at bit.ly/2t96gsQ.
So, you’re now able to create an AJAX TreeView that will browse your server’s folders with one line of code. To create something equivalent in other toolkits would often require hundreds of lines ofcodeinfourdifferentlanguages.Youdiditwithonelineofcode, in one programming language and it performs up to 300 times better than its competition.
Wrapping Up
Imagine being able to produce 100 times better results, 100 times faster and more optimized results, 100 times better quality, with 100 times fewer less bugs, and being 100 times more productive than you were before. To make sure you’re using the latest goods, download Phosphorus Five at bit.ly/2uwNv65 and System42 at bit.ly/2vbkNpg. n
Thomas hansen has been creating software since he was 8 years old, when he started writing code using the Oric-1 computer in 1982. Occasionally, he creates code that does more good than harm. His passions include the Web, AJAX, Agile methodologies and software architecture. Contact him at thomas@gaiasoul.com.
Thanks to the following Microsoft technical expert for reviewing this article: James McCaffrey
using System;
namespace foobar {
public partial class Default : p5.ajax.core.AjaxPage {
protected p5.ajax.widgets.Container bar;
[p5.ajax.core.WebMethod]
public void foo_onclick(p5.ajax.widgets.Literal sender, EventArgs args) {
// Using the factory method to create a new child widget for our "ul" widget. var widget = bar.CreatePersistentControl<p5.ajax.widgets.Literal>(); widget.Element = "li";
widget.innerValue = "Try clicking me too!";
// Notice we supply the name of the method below here.
widget ["onclick"] = "secondary_onclick"; }
[p5.ajax.core.WebMethod]
public void initial_onclick(p5.ajax.widgets.Literal sender, EventArgs args) {
sender.innerValue = "I was clicked!"; }
[p5.ajax.core.WebMethod]
public void secondary_onclick(p5.ajax.widgets.Literal sender, EventArgs args) {
sender.innerValue = "I was ALSO clicked!"; }
} }
app AJAX development into a thing that can be done just as easily as plain-old Windows Forms development. And in the process, you ended up with 100 times faster and more responsive Web apps.
An Exercise in Hyperlambda
A few months back I wrote an article in the June 2017 issue of MSDN Magazine titled “Make C# More Dynamic with Hyperlambda” (msdn.com/magazine/mt809119), which explored the non-traditional Hyperlambda programming language with its roots in execution trees. I bring this up because Hyperlambda’s tree-based approach
Figure 5 Creating an AJAX TreeView,
Which Will Allow for Traversing Folders on Disk
create-widget parent:content widgets
sys42.widgets.tree crawl:true items
root:/ .on-get-items
list-folders:x:/../*/_item-id?value for-each:x:/@list-folders/*?name
list-folders:x:/@_dp?value split:x:/@_dp?value
=:/ add:x:/../*/return/*
src:@"{0}:{1}" :x:/@split/0/-?name :x:/@_dp?value
if:x:/@list-folders/* not
add:x:/../*/return/*/items/0/- src
class:tree-leaf return
items
48 msdn magazine
Web Development