Archive for Smartphone

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?

iOS App Tutorial for CA Plex / CM WebClient

Introduction

Developers that have started using CM WebClient 1.8 Mobile’s touch optimized templates usually find that creating a mobile web app deployment is straightforward. But while deployment as a web app is acceptable for some, other developers creating commercial and specialized applications often benefit from native deployment. For example, you may need to use the camera to capture pictures or scan documents, implement a signature capability, or access the phone contact database. CM WebClient supports this style of native application using Adobe/Apache PhoneGap. There is a Camera and Signature template available, and you are encouraged to create your own device templates and share on the WebClient Mobile Google Code project.

This tutorial is for Apple devices (iPhone / iPad), and also requires use of a Mac to run Xcode and to meet Apple licensing requirements. If you are targeting Android or Blackberry devices, you will need to follow a similar but different procedure for each device platform. I.e. your core code remains the same, but the PhoneGap native wrapper is different for each technology. PhoneGap has tutorials available for every supported platform.

Download and Install Software

For this part you need access to an Apple Mac. Point the browser from your mac to the Apple developer website, http://developer.apple.com. Download the latest version of Xcode and the iOS SDK’s. It is over three gigabytes, so you may want to have a couple coffees at this point. You may also want to take some time to sign up as a developer, either individually or within an organization. Organizational approvals can take weeks to process by Apple, so it is always better to do this well in advance of needing to upload your app for public distribution.

After you have installed Xcode, download the PhoneGap distribution from http://phonegap.com. This example is using version 1.3.

Run the installer

NewImage

Follow the steps on the installer wizard

NewImage

Create Your Xcode Project

Open Xcode and select “Create a new Xcode project”

New Project

Choose PhoneGap as the template for your new project

NewImage

Give your project a name and identify your company. Typically your organization / company id will be your domain name in reverse word order. It is important to deselect Automatic Reference Counting – otherwise build errors will result.

NewImage

Select a directory location for your project. A subfolder will be created beneath the directory you select to contain your project. It is recommended to also create a local repository for source code changes – that way you can easily revert if you make a mistake.

SelFolder

Next, enter project information. You can drag and drop application icons if you wish (you can do this later if you don’t have any  icons prepared).

NewImage

Keep scrolling down and enter iPad information as well as application launch images (splash screens). Do not enter Entitlements unless you know what to fill in.

NewImage

Hit the validate setting button to make sure all is ok

NewImage

You may get a window like this. Accept this recommendation.

NewImage

It is recommended to select the automatic snapshot option

NewImage

Configure and Run

You will now see the Xcode workbench. First we have to run the application once in order to create a “www” folder that contains the Phonegap startup code and resources. Select a simulator target and hit the run (play) button.

NewImage

You will see this error in the simulator – this is expected and is not an issue. It means that your app cannot find a start page.

NewImage

This next step is very important and must be done exactly as described. We need to create a folder reference in Xcode to our www and javascript resources. You do this by opening Finder and dragging the “www” folder beneath the project onto the Xcode project work space. You will see a green plus sign indicating the drag target is accepted. You will then be prompted to create a reference to this folder.

NewImage

Use the following settings

NewImage

Run your project again, and you should see that PhoneGap is now working. The HTML5 and JavaScript you see are running directly on the device, not served up by a web server.

NewImage

Connect your application

The next step is to connect your CM WebClient pages to PhoneGap. There are two parts to this.

First we need to add a whitelist entry to allow your app to access external resources. You do this in the PhoneGap.plist file.

NewImage

Next, add some JavaScript in the index.html file to access your dynamic content. For production applications, you will want to create some static web pages and a mechanism to check the online status. This is straightforward but beyond the scope of this tutorial.

NewImage

Run your app again from Xcode and you should be rewarded with your app on your device emulator!

NewImage

Congratulations, You Are Deployed!

You need some further steps to deploy your app to physical devices and to iTunes. Stay tuned for more blog posts, or contact us at CM FIrst for assistance if you are on one of our support plans.

 

HTML5 Mobile Reference Site Launches

NewImage

From time to time CM First gets asked if the Sencha Touch / PhoneGap technology behind CM WebClient 1.8 Mobile for CA Plex can produce a first class touch-optimized mobile experience. Although HTML5’s promise of single code base across devices is highly attractive, there is often some skepticism expressed. Is this a technology can handle produce an experience equivalent to the native device alternative, laboriously crafted by hand multiple times for iOS Objective C, Android SDK, and BlackBerry?

We invite you to research the question yourself by checking out this HTML5 web site. NOTE: Must be accessed from an Android, Apple, or Blackberry mobile device, or Safari/Chrome from a desktop browser.

(http://m.descuentolibre.com)

Descuento Libre is dedicated to serving the Latino community – and those who love the Latino culture – through significant discounts on retail, services, restaurants, entertainment, and recreational activities. Descuento Libre’s deals focus on local businesses and establishments patronized by the Latino community, as well as places that promote Latino culture. The company is also committed to supporting the local Latino community by engaging at the grassroots level and partnering with non-profit organizations. Descuento Libre is active in major metro centers across the USA and Mexico.

CM First developed the transactional mobile web site for Descuento Libre. Stay tuned for appearances on the iTunes, Android, and Blackberry market places.

DL4DL2

 

 

 

 

 

 

 

 

 

 

 

DL1DL3

Interested in a web site like this? Email us at info@cmfirsttech.com for more information.

Movie – Debugging on Devices with Firebug

Movie on how to turn on the iOS device JavaScript console and enable Firebug debugging

Webclient Mobile Apps Demo Posted

Demonstration of new capabilities, available in the upcoming 1.8 release.
View more videos from CM First Technologies.

Plex + WebClient Does Smartphone/Tablet

Gartner has identified Cloud Computing and Mobile Applications as the top 2 strategic technologies for 2011 (http://www.gartner.com/it/page.jsp?id=1454221), with 1.2 billion people now carrying rich, high-capability mobile handsets. CA Plex plus the upcoming release of WebClient i+ 2011 (1.8) will provide a solution for both of these topics. This technology preview will demonstrate construction of a mobile application for both iPhone/iPad and Android, using standard Plex techniques. The resulting application will then be deployed in a cloud environment.

For more information and to attend this webcast, please visit this CA Technologies link. Note CA Communities login required.

Here is the information:

When:
January 20, 2011
10 am Eastern

Title:
“Mobile apps for iPad/iPhone and Android with CA Plex”

Meeting URL: https://www.livemeeting.com/cc/cai/join
Meeting ID: CPSC42
Meeting Key: S}f,9%&9d
Participant Dial In: 1-866-900-9594
International Dial In Number: (706)-634-5686
Conference I.D./Participant Code: 34853700

 
 
© 2013 CM First Group - All rights reserved