Sidebar

Dipping Your Toes in the jQuery Mobile Ocean

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

jQuery Mobile might seem like a real sea monster, so let's tame it!

 

Summer is here in Denmark, and that means vacation and spending time with the family. No work, no stress, just a pale body in the sun. Many people buy a good book and spend the free hours reading it; others make puzzles or look after the garden. What do I do? Every summer, I tend to challenge myself by learning some new "computer" fun. This year I have decided it should be jQuery Mobile version 1.4+.

 

I started learning before my vacation, mainly because I wanted to do a mobile interface to the Lean/Takt software, and as I am not clever enough to learn Java or Objective C, I found that RPG, PHP, and jQuery Mobile would be the tools to accomplish the task.

 

So I fired up my browser and headed over to the jQuery Mobile website and started surfing around. Boy, did I get a overwhelmed! It's not a big task; it's a huge task. Once again, very clever people have done a great job for mortal people like me and developed a package that allows me to create a mobile app that will run on the most common mobile devices with a reasonable amount of time for me to spend.

 

I decided to share this with you, and let me start by saying that I don't know every ripple in the jQuery Mobile ocean, but that's why you should continue reading the article: I'm a beginner, and therefore, I might target the same problems you'll encounter if you also want to sail this part of the ocean of developing mobile apps.

 

"Write Less, Do More"

The sentence above is the mantra found on the jQuery Mobile website, and I think it pretty much says what this is all about.

 

I also have to quote the sentence that springs into your eyes when looking at the introduction page: "jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices."

 

Please note that during this article I will not explain every keyword and attribute because it would take up way too much space. At the end of the article, I have included a link section where you can dive deeper into everything.

 

jQuery MobilePages

So let's make our first simple page by setting a few simple rules.

 

Rule 1: The page must start with <!DOCTYPE html>, which is the HTML5 definition.

 

Rule 2: After the title keyword, place the viewport meta tag in order to make browsers on mobile devices display zoom level and dimensions correctly.

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Rule 3: A page in jQuery Mobile has elements with the "data-role" attribute set. The data-role="page" will be the container that defines the page. Also a data-role="header", class="ui-content", and data-role="footer" are basic for a page.

 

So with that information, our first page will look like this.

 

<!--

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

//

// Function: jQuery Mobile - first page

//

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

-->

 

<!DOCTYPE html>

<html>

<head>

 

   <title>MCpressonline.com - our first page</title>

     

   <meta name="viewport" content="width=device-width, initial-scale=1">

     

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

     

</head>

 

<body>

   <div data-role="page">

 

       <div data-role="header">

           <h1>Dipping your toes in the jQuery Mobile ocean</h1>

       </div><!-- /header -->

 

       <div data-role="content">

           <p>Summer is coming...</p>

       </div><!-- /content -->

 

       <div data-role="footer">

           <h4>My left foot...</h4>

       </div><!-- /footer -->

 

   </div><!-- /page -->

</body>

</html>

Figure 1: This is our first jQuery Mobile page.

 

To see it live, point your mobile phone, iPad, PC, or all here. Please notice how the various browsers display the page according to the dimension of the screen. Really cool and no programming required from you.

 

In jQuery Mobile, a single HTML document can contain multiple pages. This means that all the "pages" load at once with a data-role="header" for each page. Each page is then contained inside a <div> with a unique ID. By clicking a link or button, the framework will load the internal page and display it to the user. So let's try to make a page with three different pages.

 

