Can you really do it all with a tablet format?

I like jQuery, and within the last few years, I have been telling you about it again and again. I'm sorry to say I will not stop. I really feel that combined with System i (iSeries, IBM i) and MySQL data, you can really do magic things with very little more effort than writing a few statements.

I also like browsers (some more than others), and I think that the future "operating system" will be a browser. Today, you can do things in a browser that no one would have imagined just a few years back. Look at Google Doc, Microsoft's Outlook.com, and of course Facebook. They all have very advanced interfaces, and they all run in a browser.

But where are the browsers running? On a PC, on a mobile phone, or what about the "new kid" on the block, the tablet?

I suspect that many of you who are reading this article are using a tablet (this also includes the iPad), and I guess that a lot of the work we will do in the future will be done in a browser on a tablet running Android or iOS.

In my company, we have almost completed a big project in which we took away all the paper lists in a production plant and replaced them with tablets. It meant great paper savings, very fast response time to the ERP system, and a lot of improved functionality for the user. Now we are about to start another project, and once again the tablet has been chosen as the device that will be used.

Why not a mobile phone? Well, mobile phones are great, but when you need to handle a pretty complicated production interface, somehow you tend to get "lost" on the mobile phone—at least, that's what we have experienced over the last few years. That's why the tablet was chosen.

We discussed PCs, but the users want to be able to walk around and report things into the system, and the tablet is the perfect tool for that.

What about the connection to the ERP system? Well, there's WiFi inside the plant and it works like a charm; no problems whatsoever.

So now we make user interfaces that can do a lot of things, but we run the applications in a browser on a tablet. And the good thing is that the user can still use the same application on his PC when in the office, and we do not have to change a statement to accomplish that.

But we had to do some thinking before we started the tablet "walk." I have seen people sitting in meetings making notes on a tablet; some have neat little keyboards and some just punch around with their fingers and it works. But let's face it: to produce input data on a tablet, you have to re-think your application.

The user should be able to do the work with the interface by clicking, selecting, and dragging things around with an index finger. Hey, stop! Dragging things around with an index finger? In a browser? No way; that can only be done in a native app developed in either Java for Android or Objective-C for iOS. Really? Is that so? If you're on a tablet, click this link and try dragging things around with your index finger, or if you're on a PC, just use the mouse.

Cover Dragging with jQuery

OK, now you have seen it. So back to business. As said before, we decided to try to keep input using the tablet keyboard to a minium. Instead, we use buttons, date pickers, online numpads, and likewise to make it very easy for the user to create input.

But can all this be done in jQuery? Well, not all. We had to get some more power from jQuery's good friend jQuery UI (open source, of course).

I' have mentioned jQuery UI before but only briefly. This time, I'll dig a little more into it and show some of its neat features. But first, we need an explanation of what jQuery UI is, and who can do it better than the developers themselves?

From the website https://jqueryui.com/:

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

So what jQuery UI offers is a lot of very nice tools you can just download and start using. It also offers "themes" that allow you to "skin" your pages using CSS and images in almost any color and shape you might want. In this article, I will not get into the themes part, but I really think you should have a look at it, so I promise I will write about it in another article.

Here's a short list of what jQuery UI offers, just to name a few:

• Drag and drop
• Resizing
• Sorting
• Datepicker
• Sliders
• Dialogs (modal)

In this article, I'll use the jQuery UI drag-and-drop function. The jQuery UI drag-and-drop doesn't really work on a tablet—only on a PC using a mouse—so we had to find a plugin that could do the job. For that, we selected a plugin called jQuery UI Touch Punch 0.2.2 created by Dave Furfero; you can read more about it here and even make a donation if you feel inclined to.

Finally, we had all the pieces to create a drag-and-drop application running in a browser on a tablet, and it worked like a charm from the first try.

Now that you get the idea of what we're trying to accomplish, let's see what's needed to create the Cover Dragging page. Below, you see the complete code. It might seem like a lot, but I'll use this code to build on during this article and therefore it makes sense right here. I have identified some parts that I consider important, and I will explain them below the code.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Cover Dragging...</title>

---> Important part 1

<script src="/javascript/jquery.min.js"></script>

<script src="/javascript/jquery-ui.js"></script>

<script src="/javascript/jquery.ui.touch-punch.min.js"></script>  

<style type="text/css">

---> Important part 2

.draggable {

      margin: 3px 3px 3px 3px;

      -moz-box-shadow:5px 5px 7px rgba(33,33,33,1); /* Firefox */

      -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);   /* Safari+Chrome */

      box-shadow: 5px 5px 7px rgba(33,33,33,.7);     /* Opera */

}

#mainDiv {

      height:350px;

      overflow:auto;

      border:1px solid #000000;

}    

.headerText {

      font-size: 1.2em;

}

.statusText {

      font-size: 0.8em;

}

</style>

<script>

//=============================================================================     

// Make draggable

//=============================================================================     

function makeDraggable() {

---> Important part 3

      $(".draggablePicture").draggable({

            opacity: 0.75,

            revert: false,

            scroll: true,

            scrollSensitivity: 100,

            start: function( event, ui ) {

                  var draggableId = $(this).attr("id");

                  $("#statusmsg").text( draggableId );

            },

            stop: function( event, ui ) {

            }

      });        

}

//=============================================================================

// Init jQuery

//=============================================================================

$(document).ready(function() {     

---> Important part 4

      var h = $(window).height();

      var newH = h - 80;

      $("#mainDiv").height( newH );

---> Important part 5

      makeDraggable();

});

</script>

