06
Sun, Oct
2 New Articles

Let Your Fingers Do the Walking with jQuery

Development Tools / Utilities
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

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 phoneat 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 tabletonly on a PC using a mouseso 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

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.

 

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

Support MC Press Online

$

Book Reviews

Resource Center

  • SB Profound WC 5536 Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application. You can find Part 1 here. In Part 2 of our free Node.js Webinar Series, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Brian will briefly discuss the different tools available, and demonstrate his preferred setup for Node development on IBM i or any platform. Attend this webinar to learn:

  • SB Profound WP 5539More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.

  • SB HelpSystems ROBOT Generic IBM announced the E1080 servers using the latest Power10 processor in September 2021. The most powerful processor from IBM to date, Power10 is designed to handle the demands of doing business in today’s high-tech atmosphere, including running cloud applications, supporting big data, and managing AI workloads. But what does Power10 mean for your data center? In this recorded webinar, IBMers Dan Sundt and Dylan Boday join IBM Power Champion Tom Huntington for a discussion on why Power10 technology is the right strategic investment if you run IBM i, AIX, or Linux. In this action-packed hour, Tom will share trends from the IBM i and AIX user communities while Dan and Dylan dive into the tech specs for key hardware, including:

  • Magic MarkTRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now!  Request Now.

  • SB HelpSystems ROBOT GenericForms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.

  • SB HelpSystems ROBOT GenericIT security is a top priority for businesses around the world, but most IBM i pros don’t know where to begin—and most cybersecurity experts don’t know IBM i. In this session, Robin Tatam explores the business impact of lax IBM i security, the top vulnerabilities putting IBM i at risk, and the steps you can take to protect your organization. If you’re looking to avoid unexpected downtime or corrupted data, you don’t want to miss this session.

  • SB HelpSystems ROBOT GenericCan you trust all of your users all of the time? A typical end user receives 16 malicious emails each month, but only 17 percent of these phishing campaigns are reported to IT. Once an attack is underway, most organizations won’t discover the breach until six months later. A staggering amount of damage can occur in that time. Despite these risks, 93 percent of organizations are leaving their IBM i systems vulnerable to cybercrime. In this on-demand webinar, IBM i security experts Robin Tatam and Sandi Moore will reveal:

  • FORTRA Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:

  • FORTRAManaging messages on your IBM i can be more than a full-time job if you have to do it manually. Messages need a response and resources must be monitored—often over multiple systems and across platforms. How can you be sure you won’t miss important system events? Automate your message center with the Robot Message Management Solution. Key features include:

  • FORTRAThe thought of printing, distributing, and storing iSeries reports manually may reduce you to tears. Paper and labor costs associated with report generation can spiral out of control. Mountains of paper threaten to swamp your files. Robot automates report bursting, distribution, bundling, and archiving, and offers secure, selective online report viewing. Manage your reports with the Robot Report Management Solution. Key features include:

  • FORTRAFor over 30 years, Robot has been a leader in systems management for IBM i. With batch job creation and scheduling at its core, the Robot Job Scheduling Solution reduces the opportunity for human error and helps you maintain service levels, automating even the biggest, most complex runbooks. Manage your job schedule with the Robot Job Scheduling Solution. Key features include:

  • LANSA Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.

  • LANSAWhen it comes to creating your business applications, there are hundreds of coding platforms and programming languages to choose from. These options range from very complex traditional programming languages to Low-Code platforms where sometimes no traditional coding experience is needed. Download our whitepaper, The Power of Writing Code in a Low-Code Solution, and:

  • LANSASupply Chain is becoming increasingly complex and unpredictable. From raw materials for manufacturing to food supply chains, the journey from source to production to delivery to consumers is marred with inefficiencies, manual processes, shortages, recalls, counterfeits, and scandals. In this webinar, we discuss how:

  • The MC Resource Centers bring you the widest selection of white papers, trial software, and on-demand webcasts for you to choose from. >> Review the list of White Papers, Trial Software or On-Demand Webcast at the MC Press Resource Center. >> Add the items to yru Cart and complet he checkout process and submit

  • Profound Logic Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application.

  • SB Profound WC 5536Join us for this hour-long webcast that will explore:

  • Fortra IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn: