I created template (template.xhtml) which resides in root context of application.
I wanted to apply it to page (newTemplateClient.xhtml) which resides in the folder 'public'.
So newTemplateClient.xhtml looks like this:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://www.w3.org/1999/xhtml"
template="./../template.xhtml">
.
.
.
I have links to this page in index.xhtml:
<h:link outcome="/public/newTemplateClient" value="Login"/>
<h:commandLink action="/public/newTemplateClient?faces-redirect=true" value="Login"/>
<h:commandLink action="/public/newTemplateClient" value="Login"/>
And only last works. When I use first two page displays but template isn't applied.
So it works only when page is redirected, not forwarded. Why?
Thanks in advance
Okay it seems that template is applied but css files aren't. I'm using NetBeans wizards to create templates and templates clients. The css files are located /resources/css/ directory.
They are referenced from template.xhtml:
`
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">template</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
`
How can I reference that css files other way?
Folder structure:
Root
public
newClientTemplate.xhtml
template.xhtml
index.xhtml
Okay problem solved.
Solution was to use:
<h:outputStylesheet name"css/default.css"/>
<h:outputStylesheet name"css/cssLayout.css"/>
Instead:
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
Related
I've created a simple static website in an S3 bucket using some boilerplate HTML5 code. I've set permissions on the bucket to Public access universally (all files and folders)
I can't work out why my css and js folders are not loading the content in the index.html. The image referenced in the <img/> tag is in the root of the project and renders fine.
I've checked the metadata and it seems to be correct e.g. text/css for the css files.
Here's the layout:
Here's the index.html
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<link rel="manifest" href="site.webmanifest" />
<link rel="apple-touch-icon" href="icon.png" />
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="theme-color" content="#fafafa" />
</head>
<body>
<!-- Add your site or application content here -->
<p>My new Website</p>
<img src="tile.png" alt="Girl in a jacket" width="500" height="600" />
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () {
ga.q.push(arguments);
};
ga.q = [];
ga.l = +new Date();
ga("create", "UA-XXXXX-Y", "auto");
ga("set", "anonymizeIp", true);
ga("set", "transport", "beacon");
ga("send", "pageview");
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>
Inside of css folder:
Permissions on css are as follows:
This was a permissions issue on one of the css files.
My topbar in foundation 6 is somehow not working (Not somehow, the foundation.topbar.js isn't there). So, please help me get it added.
I'm new to foundation — like a total noob. I'm 13. So, please consider that. :)
And here's the WHOLE code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><i>Title</i></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<div class="callout">
<h1>HEADER</h1>
</div>
</div>
</div>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is what happens:
This is my JS folder:
just you're coding in Foundation 5.x style. Look at this : http://foundation.zurb.com/sites/docs/top-bar.html
thank you. and also download and import the .js folder from the foundation on git.
the the topbar will "work".
It looks like you're just running this as a static page (html)
Yet in the path for your javascript includes you're including
<? bloginfo('template_url'); ?>
Which looks to be a php function
Might I suggest you run the likes of WAMPserver ( given you're running windows it's a simple way of getting Apache Mysql and PHP up and running on your local machine.
Additional note: As was said however it looks like you're including foundation 5.x code
"<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"
I want to separate html code from my laravel template (*.blade.php) file . I have following code in my dashboard.blade.php template :
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
I want to separate this html code from here and want to move it to another file , with extension either *.html or *.tpl or any other except *.php .
Is it possible to do so ? Please help me on this .
Thanks.
I don't see anyone 100% decoupling HTML/CSS, but you can follow some Design Patterns, like Presenter, and use Laravel Blade so it be very little coupled.
Name a view home.blade.php and add your code to it and change your code to:
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
Create a route using:
<?php
Route::get('/', function() {
return View::make('home',
array(
'$pageTitle' => 'Dashboard',
'welcomeMessage' => 'Welcome to your Dashboard. You rock!'
)
);
});
See? It's almost 100% decoupled, but you cannot decouple 100% or you'll not be able to show your dynamic data in your final HTML.
Also, Blade helps you organize your code, so you can have a layout, let's call it layout.blade.php:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
#yield('contentSection')
</body>
</html>
You have one single line of Blade in it, just to add your page contents, now you can create your home view as:
#extends('layout')
#section('contentSection')
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
#stop
And blade will render this HTML for you:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
</body>
</html>
I can't get facelets file to load into a template.
I have a content facelet called frontpage.xhtml that is set as the welcome page in web.xml. This loads the template. The template then is to include a number of other files. When they wouldn't load I pared it down to one (header.xhtml) to try to troubleshoot. It wouldn't even load when I put the header xhtml file in the same directory as the template and frontpage file.
When the app is run the frontpage.xhtml is run inside the template. I can see this because I can see the effects of the css loaded in the template. And I can see the "Hello World" in the title bar and "Hello World!" displayed in the page. But the header is not loaded at the top.
I tried removing all div and class info from the template body as well. There are none in the facelets. It didn't help.
Can someone provide some insight here? Maybe I'm off base, but I thought I could define the template this way so that I could call different facelets that load into the template's content area.
This app does run correctly without the templating. i.e. when everything is lumped into one page, which I am trying get away from for modularity.
Directory Structure (starting at the root for web pages)
/frontpage.xhtml
/soulard_base_template.xhtml
/sections/base/header.xhtml
web.xml (what I think are the relevant sections)
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<!--<welcome-file>faces/welcome.xhtml</welcome-file>-->
<welcome-file>faces/frontpage.xhtml</welcome-file>
</welcome-file-list>
frontpage.xhtml
<?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:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="soulard_base_template.xhtml">
<ui:define name="windowTitle">
Hello World
</ui:define>
<ui:define name="content">
<h2>Hello World!</h2>
</ui:define>
</ui:composition>
</body>
</html>
soulard_base_template.xhtml
<?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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="windowTitle" /></title>
<link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if lt IE 8]>
<link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->
<link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />
</h:head>
<h:body>
<div class="container showgrid" title="Container">
<div class="span-24" title="Banner">
<ui:insert name="header">
<ui:include src="sections/base/header.xhtml"/>
</ui:insert>
</div><!-- End of Banner -->
<div class="span-16" title="Content Column">
<ui:insert name="content" />
</div><!-- End of Centre Column -->
</div><!-- End of Container -->
</h:body>
</html>
header.xhtml
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
<ui:define name="header">
<h2>Header</h2>
<h:graphicImage url="/images/header.png"
width="950"
height="175"/>
</ui:define>
</ui:composition>
</body>
</html>
The problem is the additional "define" entry in header.xhtml <ui:define name="header">. You use ui:define usually to replace some content from a template, but note the outer <ui:composition> does not have a reference to a template. So, if there is no template, facelets doesn't know where to apply it, and finally the inner content is never used.
OK, it figures. After hours of screwing around and frustration I ask the question on stackoverflow. Then I walk away for a few hours. Go to the gym, relax, come back and figure it out in 10 minutes.
Unlike the text book (Core JSF 2.0) I removed a bunch of inserts and defines and it worked.
e.g. the header.xhtml looks like this now:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
<h2>Header</h2>
<h:graphicImage url="/images/williamrosmusdotcomHeader.png"
width="950"
height="175"/>
</ui:composition>
</body>
</html>
and the template looks like this:
<?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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="windowTitle" /></title>
<link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if lt IE 8]>
<link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->
<link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />
</h:head>
<h:body>
<div class="container showgrid" title="Container">
<div class="span-24" title="Banner">
<ui:include src="sections/base/header.xhtml"/>
</div><!-- End of Banner -->
<div class="span-24" title="Menu">
<ui:include src="sections/base/menu.xhtml"/>
</div><!-- End of Menu -->
<div class="span-4" title="Left Column">
<ui:include src="sections/base/leftsidebar.xhtml"/>
</div><!-- End of Left Column -->
<div class="span-16" title="Content Column">
<ui:insert name="content" />
</div><!-- End of Centre Column -->
<div class="span-4 last" title="Right Column">
<ui:include src="sections/base/rightsidebar.xhtml"/>
</div><!-- End of Right Column -->
<div title="Footer" class ="span-24">
<ui:include src="sections/base/footer.xhtml"/>
</div><!-- End of Footer -->
</div><!-- End of Container -->
</h:body>
</html>
So now the question is, what is the point of the "insert" and "define" since all they seemed to do is to make things not work. That is for another day.
I'm new in Codeigniter, and I wonder how can I load my own XHTML template to be used, I was working on CakePHP earlier and it was pretty easy to add own template in Cake, but I switched to the Codeigniter, since I've read it's a lot better and has a 'better future'. I was searching on wiki, but tutorials there was providing not enough information for me.
put public folders in root directory,
index.php
application/
system/
images/
js/
css/
now include js like this: <script src="<?php echo base_url();?>js/jquery.js"></script>
for css: <link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" />
and for images: <img src="<?php echo base_url();?>images/1.jpg" />
the fastest and simplest way of display page, is as follows:
in controller:
$data['body'] = "welcome";
$this->load->view('page', $data);
now create page.php inside the view folder:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Template codeigniter</title>
<script src="<?php echo base_url();?>js/jquery.js"></script>
<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<?=$body?>
</div>
<div class="clear"></div>
<div>Footer</div>
</div>
</body>
</html>
Loading templates is best described in the CI doc regarding templates.
http://codeigniter.com/user_guide/libraries/parser.html
$this->load->library('parser');
$data['val1'] = 'some string';
$data['val2'] = 2012;
$this->load->view('my_xhtml', $data);
Now, in your template, you will have PHP vars of $val1 & $val2 you can use in dynamic elements of your html.