Newbie problem. I am playing with Polymer.dart, and following the beginner tutorials. The Dart code gets invoked, but is unable to instantiate the PaperItem. How can I do this ? The error I get is :
Cannot read property 'toString' of null (first line of addTodoItem below)
mini.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input.dart';
import 'package:paper_elements/paper_item.dart';
import 'package:core_elements/core_menu.dart';
PaperInput paperInput;
CoreMenu coreMenu;
void main() {
print("enter main");
initPolymer().run(() {
Polymer.onReady.then((_) {
paperInput = querySelector('#todo-input');
coreMenu = querySelector('#todo-list');
paperInput.onChange.listen(addTodoItem);
});
});
}
void addTodoItem(Event e) {
PaperItem newTodo = new PaperItem.created();
newTodo.text = paperInput.value;
paperInput.value='';
coreMenu.children.add(newTodo);
}
mini.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini</title>
<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<link rel="import" href="packages/paper_elements/paper_item.html">
<script type="application/dart" src="mini.dart"></script>
<script async src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="mini.css">
</head>
<body unresolved touch-action="auto">
<core-header-panel> <core-toolbar>
<paper-tabs id="tabs" selected="all" valueattr="name" self-end>
<paper-tab name="all">ALL</paper-tab> <paper-tab name="favorites">FAVORITES</paper-tab>
</paper-tabs> </core-toolbar>
<h2>TODO list</h2>
<div>
<paper-input floatingLabel label="Action Item" id="todo-input">
</paper-input>
</div>
<div>
<core-menu id="todo-list"> </core-menu>
</div>
</core-header-panel>
</body>
</html>
This is not the right way to dynamically create instances of Polymer elements
PaperItem newTodo = new PaperItem.created();
the right way is
PaperItem newTodo = new Element.tag('paper-item');
or
var newTodo = new Element.tag('paper-item') as PaperItem;
Just as additional note:
Polymer elements that extend DOM elements (which is not the case for core-elements or paper-elements) need an additional parameter - see Dynamically create polymer element for more details.
Related
I am trying to use Xtext (2.14.0) together with the Orion web editor, but even with a simple example the Content Assist is not triggered by CTRL+SPACE inside the Orion editor.
From what I know, CTRL+SPACE is used by default to trigger the Content Assist inside the Orion editor.
I also want to mention that if I add a character to the "contentAssistCharTriggers" option (as described in the Xtext documentation), than the specified character triggers the Content Assist, but CTRL+SPACE still doesn't work.
Does anyone know what could be the problem?
Update:
I am using the basic xtext state machine example.
Below is the html file used to embed the Orion Editor:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="dependencies/orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["dependencies/orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mylang-syntax",
contentAssistCharTriggers: " "
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Demo</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mylang"></div>
</div>
</div>
</body>
</html>
here is the index html that works fine for me (content assist with crtl+space)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mydsl-syntax"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Example MyDsl Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mydsl">
</div>
</div>
</div>
</body>
</html>
and here is how your stuff looks like
Updating requirejs to 2.3.6 and jquery to 3.3.1-1 make codeEdit with you version work.
We updated everything in Xtext 2.17 that will come in spring 2019.
I'm trying to display java code in html page, It's not working, it shows this error
any help will be appreciated. my code look like
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" />
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreEclipse.css" />
<h3>Java Code:</h3>
<pre class="brush: java;">
public class JavaClass {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</pre>
<!-- Highlight all -->
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
when i comment the following line
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
the above error will not appear but shows diffrent error.
How can I bind to an event handler using <template is="dom-bind">?
index.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
DomBind template;
main() async {
await initPolymer();
template = document.querySelector('#t');
final model = new MyModel();
template['model'] = model;
// Polymer 1.0 event handlers can't have `.` in declarative syntax
// and therefore need to be assigned to the template directly.
template['buttonTap'] = model.buttonTap;
}
class MyModel extends JsProxy {
// reflectable is Polymer 1.0.0-rc.2 (was #eventHandler in rc.1)
#reflectable
String value = 'something';
#reflectable
buttonTap([Event e, args]) {
print(template.$['mybutton'].id);
print('tap! $value');
}
}
index.dart
<!doctype html>
<html>
<head>
<link rel="import" href="packages/polymer/polymer.html">
<script src="packages/web_components/webcomponents-lite.min.js"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<template id="t" is="dom-bind">
<div>Model: <span>{{model}}</span></div>
<div>Say something: <input value="{{model.value::change}}"></div>
<div>You said: <span>{{model.value}}</span></div>
<button id="mybutton" on-tap="buttonTap">Tap me!</button>
</template>
<script type="application/dart" src="index.dart"></script>
</body>
</html>
How can I apply/put external or extra <script> references and CSS <link> in my Razor content/child pages?
#model Portal.Common.Models.TempModel
#{
ViewBag.Title = "asdasd";
ViewBag.MissionId = id;
ViewBag.id = 0;
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (false)
{
<script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="...../ui/jquery.ui.mouse.js"></script>
<script src="...../ui/jquery.ui.draggable.js"></script>
}
<style type="text/css">
img[src*="iws3.png"] {
display: none;
}
#section JavaScript {
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"></script> "
In your _Layout you could have 2 sections: one for the scripts and one for the styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
#RenderSection("Styles", false)
</script>
</head>
<body>
#RenderBody()
#RenderSection("Scripts", false)
</body>
</html>
and then in your view override the sections you want:
#model Portal.Common.Models.TempModel
#{
ViewBag.Title = "asdasd";
ViewBag.MissionId = id;
ViewBag.id = 0;
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Styles {
<!-- main CSS -->
<link href="#Url.Content("~/Content/Site.css)" rel="stylesheet" type="text/css" />
<!-- some external CSS -->
<link href="http://www.example.com/foo.css" rel="stylesheet" type="text/css" />
<!-- some inline CSS -->
<style type="text/css">
img[src*="iws3.png"] {
display: none;
}
</style>
}
#section Scripts {
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="#Url.Content("~/ui/jquery.ui.mouse.js")></script>
<script src="#Url.Content("~/ui/jquery.ui.draggable.js")></script>
<script type="text/javascript">
// some inline javascript
</script>
}
Another way,
It's useful while same css and script files are referenced from different cshtml files and you are not using a default layout.
Create a partial view(let _Reference.cshtml) in shared folder and add the following for raw output :
#Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
.....
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Now in the head tag of your referencing cshtml, add this :
<head>
<title>MVC Test</title>
#Html.Partial("_Reference")
</head>
Hope this will help someone.
I have tried many methods to show the mapView in phonegap application that online provided. but still cant works. here is my code. Hope someone can help me to solve the problem
Thanks in advance
this is the map.js file code
function onMapLoad(){
if(isConnected){
//load google api
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","http://maps.googleapis.com/maps/api/js?sensor=true&callback="+"getGeolocation");
document.getElementByTagName("head")[0].appendChild(fileref);
}
else{
alert("Must be connected to the internet");
}
}
function getGeolocation(){
var options ={
maximumAge:3000,
timeout:5000,
enableHighAccuracy:true
};
navigator.geolocation.getCurrentPosition(loadMap,geoError,options);
}
function loadMap(position){
var latlng = new google.maps.LatLng(
position.coords.latitude,position.coords.longitude);
var myOptions ={
zoom:8;
center:latlng,
myTypeId:google.maps.MapTypeId.ROADMAP
};
var mayObj = document.getElementById("map_canvas");
var map = new google.maps.Map(mapObj,myOptions);
var marker = new google.maps.Marker({
position:latlng,
map:map,
title:"You"
});
}
function geoError(error){
alert('code: '+error.code +'\n' +'message: '+error.message +'\n');
}
$(document).bind("pageload",onMapLoad);
Here is the map.html file
<!DOCTYPE html>
<html>
<head>
<title>Map page</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div data-role ="page" id="map-page">
<div id ="map_canvas" style =" width:300px; height:400px">
</div>
<script type="text/javascript" charset ="utf-8" src="js/map.js"></script>
</div>
</body>
</html>