I am at: https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior
and decided to create a dialog by doing something like:
<dom-module id="sample-dialog">
<template>
<paper-dialog-impl>
<h2>{{title}}</h2>
<div>
<content></content>
</div>
<div class="buttons">
<paper-button dialog-dismiss on-tap="cancel">Cancel</paper-button>
<paper-button dialog-confirm on-tap="submit">Accept</paper-button>
</div>
</paper-dialog-impl>
</template>
</dom-module>
it renders to the screen, but has no styles. I read: paper-dialog-shared-styles.html provide styles for a header, content area, and an action area for buttons but i don't know how to implement it. I was trying to use a link tag but that wasn't working. Specifically I tried inside the template: <link rel="import" href="polymer_elements/src/paper-dialog-behavior/paper-dialog-shared-styles.html" />
In my dart file, i imported these too, thinking it woudl be resolved.
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_dialog_behavior.dart';
Edit: Right now, I have the class Implementation extending Polymer Element, which makes sense. I just wasnt sure if it needed to extend something else as well.
Edit 2: Updated this to be a standard paper-dialog instead, except now it wont render the item at all, even after updating the import in the dart backend.
After updating it to a paper dialog, there is a property that needs to be applied to the paper-dialog for it to be visible or not. that is the opened attribute.
Adding that to the inner paper-dialog makes it visible.
So, therefore, passing it down to the paper dialog by way of an outer opened, will make it toggle open/closed.
//in the sample-dialog dart
#property bool opened = false;
in the markup:
<paper-dialog opened$="{{opened}}" ...>
then now i can say either:
<sample-dialog></sample-dialog>
<sample-dialog opened></sample-dialog>
Related
I am using beta3 of Vaadin 10 and I have a html-file bound to a Component (#HtmlImport), which contains a <dom-repeat> inside of which I have a paper-radio-group. I want the paper-radio-group#selected-property to be bound two way to my model, so that when a user selects a different radio-button, it's value will be written back to the model. Unfortunately, for me it works only as a one way model, as the java-side setter setAOrBProperty() is never called. Can someone give me a hint what I need to do to have the new value written to the server?
<link rel="import" href="./bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html">
<dom-module id=“dmmdl”>
<template>
<div>
<dom-repeat items=“[[myListOfSomething]]”>
<div>
<paper-radio-group selected="{{item.aOrBProperty}}” allow-empty-selection>
<paper-radio-button name=“a”>A</paper-radio-button>
<paper-radio-button name=“b”>B</paper-radio-button>
</paper-radio-group>
</div>
</template>
</div>
</template>
<script>
class BooksGridElement extends Polymer.Element {
static get is() {
return 'books-grid'
}
// only for testing !!
// ready() {
// super.ready();
// this.books = results;
// }
}
customElements.define(BooksGridElement.is, BooksGridElement);
</script>
</dom-module>
I suspect this is caused by a security feature of Flow. Arbitrary model value changes from the client are not accepted for security reasons. Instead, changes are only allowed for properties that are used in two-way template bindings (i.e. {{propertyName}}) or explicitly annotated with #AllowClientUpdates on the corresponding Java getter.
The logic that looks for {{propertyName}} doesn't have any specific knowledge about the inner workings of <dom-repeat>, so it cannot know that {{item.aOrBProperty}} corresponds to myListOfSomething[*].aOrBProperty.
If my assumption is correct, you could fix this case by adding #AllowClientUpdates to the getAOrBProperty() method in your model interface.
Is there a way to dynamically hide a core-tooltip?
In general I want the tooltip turned off. However, if it is determined that the content element requiring the tooltip has clearly invalid data I want to see the tooltip.
For example:
<core-tooltip position="bottom" label="Name can not already be present">
<paper-input floatingLabel
id="alias-input"
type="text"
label="Enter Name"
>
</paper-input>
</core-tooltip>
I am trying to use this instead of the error attribute of PaperInput. In this case, on entry the input field has no contents so the label should be enough of a hint, so I do not want the tooltip displayed. But, if they enter a name that is already being used I'd like to only then display the tooltip. I can determine if the name in the paper-input is being used by looking in a map while listening to onKeyUp. But then how can I turn off the tip if it is not present?
If I set style display:none the arrow head and minuscule of body of an empty tip still shows.
I'm simply looking for a way to disable/enable a CoreTooltip.
I could not find a way using the component's api. This seems to work:
First select the CoreTooltip in the code. To enable that you can add an id to the core-tooltip
<core-tooltip id="cttp" position="bottom" label="Name can not already be present">
<paper-input floatingLabel
id="alias-input"
type="text"
label="Enter Name"
>
</paper-input>
</core-tooltip>
Then use Gunter's approach of grabbing internal elements using querySelector with /deep/ (See also How to programmatically clear PaperInput and have the floating label drop down to the input line)
final ttip = $['cttp'].querySelector('* /deep/ #tooltip');
(ttip as DivElement).style.display = 'none';
The trick is knowing how to select just the tip of the core-tooltip and then hiding it. Not sure the best way to determine this, by trying to study the code of core-tooltip or drilling down into #shadowDom instances in inspector of the tooltips to find the actual element you're trying to hide. In this case the actual tip div kindly had an id of tooltip to query on. Not sure this is a good strategy in terms of encapsulation, though.
A CSS solution.
I bound it to the invalid attribute just for demonstration purposes.
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_tooltip.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<polymer-element name="app-element">
<template>
<style>
:host {
display: block;
}
core-tooltip[hide="true"]:focus::shadow .polymer-tooltip,
core-tooltip[hide="true"]:hover::shadow .polymer-tooltip {
visibility: hidden !important;
}
</style>
<core-tooltip position="bottom" label="Name can not already be present" hide="{{!isValidationError}}" >
<paper-input floatingLabel
id="alias-input"
type="text"
label="Enter Name"
required invalid="{{isValidationError}}"
>
</paper-input>
<span>isError: {{isValidationError}}</span>
</core-tooltip>
</template>
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created() { }
#PublishedProperty(reflect: true) bool isValidationError;
}
I'm wondering if it's possible to assign a class to the component element itself.
Let's say I have this component:
<html>
<body>
<element name="x-preview" constructor="PreviewComponent" extends="div" class="preview">
<template>
<div class="preview">
</div>
</template>
</element>
</body>
</html>
Now I would like to be able to remove the <div class="preview"> element inside, since I already have the wrapping x-preview div. Simply setting class="preview" on the <element> doesn't work.
Is it possible to do that?
You have two options that I am aware of:
1) Assign the class wherever you use it:
<div is="x-preview" class="preview"></div>
The problem with this method is that if you change the class name, you will have to change it anywhere the component is used.
2) Use the inserted lifecycle method to add the class to the root element:
void inserted() {
getShadowRoot('x-preview').attributes['class'] = 'preview';
}
inserted() will be called whenever the component is added to the DOM. getShadowRoot() will fetch the root element of the component and then set the class to 'preview'. The advantage of this method is you only change the class in one location.
I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.
The fielsset in template looks like
<fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template: {name:'optionTemplate', foreach: OptionList}">
</fieldset>
and the option template looks like
<script type="text/x-jquery-tmpl" id="optionTemplate">
<input type="radio" data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" />
<label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }"> </lable>
</script>
I have tried
$('input[type=radio]').checkboxradio().trigger('create');
$('fieldset').controlgroup().trigger('create');
Here my problem is that the mobile css is not applying to the fiedset.
You must do this after the template has built your page or during the page initialization event, something like this:
$(document).on('pagebeforeshow', '#pageID', function(){
});
Page content can be enhanced ONLY when content is safely loaded into the DOM.
Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.
Basically you only want to use:
$('input[type=radio]').checkboxradio().checkboxradio('refresh');
or if first line throws an error:
$('input[type=radio]').checkboxradio();
and:
$('fieldset').controlgroup();
But I would advise you to only use this line after everything has been appended:
$('#contentID').trigger('create');
where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:
$('#pageID').trigger('pagecreate');
where #pageID is an id of your page.
To find out more about marku enhancement of dynamically added content take a look at this answer.
I'm working on my first Dart app, having completed the Game of Darts tutorials. I am trying to create a semantically named top-menu element that will eventually display a list of navigation menu tabs at the top of my page. My Dart app is able to recognize my custom element and calls the associated constructor.
However, I am getting a null reference when trying to query for the UL element within my custom element. I need the UL reference in order to dynamically load my LI elements into the menu.
Question 1:
Should the element be visible in the DOM at the point where the constructor is running?
Question 2:
If it is not yet visible, is there a Dart event I can use to trigger loading of the LI elements after the custom element has been completely loaded into the DOM?
Thanks in advance! For reference, here is the source of my custom element:
topmenu-element.html
<!DOCTYPE html>
<html>
<body>
<element name="top-menu" constructor="TopMenu" extends="div">
<template>
<div>
Top Menu
<ul id="top-menu-list"></ul>
</div>
</template>
<script type="application/dart" src="topmenu-element.dart"></script>
</element>
</body>
</html>
topmenu-element.dart
import 'package:web_ui/web_ui.dart';
import 'dart:html';
class TopMenu extends WebComponent {
List menuItems = ['Session', 'Authentication Services', 'Vehicle Services', 'Subscriber Services', 'Data Services'];
void populateMenu() {
UListElement menuList = query('#top-menu-list');
LIElement newMenuItem = new LIElement();
newMenuItem.text = menuItems[0];
menuList.children.add(newMenuItem);
}
TopMenu() {
// populateMenu();
}
}
I can't speak specifically about the DOM visibility in a constructor with the query method as I'm truthfully not certain. However there are perhaps better methods which you can use, which are called at various stages in the elements lifecycle.
That said, can I ask why you need to use this particular method to add the children. It is probably much easier to do it with the template repeat like so:
<!DOCTYPE html>
<html>
<body>
<element name="top-menu" constructor="TopMenu" extends="div">
<template>
<div>
Top Menu
<ul id="top-menu-list">
<li template repeat="item in menuItems">{{item}}</li>
</ul>
</div>
</template>
<script type="application/dart" src="topmenu-element.dart"></script>
</element>
</body>
</html>
Then there's no need to put any of your menu display code in your constructor.