I don't understand how to use XUI tween. On the xui website, they give the following example code:
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
What is that supposed to do? I created a <div id="box"></div>, ran the line of js code above, but nothing happened. Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="xui.min.js"></script>
<script type="text/javascript">
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Nothing happens...
So, XUI's tween seems to be a work in process. In fact, in the master branch code on GitHub you find:
// queued animations
/* wtf is this?
if (props instanceof Array) {
// animate each passing the next to the last callback to enqueue
props.forEach(function(a){
});
}
*/
So, in short, the array-based tween properties appear busted at the moment. In addition, XUI's tween seems to be a little flakey when dealing with properties that are not currently set on the DOM element. (For example, setting the background-color on a transparent element turns it black...rather than the intended color.)
That said, the single tween and callback work well on previously set properties. So take a look at the following (and excuse the inline css):
<html>
<head>
<script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<script type="text/javascript">
x$.ready(function(){
setTimeout(function(){
x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){
x$('#box').tween({'left':'500px', duration:2000});
});
}, 500);
});
</script>
</head>
<body style="position:relative;">
<div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div>
</body>
</html>
Because #box now has a css background-property and left position explicitly set, it is relatively easy to produce an effect similar to the one desired.
One-half second after the page loads, #box should spend 2 seconds moving from left:500px to left:100px while turning the background color from white to green. Then, using the callback, #box moves back to its original position at left:500px--taking another 2 seconds to get back.
Obviously, this does not answer your exact question but for those (like me) who stumble upon this, it provides a workaround for the time being.
Related
i am following SAP UI5 course from OpenSAP, and in week 1 unit 2, when I do, what is given in exercise my code doesn't work.
Any help please?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{"opensap.MyApp": "./"}'
>
</script>
<script src="https://sap.github.io/openSAP-ui5-course/Validator.js">
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({viewName: "opensap.MyApp.view.App"}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
And this is my view which is present in view folder
<mvc:View
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc">
xmlns="sap.m"
<Carousel>
<pages>
<Image src="https://upload.wikimedia.org/wikipedia/commons/9/9f/GEO_Globe.jpg"/>
<Image src="https://upload.wikimedia.org/wikipedia/commons/9/9f/GEO_Globe.jpg"/>
</pages>
</Carousel>
</mvc:View>
Just for the record why "../" worked out: It depends on how your project folder structure looks like. With '{ "opensap.myapp": "../" }', you're registering a module path to your app by saying "Whenever I'm using "opensap.myapp." as a prefix, start to search for the resource from the path ../ relative to where my current document is located (in our case, index.html)." thus resourceRoot.
Best practice of how to structure your project folder can be found here: https://openui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html
Here is another answer which explains the issue further: https://stackoverflow.com/a/35722435/5846045
PS: You might encounter some cosmetic bugs if you keep using the theme sap_bluecrystal due to its deprecation (since version 1.38). Better use sap_belize or sap_belize_plus, if your app is running on a newer version.
To anybody who is suffering similar to me.
Instead of using
data-sap-ui-resourceroots='{
"opensap.myapp": "./"
}'>
Use data-sap-ui-resourceroots='{
"opensap.myapp": "../"
}'>
After struggling a whole hour, I tried this and it worked. Whatever syntax given in docx file in the exercise is wrong. Or either that some feature is updated.
I am trying to use the sap.m.ActionSelect within my application (as I like the combination of selection and action buttons). However, even within this simple test, I cannot get the drop list to show anything other than the first item. I am sure I am doing something completely dumb, but this one has me beaten. If anyone can spot the deliberate mistake I would be grateful!
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ActionSelect</title>
<script id="sap-ui-bootstrap" src="../openui5/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons"
data-sap-ui-libs="sap.ui.unified" data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{
"sparqlish":"../",
"sparqlish":"../sparqlish",
"Components":"../",
"Components":"../Components"
}'
data-sap-ui-xx-bindingSyntax="complex" type="text/javascript"></script>
<script type="text/javascript">
jQuery.sap.require("sap.m.ActionSelect");
jQuery.sap.require("sap.m.Button");
this.oServiceSelect = new sap.m.ActionSelect();
var oItem = new sap.ui.core.ListItem("Country1");
oItem.setText("Canada");
this.oServiceSelect.addItem(oItem);
oItem = new sap.ui.core.ListItem("Country2");
oItem.setText("Deutschland");
this.oServiceSelect.addItem(oItem);
oItem = new sap.ui.core.ListItem("Country3");
oItem.setText("England");
this.oServiceSelect.addItem(oItem);
oItem = new sap.ui.core.ListItem("Country4");
oItem.setText("Россия");
this.oServiceSelect.addItem(oItem);
this.oServiceSelect.setEnabled(true);
this.oServiceSelect.placeAt("serviceMenu");
this.oServiceSelect.addButton(new sap.m.Button({
text : "Action 1",
press : function(){alert("Action 1")}
}));
this.oServiceSelect.addButton(new sap.m.Button({
text : "Action 2",
press : function(){alert("Action 2")}
}));
</script>
</head>
<body>
<div id="serviceMenu"></div>
</body>
</html>
You have several issues in the code. First, you are loading the libs at bootstrap with three different attributes. This is wrong! Instead simply use one attribute and list the libs you want separated by comma.
Another issue in the code is that you are loading both sap.ui.commons and sap.m. As a rule of thumb you should never ever mix sap.ui.commons and sap.m!!! That's very important.
In your case you could and definitely should even completely remove sap.ui.commons because as far as I can see it from your code you are not using it anyway.
It appears that the order in which one declares the data-sap-ui-libs is important. The original order in the example above was:
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-libs="sap.ui.unified"
data-sap-ui-libs="sap.m"
However if I reorder these to the following, with data-sap-ui-libs="sap.m" everything works well
data-sap-ui-libs="sap.m"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-libs="sap.ui.unified"
I usually have \let\phi\varphi in preambles of my LaTeX files, for aesthetics reasons. Is it possible to do something similar in MathJax? I tried defining macros
MathJax.Hub.Config({TeX:{Macros:{phi:"\\varphi"}}})
but it seems to have confused MathJax (no math was rendered on the page at all). What is the proper way to do this?
What you have done should work, so I suspect something is typed wrong or in the wrong place in your file. Here is a complete working example file:
<!DOCTYPE html>
<html>
<head>
<title>MathJax Macros Configuration</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({TeX: {Macros: {phi:"\\varphi"}}});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
phi \(\phi\) and varphi \(\varphi\) should both be the same.
</body>
</html>
I'm following a beginner's tutorial at http://www.tutorialspoint.com/gwt/gwt_style_with_css.htm.
The code for the HelloWorld.html file is:
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id="mytext"><h1>Hello, World!</h1></div>
<div id="gwtGreenButton"></div>
<div id="gwtRedButton"></div>
</body>
</html>
In the HelloWorld.java (extending EntryPoint), I have:
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
The 2 lines: RootPanel.get() always result in null. I don't know what happen, what to check? (too bad the site doesn't have a comment/discussion section)
Thanks.
Docs says
RootPanel.get(java.lang.String id)
Gets the root panel associated with a given browser element.
DOM.getElementById(java.lang.String)
Gets the element associated with the given unique id within the entire document.
Try with
com.google.gwt.user.client.DOM.getElementById("gwtGreenButton");
com.google.gwt.user.client.DOM.getElementById("gwtRedButton");
Does anybody know what's wrong with this code? It shows nothing in the browser.
My intention is to draw two eyes based on the mouse location. So I define an Eye class and then call its draw method with variable mouseX and mouseY.
However, it shows nothing on the browser.
Also, I wonder how to detect the size of the browser because screen.width and screen.height don't seem to work within a browser.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">
void setup(){
size(400,400);
smooth();
background(225);
}
if (mousePressed){
Face.draw(mouseX,mouseY);}
class Face{
float x,y,a;
Face(float ax,float ay){
x=ax;
y=ay;
a=random(1,5);}
void draw{
noFill();
stroke(0);
//eye1
ellipse(x+2.2*a,y-a,a/2,a/2);
//eyelashes1
arc(x+2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
//eyebrows1
arc(x+3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);
//eye2
ellipse(x-2.2*a,y-a,a/2,a/2);
//eyelashes2
arc(x-2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
//eyebrows2
arc(x-3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);
}
}
</script>
</head>
<body></body>
<canvas id="mycanvas"></canvas>
</html>
I'm a beginner, so I don't know if my problem is stupid or not.
But any hint is welcomed:)
Btw how to add color to the code on stackoverflow?
There are a some problems with your script.
Related with the html page:
You have to declare the encoding of the document in the header section: <meta charset="utf-8">
The canvas element should be included inside the html body.
Related with the processing code:
The processing script needs at least one setup() function and one draw() function. You defined a draw() method in your Face class, but not the main draw() function (by the way, you missed the brackets in your draw() method).
The mousePressed functionality should be included inside the main draw() method.
You need at least to declare one instance of your Face class (inside the setup() function). For example: Face myFace = new Face(10, 10);.
And probably more syntax errors inside your draw() method...
My recommendations:
Start with something simpler: The more lines you write from scratch, the harder to debug. Try to draw first just an ellipse and incrementally add more things to your code.
Keep your processing script in a separate file. It's cleaner and you can debug it using the processing editor or the processing online sketch:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing testing</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<canvas id="my-sketch" data-processing-sources="my-sketch.pde"></canvas>
</body>
</html>
Check this tutorial to get some ideas about objects and classes in processing.
The syntax in processing is very similar to java, and there're a lot more resources for understanding the basics of OOP for that language. Just google for it.
For syntax highlightning, look here.