Chuyển đến nội dung chính

[MOBILE] Integrating PhoneGap (Apache Cordova) into Your Mobile Applications

Integrating PhoneGap (Apache Cordova) into Your Mobile Applications

Leverage PhoneGap (Cordova) JavaScript libraries to integrate device features into your CQ5 applications for mobile devices. For example, the Camera component provides controls that interact with the device camera. Users can operate the web page controls to take photographs and upload them.
The PhoneGap Build service compiles web applications consisting of HTML, CSS, and JavaScript as native mobile applications. Native applications can either contain copies of the web content, or download content from the web server. Using the application as a wrapper for live web pages, you can update content without updating the application. Also, users are not bothered with application updates.
The PhoneGap Integration package provides a native iOS application that acts as a wrapper for web sites. Users can install the application to access web site content, including PhoneGap-driven device components. The application is provided with an iOS device emulator so you can run the application on your Mac.
Enhancements to the Geometrixx Outdoors sample application provide examples for learning how to leverage the tools that the PhoneGap Integration package provides. It also adds a QR code to the emulator carousel that appears for mobile pages in Edit mode. Upon scanning the code, the device opens the corresponding page from the publish server.
The information in this article focuses on PhoneGap integration. For information about how to use the PhoneGap libraries, go to the phonegap.com website.

THE PHONEGAP INTEGRATION PACKAGE

Download the PhoneGap-integration-5.5.x package from Package Share to install development tools and sample resources. Visit Package Share at https://dev.day.com/packageshare.html. For a local CQ5 instance, the Package Share URL is http://localhost:4502/crx/packageshare.

NOTE
After you install the package on the author instance, replicate the PhoneGap-components-5.5.x subpackage so that the mobile site functions correctly on the publish instance.

Camera Component

The Camera component (in the PhoneGap group) enables web pages to access the device camera. The Camera component uses the Cordova JavaScript libraries to provide controls that interact with the device camera. Users can take or upload a photograph without leaving the web page.
file
The component is installed as part of the geometrixx-outdoors application: /apps/geometrixx-outdoors/components/phonegap/mobilecamera. The Community page of the Geometrixx Outdoors Mobile site includes a Camera component.
JavaScript and CSS files are installed in the repository below the /etc/clientlibs/foundation/phonegap/camera node.

Store Map Component

The Store Map component uses Google Maps to show driving directions to a Geometrixx Outdoors retail store. The component demonstrates the use of the Cordova geolocation object for obtaining the location of the mobile device.
file
The component calls the Cordova geolocation.GetCurrentPosition function to obtain the position of the device. After retrieving the location, the map with directions from the location to the store is obtained from Google Maps service.
The component includes a dialog that you use to manually specify a location. When the GetCurrentPosition function returns an error, this location is used. If no location has been specified using the dialog, the default location of 343 Preston St, Ottawa, ON is used.
When viewing the component on a page on the author instance, the component displays a static image. The Contact page of the Geometrixx Outdoors Mobile site includes a Store Map component.
Specify the default location:
  1. On the author instance, open the page that contains the Store Map component.
  2. Double-click the component.
  3. In the Store Address field, type the address. The address must be resolvable by the Google Maps service.
  4. Click OK.

QR Code generator service

The Mobile QR Code Generator service generates a QR code for a given URL.  The PhoneGap Integration package uses this service to add a QR code to the emulator carousel of the Geometrixx Outdoors Mobile site. The QR code contains the URL of the corresponding page on the publish instance. Page authors can use a mobile device to scan the code and preview the page in the device rather than the emulator.
file

GeoOutdoors iOS Application

GeoOutdoors is a native iOS application that serves as a wrapper around the Geometrixx-Outdoors Mobile site. The application demonstrates how to leverage existing web sites as content for native mobile applications. The web-site wrapper application is especially compelling when the web pages use the PhoneGap libraries to access device features.
When using a desktop computer or laptop, the application runs inside the iOS simulator.
file

Geometrixx-Outdoors Mobile site enhancements

Several files are installed in the Geometrixx-Outdoors application to enhance the Geometrixx-Outdoors Mobile site. The new files and updates to existing files integrate the features and developer resources that the PhoneGap package provides:
  • Adds the QR code to the emulator carousel. The encoded URL points to the page on the publish instance. The image is a link to the GeoOutdoors native iOS application.
  • Determines the URL of the publish CQ server for the QR code.
  • Adds the /content/geometrixx-outdoors-mobile/en/community page node that includes an instance of the Camera component.
  • Adds the /content/geometrixx-outdoors-mobile/en/contact page node that includes an instance of the Store Map component.
  • Adds the phonegap_page_mobile node to the /etc/designs/geometrixx-outdoors design. The node configuration adds the Camera and Store Map components to the PhoneGap group in SideKick for authoring.
file

CONFIGURING THE QR CODE URL

