CODEWITHSUNDEEP
jquerycordovalistviewwebstormphonegap
tagliatelli
tagliatelli

Reputation: 177

PhoneGap listview formatting

I am relatively new to PhoneGap although well versed in HTML, CSS and jQuery themselves. Doing a test listview program using the WebStorm default

<!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" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li><a id="one" href="#one">one</a></li>
            <li><a id="two" href="#two">two</a></li>
        </ul>
    </div>
</div>
    <div class="app">
        <h1>PhoneGap</h1>

        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

</html>

returns a simple listview but with no correct formatting, with blue anchors and bullet points visible. Commenting out the <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 *" /> fixed the problem through trial and error, but I don't know why.

Is this the correct way to get a listview in PhoneGap/Cordova at all?

Upvotes: 0

Views: 151

Answers (1)

Valentin Klinghammer
Valentin Klinghammer

Reputation: 1349

There is no "correct" way to display things with PhoneGap/Cordova, so what you do is fine. You do it just the way you build web applications.

What is different with PhoneGap/Cordova, though, is that your JavaScript code runs basically as an app and might have access to system resources that a website in a browser does not have. So you as a developer should take extra care of what remote scripts you load and execute.

This is where the Content-Security-Policy tag comes in. It basically whitelists what is allowed to load and all the JQuery-stuff wasn't allowed so that's why it only worked when you removed the tag.

Upvotes: 3

Related Questions