I'm using CordovaWebView in my android project.
When I run application app load catch and show a blank toast message.
and inside logcat i see an error that say file not exists in assets.
I added jar file to libraries and added CordovaWebView inside my activity layout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="11"
android:orientation="vertical" >
<org.apache.cordova.CordovaWebView
android:id="#+id/tutorialView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
and used this code for loading html file from assets :
CordovaWebView cwv;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_course);
try{
cwv = (CordovaWebView) findViewById(R.id.tutorialView);
cwv.loadUrlIntoView("file:///android_asset/test.html");
}
catch(Exception e)
{
ToastHelper.Long(e.getMessage());
}
}
html file exists in assets and I can load it using WebView (not CordovaWebView).
Please share with me your ideas to solving this problem.
Regards.
for index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Android App</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<style type="text/css">
#font-face {
font-family: AayatQuraan;
src: url("file:///android_asset/fonts/AayatQuraan.ttf")
}
body {
font-family: AayatQuraan;
font-size: 60px;
text-align: justify;
}
</style>
</head>
<body onload="init();" >
جميل
</body>
</html>
for java
package com.example.hellogap;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
super.setIntegerProperty("loadUrlTimeoutValue", 60000);
super.loadUrl("file:///android_asset/www/index.html",1000);
}
}
output something like this=
try to use
cwv.loadUrl("file:///android_asset/test.html");
instead of
cwv.loadUrlIntoView("file:///android_asset/test.html");
see this
https://web.archive.org/web/20140514125044/http://www.infil00p.org/advanced-tutorial-using-cordovawebview-on-android/
Related
So I am trying to import google maps into my ionic 2 application. And so far all everything works. the problem arises with me importing the VeiwChild pack from #angular/core. Hence everytime I run the code it gives me the same error.
` Module '"C:/Users/Jay/Documents/maps/node_modules/#angular/core/core"' has no exported member 'VeiwChild'.
C:/Users/Jay/Documents/maps/src/pages/home/home.ts
import { Component, VeiwChild } from '#angular/core';
import { NavController } from 'ionic-angular'; `
Here is my index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB0i4Rwgm2oyIOevkQNPydd1BwXJOV2WBk"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
This is the home.html code
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div #map id="map"></div>
</ion-content>
this is my home.scss code
page-home {
.ios, .md {
home-page {
.scroll {
height: 100%
}
#map {
width: 100%;
height: 100%;
}
}
}
}
And finally here is my home.ts code
import { Component, VeiwChild } from '#angular/core';
import { NavController } from 'ionic-angular';
declare var google;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
#VeiwChild('map') mapElement;
map: any;
constructor(public navCtrl: NavController) {
}
ionVeiwDidLoad()
{
this.loadMap();
}
loadMap(){
let latLng = new google.maps.LatLng(-34.9290, 138.6010);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
}
I'm not entirely sure why i keep on getting this error. This is the video i used as reference.
link
Its just a typo.
This:
import { Component, VeiwChild } from '#angular/core';
Should be this:
import { Component, ViewChild } from '#angular/core';
View NOT Veiw
NOTE: It is also misspelled in several other places, such as here:
#VeiwChild('map') mapElement;
I'm trying to Create Android PhoneGap using Polymer ,it is worked very well on browser http://192.168.1.2:8080/ , But don't work on the phone
code Polymer Starter Kit
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Polymer Starter Kit">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<meta name="description" content="My App description">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true,
};
// Load webcomponentsjs polyfill if browser does not support native
// Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
/src/my-app.html:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
<a name="new-view" href="/view">New View</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view name="view"></my-view>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
},
observers: [
'_routePageChanged(routeData.page)',
],
_routePageChanged: function(page) {
this.page = page || 'view1';
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
});
</script>
</dom-module>
Please help me.
This has to do with using absolute paths vs relative paths & is kind of a complicated issue (see https://github.com/PolymerElements/polymer-starter-kit/issues/919 as an entry point for more details).
To just get things working you should be able to change this line in your index file:
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
to
script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
However you'll possibly then need some changes to your app routing when running on Cordova, but see if this gets you started.
I am new to programming phonegap apps. I have proved one simple phonegap app example and works fine on a Samsung Galaxy Mini, but doesn't in the Android emulator. The thing is, I want to show text when I click on a specific button inside the html.
App code is shown in below:
import android.os.Bundle;
import org.apache.cordova.*;
public class cordovaExample extends DroidGap
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
MyClass js = new MyClass(this,appView);
appView.getSettings().setJavaScriptEnabled(true);
appView.addJavascriptInterface(js, "JS");
super.loadUrl(Config.getStartUrl());
}
}
public class MyClass
{
private WebView mAppView;
private DroidGap mGap;
Activity activity;
public MyClass(DroidGap gap, WebView view)
{
mAppView = view;
mGap = gap;
}
public String getText()
{
return "Hello World";
}
}
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function Showessage()
{
var element = document.getElementById('time');
element.innerHTML = 'First Message :'+ window.JS.getText() + '<br />';
//alert('hello');
}
</script>
</head>
<body>
<div class="app">
<h1 class="event received" >Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id ="time" onclick="Showessage()">Device is Ready</p>
</div>
</div>
</body>
</html>
you have not to load corodova.X.X.js just the cordova.js script.
so the inclusion should be:
<script type="text/javascript" src="cordova.js"></script>
<!--- NOT <script type="text/javascript" src="cordova-2.5.0.js"></script> -->
In my application when I move from index1.html to index2.html,It shows black screen while retriving large amount of data from the server, stored in local database and retrieving the data from local database in onload of index2.html.How to show the progress bar when the black screen is appeared or how to remove that black screen?.
update
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Login</title>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript">
function submit()
{
alert("welcome");
window.open("index2.html");//while loading index2.html i need the progress bar
}
</script>
<style type="text/css">
.ex2{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
}
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
overflow-x: hidden;
}
#loadingScreen {
background: url(images/ajax-loader.gif) no-repeat 5px 8px;
padding-left: 25px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body >
<input type="button" style="width:80%" value="Submit" onClick="submit()"/>
</body>
</html>
Android code
public class MobilyzerActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}
If you are using frameworks like JQueryMobile then you have the option of showing loading dialog.
showing
$.mobile.showPageLoadingMsg()
hiding
$.mobile.hidePageLoadingMsg()
Are you using plain HTML?? any framework??
I am trying to stream video from Wowza to Android. I tried setting a MediaPlayer() and path "rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov", but with no success. I get this:
ARTSPConnection: Server unexpectedly closed the connection.
Any suggestions on how I could solve this?
This is how we need to stream from wowza:
String SrcPath ="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov";
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
VideoView myVideoView = (VideoView)findViewById(R.id.myvideoview);
myVideoView.setVideoURI(Uri.parse(SrcPath));
Log.i("parse path",Uri.parse(SrcPath)+"");
myVideoView.setMediaController(new MediaController(this));
myVideoView.requestFocus();
myVideoView.start();}
But before you do this, copy 'bigbuckbunny' video file to 'vod' folder in your wowza setup.
Well my soltuion was to create a HTML page that would take as a parameter the RTMP url and using Flash Media Playback would play the stream through flash...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>#############</title>
<script type="text/javascript">
function resizeHandler()
{
var flash = document.getElementById("FlashMovie");
window.scrollTo(0, 1);
flash.focus();
flash.focus();
}
window.onresize = resizeHandler;
window.onload = resizeHandler;
</script>
</head>
<body style="margin:0; padding:0; background: #000;">
<div style="margin:0; padding:0; width:100%; height:100%">
<embed id="FlashMovie" style="width:100%; height:100%" src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" fullScreenOnSelection="true" scale="showall" flashvars="src=rtmp%3A%2F%2F########%2Flive%2FmyStream.sdp&playButtonOverlay=true&loop=true&autoPlay=true&streamType=live&initialBufferTime=2" pluginspage="https://play.google.com/store/apps/details?id=com.adobe.flashplayer"></embed>
</div>
<br /><br /><br />
</body>
</html>