I am trying to incorporate a WYSIWYG into my elm app. I have added the polymer-quill web component into my app.
index.html
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script>
window.Polymer = {
dom: 'shady',
lazyRegister: true
};
</script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/polymer-quill/polymer-quill.html">
src/Templates.elm
div [ ] [
[ node "polymer-quill" [] []
]
Yay, I see the WYSIWYG in my app. It works and acts like a WYSIWYG.
Now I want it to talk to Elm. If this were a text input, I would do something like this:
myInput =
input
[ class "form-control"
, Html.Attributes.type_ "text"
, placeholder "My Input"
, value model.myInputValue
, onInput SetMyInputValue
]
[]
This is a two-way binding with model.myInputValue. However, node "polymer-quill" [value model.myInputValue] [] doesn't seem to get me anywhere.
node "polymer-quill" [ content "This is some content" ] [] does not work either.
How the devil does one do this?
Use the on event to send data back into Elm
recordTextContentOnTextChanged =
on "change" <|
Json.Decode.map QuillSetProblemContent
textChangeDecoder
I'm having the same problem. For the first half of the binding (putting text from Elm into the editor), it seems like the problem was that the content field was expecting a Json object, even though in their documentation they say it can be just a string.
I found that if I set store-as="html", it will expect the content to be html instead and will work fine.
Html.node "polymer-quill"
[ Html.Attributes.attribute "store-as" "html"
, Html.Attributes.attribute "content" "Hello world"
]
[]
I still haven't figured out listening for change events, but if #Jonathan's answer works I'll edit this
Also, the only line I added to my html was
<link rel="import" href="/bower_components/polymer-quill/polymer-quill.html">
I'm not sure if your other imports are doing something or if the are necessary
Related
I try to test custom widget from js reference and I get error in debugger:
Error: QWeb2: Template 'some.template' not found
qweb.xml was properly set in manifest, because when I extend ListController and use another template, it works correctly.
Here is template definition, which I use in qweb.xml:
<?xml version="1.0" encoding="UTF-8"?>
<template>
<div t-name="some.template">
<span class="val"><t t-esc="widget.count"/></span>
<button>Increment</button>
</div>
</template>
I tried to change <template> -> <templates>, totally removed tag "template" but still get the same error message.
JS:
odoo.define('working.test', function (require) {
var Widget = require('web.Widget');
var Counter = Widget.extend({
template: 'some.template',
events: {
'click button': '_onClick',
},
init: function (parent, value) {
this._super(parent);
this.count = value;
},
_onClick: function () {
this.count++;
this.$('.val').text(this.count);
},
});
// Create the instance
var counter = new Counter(this, 4);
// Render and insert into DOM
counter.appendTo(".o_nocontent_help");
})
Manifest:
# -*- coding: utf-8 -*-
{
'name': "testwidget",
'summary': """
Short (1 phrase/line) summary of the module's purpose, used as
subtitle on modules listing or apps.openerp.com""",
'description': """
Long description of module's purpose
""",
'author': "My Company",
'website': "http://www.yourcompany.com",
# Categories can be used to filter modules in modules listing
# Check https://github.com/odoo/odoo/blob/12.0/odoo/addons/base/data/ir_module_category_data.xml
# for the full list
'category': 'Uncategorized',
'version': '0.1',
# any module necessary for this one to work correctly
'depends': ['base'],
'qweb': ['static/qweb.xml'],
# always loaded
'data': [
# 'security/ir.model.access.csv',
'views/views.xml',
'views/web_asset.xml',
],
# only loaded in demonstration mode
'demo': [
'demo/demo.xml',
],
}
Any idea how I need to modify this template to make the widget working correctly and in which table in db odoo stores these templates?
I was running into this same issue and needed to put my QWeb code into static/src/xml/base.xml in order for Odoo to recognize it.
You can check to see if Odoo is loading the QWeb by going to this URL on your Odoo instance:
<odoo_instance>/web/webclient/qweb?mods=<my_module_name>
Such as:
localhost:8069/web/webclient/qweb?mods=test
For comparison, you can see a successful output by using mods=web to load the QWeb assets for the web module.
You can try changing
'qweb': ['static/qweb.xml'],
to
'qweb': ['static/*.xml'],
It happens with me sometimes, by specifying static xml file name, it does not render that template. But by just loading all .xml files by using *, templates are loaded.
To solve this issue I used as workaround Widget.xmlDependencies:
xmlDependencies: ['/test/static/qweb.xml']
but the main reason I think was cache in PyCharm which I didn't invalidate.
After having done some code reading, IMO, I realized the official documentation might not have pointed out clearly how to use templates in frontend.
To summarize my understanding:
The 'qweb' field in manifest is mainly designed for webclient (i.e. the backoffice), not the website. When entering webclient, a request to /web/webclient/qweb is made to retrieve all the templates of installed modules.
In order to use templates in website (i.e. frontend), synchronous and asynchronous ways both exist.
Synchronous way: Use qweb.add_template. When parameter is template content itself or a DOM node, template is loaded in a synchronous way. (While param is a URL, then it fires up an ajax request to server to fetch content.)
qweb.add_template is mentioned in https://www.odoo.com/documentation/13.0/reference/qweb.html
Asynchronous way:
Use ajax.loadXML which you can use anywhere you want to start loading template from a URL.
Use xmlDependencies which you specify in widget definition. And if you dig into the code in widget.js, you can see ajax.loadXML is being used in willStart.
There are discussions regarding qweb.add_template vs ajax.loadXML
See https://github.com/OCA/pylint-odoo/issues/186 and https://github.com/odoo/odoo/issues/20821
FYI.
I guess you may need to make sure that the js definition refers to the module name correctly
odoo.define('MODULE TECHNICAL NAME SHOULD BE HERE.test', function (require) {});
you should also register your js function with something like:
core.action_registry.add("module_name.name", Widget_Extend);
for more info https://www.odoo.com/documentation/11.0/reference/javascript_reference.html#registries
In Odoo 14 make sure
dashboard.js
odoo.define('library_managment.dashboard', function(require) {
"use strict";
// alert("hello odoo...............")
console.log("Hello My Module........!!")
var widgetRegistry = require('web.widget_registry');
var Widget = require('web.Widget');
var Counter = Widget.extend({
template: 'library_managment.template',
xmlDependencies: ['/library_managment/static/src/xml/template.xml'],
events: {
'click button': '_onClick',
},
init: function (parent, value) {
this._super(parent);
this.count = 4*9+5;
console.log("parent is", parent)
console.log("counter is..", this.count)
},
_onClick: function () {
this.count++;
this.$('.val').text(this.count);
},
});
widgetRegistry.add('library_counter', Counter);
return Counter;
});
template.xml
add this
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<div t-name="library_managment.template">
<span class="val">
<t t-esc="widget.count"/>
</span>
<button class="bg-danger">Increment</button>
</div>
</odoo>
then add js file in assets.xml inside youe views
<odoo>
<template id="assets_backend" name="Library assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/library_managment/static/src/js/dashboard.js"></script>
</xpath>
</template>
</odoo>
then add in manifest like this:
'js': ['/static/src/js/dashboard.js'],
'qweb': ['/static/src/xml/template.xml']
then inside form view add this line
<widget="library_counter"/>
I had the same problem but with "hr_org_chart" template idk why everything works fine in another computer but in mine it returned this problem, I solved it by installing this module hr-org-chart
I am trying to print a VueJS component with custom print style.
Three Vue plugins look interesting on this subject:
1.printd
2.vue-print-nb
3.html-to-paper
Out of the three only html-to-paper has a options object that can pass a custom css style in order to dynamically pass some print css.
My issue is that i can't seem to load the custom css, and also bootstrap classes are messed up on print action.
This is basically what i am doing.
import VueHtmlToPaper from 'vue-html-to-paper'
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=no'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'./myPrint.css'
]
}
Vue.use(VueHtmlToPaper, options)
Any suggestion is welcomed.
Thanks
I have tried all these three I think the best one is print.js which is not specifically for Vue.js but it is easily install-able and usable in the vue components.
For example
<script>
import print from "print-js";
export default {
methods: {
printing() {
const style =
"#page { margin-top: 400px } #media print { h1 { color: blue } }";
const headerStyle = "font-weight: 300;";
printJS({
printable: "rrr",
type: "html",
header: "Doctor Name",
headerStyle: headerStyle,
style: style,
scanStyles: false,
onPrintDialogClose: () => console.log("The print dialog was closed"),
onError: e => console.log(e)
});
},
printVisit(id) {
this.$htmlToPaper("rrr");
this.$htmlToPaper("rrr", () => {
console.log("Printing completed or was cancelled!");
});
}
}
};
</script>
VueHtmlToPaper opens a new window with its own style tag. So when you pass a CDN it works, if u pass a local file it does not because it tries to access the resource in your web server but in the wrong URL. Let's see how the page looks when we use a CDN and a local CSS file.
CDN
<html>
<head>
<link rel="style" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
</body>
</html>
Local CSS file
And let's say you are calling the print function from http://localhost:8080/somepage
<html>
<head>
<link rel="style" href="./myPrint.css">
</head>
<body>
</body>
</html>
This will try to open http://localhost:8080/somepage/myPrint.css. Obviously this will not be accessible to print dialogue.
Solution
Put your custom CSS file in the public or static folder (Where you usually keep favicon)
Modify script path in options, prepend server basepath with the CSS file
Sample Option
import VueHtmlToPaper from 'vue-html-to-paper'
/* This will change according to your server */
let basePath= 'http://localhost:8080';
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=no'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
`${basePath}/myPrint.css`
]
}
Vue.use(VueHtmlToPaper, options)
Also, the simplest way to access root-relative path is to use /. User /style.css instead of ./style.css
as i attempt to load modules with the creation of a gridx/grid, my script goes to that strange place where errors are handled by code that looks like gobbledy gook.
if i create the grid without the modules attribute the rows are displayed just fine. i am coding with worklight 6.1 in rational app developer 9.1, using dojo 1.9 that's (delivered with RAD).
my dojo includes are specified like this:
function dojoInit() {
require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
"dijit/registry", "dojox/mobile/ScrollableView",
"dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
"dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane",
"dojo/Deferred", "dojo/store/Memory",
"gridx/Grid", "gridx/core/model/cache/Sync", "dojox/mobile/Container",
"gridx/modules/SingleSort"],
function(ready) { ...
Here are my stylesheet links:
<link rel="stylesheet" href="css/dojo.css" />
<link rel="stylesheet" href="css/claro.css" />
<link rel="stylesheet" href="css/document.css" />
<link rel="stylesheet" href="css/Gridx.css" />
<link rel="stylesheet" href="css/Gridx_rtl.css" />
i moved the css files from gridx/resources/claro/Gridx.css and other locations within the dojo toolkit library to a known relative location, temporarily, in order to eliminate the possibility that the css files could not be resolved. and i am specifying just the 'claro' class in the div wherein this grid is placed. there is no difference in the behavior of the grid in either case.
My grid is created like this:
toStore=new dojo.store.Memory({ idProperty: 'PICYNO', data: resultSet });
toColumns=[
{ id: 'PICYNO', field: 'PICYNO', name: 'Cycle' , width: '80px' , editable: true },
{ id: 'PIDSC1', field: 'PIDSC1', name: 'Description' , width: '300px', editable: true },
{ id: 'PICYCS', field: 'PICYCS', name: 'Status' , width: '60px' , editable: true },
{ id: 'PPICSDJ',field: 'PPICSDJ', name: 'Date' , width: '80px' , editable: true },
{ id: 'PICYIT', field: 'PICYIT', name: 'Items' , width: '60px' , editable: true },
{ id: 'PICYLO', field: 'PICYLO', name: 'Locations' , width: '60px' , editable: true }
];
var cacheClass = "gridx/core/model/cache/Sync";
var tsGrid = new gridx.Grid({
id: 'idHeaderGrid',
cacheClass: cacheClass,
store: toStore,
// modules:[modules.SingleSort, modules.SelectRow],
// modules:[gridx.modules.SingleSort],
// modules:[gridx/modules/SingleSort],
// modules: [ SingleSort ],
// modules: [ Sort ],
structure: toColumns
});
tsGrid.placeAt('idGridContentPane');
tsGrid.startup();
if i comment all the lines that specifiy 'modules:' as you see, then the grid is displayed (but it's ugly, as if the stylesheets weren't applied at all.)
if i try any variation of specifying the standard sort module, this function will tank. i know it's probably because i'm not specifying my environment correctly, but i can't see how.
Any known problems with any of the versions that i'm using? any suggestion is appreciated.
--------- Updated ------------
I have progressed to the extent that i can display a grid, but the formatting is still off.
Based on the results of experimenting with a non-worklight project where i was able to materialize the grid with modules, and also realizing that with either type of project (web or worklight), i was able to resolve dojo and Gridx objects even though the javascript resources are configured differently, i decided to try a local require statement to specify the dojo modules in the immediate context and it worked. The original dojo configuration in worklight was ocnfigured in the main.js object that's automatically generated with a worklight application. it looked like this:
function wlCommonInit() {
require([ "layers/core-web-layer", "layers/mobile-ui-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
"dijit/registry", "dojox/mobile/ScrollableView",
"dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
"dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane",
"dojo/Deferred", "dojo/store/Memory", "dojox/mobile/Container",
"gridx/modules/SingleSort", "gridx/modules/ColumnResizer", "gridx/modules/RowHeader"
],
function(ready) {
ready(function() {
ccInit();
});
});
}
I removed the module declarations from the main.js and added them in the ccInit.js application where the grid is created, like this:
function populateGrid() {
require([
'dojo/store/Memory',
'gridx/Grid',
'gridx/core/model/cache/Sync',
'gridx/modules/SingleSort',
'gridx/modules/ColumnResizer',
'gridx/modules/RowHeader'
], function(Store, Grid, Cache, Sort, ColumnResizer, RowHeader) {
. . .
var tsGrid = new gridx.Grid({
id: 'idHeaderGrid',
cacheClass: Cache,
store: toStore,
modules: [ Sort, ColumnResizer, RowHeader ],
structure: toColumns,
selectRowTriggerOnCell: true
});
...
The grid is created successfully when it is created within an immediate require context as shown. Lots of dojo calls and even a grid without modules will work if i use the non-immediate approach.
The syles are still messed up, though. Column headings are blank and the table looks nothing like a claro-styled grid. I am sure that i have set up the css includes in the html header correctly (using my working web project as a model). Is there some worklight initialization or 'skin' overlay that's messing this up?
Thanks for any comment.
--- workaround is to refer to all classes, locally.
I solved the problem with stylesheets by creating the gridx.css in the common\css folder, then I edited it by replacing each #import with a copy/paste of the imported css source. So my gridx.css is a merge of all the source code from all the imports. i point to that css\gridx in my header link and i get reasonable results.
So in summary, i had to explicitly require the gridx classes in the custom function rather than in the dojo require statement in the main.js. And i had to merge all of the gridx styles and refer to them locally as well. The problem where gridx.css and other style sheets are not resolved through relative path includes that point to the dojo toolkit seems like a bug. Those stylesheets seem to be loaded in the run-time-generated server as evidenced by the console messages that look like this:
Failed to load resource: the server responded with a status of 404 (Not Found) http://myWLdevServer.mycomputer.local:10080/JustGridx/apps/services/preview/JustGridx/common/0/default/dojo/gridx/resources/claro/Gridx.css
If a developer is supposed to do some kind of server config to point to those CSS files, then I'm not seeing it.
I am leaving this post as unsolved in case someone agrees with me that this is a bug at worst or is not intuitive and should be documented at best.
From the comments by user3208130:
Sorry for not following up for all this time. i did finally work
around the problem by not importing anything. I copied the main
gridx.css from gridx\resources into my project, and then for each of
the imports listed in that file, i copy/pasted the source from the
various locations within the gridx collection as well as all of the
claro css files since gridx only uses that font. i had to turn off
theme switching depending on the device since claro looks awful on
windows8 and android otherwise.
I know this makes no sense, but i tried every variation of relative and explicit path that i could imagine for the import
statements in both of the html header and within the main css files
and nothing else worked. i suspected that the css files are not copied
automatically when device environments are created but i couldn't
prove that.
Hi I am looking for tutorial based on Dojo 1.8.
What I am looking for is:- create and instantiate widget pragmatically after dojo page fully loaded and parsed, triggered after dojo/on button. I am not sure of which tutorial in Dojo website, for me to learn.
Please advise.
Thanks in advance.
Clement
There isn't one tutorial that fully answer all your question but the following will be helpful:
Dojo Events tutorial and dojo/on reference
dojo/ready reference
dojo/parser reference
To capture both the full loading of the page and parsing you need to use a combination of dojo/ready and dojo/parser. (I'm assuming that the parsing you refer to is the dojo widget parser, rather than the standard browser parsing of HTML).
To run code after parsing you'll need to add parseOnLoad: false to your dojoConfig and run the parser manually; otherwise, there is no way of capturing when it is complete.
<script type="text/javascript" async="true">
require([
"dojo/ready",
"dojo/parser",
"dojo/on,
"dojo/query"
], function(
ready, parser, on, $
){
ready(function(){
// Only run after the page is fully loaded
parser.parse().then(function(instances){
// Only run after parser has parsed the page
var myButton = $("#myButtonid"); // Find your button
if(myButton.length > 0){ // Check button is found
on(myButton[0], "click", function(evt){
// ... add your code here to create and
// instantiate widget
});
}
});
});
}
</script>
Don't forget that you need to turn off automatic parsing of widgets in you dojoConfig, hence, something like this (in the head):
<script type="text/javascript">
dojoConfig= {
"parseOnLoad": false,
"async": true
// ...other settings
};
</script>
I need some help as well as some advice on how to use Dojo correctly in my project. At the moment, this is what I'm doing:
Say I setup a project named 'Test'. Test.html is the first file hit, and in that file I have the following:
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="dojo/dojo.js"></script>
<script type="text/javascript" src="dojo/core-web-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-ui-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-compat-layer.js"></script>
<script type="text/javascript">
require(
// Set of module identifiers
[ "dojo", "dojox/mobile/parser", "dojox/mobile/SwapView", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/deviceTheme", "dojox/mobile/ScrollableView" ],
// Callback function, invoked on dependencies evaluation results
function(dojo) {
dojo.ready(function() {});
});
</script>
I also have this in Test.js:
require([ "dojo", "dojox/mobile/parser", "dojox/mobile/deviceTheme",
"dojox/mobile/ScrollableView", "dojox/mobile/compat", "dojox/mobile",
"dojox/mobile/Button", "dojox/mobile/View", "dojox/mobile/Heading",
"dojox/mobile/TabBarButton", "dojox/mobile/TabBar",
"dojox/mobile/TextBox", "dojox/mobile/RoundRectList",
"dojox/mobile/ListItem", "dojox/mobile/Button",
"dojox/mobile/SpinWheel", "dojox/mobile/SpinWheelSlot",
"dojox/mobile/IconContainer", "dojox/mobile/SwapView" ],
function(dojo, parser) {
dojo.ready(function() {
});
});
Now, when I click a on one of my buttons, it triggers the WL.Page.Load method and my pagePort div now shows my new page inside of my Test.html page (let's say this is Page2.html), however, there's a problem. The Dojo stuff works fine on page one, but now it doesn't work on page two. I'm not sure what's happening behind the scenes but I feel I'm missing a step (do I need to unload Dojo? Declare it again in the next page?).
If somebody could help me get Dojo working on this second page so I'm able to use Dojo on further pages (after learning what I'm doing wrong) I would be really grateful!
My best guess based on the info you've given is that Page2.html is not really inside Test.html and its a new page. In this case you will need to have the script references in Page2 as well.
If you're testing your code in a web browser you can view the Console and hopefully gain some insight as to what exactly is going wrong.
You can also try working with the Worklight logger to help locate the problem.
http://wpcertification.blogspot.com/2012/03/enabling-debuglog-console-in-worklight.html
Here is a general link for "Problem Determination" from IBM as well
http://publib.boulder.ibm.com/infocenter/ieduasst/v1r1m0/index.jsp?topic=/com.ibm.iea.worklight/worklight/5.0/Problem_Determination/IMFV50_ProblemDetermination/player.html
As Nick said if you load totally different HTML page you will have that page to declare the classes your are using. In dojox/mobile/tests see test_IconContainer.html for example.
That said you could proceed differently by for example having your alternate views defined in the same HTML or as your are in Worklight by using the fragment mechanism (see https://www.ibm.com/developerworks/mobile/worklight/getting-started/ modules 60.1, 2 and 3).