I tried making this tutorial work by just copying it to the letter.
It didn't have the folders entirely right so I just put them in the right ones.
In my: /webapp/VAADIN/themes/mytheme/layouts folder I have the my-layout.html file. Which looks like this:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div location="top" id="top"></div>
<div>
<span location="bottom" id="bottom"></span>
<span location="left" id="left"></span>
</div>
</body>
</html>
In my Java file it looks like this:
#Override
protected void init(VaadinRequest request) {
CustomLayout layout = new CustomLayout("my-layout");
MenuBar menuBar = new MenuBar();
layout.addComponent(menuBar, "top");
layout.addComponent(new Button("Does Nothing"), "bottom");
VerticalLayout vLayout = new VerticalLayout();
vLayout.addComponent(new InlineDateField());
vLayout.addComponent(new TextField("", "Nothing to put in here"));
vLayout.setSpacing(true);
vLayout.setMargin(true);
vLayout.setVisible(true);
layout.addComponent(vLayout, "left");
layout.setVisible(true);
}
When I run this on the Jetty Server through netbeans, the site doesn't show any of the elements.
you have to set your layout as content in the UI:
setContent(layout)
Related
My problem with this code is on the second click it desellects everything and does not select a particular item. I know it's because of the item_'.$x.'Active where even if I have a selectorReset() function it does not necessarily reset the value of each individual active back to 0.
I am aware that this is poor coding, could someone enlighten me with a better solution to having this kind of function? ^_^
example: click item 0 then click item 1 (it works fine as intended)
but if i go back to click to item 0 the activator is set at 1 which means the else in function selector will activate with the reset function so nothing is selected.
Question: How do I keep it selected?
Solution: a janky way of solving it hahha or could someone suggest a an already known concept? thanks ^_^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="area">
<?php
$x=0;
while($x!=10){
echo'
<div id="item_'.$x.'" class="area__item" onclick="selector'.$x.'()">
'.$x.'
</div>
<script>
var item_'.$x.'Active = 0;
var item_'.$x.' = document.getElementById("item_'.$x.'");
function selector'.$x.'(){
if(item_'.$x.'Active == 0){
selectorReset();
item_'.$x.'.style.backgroundColor = "pink";
item_'.$x.'Active = 1;
}else{
selectorReset();
item_'.$x.'.style.backgroundColor = "";
item_'.$x.'Active = 0;
}
}
</script>
';
$x++;
}
?>
<script>
var item = document.getElementsByClassName("area__item");
function selectorReset(){
for(var i=0;i<item.length;i++){
item[i].style.backgroundColor="";
}
}
</script>
</div>
<style>
.area{
display:flex;
flex-wrap:wrap;
width:100%;
}
.area__item{
display:flex;
justify-content:center;
align-items:center;
height:5em;
width:5em;
border:1px solid black;
margin:1em;
cursor:pointer;
}
.area__item:hover{
background-color:pink;
}
</style>
</body>
</html>
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.area{
display:flex;
flex-wrap:wrap;
width:100%;
}
.area__item{
display:flex;
justify-content:center;
align-items:center;
height:5em;
width:5em;
border:1px solid black;
margin:1em;
cursor:pointer;
}
.area__item:hover{
background-color:pink;
}
</style>
</head>
<body>
<div class="area">
<?php
$x = 0;
while($x!=10){
echo'
<div id="item_'.$x.'" class="area__item" onclick="selector('.$x.')">
'.$x.'
</div>';
$x++;
}
?>
</div>
<script>
function selector(item) {
// Get the total Class length
var classLength = document.getElementsByClassName("area__item");
// First check any of the classes holds the style attribute, then remove it
for(var i = 0; i < classLength.length;i++){
var element = document.getElementById('item_' + i);
if (element.hasAttribute("style")) {
element.style.backgroundColor = "";
}
}
// Get the selected element by argument
// Then add classes to the selectedElement
var selectedElement = document.getElementById('item_'+item);
selectedElement.style.backgroundColor = "pink";
}
</script>
</body>
</html>
Here is my code to get the source from the access point I was trying to poll:
import java.net.*;
import java.io.*;
public class URLReader {
public static void main(String[] args) throws Exception {
URL oracle = new URL("http://x.x.x.x"); //Some valid IP
BufferedReader in = new BufferedReader(new InputStreamReader(oracle.openStream()));
String inputLine;
System.out.println("In");
while ((inputLine = in.readLine()) != null)
System.out.println(inputLine);
in.close();
}
}
Here is what I got instead of the desired source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="_canopy.css" media="screen" />
<link rel="stylesheet" type="text/css" href="_canopypda.css" media="handheld" />
<meta http-equiv='Refresh' content='0; URL=index.htm?mac_esn=0a003e40eb1e' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=
no' />
<title>Welcome to Canopy</title>
<script language="javascript" type="text/javascript">
<!--- Hide script from old browsers
function CheckForJS()
{
var d = new Date();
var t = d.getTime();
document.cookie = "JS=true; expires=" + (t+600);
}
// end hiding from old browsers -->
</script>
</head>
<body onload="CheckForJS();">
<p>
Press Here to Continue.
</p>
</body>
</html>
I am trying to access the web gui for this unit to grab its signal strength and store it in a text file. I kind of think the problem is that the gui is not secured by https standards and requires more authorization but it could just be that I am doing the process wrong to begin with. If anyone can help me get the full source of the page or steer me in the right direction of what I need to do, that would be greatly appreciated.
The tag
<meta http-equiv='Refresh' content='0; URL=index.htm?mac_esn=0a003e40eb1e' />
means that a web browser would refresh the page with url index.htm?mac_esn=0a003e40eb1e after 0 seconds, i.e. redirect to that page.
You need to do the same, i.e. parse that line and do another request.
I'm using Wicket and I have followed this guide (and also this one) to build a webpage template.
My goal is to have a fixed header and footer and a dynamic <div> inside <body> that change its content when I change page by clicking on some menu links.
So at the end I have done something like this:
HomePage.html
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</body>
</html>
HomePage.java
public class HomePage extends WebPage {
// Title of the current page
private String pageTitle;
public HomePage() {
// dynamic page title
add(new Label("title", new PropertyModel<>(this, "pageTitle")));
// ...
}
// ...
public String getPageTitle() {
return pageTitle;
}
public final void setPageTitle(String title) {
pageTitle = title;
}
}
Menu.java
public class Menu extends Panel {
public Menu(String id) {
super(id);
add(new BookmarkablePageLink<>("homepageLink", HomePage.class));
add(new BookmarkablePageLink<>("page1Link", Page1.class));
add(new BookmarkablePageLink<>("page2Link", Page2.class));
}
public Menu(String id, IModel<?> model) {
super(id, model);
}
}
Page1.java
public class Page1 extends HomePage {
public Page1() {
setPageTitle("Page1");
// ...
}
}
Page2.java
public class Page2 extends HomePage {
public Page2() {
setPageTitle("Page2");
// ...
}
}
The problem is that everytime I use my Menu to open a page (Page1 or Page2) the browser reloads all resources, I think it's due to Page1 and Page2 that are children of HomePage.
So, for example, one issue I have is that if I want my Menu to keep track of the page I'm currently visiting by setting a active class via javascript, I will have troubles because everytime I visit a page the js files (and all the others) are downloaded again and I loose all the logic I did.
I just would like to change the content of:
<div id="content" wicket:id="template" class="">
</div>
without refreshing all the rest of the page.
Is it possible to do that just by changing the Wicket approach?
Thanks
What you want to do is basically a Single Page Application. In this case page inheritance doesn't work well. You need to turn Page1, Page2, etc... into Panels and use AJAX to place them as page content (in your code wicket:id="template") when user clicks menu items.
You should to use <wicket:extend></wicket:extend> in parent markup. Something like:
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<wicket:extend>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</wicket:extend>
<section id="content">
<wicket:child/>
</section>
</body>
</html>
<wicket:child> is used inside the parent’s markup to define where the children pages/panels can “inject” their custom markup extending the markup inherited from the parent component.
Now only the child markup will updating, I'm not completly sure, but looks like only child part updating.
I am using webstorage to save data.When i get the data through form & save it in a variable (in this case 'one') and try to display in the same page , it does that correctly. But when i import the same '.js' file and try to display it in a different page, it doesn't work. How to use webstorage to retrieve the data in a different page ? Also, i don't want to use query string !
First page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="leftbox">
<section id="leftbox">
<form action="seconddisplayfile.html" method="post">
<p>(key) One: <input type="text" id="one" /></p>
<p>(value)Two:<textarea id="two"></textarea></p>
<p><input type="submit" id="button" value="Save" /></p>
</form>
</section>
<section id="rightbox">
Nothing yet !
</section>
</section>
</body>
</html>
Second page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="wbox">
Nothing yet!
</section>
</body>
</html>
Javascript code:
// JavaScript Document
function doFirst(){
var button = document.getElementById("button");
button.addEventListener('click',save,false);
}
function save(){
var one = document.getElementById("one").value; //but only contents is to be taken not label n all
var two = document.getElementById('two').value;
localStorage.setItem("one",two); //Store in key-value pair. Anytime you use this you use if by addressing the variable ie key name.
//Retriveing data n displaying stored data
display(one); //now u hav stored two so its time to use one
}
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
window.addEventListener('load',doFirst,false);
#charset "utf-8";
/* CSS Document */
#leftbox{
float:left;
padding:20px;
border:3px solid #F20B84;
}
#rightbox{
float:left;
width:250px;
margin-left:20px;
padding:20px;
border:3px solid #8E1783;
}
Your second page doen't contain any element with id rightbox.so
var rightbox = document.getElementById('rightbox');
will return null.and when try to set innerHTML property of rightbox,js will throw
Uncaught TypeError: Cannot read property 'innerHTML' of null
so change your display to
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
if(rightbox)
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
You have to call display in second page .
I want to disable the jQuery event if a Text box is in focus. I am using following code. If a user is entering any text in text field then if by change the cursor moves to the image then it will reset the text in text field to the value shoot by event. I don't want to the event to execute if text field is in focus.
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="team" />
<script>
$("input").focusin(function() {
document.getElementById("team").value = "I am in Focus Dont shoot events PLZ";
}
);
$(document).ready(function() {
$("img").mouseover(function(event) {
if(event.target.name != '')
{
document.getElementById("team").value = event.target.name;
}
//alert(event.target.name);
});
});
</script>
<img src="http://1.bp.blogspot.com/-bVD6mGlH_ik/TnHV75bw9KI/AAAAAAAAB84/1hJU7WJuU8k/s400/fewr.jpg" name="I" />
</body>
</html>
I have already tried following function
$("input").focusin(function() {
document.getElementById("team").value = "I am in Focus Dont shoot events PLZ";
});
Now I am using below code but still not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img src="http://1.bp.blogspot.com/-bVD6mGlH_ik/TnHV75bw9KI/AAAAAAAAB84/1hJU7WJuU8k/s400/fewr.jpg" name="Ihhhhhhhhhhhhhhh" id="myimage" />
<input id="theone">
<input type="image" src="http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.thumb.png" id="bind">
<input type="image" src="http://www.clker.com/cliparts/4/3/1/f/1195436930767206781not_ok_mark_h_kon_l_vdal_01.svg.thumb.png" id="unbind">
<script>
$("#unbind").click(function(event) {
$("img").off();
alert("off");
});
$("#bind").click(function(event) {
$("img").on();
alert("on");
});
$("img").mouseover(function(event) {
if(event.target.name != '')
{
document.getElementById("theone").value = "done";
}
//alert(event.target.name);
});
</script>
</body>
</html>
Just put one condition in mousehover event...
Enter Text in text box if textbox is not focus using this code !$("#team").is(":focus")
here is the demo : http://jsfiddle.net/s8zxY/1/