Archive for Uncategorized

Top Challenges to Going Mobile (And How To Do It Anyway)

By Denise P. Kalm / Consultant

We’ve all been relying on stalwart legacy applications for years, but now, increasing numbers of customers of all ages insist that companies have at least a web presence. But what they really want is exceptional mobile access. The demand is only growing. According to comScore’s latest MobiLens report (2016), 57% of the time 25-34 year olds are accessing online systems they choose their smart phones. In 2016, mobile usage has increased 81% while desktop access has dropped 4%. Mobile web audiences are 3x the size of mobile app audiences and are growing twice as fast.[1]

Yet so many companies haven’t gotten started on web or mobile efforts. We had to wonder why, given the potential huge impact on the bottom line and customer retention. Here is some of what we found, along with a way to solve the problem.

  1. Mobile application development expertise challenge – Many companies cite the lack of experienced, proficient app designers. The coding languages and approaches are vastly different from their legacy applications but the company is loath to invest in training their existing developers. At the same time, it’s hard to get the talent you need at an affordable price.

The good news is that you can apply the same abilities you already have to the mobile challenge if you pick the right web and mobile development solution. CM WebClient allows the existing development team to use what they already know to web-enable existing applications. No training required.

  1. Dealing with Device Fragmentation – The devices people use all differ from each other and the OS’ they run are vastly different. Some people hesitate to make the move thinking they will now have to maintain a large library of every app—one version for each variant. That’s costly, time-consuming and risky.

But what if you didn’t have to? What if you could create an app that runs on all platforms with no issues? CM WebClient allows you to develop once and have only one version to maintain. The result is a fully portable app that looks good and is easy to use.

  1. Exploiting the App Capabilities and Get Your App Noticed – Many approaches to app development leave you with a vanilla app that doesn’t interest anyone. Especially with younger audiences, you want to have some sizzle and the ability to exploit all the features available.

CM WebClient offers a wide variety of ways to customize and enhance your app. And to take it further, the partnership between CM First and Sencha offers even more capabilities, allowing you to create the app you desire.

  1. Making it Affordable – It can be very expensive to create a new app. And then, you need to create another one. If you do it from scratch, you are recreating your OLTP application base and that’s going to cost a lot. As it is hard to measure the customers lost and the business opportunities missed, it can be hard to win this argument with management.

CM WebClient can create a master app and you can customize screens from that.  Many CM First customers have done this and for a given business function, easily created the screens to support all their needs.

  1. Dealing with the Screen Real Estate – Screen sizes vary, from the smallest smartphone to the largest tablet. But how do you design for all those options? And the OS can matter as well.

CM WebClient supports Responsive Design. This approach makes all that tailoring a snap. Responsive Design allows more fluidity in screen appearance and will help you solve that problem. It doesn’t hurt to have beta testers check out their devices first, just to ensure a quality experience.

CM WebClient may not solve all your problems, but it’s a great way to get started with web and mobile-enablement. It eliminates a lot of issues that have kept companies from achieving a goal of having a solid web presence. Check it out!

[1] https://www.comscore.com/Insights/Presentations-and-Whitepapers/2016/The-2016-US-Mobile-App-Report

Using Carousel to Enhance Mobile Imaging

By Lily Taharudin / Application Consultant

Carousel is a great feature that allows users to swipe through multiple, full-screen pages. It is generally used for viewing multiple images in an application such as Instagram and Facebook. The multiple items are structured into a single stretch of a horizontal or vertical line. On the selected item, there are indicator dots that represent how many items are available for viewing. The indicator dots also let the users know which item in the page is currently being viewed. This feature is available through custom templating on CM WebClient Mobile.

Below is the sample code on how to set up Carousel:

 

/(!MainArea)

{

xtype: “container”,

items: [

{

xtype: “container”,

items: [

{

xtype: “carousel”,

height: “12em”,

items: [

{

xtype: “container”,

items: [

/(!AttachPoint:name=CarouselFilter1)

]

},

{

xtype: “container”,

items: [

/(!AttachPoint:name=CarouselFilter2)

]

}

]

}

]

}

]

},

/(!MainArea)

 

Once you try it, you’ll find you’ll be using it in a variety of ways on many of your applications.

Make CM WebClient Applications Look Great

By Andrew Leggett / Sr. Application Consultant

If you are looking to enhance the appearance of your CM WebClient application, there are a couple of ways to specify CSS for individual or similar controls.

  1. Use the ‘class=’ control name parameter to specify the CSS classes to apply for the control.  For example, the Apply button has the following control name parameters:

ApplyBtn:MainArea:class=apply:default

The ‘class=apply’ allows us to set add the following class to one of the .css files.  You can add multiple class names separated by spaces.  You can use the ‘class=’ parameter for when you want to use several controls with similar appearance.

      .apply{

background: green;

color: white;

}

  1. Use the control ID to specify CSS styles for an individual control. For example, the Refresh button has the following control name:

RefreshBtn:MainArea:default

The HTML control will have the ID ‘RefreshBtn’, so it can be selected in the CSS with the #RefreshBtn selector:

      #RefreshBtn {

background:yellow;

border-radius: 15px;

}

Manipulating Object Positions in CSS

By Abram Darnutzer / Sr. Application Consultant

