Using URL Schemes with Sencha Touch, iOS, and Cordova

Enabling your mobile apps to launch other apps on the same device is convenient and enhances the user experience. A URL scheme is a mechanism that provides an app the ability to launch or resume another app. But the true power of a URL scheme is unleashed when you use it to pass data into the receiving app, thereby altering the apps behavior or directing the user to a specific location within the app.

So when might you want to implement a URL Scheme within your mobile app? Here are some common use cases:

  • Launching or resuming an app from another app
  • Sending data to an app
  • Transferring stored data from a “lite” version to a paid version of an app

In today’s post, I’m going to cover launching an app and sending it specific data from a URL.

Helping Users

CNX has a mobile portal app that provides end users access to all sorts of enterprise data while they’re on-the-go, but it must be configured with appropriate server connection details (IP/port/etc.) in order to function properly. In the original incarnation of this app, an administrator would direct users to download the app to their phone or tablet and then have them tap on a “Connections” icon to enter all the pertinent information. We quickly learned that getting users to tap in this information correctly was a bit problematic.

The solution was to give the administrators a way to send an email to new users with a special URL that, when tapped on a mobile device, would automatically launch or switch to the app and configure it with the proper connection details. This process avoided typos during setup, thereby making the users’ initial experience with the app much more positive.

Now, let’s go over the steps for setting up the application to handle this kind of URL scheme, in which one app (in this case, whatever email client is running on the user’s device) launches another app and sends it some specific data.

iOS Setup

The first step is to update the application’s -info.plist file with our custom URL. Below is an example of what the *-info.plist would look like after adding a custom URL scheme of “urlschemeexample” in xcode.

After a successful build, our application now will launch and resume from the new URL.

An example URL to launch the application would be: urlschemeexample://?foo=bar

If your end goal is simply to launch or resume the application, ignoring any query parameters, then this is the only required step. However, in our case, we want the app to consume data passed in through the URL’s query string, so we need to continue to the next step.

index.js

Cordova will call a global function named handleOpenURL if it exists. This function is passed one parameter: a string containing the full URL that was used to launch/resume the application. Given this process, we are going to add the handleOpenURL method in our Sencha Touch index.js file. Within it, we set a new property on the window called ‘launchURL’ which will hold the value of the full URL that was used to launch the application. This way we can access it once our Sencha Touch app is initializing.


Controller

We will use the controller’s init method to check if the application was launched by our URL scheme. If the ‘launchURL’ property on the window exists, then we know the application was launched from the URL. In such cases, the controller will call a method called ‘onURLLaunch’ (this is a method we will code within the controller later).


Only a couple more steps left. Continuing within the “init” method of our controller, delete the original handleOpenURL method (as this has already served its purpose when Cordova automatically called it upon launch). We are now going to repurpose this method for app resume functionality — meaning, switching the user over to an already launched app.


onURLLaunch Method

This method is called from our controller’s init method on both the launch and resume of our app. It takes two parameters, the first being the full URL and the second being the launch type (“launch” or “resume”). This makes it possible for your app to behave differently on a resume versus a launch, if such functionality is needed.

The final step is to extract the query string and use Ext.Object.fromQueryString to convert the query string into an object that the app can then use to perform any special actions needed.


We’re Done

And there you have it! As you can see, the URL scheme makes it possible to send all kinds of information from one app to another. All you need to do now is think of some good use cases where you can save your users from having to enter or re-enter data into an app.

1 Comment   Read more

Wearable JavaScript

The number of wearable devices sold globally, according to Juniper Research, was around 27 million units in 2014, likely to increase to 127 million units by 2017, along with estimated revenues to exceed $53 billion in 2019. With wearable devices becoming significantly more commonplace in the coming years, there’s a whole new platform on which to develop apps.

For mobile phones and tablets, it’s fairly simple and consistent to develop apps, because the same constants usually apply: the end user has a relatively large touch screen surface, with a soft keyboard, and a powerful webview for rendering the app.

The problem is that there are so many different types of wearable devices (e.g. smart watches, smart glasses, fitness trackers), and there’s a a lot of variation in the types of interfaces used to interact with these devices (e.g. voice interactions, tiny touch screens, light vs. hard touch screen presses, specific hardware buttons, and more), that there is no standard way to develop apps for all wearables.

So many different types of devices

So the question is: how can we easily develop applications for this new emerging market of wearable devices?

Unfortunately, due to the huge variance in devices, their differing levels of capabilities, and the lack of maturity in the market, the answer isn’t so simple. We can start here though: most (but not all) of these devices feature the ability to render web content.

For some wearable devices, it’s simple to develop an app using web technologies. For instance, a basic Sencha Touch app appears to render fine on a Tizen-powered Samsung Gear S device, but the same app can’t be deployed to an Apple Watch due to the complete absence of a webview on that device.

A Sencha Touch app running on a Tizen-powered Samsung Gear S smartwatch

Another screen of the Sencha Touch app

Clearly, web apps are a good place to start when targeting wearable devices, but there are still many questions, and it’s not straightforward right now to develop an app that runs across all wearable devices.

  • How are apps developed and deployed on the various platforms?
  • What kind of APIs are available to developers that choose to target this new and emerging market?
  • What kind of apps can be developed for devices that are very small?
  • What about the devices that don’t offer webviews?

I will be covering a lot of these questions and offering my thoughts in my session at O’Reilly Fluent Conference, San Francisco, April 20-22, 2015.

Wearable JavaScript
Tuesday April 21, 4:30-5:00pm, Salon 12/13/14/15

My session will highlight some ways to start developing web apps for wearable devices, look at the current limitations, available SDKs, the special considerations required for app development on such small devices, and the various capabilities that can be leveraged by using web technologies.

4 Comments   Read more

Ext JS Customer Spotlight: Greentree International

Image01 Greentree LogoGreentree International is comprised of technology and business buffs with one obsession: building the best business software. The latest version of our ERP software product, Greentree4, heralds the next generation of business management software for mid-tier companies. It draws on the rich Ext JS 5 touch-enabled framework to break down walls traditionally enshrouding ERP software. Greentree has broad appeal and is currently used by 10,000 companies globally, across more than 20 industry verticals. Our customers consistently tell us how their business has been transformed.

Why We Chose Ext JS, Sencha Touch and Cmd

We required a comprehensive rich user interface framework that delivered the following critical features to meet our goals.

  • Cross-platform: Must run on as broad a range of devices as possible and not rely on any particular operating system or browser vendor.
  • Performance: Must perform well to provide the user with a responsive user experience. This includes latent and low bandwidth connections.
  • Flexible: Must deliver a rich user interface to allow for a very flexible product. Examples of this are drag/drop, themes, paging grids, trees, advanced drop downs and searches, animations and effects, etc. Customizable: Must be able to enhance and extend the framework to meet unique Greentree requirements.
  • Supported: Have an active developer community with strong support forums.
  • Rich Library: Provide an extensive set of widgets, examples, and developer documentation.

Sencha Ext JS was head and shoulders above the competition, and we chose it as our framework because it delivered a comprehensive set of features to meet our goals. The alternatives we considered were DOJO, jQuery, YUI, QooXDoo, and DHTMLX. Since selecting Sencha frameworks, we have grown our knowledge and use of Ext JS and Sencha Touch to successfully deliver Greentree4.


Ext JS enabled us to transform our unique desktop application into a browser-based product across multiple devices. Creating a customized look and feel was easy with the Sencha theming guide and Sencha Cmd, SASS and Compass.

Ext JS 5 has enabled us to deliver a complex and powerful single page rich internet application to the desktop, tablet, and touch desktop world.

Our customers demanded a desktop experience on their tablets, which meant prior to Ext JS 5, we were facing a considerable challenge delivering our RIA to tablets using Sencha Touch. The merging of the Sencha Touch and Ext JS core frameworks and the integration of the touch event system into Ext JS 5 has saved us considerable development effort. It also made component extension and code sharing across the two frameworks significantly easier.

