How do I create a component (like a footer section) and include it on a page?
I read stuff like markup inheritance, but that doesnt sound right (how would you re-use a footer section component in different pages when it can only inherit from a single page).
This is my 2nd day of using Wicket and wicket-library.com has some great examples, but at the moment it seems to be down when you try to view the source.
Thank you.
Create a basepage with header, footer, menu etc. Then extend you pages from that page. Use it like this:
public class BasePage extends WebPage {
public BasePage() {
add(new HeaderPanel("header"),
new FooterPanel("footer"),
new MenuPanel ("menu" ));
}
}
With this html:
<html xmlns:wicket>
<body>
<div wicket:id="header">
<div wicket:id="menu">
<wicket:child></wicket:child>
<div wicket:id="footer">
</body>
</html>
You would need to create a HeaderPanel, FooterPanel and MenuPanel.
Your child page example:
public class MyPage extends BasePage { ...}
Which has this html:
<html xmlns:wicket>
<body>
<wicket:extend>
</wicket:extend>
</body>
</html>
You can also create a no-menu basepage etc. The components and html you add to your child page will be placed between the tags of the basepage.
Related
I am following https://help.twitter.com/en/using-twitter/embed-twitter-feed for embedding timeline in the angular page. Only button renders but not the actual timeline.
The index.html looks like:
<body style="margin:0">
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<app-root></app-root>
</body>
app.component.html looks like below:
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
A Twitter List by TwitterDev
</a>
Also tried things like app.component.ts:
ngOnInit(){
if ((<any>window).twttr.ready())
(<any>window).twttr.widgets.load();
}
But no luck
you need to load widgets.js script after twitter-timeline element is been render so if you place the script in index.html it is will load and the element hasn't render yet.
🌟 the best way around it is to create a script tag dynamically after the element is rendered.
twitter component
export class TwitterComponent {
#Input() user:string;
constructor(private renderer2: Renderer2,private el: ElementRef) {}
ngAfterViewInit() {
let scriptEl = document.createElement('script');
scriptEl.src = "https://platform.twitter.com/widgets.js"
this.renderer2.appendChild(this.el.nativeElement, scriptEl);
}
}
template
<a class="twitter-timeline" href="https://twitter.com/{{user}}">Tweets by {{user}}</a>
app componenet template
<app-twitter [user]="name"></app-twitter>
angular twitter widgets ⚡⚡
ngAfterViewInit() a lifecycle hook that is called after Angular has fully initialized a component's view.
Updated 🔥🔥
a simple soulution mention in this answer before by user named Bernardo Baumblatt
put the script link in the index.html
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>
load the twitter widgets when ngAfterViewInit method call
ngAfterViewInit() {
// #ts-ignore
twttr.widgets.load();
}
in any case the script has not loaded yet you will got an error like 🆘 twttr is not defined 👉 so download the widgets.js script and include it to your project by using import
main.ts
import './app/widgets.js'
demo 💥💥
I had a requirement of dynamically rendering timelines based on different twitter timelines.
I found a workaround by creating a variable in the constructor that stores the href based on the twitter username .
So for example if your link is "https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw"
, you just put this in the constructor in a previously defined global variable , say "embedLink"
such as in your ts component:
#Component({
selector: 'app-tree-dashboard',
templateUrl: './tree-dashboard.component.html',
styleUrls: ['./tree-dashboard.component.css']
})
export class TreeDashboardComponent implements OnInit,AfterViewInit {
embedLink='';
constructor(private matIconRegistry: MatIconRegistry,
) {
this.embedLink= "https://twitter.com/TwitterDev/lists/national-parksref_src=twsrc%5Etfw"
}};
and then in your HTML :
<a class="twitter-timeline" href={{embedLink}}></a>
And lastly you only need to add the script in index.html which you have done already.
So you're good to go!
Below is my code. I'm creating blank website so I think it's should not be a problem. What I think is maybe the order of the script in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Twitter</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>
</html>
In my app.component.html
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
A Twitter List by TwitterDev
</a>
You can view my code here
I have a webgrid with a hyperlink column and upon clicking that link it should open a modal popup I have a modal named #examplemodal in a partial view named"GetDetails". Below I try to open the modal from a controller action method that returns partial view.
#Html.ActionLink("OrderNumber","GetDetails","Home",
new{id = item.ID}, new{data_target="#exampleModal", data_toggle="modal", #class="modal-backdrop"});
When I click on the link with Ordernumber screen blacks out and I dont see the grid at all. Any pointers on where I am doing a mistake. I am using asp.Net mvc5 and bootstrap v4.3.1
I think your concept is totally wrong. I assume you want to display the order details in a modal? And since you have a method to return a partial view for that already, you want to load that order details content into modal whenever the user clicks the hyperlink column?
If that's the case, bootstrap modal is not the right tool for you. It's designed to load static content. If you want to load dynamic content, i.e., order details for different order numbers, you should look into a concept called iframe, and libraries like Fancybox, etc.
Here's what I would do:
1.Define a modal layout
Because you want to display the partial view on a modal, you generally don't want to have things like sidebar, top navigation, etc, from your site layout. Hence I will define a layout for modals.
<!-- _PopupLayout.cshtml -->
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- All your necessary styles, meta data, etc -->
<title>...</title>
#RenderSection("css", required: false)
</head>
<body>
<main class="container-fluid">
#RenderBody()
</main>
<!-- All your necessary javascripts -->
#RenderSection("scripts", required: false)
</body>
</html>
2.Return views that use _PopupLayout
I know you've created partial views. But regular view is fine. In fact, it's better because you can setup the layout the regular view uses, as well as the view models for that.
Because you want this view to look like a bootstrap modal, you should construct your view using bootstrap modal structure.
#model ...
#{
ViewData["Title"] = "Order Details";
Layout = "~/Views/Shared/_PopupLayout.cshtml";
}
<div class="modal-header">
<h5 class="modal-title">Order Details</h5>
</div>
<div class="modal-body">
...
</div>
3.Write JavaScript to trigger FancyBox on link clicking
You can use a custom css class for the selector for all links you want to load the iframe from. In my case I call it .popup-fancy. You can also define multiple classes for popping up different sizes of modals/fancybox modals.
$(function() {
$().fancybox({
selector: 'a.popup-fancy',
defaultType: 'iframe',
baseClass: 'fancybox-md',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-lg',
defaultType: 'iframe',
baseClass: 'fancybox-lg',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-xl',
defaultType: 'iframe',
baseClass: 'fancybox-xl',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
});
See how it sets the default type to iframe? You can find those configuration options from Fancybox documentation. Not to forgot those 3 base classes styles (I'm using Sass):
.fancybox-md {
.fancybox-content {
max-width: 36.75rem;
}
}
.fancybox-lg {
.fancybox-content {
max-width: 65.625rem;
}
}
.fancybox-xl {
.fancybox-content {
max-width: 78.75rem;
}
}
4.Create links to open modal
Now you can create links with any of those fancybox trigger classes:
<a href="#Url.Action("details", "order", new { area = "", id = item.Id })"
class="popup-fancy">
See Order Details
</a>
I assume you have the order controller and details action method all setup to return a view that uses the _PopupLayout, then when the user clicks on the link, instead of the regular redirect to the page using standard layout, the page content should be loaded into the fancybox modal.
For example:
If you can only use bootstrap modal??
In that case, you will have to create a modal template (probably in the layout so that it can be called anywhere) with an iframe inside. And then on link clicked, you use javascript to set the source of the iframe and manually popup the modal.
Sample of modal template
<div id="fancy-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="" frameborder="0"></iframe>
</div>
</div>
</div>
Then on the page where you generate links, instead to generate actual links, you will have to generate the modal triggers:
<a href="#" class="fancy-modal-trigger"
data-iframe-src="#Url.Action("details", "order", new { area = "", id = item.Id })">
See Order Details
</a>
See here you put the actual link to your view on a data-attribute instead of href, because you don't want the link to actually navigate to the destination.
$(function() {
$('a.fancy-modal-trigger').click(function() {
let iframeSrc = $(this).data('iframe-src'),
$fancyModal = $('#fancy-modal');
$fancyModal.find('iframe').prop('src', iframeSrc);
$fancyModal.modal('show');
return false;
});
});
DISCLAIM: this is not yet tested.
I'm new on Thymeleaf template engine, and I'm making an application with Spring Boot and Spring MVC. I'm working just with application.properties for the configuration.
I want to know how I can write only ONE layout but the contents in many files: for example content1.html, content2.html, etc. and use the layout that already have the header, the footer.
If it is possible, how can I send from the controller the content file that will be replaced in the layout?
You could do something like this. Let's say you create a page where all other content will be embedded - main.html. It will look something like this:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/xhtml">
<div th:fragment="mainPage(page, fragment)">
<h4>Some header</h4>
<div th:include="${page} :: ${fragment}"></div>
<h4>Some footer</h4>
</div>
</html>
Then you want to create some page which will be embedded in your main.html page - some-page.html:
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns="http://www.w3.org/1999/xhtml">
<div th:fragment="somePage">
<h1>${title}</h1>
</div>
</html>
The goal is to replace <div th:include="${page} :: ${fragment}"></div> within main.html with the content from some-page.html. In controller, that will look like this:
#Controller
public class DemoController {
#RequestMapping
public String somePage(Model model) {
// Note that you can easy pass parameters to your "somePage" fragment
model.addAttribute("title", "Woa this works!");
return "main :: mainPage(page='some-page', fragment='somePage')";
}
}
And there you go! Every time when you want to swap content in main.html, you just change page and fragment parameters within string in your controller.
in for example magento they have php seperated from phtml.
I also do the same thing.
But I can't figure one thing out, and that is:
When I have this php script:
class aclass extends main{
public function redirect(){
require_once($this->frontend_folder . $this->admin_folder . "beheer/edit_account.phtml");
}
public function nav_menu(){
return "<nav>some nav menu things in here</nav>";
}
and the "view" phtml script:
<!doctype html>
<html>
<head>
</head>
<body>
<div id="wrap">
<?php
echo $this->nav_menu();
?>
</div>
</html>
"$this" doesn't work, but how can I get this working?
you need to instantiate the class in the view.
<!doctype html>
<html>
<head>
</head>
<body>
<div id="wrap">
<?php
$c = new aclass; // instantiate the class
echo $c->nav_menu(); // run the function from the class
$c = null; // null the variable, maybe help garbage collection...
?>
</div>
</html>
this is not an optimal way to use it, but I hope the idea is clear.
EDIT: This is a simple solution, depending on your archetecture, you can do many things. In simpliest form, you should consider instantiating your class at the top of the view, then you can reference it by the handle you assign it to throughout the view.
Following the documentation of the YUI DataTable control i've inferred the following code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></SCRIPT>
<SCRIPT type="text/javascript">
// Create a new YUI instance and populate it with the required modules.
YUI().use('datatable', function (Y) {
// Columns must match data object property names
var data = [
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
{ id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
];
var table = new Y.DataTable({
columns: ["id", "name", "price"],
data: data,
// Optionally configure your table with a caption
caption: "My first DataTable!",
// and/or a summary (table attribute)
summary: "Example DataTable showing basic instantiation configuration"
});
table.render("#example");
});
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
The insulting thing is that the documentation says:
This code produces this table:
except that this code produces this table:
So obviously i'm missing something pretty fundamental about how to render a YUI data table. What is the correct way to render a YUI data table?
Q. How to render a YUI datatable?
Another page mentions including a <div>, changing my <BODY> from empty to:
<BODY>
<div class="example yui3-skin-sam">
<div id="simple"></div>
<div id="labels"></div>
</div>
</BODY>
but does not change the look of the control.
Add class="yui3-skin-sam" in body tag, table css is written corresponding to this class.
Move the <script>s to the bottom of the <body>, or at least after the <div> that will contain the DataTable. That will avoid a race condition where the scripts may be loaded before the DOM is set up.
render('#example') is telling the DataTable to render into an element with an id of 'example' The markup sample you included has a div with a class of 'example', then two divs with ids 'simple' and 'labels'. You need to make sure you're rendering inside a parent element with class yui3-skin-sam. If you tell a YUI widget to render into an element it can't find, it falls back to rendering it inside the <body>. You can fix this in a few ways:
add the class to the <body> tag instead of a <div> (not a bad idea, but you should still fix the render target selector)
use a render(?) target selector that matches an element on the page, such as render('.example'), render('#simple'), or render('#labels').
In any case, make sure your render target is inside an element with class="yui3-skin-sam"