Running CM WebClient Applications 24 Hours a Day, 365 Days a Year

Andrew Leggett / Sr. Application Consultant

running

If you have a live, CM WebClient web application, you will probably want to upgrade your existing site sometime, whether to fix a bug, add new features, or just to update the graphics.

Upgrading has traditionally been a pain.  You had to make sure no-one was using the system and schedule a window of time where the system would be unavailable.  This is not always practical if your system is used around the world and needs to run 24 hours a day, 365 days a year.

Fortunately, if you are using Tomcat v7 or later as your web server, there is already a built-in solution for this, and it’s incredibly simple to implement.

This feature is called ‘Parallel Deployment’, and this is how it works:

  1. When you are ready to deploy your CM WebClient war file, you just need to rename it to add ‘##’ followed by a sequence number, e.g. rename “MyWebApplication.war” to “MyWebApplication##0001.war”.
  2. Copy this file to your “WebApps” folder in your Tomcat installation.  Tomcat monitors this folder and will automatically unpack and deploy your war file.  Your application will be available to your users at the usual URL.
  3. When you need to upgrade, rename your new war file to include a higher sequence number, e.g. “MyWebApplication##0002.war” and copy it to your “WebApps” folder.
  4. Tomcat will take care of everything from this point.  If there are users currently using the previous version, they will continue to use that version for their current session.  Any new users connecting to the URL will be directed to the new version.  Once all the sessions for the old version have expired, Tomcat will undeploy the old version and clean up the files.
  5. Repeat for each upgrade, just increment the sequence number each time.

The 3rd of Four Tips in Designing a Good Mobile Application

Lily Taharudin / Application Consultant

Have you ever been annoyed when you encounter a web page where you have to scroll and scroll to get to the content you want? Imagine the same page on your phone. You’d quickly give up trying to find the information you need. Complexity is another issue. When there is too much content crammed on a page, it can be very difficult to read.

While there is a legitimate fear that people won’t click to another page, most will be more likely to look elsewhere when they struggle to locate the data they want. Good headers taking you to new pages will make your application far more usable and likeable to your customers and employees.

Imagine a restaurant site. One might have a set of beautiful pictures, followed by their location and hours, then a link to menus and a way to make a reservation. For someone already sure they want to eat there, they want to get to contact/reservation information instantly. A more successful site might have the following headers, leading to new pages:

Screen Shot 2016-01-12 at 2.32.30 PM

Each page might have a different restaurant image, but this design allows anyone to quickly get to the information they need.

Here is a real-world example of a great mobile screen:

3_of_4_tips

The basic information is available on the first screen and you don’t have to scroll. Each page has a full page of related data. You only scroll as far as you need to go.

Keep this in mind when you are designing your mobile applications. When it comes to a mobile application, simpler is better.

User Storage for C# and Java

Lorenz Alder, Senior Consultant / Software Architect

User Storage helps us with integration of third party libraries such as mail, ftp, NoSQL DB, file system access etc. Once an object is instantiated through source code, we store it in User Storage and make it accessible to all CA Plex functions in the call graph.

The CA Plex runtime supports the following methods to store any Java or C# object in a globally accessible Store.

Set

public void setToUserStorage(String key, Object obj)

Get

public Object getFromUserStorage(String key)

Remove

public void removeFromUserStorage(String key)

Java syntax examples

