Data Structures - For my Ninth Grader – Part 1

In Computer science two concepts forms foundation: Data Structures and Algorithms. Let us discuss few important data structures in this post.

Queue: Have you ever stand in a line (for USA persons)/ queue (for British) for any service like in post office, bank, airport, bus stand, railway station, theater, etc. If answer is YES, then you have experienced a queue first hand. Queue can be assumed as linear collection of items/elements in which they enter from one end and leave from another. The pictorial representation of queue:

 Now, what operations one can do with a queue

1.      Enter an item/element in the queue from one end (rear) >>> enqueue

2.      Take out an item/element from the queue from another end (front) >>> dequeue

3.      Look into last item/element in the queue at front (without removing from queue)>>> peek

4.      Clear the contents of the queue >>> clear

5.      Find out, if queue has any item/element >>> isEmpty

6.      Find out how items/elements in the queue >>> size

Queue is ordered (items/elements succeeding in order of enqueue) collection of items in which items enter from rear and exit from front - one by one. As an item/element enters the queue it starts at the rear and makes its way toward the front, as items/elements ahead of it get removed one by one.

Queue is follows FIFO (first in first out).

Stack: Make a pile of books placed one on top of another. You have stack.

 One can remove or add book at the top of the stack. The pictorial representation of stack:

  One can do following operations on a stack:

1. Add an item/element at top of stack >>> push
2. Remove an item/element from top of stack >>> pop
3. Find out, if stack has any item/element >>> isEmpty
4. Find out how items/elements in the stack >>> size
5. Look into top item/element in the stack (without removing from stack) >>> peek

Stack is ordered (items/elements succeeding in order of push) collection of items in which items enter from rear and exit from top only.

Stack is follows LIFO (last in first out). 

Deque (pronounced “deck”): Deque is double ended queue. In deque one can add item/element from rear as well as front. Similarly one can remove items/elements from both front and rear. The pictorial representation:   

One can do following operations on a deque:

1.    Add an item/element at front >>> addFront
2.    Add an item/element at rear >>> addRear
3.    Remove an item/element from front >>> removeFront
4.    Remove an item/element from rear >>> removeRear
5.    Find out, if deque has any item/element >>> isEmpty
6.    Find out how items/elements in the deque >>> size
7.    Look into last item/element in the queue at front (without removing from queue) >>> peek

Deque is ordered (items/elements succeeding in order of adding) collection of items in which items can enter from both ends (front and rear).

Deque is hybrid of Queue and Stack.

Widgets – My Dream SaaS

On a web page there are various ways by which a user can provide data as input. For this purpose HTML provides some elements (I will use “Widget” as general term).

1. Text Box
2. Text Area
3. Password
4. Hidden Field
5. Option Button
6. Radio Button
7. Selection/Combo Box
8. File select
9. Button
10. Date and Time Box (HTML 5)
11. Color Chooser (HTML5)
12. Calculated Text Box  (HTML5)

HTML specification specifies structural (e.g. size, dir, alt, etc.) and behavioral (e.g. formaction, etc.) attributes (Ref: https://developer.mozilla.org/en-US/docs/HTML/Element)

Java Script defines events pertaining to each widget and CSS venture into rendering part. 

From a SaaS platform perspective this approach poses few challenges:

• SaaS developer need to know three paradigms
• SaaS developer need to code to make a business application ( from client side perspective)
• Difficult to achieve Drag & Drop and Configuration Only approach to design and develop a business application
• Few of the widely used widgets (e.g. Tree, Grid, etc.) are missing from HTML specification
• The difference between Text Box, Text Area, Password and Hidden Field are not fundamental but semantic. Similar analogy can be drawn between Option Button and Radio Button.

So what is the solution!!

Solution is pretty simple. Reclassification of Widgets with few additions in terms of new widgets and providing a mechanism to configure widgets so cover HTML, Java Script and CSS defined attributes (and few additional) at one place.

Let us list widgets:

1. Text Box
2. Selection Button
3. Selection List
4. DateTime Box
5. Scroller
6. File Chooser
7. Button
8. Color Chooser
9. Tree
10. Grid
11. Tree Grid
12. Graph

Let us have brief thoughts about each widget.

 

Text Box: This widget should represent Text, Text Area, Password and Hidden HTML elements which are essentially described via INPUT tag and its TYPE attribute.

Selection Button: This widget should cover Option Button and Radio Button of HTML

Selection List: This widget should serve the purpose of Selection box.

DateTime Box: This widget covers INPUT tag with type representing date and/or time in HTML5.

Scroller: This widget does not have any counterpart in HTML but certainly there are many cleaver implementation of similar functionality using HTML, CSS and Java Script.  The nearest counterpart is JSlider object in Java.

File Chooser: This widget has one to one relationship with HTML Input tag and type attribute as file.

Button: This widget represents Input tag and type attribute as button and Button tag of HTML.

Color Chooser:  This widget represents Input tag and type color in HTML 5 and JColorChooser object in Java Swing.

Tree: This widget has no direct correspondence in HTML specification. The nearest relative is JTree object in Java Swing.

Grid: This widget has no direct correspondence in HTML specification. The nearest relative is JTable object in Java Swing. 

TreeGrid: This widget has no direct correspondence in HTML and Java Swing specification. The nearest match is http://www.treegrid.com/treegrid/www/

Graph: This widget has no direct correspondence in HTML and Java Swing.

Before digging deep into each widget let us set few ground rules:

• Each widget should be designed in such a manner that user experience related aspect should be configurable.
• Different aspects of user experience are:
  
  1. Basic definition and structural aspects such as ElementID, Value, DefaultValue, etc.
  2. Event and Gesture handling. How a widget will react to an event or gesture (in case of touch sensitive screens).
  3. Audio and Visual aesthetics of widget. The attributes defined here might be over ridden by scene (will define Scene later) level definitions.
  4. The widget configurability should also cover interaction with persistence layer to avoid coding to minimum.
• The definition of widget should be able to handle multilingual, localization, multi device and multi interaction aspects.
• Definition of widget should be expandable to accommodate future innovations.  Here ask is not for future proofing but for expandability.

Let us cover each widget one by one before moving to next topic.