Click here to Skip to main content
Click here to Skip to main content
Go to top

Hijk Project -Tiny WebAPI kit

, 3 Jun 2014
Rate this:
Please Sign up or sign in to vote.
A tiny intuitive WebAPI kit, compatible with any asp.net frameworks and most javascript frameworks.

Download Hijk v1.1 with DLL

Download Hijk v1.1 code only

Introduction   

Hijk is an acronym for HTML + iBoxDB + jQuery kit. It's a tiny kit, help you easily make a Prototype of Rich UI. Zero configuration and compatible with any asp.net frameworks.  

Background     

When we are doing Object-Oriented Programming , a relationship dominates the mind is "Class-Instance",many years people tried to separate or improve this relationship, introduced CORBA , SOAP etc. Although we have many suppliers, less consumers, the most important client's platforms of web are browsers, these are lack of corresponding component. Fortunately, we have javascript, and we can make a bridge between C# Class and JavaScript Object. Usually, we want to share data, so we need a database running on server side.  At UI level, HTML designers are around the world, it is easy to learn and easy to use.    

Because this requirements mentioned above, if we have a kit that includes database engine and 'C#-javascript' binder that can easily manipulates HTML, it will be helpful, so I collected resources, added glue codes, and made a tiny kit.   

HelloWorld      

Let's straight to topic,  creating a javascript object from a C# class  

[Server Side] a HelloWorld class  

   public class HelloWorld
    {
        public static string Say()
        {
            return "Hello World" ;
        }
    } 

 [Client Side] initializing a javascript object by using new.aspx 

<script type="text/javascript" src="new.aspx?c=HelloWorld"></script> 

Use javascript object to call C# code. "_alertResult" and "_onerror" are callback functions 

HelloWorld.Say()(_alertResult,_onerror)    

Is that all? yes, let's see the result.

 

How about the configuration? this follow is all my setting  

<?xml version="1.0"?>
<configuration>
  <system.web>    
     <compilation debug="true"  targetFramework="4.0"/>
     <customErrors mode="Off"/>
  </system.web>
</configuration> 

 

Model 

 

 

More Methods  

At the above, it called a parameterless method, of course you can pass arguments 

 [Server Side]  

  public  static string HappyBirthday( string name , long age)
        {
            return "HappyBirthday " + name + " " + age;
        }

 [Client Side] 

HelloWorld.HappyBirthday('Andy', 99)(_alertResult,_onerror ) 

 Someone maybe like object-oriented style, it takes more codes, but will get benefits at the following section.

 [Server Side] 

        public class UserRequest
        {
            public string Name { get; set; }
            public long Age;
 
            public string Name2;
            public long Age2 { get; set; }
        }
        public class UserResponse
        {
            public string Message;
            public long TotalAge { get; set; }
        }
        public static UserResponse HappyBirthday2( UserRequest user )
        {
            return new UserResponse
            {
                Message = "HappyBirthday2 " + user.Name + " " + user.Age + " and " + user.Name2 + " " + user.Age2,
                TotalAge = user.Age + user.Age2
            };
        } 

  [Client Side] 

HelloWorld.HappyBirthday2( {Name:'N1',Age:12,Name2:'N2',Age2:21} )(_callback2,_onerror);
      function _callback2(r) { 
          var o = $.parseJSON(r);
          alert( o.Message + ' \r\n TotalAge is ' + o.TotalAge);
      } 

 

Open Postcard System 

Sharing data is important for a website. This section we will implement a prototype of postcard system, you may have seem many postcard applications, but this has a slight difference, it is OpenSystem. If you want to send a pastcard to Andy, just do it,  anyone is named "Andy" can read this card. It maybe can help people make friends.  

This kit includes an embedded database named 'iBoxDB', it is very usefull for making prototype, also it runs very fast. you don't need a lot of installations to setup, only copy the following codes to project. 

 [Server Side] Creating DatabaseConfig for database  

    class EmbeddedServer : LocalDatabaseServer
    {
        class DBConfig : BoxFileStreamConfig
        {
            public DBConfig()
            {
                this.EnsureTable<Postcard.Card>("Card", "ID");
                this.EnsureIndex<Postcard.Card>("Card", "To"); 
            }
        }
        protected override DatabaseConfig BuildDatabaseConfig(long addr)
        {
            return new DBConfig();
        }
    }