With HTML5/JavaScript applications, item positioning on a screen falls into two categories: relative positioning or absolute positioning. Absolute positioning for mobile applications should be avoided (with few exceptions) since mobile devices vary greatly. Relative positioning can be tricky to get just right, however. Below are a few quick and easy tricks to position items better in your app!

Header Setup

A typical header region contains two things: a centered logo and a back button in the top left corner. (You should limit the area to include 1-2 other items since you don’t want to overcrowd the space.) If you use Sencha Touch’s spacing to set this up, you may notice that your logo will be off-centered because the items on each side of the logo are different sizes. We can do some simple CSS to avoid this eyesore.

If you want an item to appear in the top left:

.TopLeftButton {

position: absolute;

left: .2em;

}

If you want an item to appear in the top right:

.TopRightButton {

position: absolute;

right: .2em;

}

And for the centered logo:

.CenteredLogo {

height: auto;

margin: auto;

}

You’ll end up with something like this:

cm-centered-logo

The code is setting a discrete constant distance between the left and the right buttons from the edge of the screen and marking the logo margins as equal to the left and to the right. (Note: Since the left and right buttons are position absolute, they do not factor into the margin calculation.)

Displaying a Button Image Over Button Text

In WebClient Mobile, the button image and button text will appear on the same line by default because they both use the Span HTML tag, which displays items on the same line. Getting around this issue is simple.

For the button CSS:

.Mybutton {

display: table-cell !important;

}

For the button image:

.Mybutton .x-button-icon {

vertical-align: top;

margin-left: auto;

margin-right: auto;

}

And for the button text:

.Mybutton .x-button-label {

display: table-row;

vertical-align: bottom;

}

This will produce a layout like this:

cm-layout-css-objects

These methods will ensure that your carefully designed objects will display optimally on whatever device your customers choose!

Automate Your Web Page Testing

By Denise Kalm | Industry Expert

A new, clean web page isn’t built in a day — it requires major testing before going live. Web pages are software, and software is prone to bugs. Problems with your pages can seriously affect your line of business, and the wide visibility of a web page harbors the risk of damaging your brand when mistakes happen. (And they do.) Mistakes in this arena are deadly not only because customers might seek out other business: Public mistakes are just plain embarrassing!

Though most application software goes through complex automated QA and load testing, too often web pages don’t get the same diligence and attention, because they “look just fine.” You may manually walk through various options, but the “if it ain’t broke, don’t fix it” mentality is tempting. It’s possible you’ve known for years that your company needs an automated tool, but budget constraints have placed it out of reach for except the largest companies. But now small startups are working harder and getting smarter, and small companies are accordingly offering creative, affordable solutions. In short, you can no longer afford not to evaluate your automation needs.

So what kinds of questions should you ask yourself while evaluating? “How repeatable are your manual tests?” “How long does each test take?” Automating the process allows you to run tests repeatedly as you develop the web pages without impacting the development schedule. For web applications, tests need to be run on all operating systems and hardware types your customers might use — a complicated, unwieldy process when performed manually. Automated test scripts ensure that you cover all the bases, freeing up time and money that you can then devote to other areas.

You’ll also have the option to create more tests than you would ever want to execute manually. (Remember: The more you test, the more reliable your software will be.) You not only want to test the ideal way a customer works with your application; you also need to run tests that’ll check when things go wrong. It is essential to detect where, how, and why your application isn’t handling a situation correctly. Once your solution is in place, you can have the product report on in-flight, transaction processing steps to see contents of tables and files, and the memory to understand and correct problems.

So what does automation mean for you?

  1. Automation means accuracy. Each run will be exactly the same as the last, and every important aspect will be documented. Unless you hire out, developers in small shops end up doing the testing, which wastes valuable company resources (and is hardly fun for them).
  2. Automation means scale. No one can bring together hundreds or thousands of users to test the capacity of a system and detect potential issues, such as out-of-sequence database updates. Only an automation solution can test the limits of your application as thoroughly as if it were running live.
  3. Automation means a happier and more productive team. When developers and QA can do what they love instead of what they find tedious, everyone smiles more. Simple as that.

What are the steps involved in automation?

The first step is deciding what tests to run — the most obvious of which are unit, functional, regression and load testing. Unless this is a brand new application, you’ll also need to conduct regression testing to ensure you haven’t broken anything in the existing code. Your application may have other needs, so be sure to have a complete list before you search for a product.

Once you know this, you can prepare a list of requirements (or RFP) to present to a list of vendors, such as supported platforms, scripting languages, the ability to record and/or replay, and kinds of testing they offer. Vendors must, of course, be able to test against all the common browsers, but they’ll also need to test all the popular mobile platforms.

This may sound overwhelming, but CM First can help!

We at CM First can help you develop efficient ways to automate testing of your browser, mobile, green screen, and client-server applications with industry-leading products coupled with best practices training and mentoring. We are particularly experienced with applications developed with CA Plex and CA 2E, but we are not limited to applications built with those products. (Anything that has an interface can be automatically tested, including packages like Office and Salesforce.)

In sum, running tests early in the development cycle expedites the process of getting your working product to market. Let CM First help smooth the transition from manual to automated so you stress less and profit more.

When will you start automating?

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.

 

lily

 

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:

myPushButton:MainArea:class=CustomCSSClass:default

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

TestFld:MainArea:label=MyTestLabel

Or an icon class for a Push Button:

TestBtn:MainArea:iconCls=more

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

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.

 
 
© 2013 CM First Group - All rights reserved