Configure CQ5 author instance so that the QR codes on the Geometrixx Outdoors Mobile pages encode the correct URL of the published pages. By default, the URL uses localhost as the name of the publish server. The URL must use the actual server name or IP address to work on the mobile devices.
The phonegap_page_mobile component constructs the URL of published pages and uses it as a parameter in the call to the QR Code service. The component obtains the root of the URL from the Day CQ Link Externalizer service. By default, the publish instance URL is configured as http://localhost:4503. For example, using this default value the encoded URL on the Community page is http://localhost:4503/content/geometrixx-outdoors-mobile/en/community.html.
  1. Open Adobe CQ5 Web Console, and click the Configuration tab (http://localhost:4502/system/console/configMgr).
  3. Click the Day CQ Link Externalizer item to reveal the service properties.
  4. In the Domains list, change publish http://localhost:4503 so that it uses the computer name or IP address instead of localhost, for example publish http://10.36.79.223:4503.
  5. Click Save.
You need to reload any open pages to update the QR code on the page.

USING THE GEOOUTDOORS APPLICATION

After you install the PhoneGap package, the GeoOutdoors native iOS application is available to download from the Geometrixx-Outdoors Mobile site. The application runs inside the Apple iPhone simulator that is compatible with Mac computers. (The emulator does not run in Windows environments.)
Note: You cannot install the application on a device. To do so, you must recompile the application and sign it using your Apple Development Provisioning Profile. For more information, visit Apple's iOS Developer Program website.
The GeoOutdoors application displays the pages of the Geometrixx Outdoors Mobile site on the publish instance. Before you run the application, start the publish instance and use CQ5 WCM to activate  /content/geometrixx-outdoors-mobile/en.
Install and run the application:
  1. Open a page of the Geometrixx Outdoors Mobile site on the author instance (http://localhost:4503/cf#/content/geometrixx-outdoors-mobile/en.touch.html).
  2. Click the QR code that appears next to the emulator carousel and save the GeoOutdoors.zip file.
  3. Expand the archive file and open GeoOutdoors (iPhone Simulator).app.
If you are running the application on the same computer as the publish instance of CQ5, the iPhone emulator opens and displays the home page of the Geometrixx Outdoors Mobile page.
file
If you are running the application on a computer other than the publish instance of CQ5, you need to specify the URL of the publish instance:
  1. Click the Drop-down menu, select Other in the dialog box, and then click Done.
file
  1. Type the server name or IP address and port of the publish instance, for example 10.36.79.223:4503.
  2. Click Go.
If you modify the pages on the author instance and then publish them, you can run the application and see the changes.

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

How to add a new supported language in CQ / WEM (Translator in CQ)

Use case:  You want to add new language to CQ Change display language options in translator grid Change language name and default countries  Solution: You can access translator UI in CQ with following URL http://<HOST>:<PORT>/libs/cq/i18n/translator.html Create new language location for Dictionary Go to CRXDE lite (or your favorite JCR browser) and add this structure (assuming /apps/myapp/i18n as a typical location for custom apps): /apps/myapp/i18n [sling:Folder]     - de [nt:unstructured]         + jcr:mixinTypes = [mix:language]         + jcr:language = de     - fr [nt:unstructured]         + jcr:mixinTypes = [mix:language]         + jcr:language = fr Then reload the translator and the path /apps/ myapp /i18n should show up in the drop-down at the top. Note: the translator will only save translations for languages that are actually present underneath the path (e.g. /apps/myapp/i18n), others will be skipped. Then on jsp pa
Đăng nhận xét
Đọc thêm

Login / Logout on a Publish instance and Closed User Group (CUG)

In CQ5 there is the login logout could be configured using a Closed User Group. Closed User Groups (CUGs) are used to limit access to specific pages that reside within a published internet site. Such pages require the assigned members to login and provide security credentials. http://dev.day.com/docs/en/cq/5-4/howto/create_apply_cug.html The logout using /libs/cq/core/content/login.logout.html always gets redirected to the geometrixx site   http://localhost:4503/content/geometrixx-outdoors/en.html By configuring the Default login page  under the osgi configuration for com.day.cq.auth.impl.LoginSelectorHandler to be – /content/mysite/en/login But still after logout the page goes to the geometrixx site. IIRC, the redirect first goes to to / which then goes through the standard, somewhat complex handling of the root with multiple redirects: 1) / has a resource type of sling:redirect and redirects to /index.html 2) /index.html is handled by the RootMappingServlet [0] which h
Đăng nhận xét
Đọc thêm

[PERFORMANCE] Adobe WEM/CQ performance tuning

Adobe WEM/CQ performance tuning Contents Caching-related configurations CRX Bundle cache CRX Search index handler (Lucene) cache Tar PM index cache Scalability Maintenance Optimizing Tar Files (for Tar Persistence Manager) Data Store Garbage Collection Main documentation you should consult first: http://dev.day.com/docs/en/cq/current/deploying/performance.html http://dev.day.com/content/kb/home/cq5/CQ5Troubleshooting/performancetuningtips.html Caching-related configurations CRX Bundle cache CRX caches bundles, consisting of a node with all its properties. This is used by all bundle-based Persistence Managers. The default size of BundleCache is 8 MB. If this is too small it can cause an excessive number of read-accesses to the underlying persistence layer. Set the bundleCacheSize to something larger than the default. See more here: http://dev.day.com/docs/en/cq/current/deploying/performance.html#CRX%20Bundle%20Cache CRX Search index handler (Lucene
Đăng nhận xét
Đọc thêm