3

I am in the process of making an android app with Appcloud. My Issue is, that i have my "Pages" set up so it is just a picture-link (HTML) that sends you to a new page (HTML File) I Know that there is a better way to do this. I asked someone and they said to use Jquery Mobile to transition between pages. 1. How do I set up Jquery Mobile with AppCloud. 2. What is the best way to do pages and transtions with Jquery Mobile. Thanks!

user1834524
  • 41
  • 1

1 Answers1

0

In this reply I am going to assume you know a bit about App Cloud, a bit about jQuery Mobile, and a bit about JavaScript/jQuery. The answer will be a bit lengthy as is, but without assuming some of that knowledge it would much longer.

Question 1: How do I setup jQuery Mobile with App Cloud.

This is pretty straightforward. You need to include the CSS and scripts for both technologies. I have used this for the header and been successful.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="bc-manifest" content="manifest.json" />
<title>App Cloud</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="javascripts/lib/brightcove-app-cloud-1.12.min.js"></script>
<script type="text/javascript" src="javascripts/views/appcloud.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
…

Question 2: What is the best way to do pages and transitions with Jquery Mobile.

I am going to answer this question in two ways. The first if you are not using jQuery Mobile (jQM), and a second way if you are. Since you are looking for a way to do transitions, you do NOT have to use jQM as page transitions are built into App Cloud.

In standard App Cloud you want to create each of your HTML pages as an App Cloud view. Roughly speaking view is a navigable part of your application and corresponds to an HTML page. The view can contain multiple logical pages. For instance, a view can contain a page that displays a list of items for selection by tap, then another page that displays details on the tapped item. When transitioning between pages the App Cloud API forwardPage() method has transitions built in, and defaults to SLIDE_LEFT. Pages in this scenario use App Cloud’s CSS to define pages using the class attribute, as show here:

<section id="pageone" class="page">`

If you are using App Cloud with jQM you most likely are using jQM’s navigation tools. I would still use App Cloud views with jQM, but logical pages in jQM are defined using jQuery’s CSS, not App Cloud’s. Just as with App Cloud, jQM places multiple logical pages in one HTML file, and navigating to those logical pages is not a problem using jQuery’s standard tools, including jQM’s transitions.

The issue is changing to an App Cloud view. Normally in jQM you would use an to go to a page, but under App Cloud this will result in a modal window being opened and you would leave your app, which most likely you don’t want. Instead, while still using an anchor tag, remove the href, as shown here:

<a rel="external" data-role="button" class="mainNavTargetBC">

I added the mainNavTargetBC class, then in JavaScript you can listen for a tap event on the link, as shown here: 

$("body").on( "tap", ".mainNavTargetBC", topNavClickedBC);

Then, in the event handler, you can transition to the new App Cloud view using the navigateToView() method, as shown here:

bc.device.navigateToView("brightcove.html");

So there it is. Page transitions using standard App Cloud and with jQM. To recap, page transitions built into App Cloud, but if using jQM use their transitions.

mboles57
  • 133
  • 3
  • 12