I want to display an icon before the list for which i had used like.
Not sure if the below is supported for Angular2.
The below module 'MaterialModule' is not required i guess, cause after removing it is working for me.
If i import this module, i get: no exported 'MaterialModule'!
app.module.ts //Not required to import here
import {MaterialModule} from '#angular/material';
imports: [
MaterialModule
...
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
test.component.html
<md-list-item routerLink="2" routerLinkActive="active">
<md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!-->
<div fxFlex="10"></div>
<div *ngIf="sidenavWidth > 6" class="sidenav-item">
<a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}</a>
</div>
</md-list-item>
my \src\index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Food4Smiles</title>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/static/hmicon.png">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
UPDATED ANSWER:
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
test.component.html
<md-list-item routerLink="2" routerLinkActive="active">
<md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!-->
<div fxFlex="10"></div>
<div *ngIf="sidenavWidth > 6" class="sidenav-item">
<a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}
</a>
</div>
</md-list-item>
\src\index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Food4Smiles</title>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/static/hmicon.png">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Related
I am new to phonegap, but I am catching on Quickly. I have built a phonegap apk online, and ran it on my phone, but before my mainpage loads, I get a phonegap blank page with a nav bar saying "hello world", unfortunately look i found no answer online to help me out. please how can i remove this ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/MBD/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/MBD/mdb.min.css">
<title>Papyfire v.1</title>
</head>
<body style="background-color: #ffffff; ">
<div class="row">
<div class="card col-sm-4 mr-2">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening gradient-purple">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/MBD/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/MBD/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/MBD/bootstrap.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/MBD/mdb.min.js"></script>
<script type="text/javascript">
app.initialize();
setTimeout(function(){
window.location="main.html";
}, 3000);
</script>
</body>
</html>
The phonegap config.xml file built with the app has the default start page as index.html change your main page name to index.html.
First of all I have seen every single question stating the same issue on Stack and non of them applied to mine
I was building my First PhoneGap App and i want to use jQueryMobile libraries
anyways, the JQuery Styles is not working properly,
My Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
btn1
<p>I Am Now A Mobile Developer!!</p>
btn2
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"/>
<script type="text/javascript" src="./js/jquery-1.12.0.min.js"/>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"/>
<script type="text/javascript" src="js/index.js"/>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the results are
as you can see the button inline and corner all attributes worked fine but still that is not the expectedP
You didnt reference them properly
Remove the dot. I following the folder structure of where your css files are, your java script files should be here /js not ./js
So reference like this
[code]
[/code]
I'm creating mobile app with HTML/CSS/JS (phoneap, jquery mobile) and I'm converting code which is here https://build.phonegap.com/apps.
I need to achieve this behaviour:
after clicking on the link, which links on a external page, I need to open a question for selection a browser.
This si my code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="https://www.paypalobjects.com/js/external/dg.js" type="text/javascript"></script>
<script type="text/javascript" src="js/datapicker/jquery.datetimepicker.js"></script>
<script src="js/jPayPalCart.js" type="text/javascript"></script>
<script type="text/javascript" src="js/phonegap-1.2.0.js"></script>
<link rel="stylesheet" href="js/datapicker/jquery.datetimepicker.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" />
<script type="text/javascript">
function openDialog() {
window.open('http://apache.org', '_blank', 'location=yes');
}
</script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css">
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="findShop">
<div data-role="content">
<div class="container" data-role="content" role="main">
<div class="row main-page">
<div class="col-xs-12 title">
Die vielleicht beste Pizza der Stadt!
Open in web browser
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Does anyone know where could be problem
I've a very simple hybrid mobile application developed with Cordova and appFramework.
index.html looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and
height=device-height attributes. See https://issues.apache.org
/jira/browse/CB-4323 -->
<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" />
<link rel="stylesheet" type="text/css" href="css/af/main.css" />
<link rel="stylesheet" type="text/css" href="css/af/appframework.css" />
<link rel="stylesheet" type="text/css" href="css/af/lists.css" />
<link rel="stylesheet" type="text/css" href="css/af/forms.css" />
<link rel="stylesheet" type="text/css" href="css/af/buttons.css" />
<link rel="stylesheet" type="text/css" href="css/af/badges.css" />
<link rel="stylesheet" type="text/css" href="css/af/grid.css" />
<link rel="stylesheet" type="text/css" href="css/af/android.css" />
<link rel="stylesheet" type="text/css" href="css/af/win8.css" />
<link rel="stylesheet" type="text/css" href="css/af/bb.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios.css" />
<link rel="stylesheet" type="text/css" href="css/af/ios7.css" />
<link rel="stylesheet" type="text/css" href="css/af/tizen.css" />
<title>Cordova Application</title>
<script type="text/javascript" charset="utf-8"
src="js/vendor/appframework.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.scroller.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.css3animate.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/appframework.ui.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/fade.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/flip.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/pop.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slide.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideDown.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/ui/transitions/slideUp.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/vendor/plugins/af.slidemenu.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div data-title="Home" class="panel"
id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div data-title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul>
<li><a class="icon home mini"
href="#main">Home Link</a></li>
<li><a class="icon mini"
href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
This shows up correctly and even the navigation is wired up when opened in Safari or Chrome desktop browsers.
But if I run it in either iOS or Android emulators, I see the alert 'Document Ready' and after that blank page. Home panel is not displayed.
Here is what I do to run the emulators.
cordova emulate ios
cordova emulate android
Even if I open the index.html files directly from the platform builds they show up correctly on the desktop browser.
I'm pretty new to all this so I may be missing steps here. Any help would be appreciated.
You dont need all the fragmented appframework js and css files, you can just include 2 css and 1 js file, here is updated code, it works as cordova app on android, I built Cordova app with Intel XDK.
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/af.ui.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<script type="text/javascript" charset="utf-8" src="js/appframework.ui.min.js"></script>
<script>
$.ui.ready(function () {
console.log("UI Ready!!!");
});
$(document).ready(function() {
console.log('Document Ready...');
alert('Document Ready...');
});
</script>
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div title="Home" class="panel" id="main" selected="true">
<span>THIS is the HOME Page!</span>
</div>
<div title="Second Page" class="panel" id="second">
</div>
</div>
<nav>
<div class="title">Nav Home</div>
<ul class="list">
<li><a class="icon home mini" href="#main">Home Link</a></li>
<li><a class="icon mini" href="#second">Second Link</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).