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.
Related
grails 3 comes with bootstrap 3. I want to create my own main.gsp layout based on grails 4, i.e. replace the default main.gsp with something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
<title><g:layoutTitle default="DAM"/></title>
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
At the bottom of the default main.gsp is this:
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
<asset:javascript src="application.js"/>
The question is, should I include these? In all my years using grails, I have never seen a spinner appear in the UI, so am not sure if this actually works?
I am guessing I don't want application.js?
Also not sure what this is for, as it has no content:
<div class="footer" role="contentinfo"></div>
The question is, should I include these?
Only if you ever want to display the spinner. The default main.css defines a style for the spinner:
.spinner {
background: url(../images/spinner.gif) 50% 50% no-repeat transparent;
height: 16px;
width: 16px;
padding: 0.5em;
position: absolute;
right: 0;
top: 0;
text-indent: -9999px;
}
Adjust that however you find appropriate.
The default sitemesh layout contains a div with that style and has the display set to none so it won't be displayed.
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
A typical use of this is if you have some Javascript which does an action such that you want to display the spinner while that action is happening, that Javascript can set that display attribute and that will cause the spinner to be displayed until something sets that attribute back to none.
In all my years using grails, I have never seen a spinner appear in
the UI, so am not sure if this actually works?
It does unless you have made some changes that might interfere with that.
I am guessing I don't want application.js?
It is hard to say if you want that or not. It really depends on what your app is doing. The default application.js for a 3.3.9 app pulls in several other .js files...
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//
//= require jquery-3.3.1.min
//= require bootstrap
//= require popper.min
//= require_self
If you don't want those pulled in then you may not want application.js. Of course you can edit application.js to include whatever it is that you do want to pull in.
Also not sure what this is for, as it has no content:
<div class="footer" role="contentinfo"></div>
That element is there as a placeholder for you to render common footer elements.
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
I am trying angular.dart and saw that its slow. When am html page is loaded containing angular, angular directive is seen first, which are then converted appropriately. Shouldn't it be converted instantaneously and the user should not see whether we are using angular ?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
</head>
<body>
<h3>Hello {{name}}!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Surround {{name}} with a tag having class="ng-cloak". I used span tag. Keep it hidden by specifying css rule .ng-cloak{ display:none; }.
When angular is loaded, it will remove class="ng-cloak" from the span tag and everything will work as expected.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello, World!</title>
<style>
.ng-cloak{ display:none;}
</style>
</head>
<body>
<h3>Hello <span class="ng-cloak">{{name}}</span>!</h3>
name: <input type="text" ng-model="name">
<script type="application/dart" src="main.dart"></script>
</body>
</html>
An alternative way is to use ng-bind as demonstrated in this youtube video: AngularJS MTV Meetup: Best Practices (2012/12/11) (after about 12 minutes)
Quoted from the API doc of NgBindDirective class
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
It is preferrable to use ngBind instead of {{ expression }} when a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.
This way you can display default content that get's replaced when Angular is ready
instead of showing a blank page or a progress icon.
i want to try processing.js on an iOS application,
i have checked the projects on
http://procoding.audiocommander.de/ and
http://luckybite.com/iprocessing/
but none of them have an actual working example, so i went to create one...
SO... I have created a project and uploaded in
https://github.com/mako34/processing_iOS
my understanding is that all I need is just a wrapper for html5 canvas and js, for the
processing-1.4.1.js
to work??
my index.html works fine in a browser, not on the device!
my canvas works fine drawing a line on this test template
my js works fine on this test template
but doesnt work on the iphone actual web view,
So what is missing to make the sketch work?
thanks a lot!
here my index.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="jquery-1.6.2.min.js"></script>
<script defer src="script.js"></script>
<script src="processing-1.4.1.js"></script>
</head>
<body id="body">
<div id="container">
<div id="main" role="main">
jQuery Alert<br />
Objective-C Alert<br />
Take a picture<br />
</div><!-- #main -->
<canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>
<img id="testImage" src="iphonebattery.jpeg" />
<canvas id="myCanvas" width="320" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</div><!-- #container -->
</body>
</html>
First off-- you don't want to have two canvas tags. I recommend checking out the actual ProcessingJS website for better implementation: http://processingjs.org/
I have some tutorials on setting up Processing to compile to iOS and preparing your iDevice:
http://ericmedine.com/processing-for-ios/
Hope this helps!
i was trying to make my code in html and for some reasong when i try to run my code inside the html document, this is not working, but i was trying same code on http://jsfiddle.net
and my code it is working http://jsfiddle.net/gPfBC/
by any chance can somebody try this code and give it to me the complete html code?
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var p=0;
$("#myProgressBar").progressbar({value:0});
var timer = setInterval(function(){
//This animates the bar
$("#myProgressBar .ui-progressbar-value").animate({width: p+"%"}, 500);
//This does static sets of the value
//$("#myProgressBar").progressbar("option","value",p);
p = p +3;
if(p>33.33){
$("#myProgressBar .ui-progressbar-value").animate({width: "33.33%"}, 500);
//$("#myProgressBar").progressbar("option","value",100);
clearInterval(timer);
}
},500);
});
</script>
<style type="text/css">
</style>
</head>
<body style=" background:url(ebay-bar/images/1.jpg) top left no-repeat; width:1099px; height:1050px;">
<div style="width:954px; position:absolute; top:606px; left: 67px; height: 45px;">
<div id="myProgressBar" style="height:43px;"></div>
</div>
</body>
</html>
You're running the script on jsFiddle with jQuery 1.3.2 and jQuery UI 1.7.2, but your html page has included jQuery 1.5.
Replace
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Your script is probably using functions that are deprecated in jQuery 1.5 or there is some problem between jQuery 1.5 and jQuery UI 1.8. Try using the latest versions of both jQuery and jQuery UI.