With performance as our focus, we by default took full advantage of the Ext JS buffered data store and implemented server-side sorting and filtering. All our grids use buffered datastores, which minimizes the dom footprint and only loads data when the user requires it. These improved grid render and datastore load times and meant we could with confidence add any grid view of data regardless of the size of the underlying data collection and know that performance wouldn’t be compromised.


The addition of the Sencha Touch buffered renderer to Ext JS again reduced the dom footprint of a grid and made the tablet performance of grid scrolling a much better experience.

The Ext JS framework with the component and Ext.dom.Element abstractions makes creating complex web applications easy. Without having to deal with the complexities of working with the dom directly, we were able to create a screen designer that enables our users to customize their forms, in a WYSIWYG designer, to better suit their business needs.


The screen designer allows users to change many attributes to customize for tablet, desktop, or both.

Improved Performance

Sencha Cmd combined with the GRUNT task runner has consolidated and simplified our build process and has made version upgrades and upgrade testing seamless.

It has also provided us with an easy way to define multiple environment build profiles that help with development, testing, and optimizations of our production builds

  • Production – Fully optimized and compressed single file resources
  • Testing – No optimizations, single file resources uncompressed
  • Development – No optimizations using the micro loader

With performance one of our key requirements, the Sencha Cmd production build and optimization settings (configurable in the app.json file) have provided us with significant performance improvements across our application on desktop and notably on tablet.

Business Value of Using Sencha Ext JS, Touch, and Cmd

Three years ago, with a wave of disruptive (better) technologies coming at us, we could see the potential to leverage the ERP engine in new ways. We pulled together the most talented global team available. We ramped up our already high investment in R&D and set our goals to leverage the enormous power of our existing systems and customers’ investments, use the best of the new technologies to add new platform capabilities that would engage and empower a much wider audience, and deliver real business benefits.

With business software, it’s what you can’t see that is probably the most critical part, so we need to talk about architecture and engineering. Greentree4‘s new capabilities are built on the right foundations. Sencha Ext JS 5 gives us a powerful HTML5 framework, rich with components. This has given us a huge advantage over building these components ourselves. Using the broad library of components within Ext JS, we have been able to extend and apply our own unique user designs much more quickly than if we had to build these from scratch.

Greentree4 has been designed with a unique single user interface design to deliver identical user experiences for tablet or desktop. The release of Ext JS 5 with touch enablement saved us at least 2 person-years of development time by delivering the same application on touch-enabled devices such as tablets.

Our server-based architecture now delivers the required user experience based on device, using Sencha Ext JS 5 for tablets and desktops, and Sencha Touch for small screen smartphones. This provides a compelling and performant user experience on any device. Sencha Cmd is used to maximize performance by optimizing builds.

We’ve maintained our strategic advantage by allowing customers to extend and customize for their unique requirements with features like our drag and drop Ext JS-based screen designer.

On top of this, most of our competitors still deliver annual enhancement upgrades. We offer continuous deployment, and Sencha Cmd combined with the GRUNT task runner has consolidated and simplified our build process to make version upgrades and upgrade testing seamless. We can deliver customer benefit much faster.

Our Advice to New Developers

  • Engage with Sencha Professional Services and have them review your architecture and coding structures to get the absolute maximum performance using best practices.
  • Subscribe to Sencha Premium Support for fast turnaround on questions.
  • Be an active beta program participant and provide Sencha with constructive feedback.
  • Become part of the Sencha Community to learn from other developers.

Final Thoughts

We have worked hard to create a close relationship with Sencha both locally and in the U.S., and we believe this has been beneficial to both our organisations. We look forward to adding even more business functionality to Greentree4 using Ext JS 6.

Greentree Primed for Business 1 Comment   Read more

Top Support Tips

Top Support Tips

Everlasting Scrollbars

by Kevin Cassidy

Have you ever wished you could always display your Touch container’s scrollbars instead of them automatically appearing and disappearing? Now you can. With this simple override, you can make use of Ext.scroll.View’s private indicatorsHidingDelay property. This override causes the container scroll bars to be visible whenever the indicatorsHidingDelay property is set to a negative value. If you want to return to the default behavior, you can call the setIndicatorsHidingDelay method with a positive value.

You can see the everlasting scrollbar in action here:

Components and Elements by utilizing Ext.mixin.Observable’s on() method (shortcut for addListener()). That said, you may need to remove those listeners while maintaining the Component or Element to which they were attached. You canuse un() (shortcut for removeListener()) by passing it the same config and scope used with on(). However, there is a shortcut offered by on() that may be better suited to your needs — destroyable: true.

By default, the destroyable option is false. When set to false, on() will return the Component or Element to which the handlers were attached (Ext JS 4.x returns undefined). However, with destroyable: true, an object is returned with a destroy() method. When called, it will destroy the previously set event handlers while preserving your Component or Element.

You can see the destroyable config in action here:

20131111 Top Support Tips No Comments   Read more

Ext JS and Sencha Touch Customer Spotlight – pixx.io

pixx.iopixx.io is a modern and easy-to-use media management application targeting the needs of semi-professional and professional photographers, creative agencies, startups and SMEs. The software is built with Ext JS 5 and Sencha Touch 2.4. In addition, we used PHP and Perl in combination with MySQL database.
pixx.io enables users to collect, manage and share all kinds of media. A state of the art user interface, intuitive search fields, and various filters (GPS, date, author, orientation, etc.) allow users to find the needed files quickly and easily. pixx.io also makes it possible to share files safely with colleagues and customers. Users can decide in which size and for which time period they want to make data available. They also can integrate freely selectable watermarks on their images.


The Media View

Why We Chose Ext JS

We chose Ext JS because we wanted to make the pixx.io interface attractive and customer friendly — meaning our designers could change all styles and arrange all desktop elements exactly as they wanted. It was also important that the front-end framework not restrict us from building back-end processes that worked smoothly and quickly to ensure the best performance for our customers. The third goal was to ensure we delivered the application to market on time.

We had been working with Ext JS for more than five years and had excellent results using it in various software development projects, so we decided it was the best framework for building pixx.io. The major reasons why we had used Ext JS for such a long time are:

  • Ext JS components are perfect for the kind of software we build. We rarely have a case where Ext JS components don’t meet our needs.
  • Ext JS makes it easy for us to theme and extend components, when needed.
  • Ext JS offers the cross browser compatibility our customers expect.
  • The individual support and training provided by Sencha is excellent.
  • The Sencha community and the available user extensions inspire our own creativity.
  • The perfect interaction of Ext JS and Sencha Touch makes our job easier and offers a broad range of new possibilities for our application.

We used the following Ext JS components to build pixx.io.

DataViews

We created all major pages of pixx.io with dataviews. Depending on what needed to be depicted, we used various templates to adjust the look of the respective pages. It’s very simple to change the look of the dataviews, because there are an unlimited number of templates, which allows a nearly effortless creation of new designs. We also used several stores with the same model for our application. This means each view can also be filled with different content. We use this option mainly in the Media view (see above) and the Collections view (see below).

In addition, we use Buttons and Panels that are blended into the templates to provide the right functionality on each page.


The Collections View

The same dataview is used when selecting multiple files to edit, download, relocate or group. The only thing that differs here is the styling of the dataview. Further, the dataview is combined with buttons, tab panels, forms and grouping grids.


We use the DataView.DragSelector to improve the usability and enhance the possibilities of the dataview.

The built-in drag and drop functionality allowed us to integrate features that users expect, based on their experience using standard desktop applications. For example, that functionality enables users to select multiple dataview items (in pixx.io mainly thumbnails of photos and files) with a mouseover event. It further allows an Explorer / Finder-like selection of multiple dataview items, by pressing the Shift or Ctrl key.

