I am trying to implement menus in JSF which I was able to do it.
menucontents.jsp:
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%# taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/css/basic.css" />
</head>
<body>
<f:view>
<f:loadBundle basename="com.cpc.resources.menu" var="menu"/>
<t:div id="hNav_outer">
<t:panelNavigation2 id="nav1" layout="list" itemClass="off" activeItemClass="on" openItemClass="on"
renderAll="true">
<t:commandNavigation2 value="#{menu['menu_Home']}" style="padding-left: 0px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_Home']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
<t:commandNavigation2 value="#{menu['menu_admin']}" style="padding-left: 150px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_change_password']}"/>
</t:commandNavigation2>
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_forgot_password']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
</t:panelNavigation2>
</t:div>
</f:view>
</body>
</html>
menu.jsp:
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%# taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/css/basic.css" />
</head>
<body>
<f:view>
<f:subview id="headerinclude1">
<jsp:include page="menucontents.jsp" />
</f:subview>
</f:view>
</body>
</html>
I have tried various combinations i.e by removing the HTML / BODY / f:view tags but nothing seems to be working I know somewhere I am doing it wrong not able to check it. Any help would be appreciated.
Also, the first part of code when executed as an single file it works very well the only problem is when I include it in another JSP the menus are not getting displayed.
The <f:subview> has to go in the include file, not in the parent file. Replace the <f:view> in menucontents.jsp file by <f:subview> and remove the <f:subview> from the menu.jsp.
Summarized:
menu.jsp
<f:view>
<jsp:include page="menucontents.jsp" />
</f:view>
menucontents.jsp
<f:subview id="menucontents">
<f:loadBundle basename="com.cpc.resources.menu" var="menu"/>
...
</f:subview>
(note that the include file should not have a <f:view>, you also don't need a HTML head/body around it, that would only produce invalid HTML)
Related
I use JSF 2.0 and the Apache Tomcat Server version 8. I have a simple JSF program that consists of two pages. In the first one the user enters his name and click a button which takes the user to the second page which displays "welcome" and the name that user entered in the first page. The key point here is that I'm trying to use regular html tags instead of JSF tags. So, I'm using:
<input type="text" id="myname" class="form-control" jsf:id="myname" jsf:value="#{testBean.name}">
instead of:
<h:inputText value="#{testBean.name}" />
But, executing the program, the only thing I see in the second page is "welcome", the name does not appear.
Does anyone have an idea why it is not working? Did I use "jsf:id and jsf:value" properly?
The code is below:
<!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"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
lang="en">
<h:head>
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Faculty </title>
<title>Bootstrap 101 Template</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="arabicfonts/arabicfont.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</h:head>
<f:view>
<h:body>
<h:form>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
Updating Faculty
</div>
<div class="panel-body">
<div class="form-group">
<label for="myname" class="control-label"> My name is </label>
<div>
<input type="text" id="myname" class="form-control" jsf:id="myname" jsf:value="#{testBean.name}">
</input>
</div>
</div>
</div>
<div class="panel-footer">
<div class="text-center">
<h:commandButton class="btn btn-success" value="Do it" action="welcome"/>
</div>
</div>
</div>
</div>
</div>
</div>
</h:form>
</h:body>
</f:view>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<h3>Welcome #{testBean.name}</h3>
</h:body>
</html>
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name="testBean")
#SessionScoped
public class TestBean implements Serializable
{
private String name;
public String getName() { return name; }
public void setName(String newValue) { name = newValue; }
}
The default.aspx page created when starting a new SharePoint App is not needing my needs since it inherits from the host web master page and I have found it easier to obtain a responsive design with my own index.aspx page that has less complexity. Using this article JSOM in HTML5 Apps, I am attempting to retrieve the FormDigest, but upon code inspection it is not working. Any ideas? Here is my current code:
<!DOCTYPE html>
<%--Declare the Page Language and obtain the SharePoint namespace required for retrieving the FormDigest header--%>
<%# Page language="C#" %>
<%# Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/App.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<script src="/_layouts/15/SP.UI.Controls.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/dirPagination.js"></script>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>
</head>
<body>
<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
<div class="container" data-ng-app="app">
<div id="chrome_ctrl_container"></div>
<div>
<p id="message">
initializing...
</p>
</div>
<div data-ng-view></div>
<hr>
<footer></footer>
</div>
</body>
</html>
I have discovered that I needed a form instance to execute the call. Its working perfectly:
index.aspx
<!DOCTYPE html>
<%--Declare the Page Language and obtain the SharePoint namespace required for retrieving the FormDigest header--%>
<%# Page language="C#" %>
<%# Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/App.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<script src="/_layouts/15/SP.UI.Controls.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="../Scripts/angular-resource.min.js"></script>
<script src="../Scripts/dirPagination.js"></script>
<script src="../Services/services.js"></script>
<script src="../Controllers/controllers.js"></script>
<script src="../App.js"></script>
</head>
<body>
<%-- Get the form digest to use for POST/Update/Delete operations via Web services--%>
<form id="Form1" method="post" runat="server">
<SharePoint:FormDigest ID="FormDigest1" runat="server"></SharePoint:FormDigest>
</form>
<div class="container" data-ng-app="app">
<div id="chrome_ctrl_container"></div>
<div>
<p id="message">
initializing...
</p>
</div>
<div data-ng-view></div>
<hr>
<footer></footer>
</div>
</body>
</html>
Example of us in ngResource call via AngularJS:
appServices.factory('appTypes', ['$resource', function ($resource) {
return $resource("/_api/web/lists/getbytitle('Todo Types List')/Items", {Id: "#Id"},
{
'query': { method: "GET", isArray: false, headers: { 'Accept': 'application/json;odata=nometadata' } },
'update': { method: 'PATCH', headers: { 'Accept': 'application/json;odata=nometadata' } },
'save': { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() } }
}
);
}]);
I have googled for this and I am not an expert on it either. I tried the following code thinking I am doing it right to implement a simple autocomplete textbox. But does not work. Here is the code. If anyone would help out what could be wrong with it, that will be a big help. My textbox simply does not return any autocomplete suggestions when I try it.
Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jquery.WebForm1" %>
<!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 runat="server">
<%--<link href="jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />--%>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
$(function () {
$("#TextBox1").autocomplete
({
source: ["Joe", "John", "Jack", "Ben", "Bell", "Steve", "Scott"] // simple list of strings
});
});
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
There is no reference for jquery ui library in ur code
TRY TO ADD THIS :
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
I am working on real time vehicle tracking project.
I am getting vehicle location after every 6 sec and I store lat and long in static variable each time.
I want to show vehicle moving on Google map after change location using ajax.
I have written code as:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%# taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%# taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%# taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%# taglib uri="http://code.google.com/p/gmaps4jsf/" prefix="m"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV=" " CONTENT="6">
<title>Insert title here</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAtRLgopSfFn_inKV4Mb4dwRQrh986W3YN5ROngdOVRv-81htxfBSHsTcVUm4HRkCt9bSp5mP_3_snrw"
type="text/javascript">
</script>
</head>
<body>
<f:view>
<h:form id="aaaa">
<h:panelGrid columns="2">
<m:map id="mp" width="500px" height="500px" latitude=" #{mp3.lat} "
longitude=" #{mp3.lon}" zoom="15">
<m:mapControl name="GMapTypeControl" />
<m:mapControl name="GLargeMapControl"
position="G_ANCHOR_BOTTOM_RIGHT" />
<m:marker id="m" latitude=" #{mp3.lat} " longitude=" #{mp3.lon}">
<m:htmlInformationWindow htmlText="Start<br> " />
<a4j:support event="onchange" action=" " reRender="m"></a4j:support>
</m:marker>
</m:map>
</h:panelGrid>
<h:commandButton value="Start" action="#{mp3.meth}" />
<h:commandButton value="Path Map" action="pathmp" />
</h:form>
</f:view>
</body>
</html>
My question is how to move vehicle marker on google map using ajax a4j without reloading all page?
technology i have used are
- jsf
- richfaces
- a4j
- javaBean
Thanks
I have two layouts and both are working in index page, but when I give to another the second one doesn't work. I don't know what the problem is, I'm new to tapestry.
my code is
<html t:type="layout1" title="accountInfo VideoClub"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;" name="viewport" />
<title>Video Club</title>
<link href="./layout/layout.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="scroll">
<ul id="thelist">
<div style="text-align:center;">
<p><h1>Account info</h1>
<t:actionlink t:id="getStatus"> <img src="../layout/images
/sub.png"/>
</t:actionlink><br/><br/>
<t:actionlink t:id="getStatuss"> <img src="../layout/images
/cancel_sub.png"/> </t:actionlink><br/></p>
</div>
</ul>
</div>
</div>
</body>
</html>
Without the entire code (tml and java) we can't help you much.
Layout components in tapestry are plain components, which render their body with some content around it.
Please paste your code here.