The page I have created here will show some weather reports on various places in the world (good to know when you're on the sea), and to get a little local "folklore," the examples will be in Danish.

 

The code will look like this (I will comment in bold inside the code).

 

<!--

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

//

// Function: jQuery Mobile - multiple pages

//

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

-->

 

<!DOCTYPE html>

<html>

 

<head>

 

   <title>MCpressonline.com - multiple pages</title>

     

      <meta charset="ISO-8859-1">

      <meta name="viewport" content="width=device-width, initial-scale=1">

     

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

     

Handle the image size on large screens so the image does not scale up too much.

 

<style>

 

      @media screen and (min-width: 1200px)

      {

 

            img {

            width: 50%;

            max-width: 50%;

            }

           

      }

 

</style>

 

</head>

 

<body>

 

This is the container that holds the data for page 1 with a unique ID of "page1."

 

 

<!-- Page: #page1 -->

 

<!-- page one start -->

<div data-role="page" id="page1">

 

      <!-- header -->

      <div data-role="header">

            <h1>Odense weather</h1>

      </div>

 

      <!-- content -->

      <div data-role="content" >   

            <p>The id of the page is: <code>id="page1"</code>

           

            <p>This is the weather in Odense on 2015-07-11 (in Danish)</p>

            <p>Gradvist mere skyet og i eftermiddag måske stedvis lidt regn.<br>Temp. op mellem 15 og 18 grader, og svag til let vind fra vest og sydvest.<br>I aften mest skyet og endnu mulighed for lidt regn, men i nat mest tørt og stedvis ret klart vejr.<br>Temp. ned mellem 10 og 15 grader, og svag til let vind fra sydøst.</p>

 

In the links to the next pages, note the link to page3 has a data-transition="flip", which means that the page will be shown using the flip transition.

When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page.

Note: In the link section, there is a link to the various transitions you can use.

 

 

            <a href="#page2">Weather: San Diego, US (link)</a>

            <p>

            <a href="#page3" data-dialog="true" data-transition="flip">Weather: Reykjavik, Iceland (dialog)</a>

 

      </div>

     

      <!-- footer -->

      <div data-role="footer">

            <h4>Copyright Someone - Some Rights Reserved</h4>

      </div>

</div>

<!-- page one end -->

 

This is the container that holds the data for page2 with a unique ID of "page2."

 

<!-- Page: #page2 -->

 

<!-- page two start -->

<div data-role="page" id="page2">

 

      <!-- header -->

      <div data-role="header">

            <h2>San Diego weather</h2>

      </div>

 

      <!-- content -->

      <div data-role="content">

            <p>The id of the page is: <code>id="page2"</code></p>

           

            <img src="/ex2.png" width="100%">

           

            <p><a href="#page1" data-rel="back">Back to Odense weather</a></p>

           

      </div>

     

      <!-- footer -->

      <div data-role="footer">

            <h4>Copyright Someone - Some Rights Reserved</h4>

      </div>

</div>

<!-- page two end -->

 

This is the container that holds the data for page 3 with a unique ID of "page3."

Note that in the div tag with the data-role="page", the data-dialog="true" is specified, which means that the page will be shown as a dialog. The framework will add all the code needed to create the dialog.

 

<!-- Page: #page3 -->

 

<!-- page two start -->

<div data-role="page" id="page3" data-dialog="true">

 

      <!-- header -->

      <div data-role="header">

            <h2>Reykjavik weather</h2>

      </div>

 

      <!-- content -->

      <div data-role="content">

            <p>The id of the page is: <code>id="page3"</code></p>

           

            <img src="/ex2a.png" width="100%">

 

The data-rel="back" will ensure that you will always navigate back to the previous page.

           

            <p><a href="#page1" data-rel="back">Back to Odense weather</a></p>

           

      </div>

     

      <!-- footer -->

      <div data-role="footer">

            <h4>Copyright Someone - Some Rights Reserved</h4>

      </div>

</div>

<!-- page two end -->

 

</body>

</html>

Figure 2: Show the weather in various places of the world.

 

See the example live here.

 

Note that I have added some pictures to pages 2 and 3 and that I have given them a width of 100%. This will make the pictures show very nicely on a mobile phone and on an iPad while on a PC it will look a little odd.

To overcome that, I have used the @media screen in the header section, but of course this could have been done using a jQuery plug-in. I have included a link later on that shows some examples of this.

 

Let's say we want to have some buttons instead of links. Is that difficult?

 

Well, not really. All you have to do is add this class="ui-btn" link to each link, and the links will be transformed into buttons. By adding calls "ui-corner-all", the buttons will have rounded corners.

 

I have also added a small icon to each button on the first page just by using the "ui-icon-xxxx" class, where xxxx is the name of the icon. In my example, I have used the "ui-icon-arrow-r" class, which is a right-pointing arrow. To place the arrow on the right of the button, use the "ui-btn-icon-right" class. This means that the button code will look like this:

 

<a href="#page3" class="ui-btn ui-corner-all ui-btn-icon-right ui-icon-arrow-r" data-dialog="true" data-transition="flip">Weather: Reykjavik, Iceland (dialog)</a>

 

And the interface will now like this:

 

072215Janex3

Figure 3: You have built your first page!

 

See it here. Get the code here.

 

All links in jQuery Mobile are handled by what is called the"AJAX navigation system," and as the name says, linking is done in AJAX. That might leave you with the question "What about external links?" Well, jQuery Mobile will handle it and use AJAX if possible and "normal" linking if not. So domain-crossing issues will automatically be handled by the framework.

 

Until now, I have paddled in only a very small part of the jQuery Mobile ocean, but generally speaking the framework is more and less built over the same "model," so if you understand one part, it will be very easy for you to dig into all the other elements in the framework.

 

Before I move on to events, I will just briefly show you a quick example of the Listview widget that the framework provide.

 

jQuery MobileListview

A listview is defined by an unordered or ordered list with a wide range of features. To define a listview, add data-role="listview" attribute to the list and you're set.

 

Let's define a very simple unordered list that contains a list of song with the word "ocean" in the title.

 

<!-- page start -->

<div data-role="page" id="page1">

 

      <!-- header -->

      <div data-role="header">

            <h1>Sailing the jQuery Mobile ocean</h1>

      </div>

     

      <!-- content -->

      <div data-role="content">    

     

            <p>

            <h4>Song with the word "Ocean"</h4>

            <p>

                  <ul data-role="listview" >

                  <li>Fountains of Wayne - A Dip in the Ocean</li>

                  <li>Mick Harvey - A Drop, An Ocean</li>

                  <li>Pixies - Another Toe in the Ocean</li>

                  <li>The Vaccines - Aftershave Ocean</li>

                  <li>Tom Waits - The Ocean Doesn't Want Me</li>

                  <li>The Mountain Goats - Oceanographer</li>

                  <li>Someone Still Loves You Boris Yeltsin - Oceanographer</li>

                  <li>Erza Furman - At The Bottom Of The Ocean</li>

                  </ul>

 

      </div>

     

      <!-- footer -->

      <div data-role="footer">

            <h4>Copyright Someone - Some Rights Reserved</h4>

      </div>

</div>

<!-- page end -->

 

This will look like this:

 

072215Janex4

Figure 4: Here's a jQuery Mobile listview with an unordered list.

 

Now let's make it possible to add a filter to the list. This is done by adding the attribute to the <ul> line, so it now looks like this:

 

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search songs...">

 

And the result will then look like this:

 

072215Janex5

Figure 5: Now the listview has a "ne" filter applied.

 

See it live here:

 

Pretty cool and not much work to do if you ask me.

 

Moreover, the feature list just continues and continues with attributes like Filter reveal, List dividers, Autodividers, and Count bubbles. The features are endless, and you really get the "wow" feeling when you look into it. Look in the link section for a link to this nice feature.

 

I hope you can see the strength of this framework. I have only two things left in this article that I will touch before we have to sail back into the safe coast and catch our breath.

 

The first thing is the "event." This nice feature makes a mobile app a real mobile app, with things like "swipe" and "taphold" and all the other things that those clever app guys do all the time.

 

And now the time has come for you to sail that boat on the ocean.

 

jQuery Mobile Events

Before we begin, I must say that I have already made this article much longer than I planned in the first place, mainly because to cover this huge subject just takes up space, but also because when you get started it just is so cool and effective that stopping is pretty hard. But I will just show you some quick examples of how to use the events and from then on you're on your own, but hopefully with enough wind in the sails to keep the boat in motion.

 

Let's start by testing the "tap" and "taphold." In this example, we'll create a small page that has three buttons.

 

One button will act on a tap/tab event, and one button will act on a taphold/tabhold event; this means that the button must be held down longer than one second. The last button is a reset button. All that happens is that some messages will be shown below the buttons to notify you what just happened. Not very useful, but good enough to show how to trigger the events.

 

I have also tried to combine the tab and tabhold. It doesn't work very well if you ask me, but you can test that yourself.

 

Here is the code (comment is bold):

 

<!--

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

//

// Function: jQuery Mobile - events

//

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

-->

 

<!DOCTYPE html>

<html>

 

<head>

 

   <title>MCpressonline.com - events</title>  

     

      <meta charset="ISO-8859-1">

      <meta name="viewport" content="width=device-width, initial-scale=1">

     

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

     

 

CSS classes to handle the colors.

     

<style>    

 

.setTabColor {

      background-color: #D52B1E;

      color: #FFFFFF;  

}

 

.setTabHoldColor {

      background-color: #4572A7;

      color: #FFFFFF;

}

 

</style>   

     

<script language="JavaScript">

<!--

 

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

// jQuery

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

$(document).ready(function() {     

 

$(function(){

 

 

Bind the event to the buttons and call a function when the event occurs. This could be done in various ways, but this example is taken from the jQuery Mobile API reference and modified to suit my needs. If you head over to the w3schools.com website, they have examples that make the same stuff in a different way. I have included the links at the end.

 

 

$( "#myButton1" ).bind( "tap", tapHandler );

$( "#myButton2" ).bind( "taphold", tapHandlerHold );

$( "#myResetButton" ).bind( "tap", tapHandlerReset );

 

// Function that to handle the tab

function tapHandler( event ){

   $( "#myResult" ).html( "I was tapped..." ).removeClass('setTabHoldColor').addClass('setTabColor');

}

 

// Function to handle the long press

function tapHandlerHold( event ){

   $( "#myResult" ).html( "I was long pressed..." ).removeClass('setTabColor').addClass('setTabHoldColor');

}

 

// Function to handle the rest

function tapHandlerReset( event ){

   $( "#myResult" ).html( "&nbsp;" ).removeClass('setTabColor setTabHoldColor');

}  

 

 

});

 

     

     

});

// -->

 

</script>

 

</head>

 

<body>

 

<!-- page start -->

<div data-role="page" id="page1">

 

      <!-- header -->

      <div data-role="header">

            <h1>Events - tap / taphold</h1>

      </div>

     

      <!-- content -->

      <div data-role="content">    

 

      <p>

      <button id="myButton1">Tab me</button>

      <button id="myButton2">Hold me down for more than a second</button>

      <p>

      <button id="myResetButton">Reset</button>

      <p>

      <div id="myResult">&nbsp;</div>

 

      </div>

     

      <!-- footer -->

      <div data-role="footer">

            <h4>Copyright Someone - Some Rights Reserved</h4>

      </div>

</div>

<!-- page end -->

 

</body>

</html>

Figure 6: This example shows tap (tab) and taphold (tabhold).

 

See it live here.

 

The last event example I will show is a page where you can swipe left on one button and swipe right on another and then a reset button where you can just swipe. When swiped, a Collapsible (another widget) will be shown telling you a little Elvis Costello info.

 

The code looks like this:

 

<!--

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

//

// Function: jQuery Mobile - swipe

//

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

-->

 

<!DOCTYPE html>

<html>

 

<head>

 

   <title>MCpressonline.com - events</title>  

     

      <meta charset="ISO-8859-1">

      <meta name="viewport" content="width=device-width, initial-scale=1">

     

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

     

     

<style>    

 

Some CSS to style the Collapsibles

 

.setSwipeLeft {

      background-color: #D52B1E;

      color: #FFFFFF;  

}

 

.setSwipeRight {

      background-color: #4572A7;

      color: #FFFFFF;

}

 

</style>   

     

<script language="JavaScript">

<!--

 

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

// jQuery

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

$(document).ready(function() {     

 

$(function(){

 

Handle the swipes on the buttons and expand the collapsible in question.

 

$( "#myButton1" ).bind( "swipeleft", swipeLeftHandler );

$( "#myButton2" ).bind( "swiperight", swipeRightHandler );

$( "#myResetButton" ).bind( "swipe", swipeHandlerReset );

 

// Function that to handle the swipes

function swipeLeftHandler( event ){

   //$("#col2").collapsible( "collapse" ); // Remove to test

   $("#col1").collapsible( "expand" );

}

 

// Function to handle the long press

function swipeRightHandler( event ){

// $("#col1").collapsible( "collapse" ); // Remove to test

   $("#col2").collapsible( "expand" );

}

 

// Collapse all

function swipeHandlerReset( event ){

   $("#col1,#col2").collapsible( "collapse" );

}  

 

 

});

 

     

     

});

// -->

 

</script>

 

</head>

 

<body>

 

<!-- page start -->

<div data-role="page" id="page1">

 

      <!-- header -->

      <div data-role="header">

            <h1>Events - swipes</h1>

      </div>

     

      <!-- content -->

      <div data-role="content">    

 

      <p>

      <button id="myButton1">Swipe left</button>

      <button id="myButton2">Swipe right</button>

      <p>

      <button id="myResetButton">Just swipe</button>

      <p>

      <div id="myResult">&nbsp;</div>

     

 

Define the collapsible.

 

            <div id="col1" data-role="collapsible">

                  <h4>My Aim is true</h4>

                  <p class="setSwipeLeft">Released in 1977 on Stiff Records</p>

            </div>     

           

            <div id="col2" data-role="collapsible">

                  <h4>King of America</h4>

                  <p class="setSwipeRight">Released in 1986 on F-Beat Records</p>

            </div>           

 

      </div>

     

      <!-- footer -->

      <div data-role="footer">

            <h4>Copyright Someone - Some Rights Reserved</h4>

      </div>

</div>

<!-- page end -->

 

</body>

</html>

Figure 7: Here's an example of swipe.

 

See it live here.

 

This completes the event intro and what I have to show about the subject. Of course, there's much more to be said about this subject andyes, you guessed righta link can be found in the link section.

 

If you're still with me, we have come to the last subject I will talk about in this article, which is "theming," so let's take a deep breath and dive into this very exciting feature.

 

jQuery Mobile Theming

jQuery Mobile has a very powerful and sophisticated theming tool inside the framework. Up to 26 set of toolbars, content, and button colors are supported in what is called a "swatch." When I first looked into it, I didn't get the idea, but then suddenly the penny dropped and I did understand that a "swatch" is the collection of colors and looks that define a theme.

 

Each "swatch" is defined by a letter, starting at "a" and going up. This means that by adding the attribute data-theme="a" to any element, it will get to colors and shapes for that theme. If you add the data-theme on the page level, all widgets inside the page container will automatically inherit the theme.

 

And how do you define a theme? you might wonder. Well, the answer is "ThemeRoller." ThemeRoller is a tool that lets you define everythingand I mean everythingthat has to be defined for a theme, and does so in a very easy drag-and-drop way.

 

Define your theme, download it, and use it in your own project. You can save your theme on the jQuery Mobile server and share the URL to anybody else on Twitter or Facebook and become the master of "themes."

 

Go to ThemeRoller by clicking on this link. You will see something like this:

 

072215Janex8 

Figure 8: This is the jQuery Mobile ThemRoller interface.

 

As you can see, you can select the swatch you want to work with, and you can then fold out the various elements on the left or you can drag and drop colors to the elements in the center of the screen. When you're done, click the download button at the top. Give the theme a name and save it, and you're ready to go.

 

The save screen looks like this.

 

072215Janex9 

Figure 9: Save a theme from ThemeRoller.

 

You will get a zip file from the tool. Here's my advice on how to handle it. Create a folder called "css-themes" in the place where you have your jQuery Mobile project. Then create a folder with the name of the theme you made when saving. This way you can have more than one theme inside the css-themes folder.

 

In my example, I created a theme named "myTheme," so my folder structure will look like this:

 

/root -> css-themes -> myTheme

 

The myTheme folder will contain all the files needed for the theme to function.

 

Now let's use the theme from the previous example 7 code (see downloadable code). I have made a copy and it is now called example 8.

 

This is how the new header sections look:

 

      <link rel="stylesheet" href="/css-themes/myTheme/myTheme.min.css" />

      <link rel="stylesheet" href="/css-themes/myTheme/jquery.mobile.icons.min.css" />

     

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />

 

      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

           

 

As you see, I have added the theme created in ThemeRoller according to the structure described above.

 

Note that the "jquery.mobile.structure-1.4.5.min.css" has been added. This file contains the barebonea CSS for the jQuery Mobile structure and is needed when you use your own theme.

 

Then on the "page" section I have added the data-theme="a" attribute like this:

 

            <div data-role="header" data-theme="a">

 

And that's it. You have now implemented your own theme.

 

If you want to change to Swatch b, just change the data-theme="a" to data-theme="b" and you will see that everything changes.

 

Below are the various looks according to the theme:

 

072215Janex10

Figure 10: Various themes are applied to the same page.

 

See it live here.

 

Downloads

Download the code used in the examples.

 

jQuery MobilLink Section

jQuery Mobile Demo

http://demos.jquerymobile.com/1.4.5/

 

Quick-start guide (previous version, but gives a good overview)

http://demos.jquerymobile.com/1.2.1/docs/about/getting-started.html

 

jQuery MobilePages

http://demos.jquerymobile.com/1.4.5/pages/

 

jQuery MobileTransitions

http://demos.jquerymobile.com/1.4.5/transitions/

 

jQuery MobileListviews

http://demos.jquerymobile.com/1.4.5/listview/

 

jQuery MobileIcons

http://demos.jquerymobile.com/1.4.5/icons/

 

jQuery Mobile APIEvents

http://api.jquerymobile.com/category/events/

 

jQuery Mobile APItaps/taphold

http://api.jquerymobile.com/1.3/tap/

http://api.jquerymobile.com/1.3/taphold/

 

jQuery Mobile Events (w3schools.com)

http://www.w3schools.com/jquerymobile/jquerymobile_ref_events.asp

 

ThemeRoller

http://themeroller.jquerymobile.com/

 

Advanced jQuery Mobile TutorialPart 1, Responsive Design:

http://www.gajotres.net/advanced-jquery-mobile-tutorial-part-1-responsive-design/

 

Ocean Colour Scene

Now this has been a long journey, and I think that it's about time we head back to a safe haven. I hope that you can see some of the potential this framework can provide to you and your organization. If I could make a picture of how big this is, it would be that I have tried to fill an ocean into a bucket; there's still so much you can learn and do.

 

So till next time, get your business data out of the IBM i and present it on users' mobiles. I am sure you will then be the new Neptune.

 

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 jj@reeft.dk

 

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

RESOURCE CENTER

  • WHITE PAPERS

  • WEBCAST

  • TRIAL SOFTWARE

  • Mobile Computing and the IBM i

    SB ASNA PPL 5450Mobile computing is rapidly maturing into a solid platform for delivering enterprise applications. Many IBM i shops today are realizing that integrating their IBM i with mobile applications is the fast path to improved business workflows, better customer relations, and more responsive business reporting.

    This ASNA whitepaper takes a look at mobile computing for the IBM i. It discusses the different ways mobile applications may be used within the enterprise and how ASNA products solve the challenges mobile presents. It also presents the case that you already have the mobile programming team your projects need: that team is your existing RPG development team!

    Get your copy today!

  • Automate IBM i Operations using Wireless Devices

    DDL SystemsDownload the technical whitepaper on MANAGING YOUR IBM i WIRELESSLY and (optionally) register to download an absolutely FREE software trail. This whitepaper provides an in-depth review of the native IBM i technology and ACO MONITOR's advanced two-way messaging features to remotely manage your IBM i while in or away from the office. Notify on-duty personnel of system events and remotely respond to complex problems (via your Smartphone) before they become critical-24/7. Problem solved!

    Order your copy here.

  • DR Strategy Guide from Maxava: Brand New Edition - now fully updated to include Cloud!

    SB Maxava PPL 5476PRACTICAL TOOLS TO IMPLEMENT DISASTER RECOVERY IN YOUR IBM i ENVIRONMENT

    CLOUD VS. ON-PREMISE?
    - COMPREHENSIVE CHECKLISTS
    - RISK COST CALCULATIONS
    - BUSINESS CASE FRAMEWORK
    - DR SOLUTIONS OVERVIEW
    - RFP BUILDER
    Download your free copy of DR Strategy Guide for IBM i from Maxava today.

     

  • White Paper: Node.js for Enterprise IBM i Modernization

    SB Profound WP 5539

    If your business is thinking about modernizing your legacy IBM i (also known as AS/400 or iSeries) applications, you will want to read this white paper first!

    Download this paper and learn how Node.js can ensure that you:
    - Modernize on-time and budget - no more lengthy, costly, disruptive app rewrites!
    - Retain your IBM i systems of record
    - Find and hire new development talent
    - Integrate new Node.js applications with your existing RPG, Java, .Net, and PHP apps
    - Extend your IBM i capabilties to include Watson API, Cloud, and Internet of Things


    Read Node.js for Enterprise IBM i Modernization Now!

     

  • 2020 IBM i Marketplace Survey Results

    HelpSystems

    This year marks the sixth edition of the popular IBM i Marketplace Survey Results. Each year, HelpSystems sets out to gather data about how businesses use the IBM i platform and the IT initiatives it supports. Year over year, the survey has begun to reveal long-term trends that give insight into the future of this trusted technology.

    More than 500 IBM i users from around the globe participated in this year’s survey, and we’re so happy to share the results with you. We hope you’ll find the information interesting and useful as you evaluate your own IT projects.

  • AIX Security Basics eCourse

    Core Security

    With so many organizations depending on AIX day to day, ensuring proper security and configuration is critical to ensure the safety of your environment. Don’t let common threats put your critical AIX servers at risk. Avoid simple mistakes and start to build a long-term plan with this AIX Security eCourse. Enroll today to get easy to follow instructions on topics like:

    • Removing extraneous files
    • Patching systems efficiently
    • Setting and validating permissions
    • Managing service considerations
    • Getting overall visibility into your networks

     

  • Developer Kit: Making a Business Case for Modernization and Beyond

    Profound Logic Software, Inc.

    Having trouble getting management approval for modernization projects? The problem may be you're not speaking enough "business" to them.

    This Developer Kit provides you study-backed data and a ready-to-use business case template to help get your very next development project approved!

  • What to Do When Your AS/400 Talent Retires

    HelpSystemsIT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators is small.

    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:

    • Why IBM i skills depletion is a top concern
    • How leading organizations are coping
    • Where automation will make the biggest impact

     

  • IBM i Resources Retiring?

    SB HelpSystems WC GenericLet’s face it: IBM i experts and RPG programmers are retiring from the workforce. Are you prepared to handle their departure?
    Our panel of IBM i experts—Chuck Losinski, Robin Tatam, Richard Schoen, and Tom Huntington—will outline strategies that allow your company to cope with IBM i skills depletion by adopting these strategies that allow you to get the job done without deep expertise on the OS:
    - Automate IBM i processes
    - Use managed services to help fill the gaps
    - Secure the system against data loss and viruses
    The strategies you discover in this webinar will help you ensure that your system of record—your IBM i—continues to deliver a powerful business advantage, even as staff retires.

     

  • Backup and Recovery Considerations for Security Data and Encrypted Backups

    SB PowerTech WC GenericSecurity expert Carol Woodbury is joined by Debbie Saugen. Debbie is an expert on IBM i backup and recovery, disaster recovery, and high availability, helping IBM i shops build and implement effective business continuity plans.
    In today’s business climate, business continuity is more important than ever. But 83 percent of organizations are not totally confident in their backup strategy.
    During this webinar, Carol and Debbie discuss the importance of a good backup plan, how to ensure you’re backing up your security information, and your options for encrypted back-ups.

  • Profound.js: The Agile Approach to Legacy Modernization

    SB Profound WC GenericIn this presentation, Alex Roytman and Liam Allan will unveil a completely new and unique way to modernize your legacy applications. Learn how Agile Modernization:
    - Uses the power of Node.js in place of costly system re-writes and migrations
    - Enables you to modernize legacy systems in an iterative, low-risk manner
    - Makes it easier to hire developers for your modernization efforts
    - Integrates with Profound UI (GUI modernization) for a seamless, end-to-end legacy modernization solution

     

  • Data Breaches: Is IBM i Really at Risk?

    SB PowerTech WC GenericIBM i is known for its security, but this OS could be more vulnerable than you think.
    Although Power Servers often live inside the safety of the perimeter firewall, the risk of suffering a data leak or data corruption remains high.
    Watch noted IBM i security expert Robin Tatam as he discusses common ways that this supposedly “secure” operating system may actually be vulnerable and who the culprits might be.

    Watch the webinar today!

     

  • Easy Mobile Development

    SB Profound WC GenericWatch this on-demand webinar and learn how to rapidly and easily deploy mobile apps to your organization – even when working with legacy RPG code! IBM Champion Scott Klement will demonstrate how to:
    - Develop RPG applications without mobile development experience
    - Deploy secure applications for any mobile device
    - Build one application for all platforms, including Apple and Android
    - Extend the life and reach of your IBM i (aka iSeries, AS400) platform
    You’ll see examples from customers who have used our products and services to deliver the mobile applications of their dreams, faster and easier than they ever thought possible!

     

  • Profound UI: Unlock True Modernization from your IBM i Enterprise

    SB Profound PPL 5491Modern, web-based applications can make your Enterprise more efficient, connected and engaged. This session will demonstrate how the Profound UI framework is the best and most native way to convert your existing RPG applications and develop new modern applications for your business. Additionally, you will learn how you can address modernization across your Enterprise, including databases and legacy source code, with Profound Logic.

  • Node Webinar Series Pt. 1: The World of Node.js on IBM i

    Profound Logic Software, Inc.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.

    Part 1 will teach you what Node.js is, why it's a great option for IBM i shops, and how to take advantage of the ecosystem surrounding Node.

    In addition to background information, our Director of Product Development Scott Klement will demonstrate applications that take advantage of the Node Package Manager (npm).

  • 5 New and Unique Ways to Use the IBM i Audit Journal

    SB HelpSystems ROBOT GenericYou must be asking yourself: am I doing everything I can to protect my organization’s data? Tune in as our panel of IBM i high availability experts discuss:


    - Why companies don’t test role swaps when they know they should
    - Whether high availability in the cloud makes sense for IBM i users
    - Why some organizations don’t have high availability yet
    - How to get high availability up and running at your organization
    - High availability considerations for today’s security concerns

  • Profound.js 2.0: Extend the Power of Node to your IBM i Applications

    SB Profound WC 5541In this Webinar, we'll demonstrate how Profound.js 2.0 enables you to easily adopt Node.js in your business, and to take advantage of the many benefits of Node, including access to a much larger pool of developers for IBM i and access to countless reusable open source code packages on npm (Node Package Manager).
    You will see how Profound.js 2.0 allows you to:

    • Provide RPG-like capabilities for server-side JavaScript.
    • Easily create web and mobile application interfaces for Node on IBM i.
    • Let existing RPG programs call Node.js modules directly, and vice versa.
    • Automatically generate code for Node.js.
    • Automatically converts existing RPGLE code into clean, simplified Node.js code.

    Download and watch today!

     

  • Make Modern Apps You'll Love with Profound UI & Profound.js

    SB Profound WC 5541Whether you have green screens or a drab GUI, your outdated apps can benefit from modern source code, modern GUIs, and modern tools.
    Profound Logic's Alex Roytman and Liam Allan are here to show you how Free-format RPG and Node.js make it possible to deliver applications your whole business will love:

    • Transform legacy RPG code to modern free-format RPG and Node.js
    • Deliver truly modern application interfaces with Profound UI
    • Extend your RPG applications to include Web Services and NPM packages with Node.js

     

  • Accelerating Programmer Productivity with Sequel

    SB_HelpSystems_WC_Generic

    Most business intelligence tools are just that: tools, a means to an end but not an accelerator. Yours could even be slowing you down. But what if your BI tool didn't just give you a platform for query-writing but also improved programmer productivity?
    Watch the recorded webinar to see how Sequel:

    • Makes creating complex results simple
    • Eliminates barriers to data sources
    • Increases flexibility with data usage and distribution

    Accelerated productivity makes everyone happy, from programmer to business user.

  • Business Intelligence is Changing: Make Your Game Plan

    SB_HelpSystems_WC_GenericIt’s time to develop a strategy that will help you meet your informational challenges head-on. Watch the webinar to learn how to set your IT department up for business intelligence success. You’ll learn how the right data access tool will help you:

    • Access IBM i data faster
    • Deliver useful information to executives and business users
    • Empower users with secure data access

    Ready to make your game plan and finally keep up with your data access requests?

     

  • Controlling Insider Threats on IBM i

    SB_HelpSystems_WC_GenericLet’s face facts: servers don’t hack other servers. Despite the avalanche of regulations, news headlines remain chock full of stories about data breaches, all initiated by insiders or intruders masquerading as insiders.
    User profiles are often duplicated or restored and are rarely reviewed for the appropriateness of their current configuration. This increases the risk of the profile being able to access data without the intended authority or having privileges that should be reserved for administrators.
    Watch security expert Robin Tatam as he discusses a new approach for onboarding new users on IBM i and best-practices techniques for managing and monitoring activities after they sign on.

  • Don't Just Settle for Query/400...

    SB_HelpSystems_WC_GenericWhile introducing Sequel Data Access, we’ll address common frustrations with Query/400, discuss major data access, distribution trends, and more advanced query tools. Plus, you’ll learn how a tool like Sequel lightens IT’s load by:

    - Accessing real-time data, so you can make real-time decisions
    - Providing run-time prompts, so users can help themselves
    - Delivering instant results in Microsoft Excel and PDF, without the wait
    - Automating the query process with on-demand data, dashboards, and scheduled jobs

  • How to Manage Documents the Easy Way

    SB_HelpSystems_WC_GenericWhat happens when your company depends on an outdated document management strategy?
    Everything is harder.
    You don’t need to stick with status quo anymore.
    Watch the webinar to learn how to put effective document management into practice and:

    • Capture documents faster, instead of wasting everyone’s time
    • Manage documents easily, so you can always find them
    • Distribute documents automatically, and move on to the next task

     

  • Lessons Learned from the AS/400 Breach

    SB_PowerTech_WC_GenericGet actionable info to avoid becoming the next cyberattack victim.
    In “Data breach digest—Scenarios from the field,” Verizon documented an AS/400 security breach. Whether you call it AS/400, iSeries, or IBM i, you now have proof that the system has been breached.
    Watch IBM i security expert Robin Tatam give an insightful discussion of the issues surrounding this specific scenario.
    Robin will also draw on his extensive cybersecurity experience to discuss policies, processes, and configuration details that you can implement to help reduce the risk of your system being the next victim of an attack.

  • Overwhelmed by Operating Systems?

    SB_HelpSystems_WC_GenericIn this 30-minute recorded webinar, our experts demonstrate how you can:

    • Manage multiple platforms from a central location
    • View monitoring results in a single pane of glass on your desktop or mobile device
    • Take advantage of best practice, plug-and-play monitoring templates
    • Create rules to automate daily checks across your entire infrastructure
    • Receive notification if something is wrong or about to go wrong

    This presentation includes a live demo of Network Server Suite.

     

  • Real-Time Disk Monitoring with Robot Monitor

    SB_HelpSystems_WC_GenericYou need to know when IBM i disk space starts to disappear and where it has gone before system performance and productivity start to suffer. Our experts will show you how Robot Monitor can help you pinpoint exactly when your auxiliary storage starts to disappear and why, so you can start taking a proactive approach to disk monitoring and analysis. You’ll also get insight into:

    • The main sources of disk consumption
    • How to monitor temporary storage and QTEMP objects in real time
    • How to monitor objects and libraries in real time and near-real time
    • How to track long-term disk trends

     

     

  • Stop Re-keying Data Between IBM I and Other Applications

    SB_HelpSystems_WC_GenericMany business still depend on RPG for their daily business processes and report generation.Wouldn’t it be nice if you could stop re-keying data between IBM i and other applications? Or if you could stop replicating data and start processing orders faster? Or what if you could automatically extract data from existing reports instead of re-keying? It’s all possible. Watch this webinar to learn about:

    • The data dilemma
    • 3 ways to stop re-keying data
    • Data automation in practice

    Plus, see how HelpSystems data automation software will help you stop re-keying data.

     

  • The Top Five RPG Open Access Myths....BUSTED!

    SB_Profound_WC_GenericWhen it comes to IBM Rational Open Access: RPG Edition, there are still many misconceptions - especially where application modernization is concerned!

    In this Webinar, we'll address some of the biggest myths about RPG Open Access, including:

    • Modernizing with RPG OA requires significant changes to the source code
    • The RPG language is outdated and impractical for modernizing applications
    • Modernizing with RPG OA is the equivalent to "screen scraping"

     

  • Time to Remove the Paper from Your Desk and Become More Efficient

    SB_HelpSystems_WC_GenericToo much paper is wasted. Attempts to locate documents in endless filing cabinets.And distributing documents is expensive and takes up far too much time.
    These are just three common reasons why it might be time for your company to implement a paperless document management system.
    Watch the webinar to learn more and discover how easy it can be to:

    • Capture
    • Manage
    • And distribute documents digitally

     

  • IBM i: It’s Not Just AS/400

    SB_HelpSystems_WC_Generic

    IBM’s Steve Will talks AS/400, POWER9, cognitive systems, and everything in between

    Are there still companies that use AS400? Of course!

    IBM i was built on the same foundation.
    Watch this recorded webinar with IBM i Chief Architect Steve Will and IBM Power Champion Tom Huntington to gain a unique perspective on the direction of this platform, including:

    • IBM i development strategies in progress at IBM
    • Ways that Watson will shake hands with IBM i
    • Key takeaways from the AS/400 days

     

  • Ask the RDi Experts

    SB_HelpSystems_WC_GenericWatch this recording where Jim Buck, Susan Gantner, and Charlie Guarino answered your questions, including:

    • What are the “hidden gems” in RDi that can make me more productive?
    • What makes RDi Debug better than the STRDBG green screen debugger?
    • How can RDi help me find out if I’ve tested all lines of a program?
    • What’s the best way to transition from PDM to RDi?
    • How do I convince my long-term developers to use RDi?

    This is a unique, online opportunity to hear how you can get more out of RDi.

     

  • Node.js on IBM i Webinar Series Pt. 2: Setting Up Your Development Tools

    Profound Logic Software, Inc.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. In Part 2, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Attend this webinar to learn:

    • Different tools to develop Node.js applications on IBM i
    • Debugging Node.js
    • The basics of Git and tools to help those new to it
    • Using NodeRun.com as a pre-built development environment

     

     

  • Inside the Integrated File System (IFS)

    SB_HelpSystems_WC_GenericDuring this webinar, you’ll learn basic tips, helpful tools, and integrated file system commands—including WRKLNK—for managing your IFS directories and Access Client Solutions (ACS). We’ll answer your most pressing IFS questions, including:

    • What is stored inside my IFS directories?
    • How do I monitor the IFS?
    • How do I replicate the IFS or back it up?
    • How do I secure the IFS?

    Understanding what the integrated file system is and how to work with it must be a critical part of your systems management plans for IBM i.

     

  • Expert Tips for IBM i Security: Beyond the Basics

    SB PowerTech WC GenericIn this session, IBM i security expert Robin Tatam provides a quick recap of IBM i security basics and guides you through some advanced cybersecurity techniques that can help you take data protection to the next level. Robin will cover:

    • Reducing the risk posed by special authorities
    • Establishing object-level security
    • Overseeing user actions and data access

    Don't miss this chance to take your knowledge of IBM i security beyond the basics.

     

     

  • 5 IBM i Security Quick Wins

    SB PowerTech WC GenericIn today’s threat landscape, upper management is laser-focused on cybersecurity. You need to make progress in securing your systems—and make it fast.
    There’s no shortage of actions you could take, but what tactics will actually deliver the results you need? And how can you find a security strategy that fits your budget and time constraints?
    Join top IBM i security expert Robin Tatam as he outlines the five fastest and most impactful changes you can make to strengthen IBM i security this year.
    Your system didn’t become unsecure overnight and you won’t be able to turn it around overnight either. But quick wins are possible with IBM i security, and Robin Tatam will show you how to achieve them.

  • How to Meet the Newest Encryption Requirements on IBM i

    SB PowerTech WC GenericA growing number of compliance mandates require sensitive data to be encrypted. But what kind of encryption solution will satisfy an auditor and how can you implement encryption on IBM i? Watch this on-demand webinar to find out how to meet today’s most common encryption requirements on IBM i. You’ll also learn:

    • Why disk encryption isn’t enough
    • What sets strong encryption apart from other solutions
    • Important considerations before implementing encryption

     

     

  • Security Bulletin: Malware Infection Discovered on IBM i Server!

    SB PowerTech WC GenericMalicious programs can bring entire businesses to their knees—and IBM i shops are not immune. It’s critical to grasp the true impact malware can have on IBM i and the network that connects to it. Attend this webinar to gain a thorough understanding of the relationships between:

    • Viruses, native objects, and the integrated file system (IFS)
    • Power Systems and Windows-based viruses and malware
    • PC-based anti-virus scanning versus native IBM i scanning

    There are a number of ways you can minimize your exposure to viruses. IBM i security expert Sandi Moore explains the facts, including how to ensure you're fully protected and compliant with regulations such as PCI.

     

     

  • Fight Cyber Threats with IBM i Encryption

    SB PowerTech WC GenericCyber attacks often target mission-critical servers, and those attack strategies are constantly changing. To stay on top of these threats, your cybersecurity strategies must evolve, too. In this session, IBM i security expert Robin Tatam provides a quick recap of IBM i security basics and guides you through some advanced cybersecurity techniques that can help you take data protection to the next level. Robin will cover:

    • Reducing the risk posed by special authorities
    • Establishing object-level security
    • Overseeing user actions and data access

     

     

     

  • 10 Practical IBM i Security Tips for Surviving Covid-19 and Working From Home

    SB PowerTech WC GenericNow that many organizations have moved to a work from home model, security concerns have risen.

    During this session Carol Woodbury will discuss the issues that the world is currently seeing such as increased malware attacks and then provide practical actions you can take to both monitor and protect your IBM i during this challenging time.

     

  • How to Transfer IBM i Data to Microsoft Excel

    SB_HelpSystems_WC_Generic3 easy ways to get IBM i data into Excel every time
    There’s an easy, more reliable way to import your IBM i data to Excel? It’s called Sequel. During this webinar, our data access experts demonstrate how you can simplify the process of getting data from multiple sources—including Db2 for i—into Excel. Watch to learn how to:

    • Download your IBM i data to Excel in a single step
    • Deliver data to business users in Excel via email or a scheduled job
    • Access IBM i data directly using the Excel add-in in Sequel

    Make 2020 the year you finally see your data clearly, quickly, and securely. Start by giving business users the ability to access crucial business data from IBM i the way they want it—in Microsoft Excel.

     

     

  • HA Alternatives: MIMIX Is Not Your Only Option on IBM i

    SB_HelpSystems_WC_GenericIn this recorded webinar, our experts introduce you to the new HA transition technology available with our Robot HA software. You’ll learn how to:

    • Transition your rules from MIMIX (if you’re happy with them)
    • Simplify your day-to-day activities around high availability
    • Gain back time in your work week
    • Make your CEO happy about reducing IT costs

    Don’t stick with a legacy high availability solution that makes you uncomfortable when transitioning to something better can be simple, safe, and cost-effective.

     

     

  • Comply in 5! Well, actually UNDER 5 minutes!!

    SB CYBRA PPL 5382

    TRY 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.

    Request your trial now!

  • Backup and Recovery on IBM i: Your Strategy for the Unexpected

    SB HelpSystems SC 5413Robot automates the routine 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:
    - Simplified backup procedures
    - Easy data encryption
    - Save media management
    - Guided restoration
    - Seamless product integration
    Make sure your data survives when catastrophe hits. Try the Robot Backup and Recovery Solution FREE for 30 days.

  • Manage IBM i Messages by Exception with Robot

    SB HelpSystems SC 5413Managing messages on your IBM i can be more than a full-time job if you have to do it manually. 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:
    - Automated message management
    - Tailored notifications and automatic escalation
    - System-wide control of your IBM i partitions
    - Two-way system notifications from your mobile device
    - Seamless product integration
    Try the Robot Message Management Solution FREE for 30 days.

  • Easiest Way to Save Money? Stop Printing IBM i Reports

    SB HelpSystems SC 5413Robot 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:

    - Automated report distribution
    - View online without delay
    - Browser interface to make notes
    - Custom retention capabilities
    - Seamless product integration
    Rerun another report? Never again. Try the Robot Report Management Solution FREE for 30 days.

  • Hassle-Free IBM i Operations around the Clock

    SB HelpSystems SC 5413For over 30 years, Robot has been a leader in systems management for IBM i.
    Manage your job schedule with the Robot Job Scheduling Solution. Key features include:
    - Automated batch, interactive, and cross-platform scheduling
    - Event-driven dependency processing
    - Centralized monitoring and reporting
    - Audit log and ready-to-use reports
    - Seamless product integration
    Scale your software, not your staff. Try the Robot Job Scheduling Solution FREE for 30 days.

  • ACO MONITOR Manages your IBM i 24/7 and Notifies You When Your IBM i Needs Assistance!

    SB DDL Systems 5429More than a paging system - ACO MONITOR is a complete systems management solution for your Power Systems running IBM i. ACO MONITOR manages your Power System 24/7, uses advanced technology (like two-way messaging) to notify on-duty support personnel, and responds to complex problems before they reach critical status.

    ACO MONITOR is proven technology and is capable of processing thousands of mission-critical events daily. The software is pre-configured, easy to install, scalable, and greatly improves data center efficiency.