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.

2 Ways to Manage Blank Status Field Conditions

Mark Schroeder, Senior CA 2E Consultant

Do you ever get tired of having to create a workaround so you can avoid showing the ‘blank’ condition description for your status fields?  By default, you have to enter code to retrieve conditions for display on a screen and then, if it is a blank condition, you must handle that separately so the word ‘blank’ (or whatever you have called ‘blank’ in your model) doesn’t show on the screen. There are a few ways to take care of this issue.  Here are a few I find useful.

2e1

1. Create a derived field for the condition and manage the retrieval of conditions inside of the derived field.  Any time the blank condition is retrieved, just replace the condition description with a blank.  This works well if you do not mind having derived fields for most of your condition fields.  The result will add the derived field to a screen; it will take care of the grunt work of displaying the correct condition description as well as not showing a description if the result is blank.

2. I ran across another nice way to handle this as well.  First, when you create conditions, never create a ‘blank’ condition.  Second, create a text field that is longer than any field you will come across and call it ‘blank.’  Now you can use this blank field for comparison with any of your condition fields and you do not have to worry about the word ‘blank’ showing on your screen because you do not have any actual condition called ‘blank.’

2e22etip3

In one of the last models I worked with, we used the ‘blank’ field as the primary way to manage blank conditions.  In the beginning, I found it a bit strange to do this. I was used to having to create a blank condition for any fields I wanted to compare with ‘blank’. However, as I got used to it, the idea grew on me. I now think it is a pretty good method.  Give it a try and let me know what you think.  Feel free to share your preferred method of managing the blank field condition.

Edit Faster

Lorenz Alder, Senior Consultant / Software Architect

Be lazy; reduce the number of characters typed into the AD Editor.  You can use Synonyms and Default Instructions to reduce your effort.

Choose ‘General Options’ from the File Menu and switch to the ‘Action Diagram’ tab.

Tick the ‘Use Defaults’ and ‘Use Synonyms’ boxes. Press ‘Edit Synonyms’ button.  To add a synonym, select the instruction on the left, type your synonym and press the ‘Add’ button to add your synonym. Select the newly added synonym and press ‘Apply.’ In the example below, we define ‘fes’ as the synonym for ‘For Each Selected.’  After a change to the synonym table you need to restart Plex.

ef1

In the AD Editor, typing ‘fes’ now translates to ‘For Each Selected;’ entering ‘fes gridp’ is now shorthand for ‘For Each Selected GridP.’

It is good practice to standardize the synonyms throughout the development team.  Once the synonyms are defined on one workstation (hopefully, in collaboration with all team members), they can easily be copied from the Plex.ini file onto another workstation. [Action Diagram Instruction Synonyms] is the section name, where the synonyms are stored. Just copy the whole section.

Example Synonym Section in Plex.ini :

[Action Diagram Instruction Synonyms]
Call=C
Case=C
Cast=C
Comment=*,//,;
If=I
Set=S
While=W
For Page=FP
For Each Row=FER
For Each Selected=FES
For Each Modified=FEM

As you can see from the example, you don’t have to type “Comment” to add a comment into the AD, just type // My comment . The // synonym is defined by default.

Tired of the CA Plex Source Code Editor?

by Lorenz Alder, Senior Consultant / Software Architect

If you’re tired of dealing with the supplied CA Plex source code editor, here’s how to change it:

Find your Plex.ini file:
“C:\Users\YourAccount\Documents\CA\Plex\7.1\Plex.ini”

Open the Plex.ini file with your favorite Editor.

In the [Build] section, you can define your Default Editor. Change “PlexSrcEdit.exe” to the .exe of your choice. The example shows Notepad++ as the Default Editor.

In the [Source Editor] section, you can define special editors depending on the file extension of the source file.

The example below shows how to make use of the Visual Studio Editor for .cs and .xaml files.  Please note the /edit option. This option will allow you to reuse an existing instance of Visual Studio if more than one file is opened.

Example from Plex.ini :

[Build]
Comments=1
Source Editor=”C:\Program Files (x86)\Notepad++\notepad++.exe”

[Source Editor]
.config=PlexManagementConsole.exe
.restext=notepad.exe
.cs=”C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe /edit”
.xaml=”C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe / edit”

 
 
© 2013 CM First Group - All rights reserved