Windows

If a user clicks on one of the photos (item click), on any page, pixx.io opens a window to display the file in full size and provides more information about it. Various layouts are used — combined with buttons, tab panels, forms and grouping grids again. This combination provides a lot of possible user actions and provides a good overview of the relevant data at the same time.

Using the tab panel, a user can open the tag catalog, manually tag files, and delete or adjust tags that were automatically set by pixx.io — by reading the meta data and descriptions (EXIF, IPTC, etc). To implement this functionality, we used combo boxes and split buttons.

Features like the integrated combobox filter, and especially the combo boxes, improve the user experience, because they minimize the effort of manually tagging photos and files in the media database. Using Ext JS, we implemented a catalog of preset keywords, which can be easily updated by uploading csv files into pixx.io. Using this keyword catalog, the combobox displays various appropriate keywords when the user starts typing the first letters, and it refines these suggestions instantly when the user adds more letters.

All keywords selected or entered by the user are displayed as split buttons. Using split buttons makes it easy to work with the keywords, especially if the user wants to delete or change one of the keywords later. The development in this case was really effortless, because the buttontext is used to display the keywords, so we didn’t have to change the components.

Why We Chose Sencha Touch

During our first beta test, we recognized that more than 60% of the beta testers were trying to open shared image collections with mobile devices, including their smartphones and tablets. Back then, we did not have a mobile-optimized version of pixx.io released. Due to the good experience we already had with Sencha Touch, we extended and optimized our application user interface for mobile users.

The biggest benefit was the time savings. Using Sencha Touch, we were able to create the first version of the mobile application in just one day of development work. This was possible because the shared images are displayed in dataviews. The navigation in the mobile version of pixx.io was built by using well-known gestures like swipe, slide and pinch. Using these gestures, users can also switch to the single photo view and back. If we had started programming this app from scratch, not using the Sencha Touch framework, we would probably have needed several weeks to achieve similar results.

Our Advice to New Developers

What we love about Sencha is the continuous performance enhancements and the vision and expertise we see in the development of the various frameworks. The latest features are really easy to use. For more complicated use cases as well as a basic understanding of the products, Sencha provides in-depth training. We recommend that all developers who are just starting to use Ext JS attend one of the online or classroom courses, because they really boost your understanding of the broad range of possibilities in building apps with Sencha frameworks.

Another reason we really like using Sencha products is the good documentation, the forum and really vivid community that helps when you are stuck at some point of your development. They boost your creativity by solving complicated customer problems.

We also highly recommend Sencha Support. We contacted the support team when we had questions that were too specific for a Google search or the Ext JS community. Sencha provides really good and fast help to solve our questions and issues.

Final Thoughts

Ext JS facilitates team development and speeds up delivery of software projects by removing a lot of unnecessary, repetitive work for developers. At the same time, it offers unlimited possibilities to customize components to your needs.

In addition, you can really profit from the range of other products in the Sencha portfolio, including Sencha Touch. The various tools can be used easily in combination.

To enhance the features of pixx.io, we are currently developing a video and sound archive that will be integrated into our current app. Using Ext JS, we can focus on the design work, as the framework takes over all the tedious tasks of the programming process.

If you’d like to try pixx.io, you can get it either as an independent server solution or as a hardware and software bundle called pixx.io box. Pixx.io box is the all-in-one solution for photographers and small teams, including a stylish and high performance mini server and the pixx.io software.

spotlight-teaser.png No Comments   Read more

Integrating Corporate Bank Ecosystems on a Wide Range of Devices

Guest Blog Post

Integrating Corporate Bank Ecosystems on a Wide Range of DevicesOmniscient is a leading supplier of consulting services for Sencha Touch and Ext JS across Asia and the Americas. Our LIQUIDICE product is a Liquidity and Payments Management Application for corporate treasuries in large organizations, and we built it using Ext JS.

To survive in a highly volatile global economy, organizations need to monitor and manage their financial risks related to various internal and external (market) related factors, across their various entities and businesses.

Using LIQUIDICE, a Corporate Treasury can set up its global Bank Relationship Structure and configure the data connectivity channels with all of its banks. They can then monitor and manage their Global Cash and Liquidity positions across banks, currencies, accounts as well as business entities.

Integrating Corporate Bank Ecosystems on a Wide Range of Devices

Why we built LIQUIDICE using Ext JS

Omniscient has been actively involved in developing web applications as part of its consulting services. During this period, we worked with a variety of HTML and JavaScript frameworks and libraries. We realized fairly quickly that Ext JS offers multiple advantages over other JavaScript frameworks, the most important being the excellent quality of the support that we get from Sencha.

  • Support from Sencha – Having access to Sencha Support for Ext JS was one of the most important reasons for our choice. Lack of dependable support from other JavaScript frameworks is a serious drawback.
  • Rich Component Library – The rich component library offered by Ext JS, which has helped us to build an unbeatable user experience for displaying and manipulating large quantities of complex data in the user interface.
  • Cross Browser Compatibility – Since our customers use LIQUIDICE on a wide range of web browsers, this was an important factor for our choice. Ensuring Cross Browser on other JavaScript frameworks would have taken us at least 1.5 times more time and effort, both in terms of development and testing.
  • Suitable for Large Development Teams (often distributed across time zones) – Ext JS allows us to standardize our application development processes and helps create reusable components and utilities, to deliver the best application performance across every device. Maintenance costs on our applications have gone down by 20% because every developer on our team understands the Ext JS framework.

To address the customer need of accessing their global liquidity information after office hours from their smartphones, we needed to extend application access to a wide range of iOS and Android-based mobile devices. We evaluated some of the popular frameworks and decided to use Sencha Touch because of our positive experience with Ext JS. Also, because Sencha Touch follows the same development paradigms as Ext JS, it helped us to minimize the learning curve for our development teams. The images below illustrate the mobile version of the application using the Sencha Touch framework.

Integrating Corporate Bank Ecosystems on a Wide Range of Devices

Why we built LIQUIDICE Mobile using Sencha Touch

The key challenge was to provide a “ slice” of the application functionality and data on the smaller screen size by reusing the underlying code base, processing logic and security framework of the existing Ext JS enterprise application. Based on our experience with Ext JS, Sencha Touch was the logical choice for this development. Our team of Sencha Touch UX experts created a UI design that was a natural extension of the existing Ext JS application, with an added look-and-feel of a contemporary touch-based mobile application.

The following additional considerations helped validate our choice:

  • Short Learning Curve – The team was already familiar with Ext JS and there was a very short learning curve for Sencha Touch.
  • Look and Feel of Native Apps – Sencha Touch enables us to build applications that look and feel like native apps but have all of the benefits of HTML5. This allows us to use our existing development teams (that have experience and skills building desktop applications) to build mobile applications as well.
  • Access to native features – The user experience of the Balance Notifications and Alerts functionality in LIQUIDICE was enhanced through the use of the native alert features of the smartphones. Sencha Touch provides direct support for Apache Cordova APIs, which makes accessing native sensors of mobile devices easy.
  • Graphing capabilities – Support for visual representation of the liquidity information on the dashboard is a critical feature of LIQUIDICE, which is supported through the Sencha Touch graphing capabilities.
  • One Code Base Across Multiple Devices – All our Corporate Treasury customers expect a uniform user experience across iPhone and Android based mobile devices. Using Sencha Touch and Apache Cordova allowed us to maintain a single code base across multiple devices and deliver the uniform cross platform UX they expected.

Omniscient’s customers are some of the largest ISVs in Payments, Securities Processing, Collateral Management and Treasury technologies. Our Sencha Development Services Team has been working with these customers on the following categories of development projects:

  • Re-engineering JSP-based product UIs using Sencha Ext JS, by reusing the underlying business assets of the product
  • Extending desktop browser-based Ext JS applications to tablet and mobile devices using Sencha Touch
  • Building desktop browser-based Ext JS applications for Customer Administration and Configuration based on existing mobile applications