EmbeddedServer Server = new EmbeddedServer();
database = Server.GetInstance();

 [Server Side]  Providing Postcard Services, normal C# codes, the only differences are the 'Insert' and 'Select' methods that work like SQL, but accept C# objects not just a string.

    public class Postcard
    {
        public class Card
        {
            public int ID { get; set; }
            public string To { get; set; }
            public string From { get; set; }
            public string Text;
        }
        public static List<Card> Search(string to, string text)
        {
            using (var box = WebApp.GetDatabase().Cube())
            {
                if (IsEmpty(to))
                {
                    return new List<Card>(box.Select<Card>("from Card limit 0, 20"));
                }
                var table = box.Select<Card>("from Card where To == ?", to);
                if (IsEmpty(text))
                {
                    return new List<Card>(table);
                }
                else
                {
                    var r = from o in table
                            where o.Text.Contains(text)
                            select o;
                    return new List<Card>(r);
                }
            }
        }

        public static int InsertCard(Card card)
        {
            using (var box = WebApp.GetDatabase().Cube())
            {
                card.ID = (int)box.NewId(0, 1);
                box.Bind("Card").Insert(card);
                if (box.Commit() == CommitResult.OK)
                {
                    return card.ID;
                }
                else
                {
                    return -1;
                }
            }
        }

    }


[Client Side] Send & Search , call the server side services.

<script type="text/javascript" src="new.aspx?c=Postcard"></script>
<script type="text/javascript"> 
    function InsertCard() { 
        Postcard.InsertCard(  { TO: $("#to").val(), From: $("#from").val(), Text: $("#text").val() }   )
        (
          function (r) {
              $("#result").html('ID ' + r);
          },
          _onerror
        );
    }
      function Search() {
          Postcard.Search($("#to").val(), $("#text").val())
          (
             function (r) {
                 var list = $.parseJSON(r);
                 for (var i = 0; i < list.length; i++) {
                     ...
                 }
             },
             _onerror
          );
      }
</script> 

 It is done, a RichUI application with several lines. But wait...

 

3D UI Elements

What is 'RichUI',  yesterday, nice looking button with no full page refresh is called 'Rich', buttons show up from nowhere that users don't care about. Today buttons need unique icos and popup with animations.  Because JavaScript has no backend thread, that will lead to another problem, if you designed a 5 seconds explosion animation, at third second, a large server's messages coming, if you use the default browser's behavior, your design will become frailness.

Hijk includes a 'hijk.busy' method. it can delay all server's messages without breaking your design.

this example has 20 elements with positions, you can think it is an GPS object. when you click a element, server will recalculate the position for the clicked element. browser will use 'SetTimeout' to refresh for new positions, if positions are changed from A to B. elements will move from A to B with animations instead of disappeared and showup. All codes like it were, except one line

[Client Side]

<script>
        function animate() {
            ...
            hijk.busy(TWEEN.update());
            ...
        }
</script>

When busy is true, server's message will be delayed. The followings are the UI screen, you can click whatever, a little while, elements will move with animations that never break up. and you can open two browsers, their will be synchronized.

 

Points of Interest      

You have seen a lot of usages,  this kit is readable and tiny, you can easily add your own functionality. 

References     

HTML  iBoxDB  jQuery  kit

History   

V 1.1

   added hijk.busy( boolean ) method.

   added 3D UI example.

V 1.0 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bruce Yang cp
Systems Engineer
China China
Mixing technologies for fun.

Comments and Discussions

 
QuestionThanks! PinmemberAndy Bantly21-Feb-13 4:34 
AnswerRe: Thanks! PinmemberBruce-CP21-Feb-13 5:49 
QuestioniBoxD.csproj file? PinmemberMember 45586620-Feb-13 10:31 
AnswerRe: iBoxD.csproj file? PinmemberBruce-CP20-Feb-13 16:45 
GeneralRe: iBoxD.csproj file? PinmemberMember 45586621-Feb-13 6:33 
GeneralRe: iBoxD.csproj file? PinmemberBruce-CP21-Feb-13 7:22 
GeneralRe: iBoxD.csproj file? PinmemberMember 45586624-Feb-13 10:20 
GeneralRe: iBoxD.csproj file? PinmemberBruce-CP24-Feb-13 21:00 
GeneralRe: iBoxD.csproj file? PinmemberMember 45586627-Feb-13 6:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 3 Jun 2014
Article Copyright 2013 by Bruce Yang cp
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid