I have a legacy cn1 app (using the old GUI builder) with a web browser component in the center of the Form (centered in a BorderLayout Container which is the main Form component). In the simulator as well as on an Android device the WebBrowser renders fine. In the iOS simulator the entire component shows up as a black rectangle, and on an iPhone (5s running iOS 9.1), the content of the WebBrowser is visible but doesn't scroll.
Is there some particular setting that needs to be changed for it be scrollable?
This is my code:
WebBrowser web = new WebBrowser() {
#Override
public void onLoad(String url) {
System.out.println("Article body webview loaded");
Component c = getInternal();
if (c instanceof BrowserComponent) {
BrowserComponent b = (BrowserComponent) c;
String text = ((String) m.currentArticleInfo.get("id"));
b.execute("loadArticle('" + text + "')");
}
}
};
((BrowserComponent) web.getInternal()).setNativeScrollingEnabled(true);
((BrowserComponent) web.getInternal()).setScrollVisible(false);
web.setScrollVisible(false);
web.setURL("jar:///article_body.html");
web.setScrollable(true);
web.getAllStyles().setPaddingTop(10);
form.addComponent(BorderLayout.CENTER, web);
I don't see any errors in the console. The web page code looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://www.example.com/styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body::-webkit-scrollbar{
width: 0 !important;
}
#left_side_article #right #the_article #details_info{
font-size: 3.5mm !important;
}
div#the_article{
border: none !important;
}
div#the_article_header{
padding: 0 !important;
}
</style>
</head>
<body style="min-height: 100px">
<div id="left_side_article">
<div id="right">
<div id="the_article">
<div id="details_info" >
</div>
</div>
</div>
</div>
<script>
function loadArticle(content) {
console.log('in load article function, article id: ' + content);
var url = "https://www.example.com/api/article_body_ajax.php";
$.post(url,{"app_code": "myappcode", "id" : content},function(data,status,jqxhr){
$("#details_info").html(data);
$("#details_info img").each(function(){
$(this).attr("src", "https://www.example.com/" + $(this).attr("src"));
$(this).css("height", "auto");
});
});
};
</script>
</body>
</html>
Update
I tried debugging the WebView by downloading the app sources and using Safari to inspect the page. Safari recognized that there was a web page open in the app, and I was able to choose it from the Develop menu in Safari, but the inspect window was completely empty - no elements whatsoever.
I just committed a fix for the scrolling issue in iOS here. There was a bug that caused scrolling to be disabled if you call setNativeScrollingEnabled(true). This fix will be available in the next library update (next Friday). In the mean time, you can work around this by just not calling setNativeScrollingEnabled(true) - as the default is true anyways.
That might be related to changes we made to getComponentAt see if this is still happening after the update this weekend. We discussed some of the regressions related to this here: https://www.codenameone.com/blog/dont-touch-that-code.html
Related
I am using electron version 5.5.1 on Windows10.
I opened the web page in webview and added the ‘contextmenu event' to the web element. And then I added the contextmenu event to the webview.
It works in the webview, but when I right-click to open the context menu, the webview event is also triggered. How can I avoid that the webview event is also triggered?
this is web Example
<html>
<head>
</head>
<body>
<div oncontextmenu="jjc()" style="width:100px;height:100px;border: 1px solid red;"></div>
</body>
<script>
function jjc(){
event.preventDefault();
alert("1");
}
</script>
</html>
this is webview style
<webview ref="webview" style="height:93%; width:100%" v-on:contextmenu ="handlex.onContextMenu($event,selectPage,index,false)" plugins />
edit: This questions is solved
Stupidly enough, the url /img/images.json is treated differently by the simpleHttpServer used to test the application than by the iOS simulator.
It was a long search why it would show the list in the browser when testing but not in the simulator. Apparently the simpleHttpServer that comes with python will treat a url starting with the / as it's root, for example the www folder. The simulator does not and would appreciate a relative location, starting with no /
The problem seems mostly caused by the rustiness of my web-dev skills ^.^
====================
I am trying to make a simple ionic app, and for some input I am using the Angular Tutorial.
I have a very simple page that should load the contents of a json-file with image data. And all it needs to do for now is showing the image names. At the end it should dump the complete data from the json-file.
This is all based of the blank project created with ionic.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="phocalsApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="imageListCtl">
<ul class="imagelist">
<li ng-repeat="image in imagelist" >
{{image.imgName}}
</li>
</ul>
{{imagelist | json}}
</ion-content>
</ion-pane>
</body>
</html>
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('phocalsApp', ['ionic', 'phocalsControllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controller.js
'use strict';
var phocalsControllers = angular.module('phocalsControllers', []);
phocalsControllers.controller('imageListCtl', ['$scope', '$http',
function($scope, $http) {
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
});
$scope.orderProp = 'imgDate';
}]);
images.json:
[
{
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
},
{
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
},
{
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
}
]
Seeing as I pretty much use the same code as the angular example, I would expect this to work, unfortunately all the output I am getting when running in the ios Simulator is an empty page with the header-bar. No errors or nothing. Can anyone tell me what I am doing wrong here?
You are missing some console.log(data) in your controller to check whether the controller is initialized, wether $http actually succeeds etc.
Even after using angular for months, i have to log every step cause there are too many things to go wrong :)
Also you should add an error function to
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
}).error(function(data) ....;
I have a jQuery Mobile page with a dynamically generated collapsible. It works great, except if I leave the page then return to it. When that happens, the collapsible appears twice. A refresh fixes the issue but that's obviously not a good solution. Others on here have described similar symptoms, but their solutions didn't work for me. I'm hoping someone can help me out. I think I may be misusing pageinit...
I'm using jQuery 1.9.1 with jQuery Mobile 1.3.1. I'm using Codiqa to generate my pages, hence why I'm on jQuery 1.3.1. I generated the code such that every page is a separate html file.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Characters | PCT</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/codiqa.ext.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<script src="js/pct.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Characters" id="characters"
class="character_page">
<script>
$(document).on("pageinit", "#characters", function() {
var charQuery = new Parse.Query("Character");
charQuery.equalTo("user", Parse.User.current());
charQuery.find({
success: function(results) {
for (var j = 0; j < results.length; j++) {
var object = results[j];
var charName = object.get('charName');
var charNumActions = object.get('charNumActions');
var charSpd = object.get('charSpd');
$("#char_list").append("<div data-role='collapsible'><h4> " +
charName + "</h4><p><strong>Number of Actions:</strong> " +
charNumActions + "</p><p><strong>Spd:</strong> " + charSpd + "</p>
<a data-role='button' class='edit_button'
href='edit_character.html?charname=" + charName + "' data-icon='edit'
data-iconpos='left'>Edit</a><a data-role='button'
id='delete_char_button' class='delete_button' data-inline='true'
data-icon='delete' data-iconpos='left'>Delete</a></div>");
$("#char_list").collapsibleset("refresh");
$(".edit_button").buttonMarkup();
$(".delete_button").buttonMarkup();
}
}
});
});
</script>
<div data-theme="a" data-role="header">
Thank you in advance for taking the time to look at this.
Update:
Based on your edited OP and comment below, when using single page model, functions/JS code that is related to a specific page should be placed inside that page's div.
jQuery Mobile uses Ajax to load pages, it loads all libraries and code of first loaded page's head tag, and neglects the rest as it loads only data-role="page" div.
<div data-role="page" id="characters">
<script>
<!-- place code here -->
</script>
</div>
Because you bind to pageinit without specifying a page. The code will be executed whenever a page is initiated.
You should bind it to page id to fire once only.
$(document).on("pageinit", "#page_id", function () {
// code
});
Currently I am using the JavaFx Webview to load a HTML page. But there is a problem when it loads the HTML page. It doesn't read the letter-spacing or -webkit-letter-spacing attribute in CSS. It's fine with the Chrome browser. How can I make it work in JavaFx?
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
.text {
letter-spacing: 20px;
}
</style>
</head>
<body>
<div class="text">
abcdefg
</div>
</body>
</html>
Looks like this property is not supported in JavaFX/JDK 7, but works for me in JavaFX/JDK 8. As far as I know, some of the WebViews rendering bugs fixed in JDK 8 won't be backported to JDK 7 and this one seems like being one of such bugs.
When I load my page, I see the original page (only for a short time) before Dart starts modifying the content. How do I avoid this?
Example:
File index.html
<html>
<head>
<script type="application/dart" src="app.dart"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
</body>
</html>
File app.dart
main(){
var d = new DivElement();
d.text = "This is a test";
query('body').append(d);
}
In this example I would first see a blank page, and then, shortly after, the text "This is a test". I would like only to see the text.
The page will display before the text, because your Dart code will run after the initial render (at least usually). You could apply some white layer on top of the document and remove it when your Dart code is done:
<body>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000000;"></div>
</body>
Then when your Dart code is ready to show the app:
query('#overlay').remove();
Now you will see a blank page until the Dart code is ready to show something.
If you load your JS scripts in the very start of the body, it will be executed before the page loads. So, you would do this:
<html>
<head>...</head>
<body>
<script src="packages/browser/dart.js"></script>
<script type="application/dart" src="app.dart"></script>
</body>
</html>
That should work. If it doesn't there is probably something going on internally in Dart, which causes this.