In the fast changing world of financial technologies, we use Ext JS and Sencha Touch for application development because our customers get the primary benefit of being able to leverage existing software product assets and phased investment in their product development.

We have also applied these benefits internally. Two architects from our consulting services team worked with our LIQUIDICE product team on the overall architecture and design of the LIQUIDICE mobile application to ensure that the design could scale up for massive amounts of anticipated data, and heavy concurrent user access demands.

Conclusion

Realizing the pervasiveness of the internet on all devices, companies are compelled to take a “universal access” strategy for their applications. The use of a unified framework involving Ext JS and Sencha Touch helps us to maximize the return on our investment with a single code base and talent pool. Our Consulting Services team is working with customers across the Americas and Asia on consulting and application development engagements using both of the Sencha frameworks. Our customers have experienced significant savings in time, effort and efficiency first by choosing to use Sencha frameworks (vis-à-vis other JavaScript or HTML 5 frameworks) and further by correctly implementing the Sencha framework to meet the functional requirements of their applications.

omniscient-teaser.png No Comments   Read more

Using GapDebug to Test Hybrid Web Apps Built with Sencha Frameworks

Introduction

Using GapDebug to Test Hybrid Web Apps Built with Sencha FrameworksDevelopers have been using PhoneGap (and subsequently Cordova) to deploy hybrid mobile applications since 2009, when it was first created. By allowing web applications to run on native devices, the HTML5 community fully embraced PhoneGap and thousands of apps have since been released on iOS, Android and a wide variety of other platforms. But while the wrapper itself is great, unfortunately the debugging tools have lagged far behind their browser counterparts — and debugging across multiple platforms has often been painful.

In this post, we’ll introduce you to the new Genuitec GapDebug tool and explain how it makes debugging hybrid applications deployed with PhoneGap far easier than ever before. We will also compare GapDebug to the popular Weinre debugger and highlight the key differences between them.

GapDebug LogoGapDebug

GapDebug is a free cross-platform mobile app debugger developed by Genuitec for use with Android and iOS PhoneGap (or Cordova) applications. It runs on both Windows and Mac OSX and is packed full of killer features for exploring every aspect of a hybrid app’s state and execution.

GapDebug is a free cross-platform mobile app debugger developed by Genuitec for use with Android and iOS PhoneGap (or Cordova) applications.

Many Sencha developers use Cordova or PhoneGap every day to deploy their hybrid applications — but debugging an HTML5 app directly from the device can be a very frustrating experience. GapDebug makes this process much easier, using a single interface for all apps and devices, and without requiring the developer to add special code.

How GapDebug Works – Plug and Debug

Before you can begin debugging, your iOS or Android devices require a simple 1-time configuration as outlined here. With your device configured, simply plug and debug by connecting your device to the GapDebug host computer using a USB cable. The device may prompt you to approve the connection. Once the connection is completed, the device info will appear on the left of the GapDebug user interface in the Device Panel.

On the mobile device, launch the app that you wish to debug. If the app is not already present or up to date on the device, use the app installation button GapDebug Download Image found next to the device info to select and install a new version of the app. Alternatively, you can drag and drop a binary app executable file on the device to install it. When the app is launched, the app’s ID and icon will appear just under the device in the GapDebug Device Panel.

Selecting the app in the Device Panel will start a debug Inspector in a new tab pane on the right side of GapDebug user interface. Two versions of the inspector are provided: for iOS apps a custom version of Apple’s Safari Webkit Inspector is presented, while Android apps get a custom version of the Chrome Developer Tools.

GapDebug (Windows version)
GapDebug (Windows version)

Before we dig in and start debugging, let’s first examine how GapDebug is different than the popular debugging tool Weinre.

GapDebug vs Weinre

Until GapDebug, Weinre was the go-to cross platform debugger for PhoneGap apps. Weinre was developed in early 2011 by Patrick Meuller as an open source solution for remote debugging of iOS and Android PhoneGap applications. It consists of a JavaScript library that is dynamically loaded by the app at startup, a debugger user interface that runs in your browser, and a server that handles communications between the application and the user interface.

Weinre is implemented in JavaScript and requires Node.js to install and execute locally, although you can avoid setting up a local installation by using one of several freely available online Weinre servers.

Weinre debugger user interface
Weinre debugger user interface

While Weinre remains an innovative tool, it is beginning to show its age. Let’s look at some of the pros and cons of using Weinre:

Pros

  • The debugger provides tools for DOM and CSS inspection, resource browsing and analysis, and a JavaScript console
  • Developers can simultaneously debug multiple apps across multiple devices
  • Mobile devices only require a network connection, no USB tether required
  • No special device configuration required
  • Weinre debugging works for a wider range of iOS and Android OS versions than GapDebug. (GapDebug supports Android v4.4 and above and iOS v5 and above)
  • Open source under Apache license

Cons

  • The Weinre user interface is a dated version of the WebKit Inspector
  • No JavaScript debugging and profiling
  • Not easy to reload the app for testing events such as deviceready
  • Requires modification of application code to include a special instrumentation script
  • Device must be online with a network connection, can’t debug offline scenarios
  • Requires processing time for communication with remote Weinre server
  • Server connection frequently times out, terminating your debug session unexpectedly

Using GapDebug to observe frequent Weinre network XHR activity in an application
Using GapDebug to observe frequent Weinre network XHR activity in an application

By contrast, GapDebug first debuted in June 2014 and is being rapidly enhanced with monthly updates by a small team at Genuitec.

Pros

  • Provides the most powerful hybrid app debugging features available through the use of special versions of Safari WebKit Inspector and Chrome Developer Tools
  • Professional Windows and Mac OSX installers, with automatic updates
  • Free for all users including commercial use
  • Simultaneously debug multiple apps across multiple devices
  • No requirement to modify application code with special instrumentation library
  • Device does not require a network connection, can debug offline apps
  • Easy app reloading to test events such as deviceready
  • Windows users can remotely debug iOS apps
  • Remotely view, control and debug Android apps over the internet

Cons

  • USB tethering may be considered a negative by some users
  • At this time, no common inspector UI (for cross-platform debugging, you must learn both the Safari WebKit Inspector tool and the Chrome Developer Tools — Genuitec is working towards a common UI in future release)
  • Currently only supports Android v4.4 and above and iOS 5 and above

Using GapDebug with Sencha

Because Sencha Cmd already has tight integration with Cordova and PhoneGap, Ext JS and Sencha Touch developers can immediately benefit from the superior tooling of GapDebug.

Using GapDebug, you can simultaneously debug multiple apps running on iOS and Android, and you can even debug iOS apps from Windows. Considering all of the HTML and CSS inspection, JavaScript debugging, and resource profiling capabilities, using GapDebug is a great choice when it comes to wrapping Sencha applications with PhoneGap or Cordova.

Summary

In most areas, GapDebug exceeds the capabilities of Weinre. While both GapDebug and Weinre applications require instrumenting to support debugging, GapDebug is not invasive and does not modify your application code. The GapDebug inspector tools are state of the art and function even when the device is offline. Lastly, GapDebug continues to be rapidly improved by the Genuitec team.

Download GapDebug for free and start debugging your Ext JS and Sencha Touch applications today.

analyzing-the-roi-of-javascript-in-enterprise-software-development-1.png No Comments   Read more

Apple Shows Love for HTML5 with iOS 8

Optimizing The Development Process With Sencha Cmd 5We were as excited as everyone else with last week’s Apple iOS 8 release announcement. We have only had the iOS 8 GA bytes for a few days, but we wanted to do as quick and complete a write-up as we could to give the global web developer community an in-depth look at Apple’s latest release. There’s no doubt we’ll see a few items we missed in the next couple of weeks and months, but for now we wanted to run our battery of benchmarks and tests and share what we’ve already uncovered.

