What follows are a few dev scenarios which can be used to demonstrate various features of this sample.
-
Upload updated .csv
- In the AEM Products console, click import products
- Select kitchen-sink-books-update.csv and click next
- 1 product should be updated. Click Done when complete
-
Activate products
- From the Products console, navigate into the 'bl' folder
- Select the 'blbk' folder, Select publish -> publish.
- Click the Publish button on the Assets view to continue
-
Rollout changes
- From the Catalogs console, Click on the select button. Select 'Base Catalog' and click 'Rollout Changes'
- Click 'Rollout Changes' button to complete the rollout
-
Create Content Sync Update
- Navigate to the Apps Command Center
- From the Content Sync Packages tile click on Kitchen Sync English
- From the menu located on the top right, click on the down arrow to expose the menu options, click and select Stage Update.
- Enter a brief title and description and click Done. Upon success, click Close to dismiss the dialog.
- From the menu located on the top right, click on the down arrow to expose the menu options, click and select Publish Update.
-
From the app, open up the menu and tap 'Update'
- the Design Patterns library item should have an updated title (or any other updates you specified in the updated .csv)
-
Component: copy from location
- change name to
phonegap-camera - change properties on component
- change name to
-
JSP
- change name to
phonegap-camera.jsp
- change name to
<%@include file="/libs/foundation/global.jsp" %><%
%><%@ page session="false" %><%
%>
<div ng-controller="CameraCtrl" class="list card">
<div class="item">
<h2>Camera</h2>
<p>Take a picture</p>
</div>
<div class="item item-image">
<img ng-src="{{imageSrc}}">
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" ng-click="takeAPicture()">
<i class="icon ion-ios7-camera-outline"></i>
Take a picture
</a>
<a class="tab-item" ng-click="browseForAPicture()">
<i class="icon ion-ios7-photos-outline"></i>
Browse gallery
</a>
</div>
</div>
- Clientlib
- change clientlib js file to
phonegap-camera.js - change js.txt
- change clientlib js file to
;(function (angular, document, undefined) {
angular.module('phonegapCamera', ['brucelefebvre.phonegap.camera'])
.controller('CameraCtrl', ['$scope', 'camera', function($scope, camera) {
function gotPicture(imageData) {
$scope.imageSrc = "data:image/jpeg;base64," + imageData;
}
function cameraError(message) {
console.error('Problem: ' + message);
}
$scope.takeAPicture = function() {
camera.getPicture(gotPicture, cameraError, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
};
$scope.browseForAPicture = function() {
camera.getPicture(gotPicture, cameraError, {
quality: 50,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
destinationType: Camera.DestinationType.DATA_URL
});
};
}]);
}(angular, document));
-
Add module to angular-module-list.js.jsp
phonegapCamera
-
Build and Replicate kitchen-sink package
- Add the
org.apache.cordova.contactsplugin id to the install_plugins hook object (/content/phonegap/brucelefebvre/content/kitchen-sink/phonegap/.cordova/hooks/before_platform_add/install_plugins.js):
,
{
id: "org.apache.cordova.contacts"
}
- Add the following files to the splash page file list (contentsync-file-list.js.jsp):
,
"plugins/org.apache.cordova.contacts/www/Contact.js",
"plugins/org.apache.cordova.contacts/www/ContactField.js",
"plugins/org.apache.cordova.contacts/www/ContactOrganization.js",
"plugins/org.apache.cordova.contacts/www/ContactAddress.js",
"plugins/org.apache.cordova.contacts/www/ContactFindOptions.js",
"plugins/org.apache.cordova.contacts/www/contacts.js",
"plugins/org.apache.cordova.contacts/www/ContactError.js",
"plugins/org.apache.cordova.contacts/www/ContactName.js",
"plugins/org.apache.cordova.contacts/www/ios/Contact.js",
"plugins/org.apache.cordova.contacts/www/ios/contacts.js"
- Add the following markup to phonegap-contacts.jsp:
<div ng-controller="ContactsCtrl" class="list">
<div class="item item-divider">
Device Contact List
</div>
<div ng-repeat="contact in contacts">
<a class="item">{{contact.displayName}}</a>
</div>
</div>
- Add this script to phonegap-contacts.js:
angular.module('phonegapAPI')
.controller('ContactsCtrl', ['$scope', 'phonegapReady', function($scope, phonegapReady) {
var readAndDisplayContacts = phonegapReady(function() {
function onSuccess(contacts) {
$scope.contacts = contacts;
$scope.$apply();
};
function onError(contactError) {
console.error('[contacts] error reading contacts');
};
// find all contacts
if (window.ContactFindOptions) {
var options = new ContactFindOptions();
options.filter = "";
var filter = ["displayName"];
navigator.contacts.find(filter, onSuccess, onError, options);
}
});
readAndDisplayContacts();
}]);
- Add the component to the page
- Build and replicate the kitchen-sink package if you need the component on pub
Revert the commit which adds the tab-bar component and design data:
git revert --no-commit 4356b695dfd564b3a0044234ae4d64a54f501119
Build and install the content-dev package.
Download the app with clear ContentSync (CS) configs.
Run the app, on one or both platforms.
Add the following to /apps/brucelefebvre/kitchen-sink/components/ng-ionic-page/footer.html:
<sly data-sly-resource="${ @ path='tab-bar', resourceType='brucelefebvre/kitchen-sink/components/ng-ionic-page/tab-bar' }" />
In Classic design mode (http://localhost:4502/cf#/content/phonegap/kitchen-sink/en/home.html), add a couple of pages to the tab bar design (en/Kitchen Sink and en/Kitchen Sink/Camera have matching icons).
Update the en CS config:
curl --user admin:admin --data-urlencode "title=new update" http://localhost:4502/content/phonegap/kitchen-sink/en/jcr:content/pge-app/app-config.newupdate.json
Publish the update:
curl --user admin:admin --data-urlencode "title=activate it" http://localhost:4502/content/phonegap/kitchen-sink/en/jcr:content/pge-app/app-config.activateZips.json
Pull an update from the app to reveal the new footer.