getApp().setToUserStorage("WantToFindTheObjWithThisName", myObj);myClass myObj = (myClass)(getApp().getFromUserStorage("WantToFindTheObjWithThisName"));if(myObj != null){    // do some stuff with myObj}

C# syntax examples

M_ObApp.setToUserStorage("WantToFindTheObjWithThisName", myObj);myClass myObj = (myClass)(M_ObApp.getFromUserStorage("WantToFindTheObjWithThisName"));if(myObj != null){    // do some stuff with myObj}

Best practice

Create wrapper classes for third party libraries with only the methods you actually need. This simplifies the API and will let you change the implementation easily when better libraries become available.

Free Tools to Make Your CM WebClient Apps Shine

by Andrew Leggett / Sr. Application Consultant

CM WebClient, CM WebClient Mobile and CM WebClient HSync all allow you to customize the style, appearance and behavior of your web applications. But what if you want a little more? What else can you do? The following sites provide free tools that run within the browser to help you make your applications stand out.

1. JSFiddle (http://jsfiddle.net/) lets you quickly try out your JavaScript, HTML and CSS code right in the browser. Your ‘fiddles’ can be saved so that you can test them out in different browsers, or allow others to collaborate.

2. Sencha Fiddle (https://fiddle.sencha.com/) is similar to JSFiddle, but is designed for the Sencha Touch framework used by CM WebClient Mobile and CM WebClient HSync. Run and test your code instantly.

3. Free Icon Maker (https://freeiconmaker.com/ – requires Adobe Flash) provides a large collection of scalable icons, plus tools to customize their appearance. Treat your users to a modern, consistent makeover.

4. CSS3 Generator (http://css3generator.com/) allows you to try out different styles without having to learn CSS. Simply paste the results into your CSS file to add some style.

5. Paletton (http://paletton.com/) – Some color combinations simply look better than others. This tool can help you pick colors for your application that are easy on the eye.

6. Chrome Developer Tools (http://webdesign.tutsplus.com/articles/faster-htmlcss-workflow-with-chrome-developer-tools–webdesign-8314) this tutorial explains how you can use the Chrome F12 Developer tools to prototype in real-time how the visual designs you created with the above tools will make your CM WebClient application look.

Be a web application wizard without having to beg management for more software and without having to learn new languages.

The 2nd of Four Tips in Designing a Good Mobile Application

Lily Taharudin / Application Consultant

Web and mobile are different.  When you are building things for the web, it may seem easy simply to port it to mobile devices, but the user experience may not be as good.  Instead, consider the smaller form factor and adapt your design to make it easier for mobile customers to interact with the application.

The second tip is to use bigger fonts and buttons for mobile apps.  Even the most adept mobile user may find it difficult to read your content and accurately select the option they want if the font and buttons are too small.  The goal is to ensure that they won’t have to zoom into the page to click or read the content.  You also want to make sure that they don’t click the wrong button and then have to start over.  Either problem increases user frustration and may lead to them abandoning your site.

q3p948hqpascjmc

Note the differences here.  The web application assumes that the user has a full screen so has smaller print and buttons that are easy to click on with a mouse.  However, for the mobile app, CM First increased the size of the font and used buttons that are big enough to be easily manipulated with a thumb or finger.

Always use yourself as a test subject.  If you find it hard to deal with your mobile app, so will your customers.

 

Using the Log File for Your Own Purposes

by Andrew Leggett / Sr. Application Consultant

WebClient developers know how useful the log file is for debugging and for tracking errors, but did you know that you can send your own messages to the log file from your CA Plex action diagram?

This technique can be used to provide an insight on what happens ‘behind the scenes’ without affecting the end user.  Note that this is only for Java client or server functions.

To log a message to the log file:

  1. Create a new JAVA source code object, e.g. “Send WebClient Log Message”, and provide a parameter field:
    *Message Text.
  2. Add the following source:import com.adcaustin.webplex.WebPlexLog;
    WebPlexLog.errorLog(&(1:).toString());
  3. Create an API Call to your new source code object, and pass in your message text.

The First of Four Tips in Designing a Good Mobile Application

by Lily Taharudin / Application Consultant

It is usually not a good idea to use a desktop application design and apply it directly to a mobile application. Some web developers tend to fit in a lot of things on a page in a mobile application. However, this is usually not a good design from the user perspective. Web developers need to keep in mind they need to design in a way that makes it easy for a user to interact with the page and navigate to other pages.

  1. The design for phone and tablet should be different.

The web developer needs to keep in mind whether the application will be accessed via phone or tablet device. When designing for a tablet application, the user has a bigger visual area so the application can have a side menu which always appears on the right or left-hand side.

mobile1

To get a great view of a lot of complex information, tablet designs fully exploit the larger space. On a phone, it would be tough to view the following:

mobile2

These kinds of design may not be a good idea for phone devices. The side menu may need to be hidden when the user has chosen an item from the menu. You want something clean and clear that will function even on the smallest screen dimensions.

mobile3

Here, the menus are on the bottom, easily visible. And when you click for details, all is laid out in a visible manner.

.NET Dynamic Calls

by Lorenz Alder, Senior Consultant / Software Architect

Ever wanted to build a menu processor and tried to figure out how to call functions by the function names stored in the database? Here’s what you need to know:

  1. Create a prototype function defining input and output parameters for callees
    Untitled
  2. Let all functions you want to dynamically call to inherit from the prototype function
    Untitled1
  3. Create a caller function and define fields for Source Code parameters
    Untitled2
  4. Caller sets function name from values (simulating DB access). Implementation name of the function and the full function name including the package structure are needed. (“Function1”, “App.UI.Function1” in the example) We also add a dummy call to the prototype function and map input/output parameter to local variable LocalParmsL.
    Untitled3
  5. Subroutine “Dynamic Call” sets necessary paramters for the source code
    Untitled4
  6. Formatting parameters for Source Code with Messages
    Untitled5
  7. Source Code: DynamicCall
    Untitled6
  8. Parameters for Source Code
    Untitled7
  9. Parameter mapping for Source Code: DynamicCall
    Untitled8

If there are any questions regarding this post please feel free to contact me at lorenz.alder@cmfirstgroup.com.

Populate Action Diagram (AD) Variables using two Variable Palettes

Lorenz Alder, Senior Consultant / Software Architect

Ever wanted to use more than one variable palette ? Populate the variables of a CA Plex function with the fields you already defined in a variable in another CA Plex function ? Here’s how to achieve this.

Open the Action Diagram of the Function you need to edit. The AD and the Variable Palette is shown.

CA Plex tip No 3 (1)

 

Then open the CA Plex function containing the variable you want to copy from.

CA Plex tip No 3 (2)

 

At that point press CTRL+SHIFT+TAB!

CA Plex tip No 3 (3)

 

You can now use drag ‘n’ drop to populate the variables with fields from the other CA Plex function. Have fun!

How to Set the Printer Device in a CA Plex server job from the IBM i User Profile

Lorenz Alder, Senior Consultant / Software Architect

It is common to define the Printer Device for an IBM i user on his User Profile. When the user runs a CA Plex client that starts a job on the IBM i we want to make sure that printer output from that job is sent to the Printer Device stated in the user profile. We can use the YOBCHGENVX program shipped in the CA Plex runtime library (PLEX710) to change the jobs started by the CA Plex dispatcher.

plex1

Change the shipped source as follows and compile.

plex2

The Printer Device will now be set to the printer defined in the user profile of the connecting user.

 
 
© 2013 CM First Group - All rights reserved