This post documents our performance and technical breakdowns of the current state of HTML5 as iOS 8 becomes the baseline for Apple devices. For a similar review of iOS 7 for web developers, please see our blog post from last year.

New iOS 8 Features Will Further HTML5 Development

Let’s begin by taking a look at some features that have been added with this upgrade.

New iOS8 Features Will Further HTML5 Development
Source: caniuse.com

Though all of these features are great and help further HTML5 development, the big ones that clearly stand out are:

WebGL – 3D Canvas Graphics

Hardware-accelerated 3D Graphics support — no question this is a huge feature for web developers. Though we will likely see this feature used heavily in gaming, there are a lot of additional uses, especially in the areas of animations and transitions. To get a quick peek at what is possible, fire up this WebGL Sprite Particle Demo.

CSS Shapes Level 1

This rarely seen feature was really only available to us in Chrome, Chrome for Android and Opera, but it has finally busted into the big time with prefixed support in iOS 8. CSS Shapes allows for much more dynamic text layouts that can make your application feel more like a magazine than a web page. To see some examples of this at work, check out Shapes from Adobe.

HTML Templates

One of the foundational elements in Web Components is now available in the latest Android and iOS browsers. This is a big step towards making a truly modular web and opens up a lot of potential with one less polyfill required.

Navigation/High Resolution Timing APIs

Though superficially not an extremely popular end user facing feature, having a streamlined performance timing API will allow for much better cross-platform benchmarking and performance testing.

IndexedDB

Even though WebSQL has been, and still is, available for Android and iOS, we currently have no support for IE. To make matters even worse the Web SQL Spec is no longer maintained and will likely be dropped in a future version. Luckily for us, IndexedDB is now available across iOS, Android, Chrome for Android, Safari, IE Mobile and has partial support in Blackberry 10 and IE 10/11.

SVG Fragment Identifiers

This feature sneaks in under a very cryptic name, but trust us, it’s a powerful one. Currently available in IE 10, 11 and Mobile, iOS 8 Safari and Chrome for Android, SVG Fragment IDs allow for very powerful vector spritesheets. Not only will this be very important for web gaming but also more dynamic icons and other UI elements.

As mobile web developers, you are already used to working with the latest browser versions and features. We all know that Apple has a fantastic upgrade system that will allow iOS 8 to reach all of its users very quickly. If your application is targeted specifically at iOS devices, you can easily start using features like IndexedDB, SVG Fragments or benchmarking with the new Timing APIs. For those looking to keep parity with iOS 7 and/or develop for multiple platforms (Android, Windows Phone, BlackBerry), you can scope down these new features with Sencha Touch built-in OS detection. Sencha Touch will allow you to use the new features in your application now and phase out your older code over time.

The All New WKWebView

The All New WKWebView

With the release of iOS 8, we are both blessed and cursed with a bit of fragmentation. iOS 8 ships with two native webviews built in. The first is the good old “UIWebView” that we know and love. It currently is kept for legacy purposes, but lucky for us Apple did not simply smash the older iOS 7 “UWebView” into iOS 8, they have upgraded the core WebKit code to be on parity with their brand new webview, “WKWebView”. “WKWebView” will be the place to get your hybrid app, as we move into iOS 8. It has the Nitro JS engine, which we have tested and measured to have at least 4x the performance of “UIWebView”. This has the potential to be a huge win for hybrid apps. However, at this time, there are some significant bugs that impact just about everyone. More on that later in this post.

The good news is that the new high performance “WKWebView” is a step in the right direction from a Web development perspective. Even though JavaScript is rarely a bottleneck for applications as we typically see more issues with animation or DOM repaints, we believe that with substantial boosts to the Dom Core, the “WKWebView” will help Sencha Touch applications see huge performance improvements.

Performance Gains Across the Board

Performance testing is always a must, and this time around we have some rather interesting results. Overall, it looks like going to iOS 8 will be a win for everyone across the board. There are a few octane scores that were slightly lower in iOS 8, along with Base64 and Code Eval. So let’s dive into some charts and try to figure out what all this means.

Note: All these tests were done on a 5th generation iPod Touch in the hopes that, compared to all of the iPhone 5s and soon iPhone 6s out there, these score will help you find your lowest threshold for iOS development.

We can see that iOS 8 wins out in pretty much every test except CodeLoad.
Source: http://octane-benchmark.googlecode.com/svn/tags/v1/index.html

Unfortunately, at the time of testing, Google Octane v2 crashes iOS 8 Safari for us, so we were unable to run any new tests. Regardless, this gives us a pretty good overview.

We can see that iOS 8 wins out in pretty much every test except CodeLoad. CodeLoad measures how quickly the JavaScript engine can start running after pulling in a very large JavaScript file. It’s worth mentioning the code for this test is based on Closure and jQuery, but one would have to agree that it’s a pretty good benchmark for this kind of thing.

For applications built with Sencha, we might see a slightly longer delay in application startup, as compared with iOS 7, because these applications tend to have larger JavaScript loads upfront instead of incremental loading. For all other tests, iOS 8 is either very close or a clear winner over iOS 7.

The Dom Core test from Dromaeo is actually much better than what the chart shows.
Source: http://dromaeo.com/?dom

The Dom Core test from Dromaeo is actually much better than what the chart shows. The fact that Query shows such a huge improvement, overshadows the improvements in Attributes, Modification and Traversal. Looking at the raw numbers, we saw a 122% improvement in Attributes, 65% for Modification, 48% for Dom Traversal and a whopping 308% boost for Dom Query.

This is great news for Sencha developers as dom query is used a lot by Sencha frameworks.

After seeing dramatic improvements in the DOM Core tests, we looked at the CSS selector performance boosts at the framework level. Ext JS Selector times improved by 126% by simply moving to iOS 8 Safari.
Source: http://dromaeo.com/?cssquery

After seeing dramatic improvements in the DOM Core tests, we looked at the CSS selector performance boosts at the framework level. Ext JS Selector times improved by 126% by simply moving to iOS 8 Safari.

Note that these CSS Selector tests currently use Ext JS 3.x and the framework has improved dramatically with the release of Ext JS 5.x. As a result, the actual improvements will be even better.

We can see there’s a  bit of a performance dip when working with Base64 strings and code evaluation via new Function and eval.
Source: http://dromaeo.com/?dromaeo

Moving on to some pure code tests, we’re looking at some fundamental JavaScript functions that almost every application would use. We can see there’s a bit of a performance dip when working with Base64 strings and code evaluation via new Function and eval. We did however get some dramatic gains in Arrays, specifically in Array construction. Developers shouldn’t be too concerned, as we already discussed in our Fastbook post, JavaScript is plenty fast for creating most any application. GPU compositing is much more important than the JavaScript for creating fluid apps nowadays. Which brings us to our next benchmark focused on GPU interactivity.

The chart here pretty much speaks for itself. We see a huge 78% increase in fps (frames per second) by simply switching to Safari in iOS 8 vs iOS 7.
Source: http://ie.microsoft.com/testdrive/performance/fishietank/

The chart here pretty much speaks for itself. We see a huge 78% increase in fps (frames per second) by simply switching to Safari in iOS 8 vs iOS 7. It’s obvious that Canvas got a number of updates, and the results are really showing up in our WebGL examples.

If you skip ahead to the bug area, you will see that there are some challenges today that are keeping us from using the “WKWebView” in hybrid apps.
Soutce: http://dromaeo.com/?cssquery

Now, this is a bit of a bittersweet chart, as we can easily see the vast improvement in “WKWebView”. But if you skip ahead to the bug area, you will see that there are some challenges today that are keeping us from using the “WKWebView” in hybrid apps.

