I wrote some html/js codes for db management in apache cordova/android.
Firstly i wanted to copy a sqlite db to my project.
i used a plugin for this. dbcopy.
I read docs.
And i wrote some codes. But it is not working. in some functions, i wrote some alerts. But they are not working.
I am using jquery mobile in apache cordova.
My codes;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- <link rel="stylesheet" type="text/css" href="css/index.css">-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.5.min.css">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/sqlDB.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function dbcopy()
{
//Database filename to be copied is demo.db
alert('copy is starting');
//location = 0, will copy the db to default SQLite Database Directory
window.plugins.sqlDB.copy("ogrenci.sqlite", 0, copysuccess,copyerror);
}
function copysuccess()
{
//open db and run your queries
alert("copysuccess");
db = window.sqlitePlugin.openDatabase({name: "ogrenci.sqlite"});.
}
function copyerror(e)
{
//db already exists or problem in copying the db file. Check the Log.
console.log("Error Code = "+JSON.stringify(e));
//e.code = 516 => if db exists
}
dbcopy();
})
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Arif's App</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Copyright 2016</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Did you install the plugin? you can install to your project by running the following command on your cordova project directory:
cordova plugin add cordova-plugin-dbcopy
Related
I want to implement a chat client. so I tried with conversejs. but I can't found to integrate it with the react application. Is there any way to do it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/7.0.2/dist/converse.min.css">
<script src="https://cdn.conversejs.org/7.0.2/dist/converse.min.js" charset="utf-8"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<script>
converse.initialize({
authentication: 'anonymous',
auto_login: true,
auto_join_rooms: [
'anonymous#conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
notify_all_room_messages: [
'anonymous#conference.nomnom.im',
],
singleton: true,
show_controlbox_by_default: true,
view_mode: 'overlayed'
});
</script>
</html>
I've created
a Blazor Server app (BlazorServerApp)(.Net Core 3.1)
a .NET Standard Class Library (MyClassLibrary)
I've added the MyClassLibrary project to the dependencies of the BlazorServerApp. Then I've added wwwroot folder to the MyClassLibrary project and added test.js file to this folder.
I've edited the MyClassLibrary project file as follows:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<AssemblyName>MyClassLibrary</AssemblyName>
<RootNamespace>MyClassLibrary</RootNamespace>
</PropertyGroup>
<ItemGroup>
<EmbeddedResource Include="wwwroot\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
</Project>
Blazor web app call the UseStaticFiles method in Startup, which enables static files to be served:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
I've added the test.js as <script src="_content/MyClassLibrary/test.js"></script> in the _Host.cshtml (BlazorServerApp project):
#page "/"
#namespace BlazorServerApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorServerApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="_content/MyClassLibrary/test.js"></script>
</body>
</html>
However, when I run the BlazorServerApp project the error appears in the browser:
GET https://localhost:5001/_content/MyClassLibrary/test.js net::ERR_ABORTED 404
That is, the web app doesn't find such a resource at the specified path.
Can anyone explain why this is happening and what needs to be done in order for the application to access static resources (such as js or css) in other dependent projects (net standard class library in my case)?
Open the component project properties and go to package tab.
You must set a value in Package id
Then you use this id to specify the path
<script src="_content/package_id/test.js"></script>
I know this was about two years ago, but I found an answer to this.
If you are running your app in Development, chances are you are finding your static web assets just fine. But, if you change your ASPNETCORE_ENVIRONMENT to anything else you will find you get a bunch of 404 errors when trying to get your assets.
To work around this add StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment,builder.Configuration); to your main Main method, or your Program.cs in .net 6.
I found this information here on the aspnetcore github. They talk more about the static asset loader here which is where I found how to use it, but the issue on 38212 seemed to be unrelated. I didn't do a deep dive on how the static asset loader worked though, or why it's needed.
I use inspect to check and it shows as below:
lottie.js:3 Failed to load file:///Users/Downloads/ani/js/data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I dont know how to read Json from a .json file from my local sever?
can anyone help me to solve it?
var animation = bodymovin.loadAnimation({
container: document.getElementById('Ani'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'js/data.json'
})
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bodymovin Demo</title>
<!-- Styles -->
<style>
#Ani{max-width: 800px; margin:0 auto;}
</style>
</head>
<body>
<div id="Ani"> </div>
<!-- Scripts -->
<script src="js/lottie.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You are opening the file with the file protocol and you try an Ajax request. That wont work. You better open the file over a server. You can use apache or any webserver? By example if you are familiar with Node you can use http-server
or use lite-server.
npm install http-server -g
http-server 'path/to/your/project' -o
That should open the browser window at: localhost:8080 or other port if 8080 is not free
I am creating a chat system within my mobile app, but I am running into a problem. I have defined jQuery and the signalR within my index. I also have defined the script path to my server.
Code (index.html)
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- Cordova whitelist plugin -->
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<!-- Base libs -->
<script src="libs/ionic/js/ionic.bundle.js"></script>
<script src="libs/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- Third party libs -->
<script src='libs/jquery/dist/jquery.min.js'></script>
<script src='libs/signalR/jquery.signalR.min.js'></script>
<!-- Location for SignalR lib to open a connection with -->
<script src="http://www.mytestserver.nl/chathub/signalr/hubs"></script>
<!-- Application Javascript files | put the routing files after the controllers! -->
<script src="app/app.js"></script>
</head>
I have a working version on my localhost, so I do think my code is right.
When I try to use the code in my controller I get a 404 not found error.
I think this is because I do not define a port in my script to the server. Then signalR defaults to the current host (localhost:8100).
Code (chatController.js)
.controller('ChatController', ['$scope', '$state', function ($scope, $state) {
$.connection.hub.url = "http://www.mytestserver.nl/chathub/signalr";
$.connection.hub.start().done(function () {
console.log("hello world");
});
}]);
Not the DNS comes in. I cannot define a port number, because the DNS is removing the port numbers. Defining any port number results in a 404 not found or a Connection timed out error.
What can I do to make a connection to the server?
Ive had this situation before which worked fine on devexpress localhost but when transferred to IIS the path would not map correctly.
Its possible that the path you specify to signalr/hubs is not correct so the server does not pick it up correctly.
Try adding a wildcard to your signalr/hubs reference like this
<script src="~/signalr/hubs"></script>
After this open the javascript console and ensure that there are no errors.
I have recently began developing an application and decided KendoUI along with phonegap would be the best solution to our project, however I cannot get KendoUI to display correctly.
I am using a mac to develop the application and when I run the app it displays the code perfectly, I am not sure if this is because it is rendering it as an iOS device and that is why it is displaying correctly, but it does not work with the android device as you can see here: Note this is not just for tablets, I have tried on a Galaxy SII, HTC EVO 4G, and a Nexus 10. All of which produce the same results displayed below.
The problem is it seems the application is ignoring the view and placing the title in the wrong place.
If you need anymore information feel free to ask.. I don't know what else to list.
My file structure for this application is:
/ <--- project root
/assets/
/www/
/css/
/kendo.mobile.all.min.css
/js/
/jquery.min.js
/kendo.all.min.js
/kendo.mobile.min.js
cordova-2.4.0.js
index.html
The tutorial: http://docs.kendoui.com/getting-started/introduction
Here is the source code from the tutorial I am following:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="cordova-2.4.0.js"></script>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<script>
</script>
</head>
<body>
<div id="home" data-role="view" data-layout="default">
Hello Mobile World!
</div>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
Home
</div>
</footer>
</section>
<script>var app = new kendo.mobile.Application();</script>
</body>
</html>
I also used this tutorial however I do not understand the config file they give the one posted is mine: http://www.adobe.com/devnet/phonegap/articles/getting-started-kendo-ui-mobile-phonegap-build.html
<?xml version="1.0" encoding="utf-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<cordova>
<!--
access elements control the Android whitelist.
Domains are assumed blocked unless set otherwise
-->
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
<!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
<access origin=".*"/>
<!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
<content src="index.html" />
<log level="DEBUG"/>
<preference name="useBrowserHistory" value="true" />
<preference name="exit-on-suspend" value="false" />
<plugins>
<plugin name="App" value="org.apache.cordova.App"/>
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
<plugin name="Device" value="org.apache.cordova.Device"/>
<plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
<plugin name="Compass" value="org.apache.cordova.CompassListener"/>
<plugin name="Media" value="org.apache.cordova.AudioHandler"/>
<plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
<plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
<plugin name="File" value="org.apache.cordova.FileUtils"/>
<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
<plugin name="Notification" value="org.apache.cordova.Notification"/>
<plugin name="Storage" value="org.apache.cordova.Storage"/>
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
<plugin name="Capture" value="org.apache.cordova.Capture"/>
<plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
<plugin name="Echo" value="org.apache.cordova.Echo" />
<plugin name="Globalization" value="org.apache.cordova.Globalization"/>
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>
Finally my MainActivity:
package com.example.project;
import android.os.Bundle;
import org.apache.cordova.DroidGap;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Edit: I just tried this solution.. http://docs.kendoui.com/getting-started/mobile/navbar#showing-hidden-view-title however it was unsuccessful in showing the view. I gained this from another question: header and footer not displayed in Kendo UI Mobile PhoneGap Application For Android Here is the new result:
By default Kendo UI Mobile reverses the View layout on Android in order to get the TabStrip on top of the View. Furthermore the View title is hidden (as it doesn't make sense at the bottom). This can be easily worked around with CSS only:
.km-root .km-android .km-view {
-webkit-box-direction: normal;
-webkit-flex-direction: column;
}
.km-android .km-view-title
{
visibility: visible;
}