The Fourth of Four Tips for Designing a Good Mobile Application

Lily Taharudin/Application Consultant

When designing applications just for a website accessed only by a desktop or laptop, many of us got comfortable using low-resolution images. They loaded faster and back in the day, with networks and browsers working more slowly, everything you could do to improve performance truly mattered.

Now, when you don’t know who will be accessing your website and how, you want to optimize the experience for everyone. As noted in prior tips, design of your mobile-facing site cannot be a clone of your old desktop-facing website. In most cases, you want to use high-resolution images now. Most devices have high-definition screens which require an image double the resolution of a desktop. Having extremely high-resolution images will help you avoid having pixelated or blurry images when viewed on a retina-quality screen.

Expectations for visibility have increased and people demand clear images. With download speeds greatly improved, loading time for these images is less of an issue, so make sure you have sharp images to create a great user experience. As you see below, the low res image is a poor representation of your brand and can quickly put people off. Get it right and keep people on your site.




Using CA Plex Objects in Control Names for CM WebClient

Abram Darnutzer – Sr. Application Consultant

When working with CM WebClient and CM WebClient Mobile, there are times where you have to enter custom parameters into the Control Name for a CA Plex Panel Object.

For normal WebClient, you could be setting a CSS class for a button like this:


Or for CM WebClient Mobile, you could be setting a Label for an Edit control:


Or an icon class for a Push Button:


There are times where hard-coding these values can bring maintenance problems, and doesn’t take advantage of the powers of CA Plex. So, there must be another (sometimes better) way. By using CA Plex objects in your Control Names, you can affect larger portions of your application with a single change.

Let’s look at the three examples from before. But this time we will use CA Plex objects to set the values.

myPushButton:MainArea:class= <VAL:Classes.MyButtons>:default
TestFld:MainArea:label= <LBL:CompanyID>
TestBtn:MainArea:iconCls= <VAL:Icons.TestIcons>

Here, you can see we are using CA Plex Value and Label objects in the Control Name. These can be entered by hand, or dragged and dropped from the Object Browser.

Now, if I wanted to change the label for every field that uses the CompanyID label, all I need to do is change the literal for that label object and regenerate my function. It’s a great way to avoid hard-coding and the maintenance issues it brings.

Keeping Track of Your Changes

Andrew Leggett / Sr. Application Consultant

When working on your CA Plex application, it’s easy to lose track of all the entities, functions, panels, fields and more that you’ve recently modified. Luckily, there are a few options in CA Plex to aid your memory.

1.  Automatic Lists

With this option, CA Plex will automatically add any objects you create or change to a List object. There are a couple of steps to using this option.

  1. In File -> General Options, open the ‘Impact Analysis’ tab and check ‘Automatically log modified objects’.

  1. Now set the List object to use. Go to File -> Model Options and press ‘Select’ to select an existing List, press ‘New List…’ to create a new one.

Just find the List in the Object Browser, and everything you’ve worked on recently is there.

2.  Highlight Modified Objects

This is a useful option to make it easy to spot objects in the Object Browser that have been modified or created since you last updated the group model. To set this option, right-click in the Object Browser and select View -> Highlight Modified Objects.

Untouched objects show in grey while modified objects show in black.

3. Highlight Modified Triples

In the Model Editor you can highlight any triples you’ve added or changed since you last updated the group model. To set this option, open the Model Editor and select View -> Options and check ‘Highlight Modifieds’.

With this option, unchanged triples show in grey while your latest triples are in full color.


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

Andrew Leggett / Sr. Application Consultant


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:


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.


public void setToUserStorage(String key, Object obj)


public Object getFromUserStorage(String key)


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 ( 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 ( 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 ( – 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 ( 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 ( – 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 (–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.


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


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:


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.


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

© 2013 CM First Group - All rights reserved