If anything, we hope these numbers push more developers to head over to Apple and push to get these “WKWebView” bugs fixed ASAP, so we all can start taking advantage of these performance improvements in all our applications. Once again, the Dom Query overshadows all the other numbers. For the record, with “WKWebView”, Attributes is 208% faster, Modifications are 37% faster, Traversal is 249% better, and Query is a whopping 358% improvement over the old “UIWebView”.

Although the Sunspider test results are not nearly as dramatic, we still see some improvements.
Source: https://www.webkit.org/perf/sunspider/sunspider.html

Although the Sunspider test results are not nearly as dramatic, we still see some improvements. iOS 8 Safari came in about 14% ahead of iOS 7 Safari and the “UIWebView” jumped up about 5%. Small gains, but all positive, and they show that everything is moving in the right direction.

In this chart, we’re looking at the raw score from HTML5 Test, and it’s easy to see iOS 8 Safari has a nice boost in supported features over iOS 7.

Source: http://html5test.com/

In this chart, we’re looking at the raw score from HTML5 Test, and it’s easy to see iOS 8 Safari has a nice boost in supported features over iOS 7. However, to properly interpret these results, we need to discuss some changes under the covers that have a big impact on these statistics. So let us boil it down for for you with a few bullet points:

  • Seamless iFrame was removed in iOS 8
  • IndexedDB was added to iOS 8 Safari and “WKWebView”
  • IndexedDB is not available in iOS 8 “UIWebView” or Home screen apps
  • Objectstore ArrayBuffer does work in iOS 8 Safari and ”WKWebView” (Note: This test fails on the HTML5 Test site even though the feature is working. If this was properly detected, iOS 8 Safari would score a 440.)
  • Objectstore ArrayBuffer is not available in iOS 8 “UIWebView” or Homescreen apps
  • WebGL 3D Graphics were added to iOS 8 in Safari, “WKWebView”, “UIWebView” and home screen apps
  • The userAgent for “UIWebView”, “WKWebView” and a Homescreen app are identical

Even though Apple has done a pretty solid job of keeping “WKWebView”, “UIWebView”, Safari and Home Screen applications at the same level of functional capabilities, the differences may cause some frustration for Sencha developers. Developers now need to be a little more aware of the context in which their application is going to run. Example: “UIWebView” and Home Screen applications do not have IndexedDB or Objectstore Array Buffer support. Because the browser User Agents are the same, there’s no easy way to scope down your application based on where it’s being served, which means developers will need to feature detect these things individually.

The Bugs

3 major bugs that are going to potentially affect HTML5 developers and therefore, Sencha customers.

We all know that no release of any software is bug-free, and of course iOS 8 has a few worth mentioning. So far, we have uncovered what we consider to be three major bugs that are going to potentially affect HTML5 developers and therefore, Sencha customers. Now, that being said, these bugs are not specific to Sencha apps and will actually affect the development efforts of many developers for the next couple of months. If you wish to help, please check out the radar link below each bug and head over to the Apple Bug Reporter. There, you can duplicate our bug and submit it, and the more hard data and test results we provide proving the bug’s impact, the faster (we hope) they will be seen and then fixed.

WKWebView Local File Loading Bug

Remember that amazing new WebView I was just telling you all about? The one with the super fast Nitro JS engine and shiny new everything. Well, its broken… The bug here is a security issue which does not allow “WKWebView” to load files from the local filesystem. So what this means is that your embedded index.html is not accessible to the “WKWebView”. This is a blocker for PhoneGap and Cordova applications that are using offline/local files to serve up an application. So currently, if you would like to use “WKWebView” in your application, you must load your files from a remote server. For example, loading “index.html” will not work, but loading “http://www.google.com” will work just fine.

Radar Bug Report: http://www.openradar.me/radar?id=5839348817723392

XHR Local File Access

Currently, anything using the new “WKWebView” code has a broken XHR Local File issue. This includes Safari, homescreen apps and any embedded apps inside a “WKWebView”. If you’re using Cordova or PhoneGap, you will still be locked into the older “UIWebView” which does not suffer from this bug. The bug itself simply does not allow the XHR object to send local files off the phone. So, if your application currently is using the photo gallery or camera to grab an image and then via AJAX send it to the server, you are sadly out of luck in iOS 8. What you”ll see is that your application will hang with no response after calling “send.”

Radar Bug Report: http://www.openradar.me/radar?id=5834555097350144

Home Screen Apps Lose Timing Functions After Lock/Wake

If your application is being used as a homescreen web application, you’ll find yourself in a sorry state. Of course, any web app can be converted into a home screen app by the user, so I guess technically this affects anyone making a remote web application. This bug is easily reproduced by simply calling setTimeout(callback, 1) or requestAnimationFrame(callback) via some button or event. When you first open your application, you’ll notice all timing functions are working fine. However if you lock your phone and then unlock to return to your application, you’ll see none of the timing functions can call callbacks anymore. They are simply broken at a native level. There is no reset, no bringing your application back to life, it’s a kill it and restart situation. These timing functions are crucial to the Sencha Touch and Ext JS frameworks along with pretty much every other JavaScript framework/library ever made. Definitely head over to Apple as soon as you can, and let them know that you would like to have all of your JavaScript functions, all the time.

Radar Bug Report: http://www.openradar.me/radar?id=5895945212395520

There is some good news here, because so far we’ve only uncovered issues that affect “WKWebView” applications. If you are one of the many people that have tried or are using Sencha Space, there is absolutely no impact because your application is safe — with Space, you are inside a managed web runtime that includes a secure browser. If you haven’t tried Sencha Space yet, you should check it out here.

Things to Come

Overall, with the release of iOS 8, we’re very pleased with where Apple iOS is heading, because the performance improvements and new features are only going to improve user experiences for apps built on the iOS 8 platform. However, we certainly hope Apple addresses the bugs very quickly that we discussed, because their presence impairs the full realization of the power of iOS 8 for web developers — whether they use Sencha frameworks or any number of other popular alternatives.

If we look further into the future, we can expect to see a crossover between iOS 8 and Chrome for Android with great features such as CSS Shapes, srcset atrribute, and SVG fragment identifiers.
Source: caniuse.com

If we look further into the future, we can expect to see a crossover between iOS 8 and Chrome for Android with great features such as CSS Shapes, srcset atrribute, and SVG fragment identifiers. Though not shown in the above image, Chrome for Android already has partial support for WebGL 3D Canvas graphics and really the partial is more about older devices that are capable of running Chrome but just don’t have what is needed to power WebGL 3D.

Conclusion

iOS 8 is certainly an exciting release for Web developers with amazing new features and huge performance boosts that will further help HTML5 cross-platform development.

At Sencha, we’re always looking to help developers stay at the forefront of the next generation of web development. We are focused on bringing the best and most complete cross-platform solutions to our users, so they can deliver amazing application experiences to every device. We can’t wait to see what you all will invent with us. Thanks for tuning in, until next time.

ios8-teaser.png 16 Comments   Read more

Announcing Sencha Touch 2.4

Sencha Touch 2.4We’re proud to announce the release of Sencha Touch 2.4, which continues to enhance Sencha Touch support for the BlackBerry 10 browser and devices. About 18 months ago, we announced our collaboration with BlackBerry — optimizing Sencha Touch to run on the BlackBerry 10 browser and create a new theme and set of components to make building BlackBerry 10 applications as easy as possible. Sencha Touch 2.1.x, 2.2.x, and 2.3.x came with a BlackBerry theme and a set of components unique to BlackBerry.

Download Sencha Touch 2.4

Let’s dig into the details of this release and the enhancements.

Enhancements

The password field in the BlackBerry theme now has an eye icon to the right, which shows the password when tapped. The IndexBar for the list component is re-styled to match the native theme. Now when you press an index from the IndexBar, you see a magnified view of the index you pressed. We have also updated the styles for the Sliderfield to more closely match the native slider. A halo appears for the Sliderfield around the grip when it is being dragged back and forth.

