I just started using The Dojo charting feature in Xpages. After following this tutorial by Andrew Champion. I Found that the simple csjs script to create a pie chart does not work. It breaks on the creation of the Pie Chart in CSJS. Using most basic code for better readability.
makeCharts = function()
{
alert("test");
var pieChart = new dojox.charting.Chart2D("#{id:panel1}");
};
The alert in the code above does not run when I call the function in my Xpage. I Followed the tutorial exactly but had no results. Any help would be appreciated.
Xpage source code below:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
dojoTheme="true">
<xp:this.resources>
<xp:dojoModule name="dojox.charting.Chart2D"></xp:dojoModule>
<xp:script src="/scriptsChartDojo.jss" clientSide="false"></xp:script>
<xp:script src="/scriptsChartDojoCSJS.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1"
value="XSP.addOnLoad(makeCharts);">
</xp:scriptBlock>
<xp:panel style="height:450px;width:450px" id="panel1">
</xp:panel>
</xp:view>
I don't think you can include server generated code in js files. If you open the scriptsChartDojoCSJS.js file in your browser, you will see that #{id:panel1} has not been altered.
Instead you can add the makeCharts function to your xp:scriptBlock.
Related
I'm trying to dynamically create an image which I will then append to the DOM.
import org.w3c.dom.HTMLImageElement
fun main(args: Array<String>) {
// load footer banner image
val img: HTMLImageElement = HTMLImageElement()
with (img){
src = "img/footer.png"
classList.add("img-responsive")
}
}
However, it doesn't like my constructor HTMLImageElement() since HTMLImageElement is an interface.
Removing the constructor and Kotlin complains that img must be initialised.
What is the correct way to make use of the HTMLImageElement in a type-safe way ?
Update: I'm now using maven which generates everything as it should.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.blah</groupId>
<artifactId>blah</artifactId>
<packaging>jar</packaging>
<version>1.0.0</version>
<name>Blah</name>
<properties>
<kotlin.version>1.0.2</kotlin.version>
<kotlin.html.version>0.5.8</kotlin.html.version>
</properties>
<repositories>
<repository>
<id>bintray-kotlinx</id>
<name>bintray</name>
<url>http://dl.bintray.com/kotlinx/kotlinx</url>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>org.jetbrains.kotlinx</groupId>
<artifactId>kotlinx.html.js</artifactId>
<version>${kotlin.html.version}</version>
</dependency>
</dependencies>
</project>
which compiles a blah.js, blah.js.map, blah.js.meta, kotlin.js, kotlinx.html.js, kotlinx.html.meta.js, kotlinx.html.shared.js, kotlinx.html.shared.meta.js and stdlib.meta.js.
In my html file (which is sitting in my root directory) I'm including the following:
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="target/classes/kotlin.js"></script>
<script type="text/javascript" src="target/classes/kotlinx.html.shared.js"></script>
<script type="text/javascript" src="target/classes/blah.js"></script>
I've got a println("hello world") in my Main.kt which executes fine in the browser printing "hello world" in the browswer console.
Now I still want to append that image dynamically using Kotlin ...
The docs say I should be doing document.create.div("panel") to create a div, but document.create... autocompletes to createAttribute, createComment etc, no create() method in sight anywhere. (document is from package 'kotlin.browser').
I'm not exactly sure how to use kotlinx.html since what I'm seeing in IntelliJ doesn't match the docs.
How do I append a dynamically created image to an existing div using KotlinJS ?
I just write sample project with kotlin2js and kotlinx.html IRus/kotlin-kotlinx.html. Looks like current version of kotlinx.html (0.5.8) not compatible with Kotlin 1.0.2, but works well with kotlin 1.0.1-2.
I'm trying to prettyprint some code generated by a custom installation of blockly. The code generated will be xml, but the problem is that once I try to highlight the code using google prettify (and not the only one, same problem with higlight.js) the code is not highlighted, I tried to google but all solution doesn't appear to apply to my problem.
This is how I imported the prettify library:
This is the code:
<script language="javascript">
function showCode() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
var element = document.getElementById("codeview");
var pre_element = document.createElement("pre");
pre_element.setAttribute("class", "prettyprint");
pre_element.setAttribute("id", "code_container");
pre_element.textContent = Blockly.JavaScript.workspaceToCode(workspace);
//pre_element.appendChild(code_element);
element.appendChild(pre_element);
//alert(code);
}
</script>
one of the example of generated code is:
<property name='default' />
<property name='default' />
<property name='default' />
Now I don't know if the problem is that I need to specify the doctype in the piece of code I'm prettifying, or it's just something else, maybe for example I need to escape it? Both?
The application is hosted on a Spring Boot App. Blockly works fine, but the problem appear to be only with the syntax highlighter.
I suppose you don't call prettyprint() function in your HTML's <body>.
Call prettyprint() after you append pre_element
I have started a new project - javascript - windows universal app and without changing anything or adding any code I try to build it and run it but it wont with the following error:
Error : DEP0700 : Registration of the app failed. error 0x80080204: App manifest validation error: The document root element m:Package must be defined in the http://schemas.microsoft.com/appx/2010/manifest namespace. (0x80080204) App7
A similar issue was reported here and I tried renewing the license with project -> store -> aquire developer license to no avail. It seems to be that the actual problem has to be the document root element part which I'm not really familiar with as I haven't worked with Visual Studio before I tried to add xmlns:m="http://schemas.microsoft.com/appx/2010/manifest" to my package appxmanifest but that doesn't seem to have helped.
Heres the whole manifest:
<?xml version="1.0" encoding="utf-8"?>
<Package
xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"
xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
xmlns:m="http://schemas.microsoft.com/appx/2010/manifest"
IgnorableNamespaces="uap mp m">
<Identity
Name="155dc546-80c7-4275-b2a6-a2aa8ddec5f7"
Version="1.0.0.0"
Publisher="CN=FroboZ" />
<mp:PhoneIdentity PhoneProductId="155dc546-80c7-4275-b2a6-a2aa8ddec5f7" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
<Properties>
<DisplayName>App7</DisplayName>
<PublisherDisplayName>FroboZ</PublisherDisplayName>
<Logo>images\storelogo.png</Logo>
</Properties>
<Dependencies>
<TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.10069.0" MaxVersionTested="10.0.10069.0" />
</Dependencies>
<Resources>
<Resource Language="x-generate" />
</Resources>
<Applications>
<Application
Id="App"
StartPage="default.html">
<uap:VisualElements
DisplayName="App7"
Description="App7"
BackgroundColor="#464646"
Square150x150Logo="images\Logo.png"
Square44x44Logo="images\SmallLogo.png">
<uap:SplashScreen Image="images\splashscreen.png" />
</uap:VisualElements>
</Application>
</Applications>
<Capabilities>
<Capability Name="internetClient" />
</Capabilities>
</Package>
Thank you for taking your time to read my question and even more so if you can help me with this problem!
Developer mode wasn't turned on in windows 10. I'm not sure what difference this makes but after turning this on I was able to build the project.
I am using PWI (Picasa Webalbum Integrator) which is Jquery plugin to fetching photos. It is working partly. I can get my photos to my xhtml-page inside the panel, but when I click it, it opens pictures behind the center layout, so I can't see them except couple of millimeters between the layout parts :)
Picture:
http://aijaa.com/0054410193073
Picasa webalbum Integrator
<script type="text/javascript">
$(document).ready(function () {
var settings = {
username: 'TedTester'
};
$("#container").pwi(settings);
});
</script>
<p:panel>
<div id="container"> </div>
</p:panel>
</ui:define>
</ui:composition>
I have no idea how to start to fix that and I am very thankful if somebody has time time for that kind of silly thing. I am using Primefaces 3.2 and the latest version 2.0 of PWI.
Sami
My mistake!
Two things what you have to remember when using jquery plugins with JSF.
<h:outputStylesheet library="css" name="pwi.css" />
<h:outputScript library="js" name="jquery.pwi.js" />
You have to use those tags. I used only h:outputScript for both of them and it seems to be ok, but of course not, generated html wasn't ok.
Other thing was that:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
I am using jquery with is in Primefaces, without it there is a conflict between jquery versions or pwi doesn't find jquery at all. At least I think so :) No everything is working fine, so I am happy!
Sami
I have a script that I add to my xul file, like:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Bindings -->
<?xml-stylesheet href="chrome://test/content/bindings.css" type="text/css"?>
<mywindow id="myWindowID" width="800" height="600"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://greenfox/content/jquery-1.4.4.min.js" />
</mywindow>
and on mywindow constructor (at the binding) I use a function of my scrip, called 'print'.
The problem is that sometimes, my script doesn't load really fast before it's used, and I get the message
We are unable to Print or Print
Preview this page.
..which is related to the Printer usage.
Please note that I'm not trying to use the Printer, I'm trying to use my own print method (in the script that doesn't loaded in time) to simply write on the screen.
So, any idea how can I make the xul file wait till my script is completely loaded?
Solved it with a variable "window.scriptsLoaded" and a loop on my class constructor that wait..
-update
also, it didn't work with while(!window.scriptsLoaded), I needed to use:
function loadScripts() {
if (!window.scriptsLoaded)
setTimeout(loadScripts, 1)
else
loaded();
}
so the window.scriptsLoaded could be updated each time I check it. I don't really understand why.
-update
Actually, use "onload" showed itself a the better solution..