I need to compactly present multi-selection inside a drop-down box in Wicket by having a check box next to each value in the drop down box. I'm thinking of using ListView with CheckBox and Label as a component for DropDownChoice but then I am not sure how to proceed further.
You can use some javascript library applied to Wicket's ListMultipleChoice (which generates a [select multiple="multiple"] HTML tag. I've found one (jQuery UI MultiSelect Widget, hosted at GitHub) implemented as a jQuery plugin, which works very well. Thanks to #erichynds!
The Page class is just a plain-old Wicket page, and all you have to do is to import the scripts/stylesheets, and call a single function (highly configurable):
HomePage.java:
public class HomePage extends WebPage {
List<String> selection = new ArrayList<String>();
public HomePage() {
add(CSSPackageResource.getHeaderContribution(HomePage.class, "jquery.multiselect.css"));
add(JavascriptPackageResource.getHeaderContribution(HomePage.class, "jquery.multiselect.min.js"));
add(new FeedbackPanel("feedback"));
Form form = new Form("form") {
#Override
protected void onSubmit() {
info(selection.toString());
}
};
form.add(new ListMultipleChoice("list",
new PropertyModel(this, "selection"),
Arrays.asList("A", "B", "C", "D", "E", "F", "G", "H")));
add(form);
}
}
HomePage.html
<html xmlns:wicket="http://wicket.apache.org">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/cupertino/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").multiselect();
});
</script>
</head>
<body>
<div wicket:id="feedback"></div>
<form wicket:id="form">
<select wicket:id="list"></select>
<br/>
<input type="submit">
</form>
</body>
</html>
Alas Wicket is used to generate HTML, and in HTML there is no facility to have a drop-down with checkboxes. (In Swing or another Windowing UI, this would be possible, and your approach would be correct.)
Take a look on the internet for example code for HTML which can cause a similar effect (e.g. a <div> which is shown / not shown when you click on the value you're editing). For example I found this thread here: http://www.webdeveloper.com/forum/showthread.php?t=182976
Related
dialog is open by module on page.
html code:
<!DOCTYPE html>
<!--
#license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<dialog id="dialog">
<form method="dialog">
<input type="text" id="google">
</form>
</dialog>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places"
defer
></script>
</body>
</html>
and in js file, I created the google autocomplete and focus on the input field in the dialog.
js code:
let autocomplete;
const addressDialog = document.querySelector("#dialog");
const addressGoogleField = document.querySelector("#google");
addressDialog.showModal();
function fillInAddress() {
const place = autocomplete.getPlace();
console.log(place);
}
function initMap() {
autocomplete = new google.maps.places.Autocomplete(addressGoogleField, {
fields:["geometry"],
types:["geocode"]
});
addressGoogleField.focus();
autocomplete.addListener("place_changed", fillInAddress);
}
window.initMap = initMap;
results:
Google Places Autocomplete Box is behind the modal dialog.
I want to put autocomplete box in front of the dialog. What should I do?
This may be a z-index issue. The Google Place Autocomplete box ("pac-container" css class) is appended at the end of the body element, and not within your modal dialog.
To ensure the autocomplete box is above your modal dialog div. You can try and update your css with :
.pac-container {
z-index: 10000;
}
The 10000 z-index is just a value high enough to be above the modal z-index.
Okay, So, I have a model object that we will call Station, with a list of codes associated.
class Station {
public List<String> codes;
}
I have a controller method which render a view showing the list of a station.
class StationController {
#Autowired
private StationService stationService;
#GetMapping()
public String showAllStations(Model model) {
model.addAttribute("stations", stationService.getAllStations())
return "stationsView"
}
}
Here is my template
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:each="station : ${stations}" th:text="${station.codes}">
</div>
</body>
</html>
So, let's say my first station as two codes, CD1 et CD2. The rendered html will be the following :
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div>[CD1, CD2]</div>
...Skipping the additional divs.
</body>
</html>
Is there a way to render the codes as a JSON array ? I know thymeleaf can do it in javascript, using inline.
For example,
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var data = [[${renter.sabreCodes}]];
/*]]>*/
</script>
will be rendered as
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var data = ["CD1","CD2"];
/*]]>*/
</script>
So I would want the same result for an attribute value.
Of course, I have a lot of workaround for this, but I would want to know if these workaround are needed, or if it just me who don't know how to get straight to the point.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>
</body>
</html>
When you click on model viewer the outline appears, I am unable to remove the outline from the model-viewer how would one remove it?
Edit
/**
* This is mixin function is designed to be applied to a class that inherits
* from HTMLElement. It makes it easy for a custom element to coordinate with
* the :focus-visible polyfill.
*
* #param {Function} SuperClass The base class implementation to decorate with
* implementation that coordinates with the :focus-visible polyfill
*/
export function FocusVisiblePolyfillMixin(SuperClass) {
var coordinateWithPolyfill = function(instance) {
// If there is no shadow root, there is no need to coordinate with the
// polyfill. If we already coordinated with the polyfill, we can skip
// subsequent invokcations:
if (
instance.shadowRoot == null ||
instance.hasAttribute('data-js-focus-visible')
) {
return;
}
// The polyfill might already be loaded. If so, we can apply it to the
// shadow root immediately:
if (self.applyFocusVisiblePolyfill) {
self.applyFocusVisiblePolyfill(instance.shadowRoot);
} else {
// Otherwise, wait for the polyfill to be loaded lazily. It might never
// be loaded, but if it is then we can apply it to the shadow root at
// the appropriate time by waiting for the ready event:
self.addEventListener(
'focus-visible-polyfill-ready',
function() {
self.applyFocusVisiblePolyfill(instance.shadowRoot);
},
{ once: true }
);
}
};
// IE11 doesn't natively support custom elements or JavaScript class syntax
// The mixin implementation assumes that the user will take the appropriate
// steps to support both:
return class extends SuperClass {
// Attempt to coordinate with the polyfill when connected to the document:
connectedCallback() {
super.connectedCallback && super.connectedCallback();
coordinateWithPolyfill(this);
}
};
}
So I added this in file name focus-visible.js
added this to html
<body>
<!-- The :focus-visible polyfill removes the focus ring for some input types -->
<script src="focus-visible.js" defer></script>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls>
</model-viewer>
</body>
and this in css :focus-visible polyfill{ outline: none; }
Am I doing something wrong?
Just make sure the focus-visible.js is included in your page. You probably started your modelviewer page with an older example that didn't have it included.
Pick it up from the repo or this link:
https://unpkg.com/focus-visible#5.1.0/dist/focus-visible.js
I add the attribute data-js-focus-visible to <model-viewer>. Like this:
<model-viewer src="myFile.glb" data-js-focus-visible></model-viewer>
After that the outline is no longer shown.
If you inspect the <model-viewer> component in the main example from the official doc https://modelviewer.dev/ you can see that they use the data-js-focus-visible attribute:
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate="" camera-controls="" data-js-focus-visible="" ar-status="not-presenting"></model-viewer>
It seems to appear that this is an ongoing issue with model-viewer as it is still in development. I would go leave some feedback on their github page, or see if this issue matches yours.
Requires this script to be added as per model-viewer official documentation
<script src="./_model-viewer_ Interactive Example_files/focus-visible.js.download" defer=""></script>
I am trying to create custom form element which I am trying to reuse in other applications developed in angular and jsp page of Java
my-element.js:
class MyElement extends HTMLElement {
// This gets called when the HTML parser sees your tag
constructor() {
super(); // always call super() first in the ctor.
this.msg = 'Hello, World!';
}
// Called when your element is inserted in the DOM or
// immediately after the constructor if it’s already in the DOM
connectedCallback() {
this.innerHTML = `<form action="/action_page.php">
<div class="container">
<label><b>Name</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Age</b></label>
<input type="text" placeholder="Enter Age" name="age" required>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Add</button>
</div>
</div>
</form>`;
}
}
// This registers your new tag and associates it with your class
window.customElements.define('my-element', MyElement);
my-element.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/iron-ajax/iron-ajax.html">
<script src="my-element.js"></script>
<!-- <link rel="import" href="add-form.html"> -->
</head>
<body>
<my-element></my-element>
</body>
</html>
Two issues I am struggling with now are below
1.Can i incude both the files as below to my angular and java jsp page and use custom tag to work?
<link rel="import" href="my-element.html">
<script src="my-element.js"></script>
<my-element></my-element>
I am trying to pass below json object as an attribute to custom form element and trying to render custom form elements
[
{
"name":"Name",
"type":"text",
"size":"20",
"readyOnly": false,
"validateFunction":"onlyText"
},
{
"name":"Age",
"type":"number",
"size":"3",
"readyOnly": false,
"validateFunction":"onlyNumber"
}
]
I tried using below way to inject json data to custom element to render form elements based on json but no luck and there are no console errors
<my-element form-data="{{data}}"></my-element>
ad 1) yes you can use your element with every server system you would like. It's "just html" that the beauty in it :)
ad 2)
HTMLElement won't do anything automatically. So if you wish to access your json you will have to do something like this
<my-element form-data="{'name': 'Name', 'type': 'text'}""></my-element>
connectedCallback() {
let rawData = this.getAttribute('form-data');
let jsonData = JSON.parse(rawData.replace(/'/g, '"'));
}
Notice that in the form-data json there are ' instead of ". So we have to replace them before using JSON.parse.
it looks like this is using a web component as opposed to a polymer component. The native web component API does not include data binding, although angular and polymer both do (but implemented in different ways).
Native web components and polymer components can be used with Angular as well as other frameworks.
Depending on whether you are using Angular.js(1) or Angular(2+), setting up the data object to be passed into the DOM will vary, but in general the data should be "set up" so to speak in the JS and passed into the DOM. Otherwise as #daKmoR said, the data would need to be declared as he did in his example.
There are packages that assist in implementing data 2-way binding between polymer's data bindings and angulars bindings if that is needed.
Trey
I'm trying to get a reference of outer HTML(index.html)'s div from the polymer dart class. I know I can query the reference of app_element.html's div by the following code:
shadowRoot.querySelector('#select_this')
However, if I were to get a reference of index.html's div (#select_this), how can I do that from app_element.dart class? Is this even possible? If not, how can I design the polymer elements so that it can access DOM of other HTML pages and not only the ones that bind that particular polymer element?
app_element.dart
#CustomTag('app-element')
class AppElement extends PolymerElement {
#override
void attached() {
var my_div = shadowRoot.querySelector('#select_this'); // contains app_element.html's #select_this div
}
}
index.html
<html>
<body>
<head>
<link rel="import" href="../lib/app_element.html">
</head>
<app-element></app-element>
<div id="select_this"></div> <!-- Not sure how to select this... -->
<script type="application/dart">export 'package:polymer/init.dart';</script>-->
<script src="packages/browser/dart.js"></script>
</body>
</html>
app_element.html
<!DOCTYPE html>
<polymer-element name='app-element'>
<div id="select_this"> <!-- selectable via: shadowRoot.querySelector('#select_this') -->
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
Use the documents querySelector instead:
import 'dart:html';
...
document.querySelector('#select_this');
You can get access to elements within other elements shadow DOM
// old
document.querySelector('* /deep/ #select_this');
// or new (probably not yet supported everywhere
document.querySelector('* >>> #select_this');