Password field

Password field
IndexBar

Re-styled IndexBar
Slider Field

Updated Sliderfield

We have also updated the highlighting on list elements (onPress vs onRelease) to reflect BlackBerry 10 highlighting styles.

OnPress

onPress
OnRelease

onRelease

Sencha Touch 2.4 also introduces a new toast component that displays small messages, which expire and disappear after a predefined amount of time. The toast component can be used to provide information to users and allow them to continue with the application after the message expires.

Toast Component

Toast Component (Self-destructive Message)

Furthermore, Sencha Touch 2.4 extends its BlackBerry 10 theme support to Q10 and Q5 devices. The touch framework is now able to determine the screen resolution of the device and resize itself accordingly. As an example, if you run your Z10 application on a Q10 device, the tab menus and action overflow menus become scrollable and the action bar changes its height according to the screen size available on those devices.

In addition to the BlackBerry specific enhancements, we’ve included a number of bug fixes in this release, pertinent to both BlackBerry and other platforms. A list of all other fixes is available in the Sencha Touch 2.4 release notes.

We are proud of our collaboration with the BlackBerry team that helps us keep Sencha Touch on top of device diversity, so we can ensure Sencha Touch is available on the newest platforms as quickly as possible. The BlackBerry enhancements in Sencha Touch 2.4 provide a great opportunity for developers to build mobile applications that have the native-like look-and-feel of BlackBerry devices.

20140819-touch-2-4.png 16 Comments   Read more

Testing Enterprise Applications with Selenium and HTML5 Robot

Guest Blog Post

Testing Enterprise Applications with Selenium and HTML5 RobotThe need for browser-based test automation is hard to ignore. Enterprises are slimming down IT staff, yet these companies still need to know that the latest round of software upgrades didn’t break their business critical web-based application in Internet Explorer 7 and Firefox version 19. Having a staff of human beings manually make these determinations is time consuming, error prone, costly, and ultimately unnecessary.

Many of these companies use Selenium, which has become the enterprise standard for test automation because of its ease of use and widespread adoption, but its vision of static DOM and form-based web applications is outdated. Modern web application frameworks like Ext JS and Sencha Touch dynamically alter the DOM as the user interacts with the application, which creates headaches for Selenium.

HTML5 Robot was created to ease the difficulty in using Selenium with HTML5 technologies. HTML5 Robot extends Selenium capabilities by adding specific component lookup and interaction support for HTML5 frameworks like Ext JS 4, Ext JS 5, and Sencha Touch 2. It is also based on a series of best practices for how to reliably lookup and interact with those components in enterprise web applications. HTML5 Robot can be used as a Java framework for writing and managing test suites, or as a Java library that can be included in your own existing project.

Understanding HTML5 and the HTML DOM in Memory

For many years, HTML pages were static resources delivered by a web server and displayed in the web browser without modification. When you “View the Source” of a page, what you see is what you get. A <select /> component is a <select /> component. By 2008 though, AJAX and JavaScript frameworks became popular and web pages became less static. DOM manipulation became common with user interactions, and viewing the page source could not give you the full story. This is because you can dynamically add <option /> components to the <select /> component. This modification to the <select /> component can’t be seen in the page source; in order to see it, you have to view the HTML DOM as it exists in the browser’s memory. In a browser like Chrome, you can see this by right-clicking on the page and selecting “Inspect Element”.

HTML by Viewing Source

HTML by Inspection (Memory)

<select name="someName"> 
</select>
<select name="someName">
<option value="volvo"> Volvo</option>
<option value="saab"> Saab</option>
<option value="opel"> Opel</option>
<option value="audi"> Audi</option>
</select>

Frameworks like Sencha Touch and Ext JS go beyond this simple example though. In the case of Ext JS 5, a <select /> component (also known as a drop-down or a combo box) is not even a <select /> component. If you can type into the combo box, the underlying HTML component is an input. However if you cannot type text into it, the underlying HTML component is a link (the “a” tag). For example, consider the Ext JS 5 combo box when you can type text into it:

 Ext JS 5 combo box

Ext JS 5

{
         fieldLabel: 'Select a single state',
         displayField: 'state',
         anchor: '-15',
         labelWidth: 130,
         store: {
                    type: 'states'
         },    
         minChars: 0,
         queryMode: 'local',
         typeAhead: true
}

Generated HTML

<div id=“combobox-3234...”>
        <label id=“combobox-3234...”>
                    Select a single state
        </label>
        <div id=“combobox-3234...”>
                <input id=“combobox-3234...” />
                <div id=“combobox-3234...”
                                 class=“x-form-arrow-trigger” />
        </div>
</div>

Notice that the ID attributes of every HTML tag in the generated HTML contain a number. This is an indication that these values are dynamically generated. For Ext JS 5, almost every ID you encounter will be dynamically generated, with very few exceptions. This is why it is not a good practice to rely on these attributes.

There are a number of effective ways to reliably locate Ext JS and Sencha Touch generated components. These methods though depend on the component itself. The effective methods are as follows in order of preference:

  1. By text on the component, which only works when the component has text in it like a link or a button

  2. By form label, which only works when the component is in a form with an associated label

  3. By occurrence, which works in all cases but requires you to do something such as “find the 3rd combo box in the page”

For example, consider the Ext JS 5 Combo Box, which you can obtain by its associated form label. The only way this location expression would fail is if the text on that label were to change; this is a reasonably safe expectation given that our other options involve attributes that are dynamic the next time the page is loaded.

For example consider an XPath statement that does the following:

  1. Finds an input acting in the role of a combo box

  2. …which is a part of a div that contains a label with the text of “Select a single state”

  3. .. and finds the div that acts as the combo box button, as identified by the class “x-form-arrow-trigger”

x-form-arrow-trigger

The down arrow in the red box is the element that would be selected

XPath (returns and spaces added for readability)

//input[contains(@role, 'combobox')]
    /ancestor::div
    /descendant::label[contains(.,'Select a single state')]
    /ancestor::div[1]
    /descendant::div[contains(@class, 'x-form-arrow-trigger')]

This also shows that you have to understand what you’re trying to interact with. The way in which you interact with a Combo Box is different from how you’d interact with a Grid in Ext JS 5. These methods of interaction revolve around the different interactable parts of a component and how to locate them. This is why HTML5 Robot has defined methods for locating components and their interactable subcomponents (See Java – Locating Components).

For example, in a Java based HTML5 Robot test that included the Ext JS 5 support class, one could get the XPath for the Ext JS 5 combo box button by using the following:

String xpath = findComboBoxButtonByFormLabel("Select a single state");

This has been done for every conceivable point of interaction for every component in general HTML, Sencha Touch, and multiple versions of Ext JS. This is a huge timesaver when writing tests, and saves even more time in the long run since these tests are fundamentally more maintainable and less likely to break.

Testing an Enterprise App

Now that we have a solid understanding of what the DOM looks like in a modern web application, let’s take a look at an example. While HTML5 Robot usually tests against the Kitchen Sink demo, Ext JS 5 ships with an awesome new example called Executive Dashboard which simulates an enterprise application. You can also watch this video to learn how to install HTML5 Robot locally and get it running.

The first step in testing an application is to identify the components with which you want to interact, and the components which contain data that you want to verify.

The “KPI Overview” contains links, buttons, text, and charts. The charts are based on a canvas, so if you were to interact with them, the methods would be very different than the ones used for the links, buttons, and text. The points of interaction have been highlighted in the image above.

Our first step is to create a class to retrieve the interactive components, so we’ll start by creating a Model class that extends BaseModel:

import static com.appfoundation.automation.util.ExtJs5XPathUtils.*;
import com.appfoundation.automation.framework.BaseModel;