</head>

<body>

<div class="headerText">Cover dragging....</div>

<div id="statusmsg" class="statusText">.</div>

<hr>

<div id="mainDiv">

---> Important part 6

<img src="/images/covers/1.jpg" class="draggablePicture draggable">

<img src="/images/covers/2.jpg" class="draggablePicture draggable">

<img src="/images/covers/3.jpg" class="draggablePicture draggable">

<img src="/images/covers/4.jpg" class="draggablePicture draggable">

<img src="/images/covers/5.jpg" class="draggablePicture draggable">

<img src="/images/covers/6.jpg" class="draggablePicture draggable">

<img src="/images/covers/7.jpg" class="draggablePicture draggable">

<img src="/images/covers/8.jpg" class="draggablePicture draggable">

<img src="/images/covers/9.jpg" class="draggablePicture draggable">

<img src="/images/covers/10.jpg" class="draggablePicture draggable">

<img src="/images/covers/11.jpg" class="draggablePicture draggable">

<img src="/images/covers/12.jpg" class="draggablePicture draggable">

</div>

</body>

</html>

Important Part 1

Here we declare the jQuery script parts that will enable us to do whatever we want to do.

Important Part 2

This CSS class creates the shadows around each cover (might not work in all versions of IE).

Important Part 3

This is where we define that an object will be draggable. By using the .draggablePicture instead of the # draggablePicture, all objects with a class of draggablePicture will automatically be draggable.Every time you start dragging, the ID of the picture will be shown in the top left corner.

When making an object draggable, you have a lot of options. You can control the cursor, scrolling, snap to other objects, and a lot more. Look here to see the options and examples of what you can do.

Important Part 4

Here, the size of the mainDiv is adjusted to fit the screen.

Important Part 5

Here, we call the function that will bind the draggable code to the object with the class of draggablePicture.

Important Part 6

And now we insert the cover pictures.

So this is all there is to create the drag cover page.

Let's Drop It...

Now we know how to make an object draggable, but to find some real use for the feature, it would be very nice to be able to drop the object on a droppable area and make the "drop" result in an action.

I have modified the code above to enable dropping.

The page now works as a little quiz where you can pick up a cover with your finger and drop it on the "Who am I" area. The program will load an XML file called coverinfo.xml and use the ID of the cover picture to loop through the XML to find the information. When found, the information will be shown on top of the screen.

To accomplish this, a few things have been added.

First, a drop area has been added in the .ready function.

      // Drop area - View covers

      $( "#droppable_view" ).droppable({

      tolerance: "touch",

      hoverClass: "dropHover",

      drop: function( event, ui ) {

            var draggableId = ui.draggable.attr("id");

            var droppableId = $(this).attr("id");    

            // Show cover info

            showCoverInfo( draggableId,droppableId );

            }

      });

As you can see, the ID of the drop area is called droppable_view. When we move over the drop area, the class dropHover will be active, showing a black border.

The "tolerance" keyword is used to control when a drop occurs. In this example, I use the "touch" option, which means that whenever the drop area is touched by the cover, the drop event will occur and the showCoverInfo function will be executed using the cover ID, which has been fetched by the ui.draggable.attr("id"), and it is now used to search through the XML data to find the correct ID.

The XML file is loaded using an AJAX call as shown below:

//=============================================================================     

// Show cover info

//=============================================================================     

function showCoverInfo( draggableId,droppableId ) {

            // Clear list

            $("#coverinfo_id").text('');

            // Create URL

            var thisURL = 'xmldata/coverinfo.xml';

            $.ajax({

                  type: 'GET',

                  url: thisURL,

                  dataType: 'xml',

                  cache: false,                

                  success: function(xml) {

                        $(xml).find('album').each(function() {

                              var id = $(this).find('id').text();

                              var band = $(this).find('band').text();

                              var title = $(this).find('title').text();

                              var year = $(this).find('year').text();

                              if ( id == draggableId ) {

                                    $("#coverinfo_id").html(

                                          '<div><b>'

                                    +     band + ' - ' + title + ' - ' + year

                                    +     '</b></div>'

                                    );

                              }

                        });        

                  },

                  error:function (xhr, ajaxOptions, thrownError){      

                        alert('No cover info found, missing XML file is: ' + thisURL )

                  }

            });

}

You can test the cover dragging and dropping here.

Of course, the cover data could have been fetched from a System i (iSeries, IBM i), MySQL, or MSSQL database or even a simple CSV file containing the information stored in a way you want the application to work.

Let's Cross Our Fingers

I hope this article has given you an idea of what you can do in a browser using jQuery, jQuery UI, and the magnificent jquery.ui.touch-punch.min.js plugin.

As always, my example uses music just to put a little fun in this serious subject. But what about creating a system that lists purchase orders and, when you drag an order to a drop area, the content of the order is shown? You could then drag the product numbers to another area to put it in stock in your System i and, while you're at it, send an email notification that the goods have arrived and are now ready to be used. You could also update the big TV screen in the production plant to show what's happening. It can be done. In fact, we've already done it! And all we did was "let our fingers do the walking."

As always you can download the code examples.

Till next time, wrap your users around your finger by using jQuery UI and a tablet.

Jan Jorgensen is one of the owners of www.reeft.dk, which specializes in mobile and i5 solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him at This email address is being protected from spambots. You need JavaScript enabled to view it.. 

 

Also Read

TechTip: A Primer to Bootstrap 4, Part 2

TechTip: A Primer to Bootstrap 4, Part 1

A Hand-Holding App Builder for Handheld Devices