I'm definitely quite new to Vaadin (or similar frameworks) and I'm currently having great difficulties understanding how to include a chart (created using the Vaadin wrapper for JFreeChart) to the html file, which defines one of my views in Vaadin Navigator. I've followed this tutorial to create a Vaadin-compatible chart using JFreeChart and it's wrapper for Vaadin - JFreeChartWrapper. I seem unable to find an element in Vaadin's declarative format (you can test it here) that can make it possible for me to do that. My view for now is pretty simple and it includes a label and an embedded element (an image):
<v-vertical-layout size-full>
<v-label _id="watching" size-auto :middle :center/>
<v-embedded _id="pic" :middle :center :expand/>
<!-- add chart element here! (_id="chart") -->
</v-vertical-layout>
Is there some generic container for charts and if not, how can I add one? For my Navigator stuff I have adapted the AnimalViewer example in Vaadin's book.
According to the Vaadin book you can define a prefix for you component so you can use it in the HTML file. Suppose your class where you're using the vaadin addon/wrapper is com.example.chart.MyChart the following should be a working example:
<!DOCTYPE html>
<html>
<head>
<!-- define c as prefix for package com.example.chart -->
<meta name="package-mapping" content="c:com.example.chart"/>
</head>
<body>
<v-vertical-layout size-full>
<v-label _id="watching" size-auto :middle :center/>
<v-embedded _id="pic" :middle :center :expand/>
<!-- use MyChart -->
<c-my-chart _id="chart"/>
</v-vertical-layout>
</body>
</html>
Related
Razor pages have a mechanism where you can reference named sections in your layout, and then specify them in your pages that use that layout. For example, if your Layout (_Layout.cshtml) looks like this:
#using...
...
<!DOCTYPE html>
...
<body>
...
#RenderSection("modals", required: false)
...
and then in your dashboard page, for example, you'd have:
<div>
...
</div>
...
...
#section modals
{
<div class="modal-container>...</div>
<div class="modal-container>...</div>
}
that would inject the contents of #section modals... into the place in the layout where #RenderSection("modals") is.
How can this be done in Blazor?
Unfortunately, no such feature is currently supported in Blazor. Blazor team and the community have been discussing the necessity of this feature over a year now, but for no avail. Read here about Sections in Blazor.
However, if you're looking for a 'temporary solution', you may read a comment by SteveAndeson about how to pass parameter values from a Blazor component page to its layout. I know that you're looking for a way to render the #Body plus #EndBody, but the principal remain the same: You have to create a layout component instead of the default layout
Hope this helps...
I have created a component to get something similar to sections:
https://github.com/inspgadget/BlazorSections
This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 3 years ago.
I want to insert a navigation div inside all of my HTML documents. Is there a way to do so without putting the entire div inside of every document? I figured the solution would be similar to a CSS stylesheet.
I don't know of anyway of doing this without Javascript or jQuery, which I want to avoid using if possible.
<html>
<body>
<div>
//CONTENT//
<div>
</body>
</html>
I want to put the div inside of a separate document and put in a link of some sort to substitute that in every document that contains the div.
Edit: I Haven't notice that you also don't want to use JS.
I'll leave this answer as a partial solution for you problem.
The Solution:
If you don't want to use ANY Library like JQuery or frameworks like Angular/React/Vue then you have the option to use Web components (I've added the description from the link below).
Notice: Don't forget to check for Browser support.
With that you can choose HTML templates or Custom elements.
Let's take an example of HTML template:
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis:
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var template = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var tbody = document.querySelector("tbody");
var clone = document.importNode(template.content, true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
var clone2 = document.importNode(template.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
What is web components (From the developer.mozilla.org docs)?
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
Is it possible to change default color of the TimePickerAndroid component ?
You would have to change it from the styles.xml file of android. Here's what you do:
1) Open up styles.xml: "android/app/src/main/res/values/styles.xml"
2) you'll need to add a few lines:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:timePickerDialogTheme">#style/Dialog.Theme</item>
</style>
<style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF0000</item>
<item name="android:textColorPrimary">#0000FF</item>
</style>
In styles.xml you should already have:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
If you do just add the remaining lines. If not go ahead and add them.
4) Lastly, just recompile the app. "react-native run-android". You should see the color change right away.
Using React-native, unfortunately no.
However, by changing some java files in RN and using this solution from SO you might be able to do it.
If you succeed doing this, I suggest you create a Pull Request on RN's repository as it might be very useful for other users.
You could also develop it as a module and open source via NPM.
I recently started using QUnit to test client side of a web page.
I have two issues with the default layout that come with QUnit. (See image)
1 : All failed test are expended by default. I would like them to be collapsed by default.
2 : I would like to have a dropdown to filter test by module.
The theme on this following web page doesn't have those issues.
http://bryce.io/qunit-theme-burce/test/
Here is the page to "install" this theme.
https://github.com/brycedorn/qunit-theme-burce
However, I can't get it to work. Probably because I don't understand the first step of installation. But doing the second and third one was easy.
I do link the theme css in the web page, and removed base one but that doesn't work.
< link rel="stylesheet" href="/content/Test/qunit-theme-burce.css" />
When I use this style sheet, < div id="qunit-fixture" > isn't hidden and test aren't displayed.
How can I get this to work in order to fix my two issues with base layout?
To install QUnit custom theme you pointed, put the following tags on your test page:
<!-- theme styles -->
<link rel="stylesheet" href="path/to/qunit-theme-burce.css">
<!-- qunit source code -->
<script src="path/to/qunit.js"></script>
<script>
function getPreviousTests( rTestName, rModuleName ) {
// copy this function from https://github.com/brycedorn/qunit-theme-burce/blob/master/test/test.js
}
</script>
But in your case this custom theme is not required.
To hide failed test you can use the QUnit.testDone method:
<script>
QUnit.testDone(function(args){
if(args.failed) {
document.querySelector("#qunit-test-output-" + args.testId + " .qunit-assert-list").className += " qunit-collapsed";
}
});
</script>
Also, you can resolve your second issue if you upgrade your QUnit version to the latest (1.18.0). In this version module filter works "out of the box".
I know bootstrap, semanticUI, foundation, etc.
My new project is a part of an old website. and we want to start implementing the new features with a normal css framework.
So, how do to implement a partial view?
lets say a with a framework css without rebuilding all the website from scratch ?
<body> <!-- regular old website css -->
<div class="old"></div>
<div class="everything-in-here-using-css-framework"></div>
</body>
is that possible? which framework support this ?
i don't fully understand but i think you can follow these steps:
make sure there are no matching conflicting class names with your framework (in foundation for example: columns, small-12, etc...)
include the framework's CSS file (you can link to a cdn just for testing)
start writing some new html elements and see how it goes.
if crashes occure (probably they will) start to change the old elements name - for instace add "old-" to every class you have.
another approach could be to move the existing project to SASS, then wrap the old CSS in a container like this
.old {
header { ... }
div { ... }
}
and put all the framework styles in something like this:
.new {
...
}
I think we'd be more helpful if you'll give more details.