public class ExtJs5ExecutiveDashboardModel extends BaseModel {
...

ExtJs5ExecutiveDashboardModel.java

The next step is to define some constants that do the XPath lookups in the Model, which will be needed later:

...
// Left menu links
        public static final String KPI_LINK_XPATH = 
                findLinkByText("KPI Overview");
        public static final String PERFORMANCE_LINK_XPATH = 
                findLinkByText("Performance");
        public static final String PROFIT_N_LOSS_XPATH = 
                findLinkByText("Profit & Loss");
        public static final String COMPANY_NEWS_XPATH = 
                findLinkByText("Company News");
        
        // KPI Overview
        public static final String KPI_CLICKS_XPATH = findButtonByText("CLICKS");
        public static final String KPI_WON_XPATH = findButtonByText("WON");
        public static final String KPI_SALES_XPATH = findButtonByText("SALES");
        public static final String KPI_GOALS = findButtonByText("GOALS MET");

...

ExtJs5ExecutiveDashboardModel.java

Once the XPath lookups are defined, the next step is to define methods for doing Selenium WebElement lookups for these components.

...
public ExtJs5ExecutiveDashboardModel(BaseSeleniumTest test) {
                super(test);
        }
        
        public WebElement findKpiLink() {
                return this.find(KPI_LINK_XPATH);
        }
        
        public WebElement findPeformanceLink() {
                return this.find(PERFORMANCE_LINK_XPATH);
        }

...

ExtJs5ExecutiveDashboardModel.java

The next step is to write the Base Test Class, where the purpose is to define the basics of test operations as they are likely to work in all browsers. Later, you will define browser specific test implementations in other classes. When running the test methods of the class out of an IDE like Eclipse, the tests will default to running in Chrome. The Base Test Class needs to extend the BaseSeleniumTest, which provides access to helpful utilities for simplifying typically complicated operations, such as dragging and dropping one WebElement onto another. It also instantiates the BaseModel as well as handles the actual test execution.

package com.appfoundation.automation.example;

import org.junit.Test;

import com.appfoundation.automation.example.model.ExtJs5ExecutiveDashboardModel;
import com.appfoundation.automation.framework.BaseSeleniumTest;

import static org.hamcrest.MatcherAssert.*;
import static org.hamcrest.Matchers.*;

public class ExtJs5ExecutiveDashboardTestBase extends BaseSeleniumTest {

        private String URL = 
                "http://dev.sencha.com/extjs/5.0.0/examples/executive-dashboard/index.html";
        private ExtJs5ExecutiveDashboardModel model;
        
        public ExtJs5ExecutiveDashboardTestBase() {
                this.model = new ExtJs5ExecutiveDashboardModel(this);
        }

@Test
public void testKpiOverview() throws Exception {
                // Code goes here
}

ExtJs5ExecutiveDashboardTestBase.java

Notice that the test is JUnit-based, and as a preference I like to use Hamcrest in order to handle assertions. I find that statements like “Assert that X is Y” using Hamcrest are easier to read than the JUnit asserts like “assert that Y is expected from X”. You could use the standard JUnit “assertEquals” in place of the “assertThat” statements.

In any test, the first action is to open the URL to be tested. Another aspect of any test is that you need to wait on something that is deterministic to know that the application is in a state where you can interact with it. A good way to do this is to wait for some element on the page to be clickable, in this case waiting on the “KPI Overview” link to be clickable will work.

Open the URL sized for full screen, and wait for the “KPI Overview” link to be clickable

...

// Load the URL of the page to test
this.openUrlFullScreen(URL + "#!kpi/clicks");
        
// wait for the first menu item (a link) to be clickable
this.waitToBeClickable(ExtJs5ExecutiveDashboardModel.KPI_LINK_XPATH);
this.outputScreenShot();

...

Test KPI Overview – ExtJs5ExecutiveDashboardTestBase.java

At this point, it is a good idea to start verifying some of the expected displayed data. For the KPI Overview, you can assert the expectations for the values at the top of the page listed for Campaigns, Opportunities, Closed, Total Sales, and Goals.

Verify the expected data

...

// verify general data on the screen
assertThat(model.findBody().getText(), containsString("10nCAMPAIGNS"));
assertThat(model.findBody().getText(), containsString("20,560nOPPORTUNITIES"));
assertThat(model.findBody().getText(), containsString("10,000nCLOSED WON"));
assertThat(model.findBody().getText(), containsString("$90,200nTOTAL SALES"));
assertThat(model.findBody().getText(), containsString("71%nGOALS MET"));
                

...        

Test KPI Overview – ExtJs5ExecutiveDashboardTestBase.java

We can then begin clicking on the options available to us, starting with the “WON” button.

Click the “WON” button and wait for “CLICKS” button to be clickable

...

// Select the WON button, wait for the selection to complete
model.findKpiWonButton().click();
this.waitToBeClickable(ExtJs5ExecutiveDashboardModel.KPI_CLICKS_XPATH);
this.outputScreenShot();


...  

Test KPI Overview – ExtJs5ExecutiveDashboardTestBase.java

Running the Tests

In an IDE like Eclipse, you can right-click on the test method declaration in the code, select “Run As -> JUnit Test”. The result is that the test method will be executed against the default browser, which is Chrome. If the logging settings are set to Debug, you will also get console output specifying the XPath that was used for component locations.


JUnit – Test KPI Overview – ExtJs5ExecutiveDashboardTestBase.java

Testing Console Output

...
12:45:22,273 DEBUG [ExtJs5XPathUtils] findButtonByText: //a[contains(@class,'x-btn') and contains(.,'CLICKS')]
12:45:22,273 DEBUG [ExtJs5XPathUtils] findButtonByText: //a[contains(@class,'x-btn') and contains(.,'WON')]
12:45:22,289 DEBUG [ExtJs5XPathUtils] findButtonByText: //a[contains(@class,'x-btn') and contains(.,'SALES')]
...

Console Output – Test KPI Overview – ExtJs5ExecutiveDashboardTestBase.java

Testing in Other Browsers

HTML5 Robot uses browser-specific test classes that extend a base class, which in this example is ExtJs5ExecutiveDashboardTestBase. The reason for this is to allow for browser specific test implementations, which are sometimes necessary when dealing with operations like file upload that are generally browser specific. In order to do a browser-specific test, there are annotations that must be included in the test.

For example if you wanted to run the test in Firefox:

Firefox

package com.appfoundation.automation.example.test;

import com.appfoundation.automation.example.ExtJs5ExecutiveDashboardTestBase;
import com.appfoundation.automation.framework.Browser;
import com.appfoundation.automation.framework.BrowserType;

@BrowserType(value = Browser.FIREFOX)
public class ExtJs5ExecutiveDashboardFirefoxTest extends ExtJs5ExecutiveDashboardTestBase {

}

Right-clicking on any of these test classes in the Eclipse IDE and selecting “Run As -> JUnit Test” will run the test in the appropriate browser, as specified in the class-level annotation. An important point is that the exact browser to be used is the one that sits on the computer you are using. If you want to run your tests against Internet Explorer 8, the machine running the test must have Internet Explorer 8 installed.

Conclusion

The future is HTML5, and Sencha is leading the way to that future with Ext JS 5 and Sencha Touch 2. Selenium is great, but it has a hard time keeping up with the amazing things HTML5 applications can do. Even being an expert in HTML DOM component location, one still has to define all of the possible methods for interacting with those components in a specific technology like Ext JS 5. HTML5 Robot not only provides the ability to interact with Ext JS 5 out-of-the-box, it provides the enterprise with a series of best practices for quickly creating maintainable and reliable browser-based tests through Selenium. It also comes with support for the major browser drivers, including Chrome, Firefox, Internet Explorer, and Safari. This support includes advanced behavior such as taking screenshots, drag and drop, and conditional wait expressions to handle the highly asynchronous world of HTML5. For more information about integrating HTML5 Robot into your project, check out our video.

testing.png 4 Comments   Read more