Zend Framework appending Scripts & Stylesheets the HTML5 way - zend-framework

i am wondering using Zend Framework's view helpers, ... code below ...
$this->headLink()->prependStylesheet("css/style.css")
->prependStylesheet("css/prettify.css")
->prependStylesheet("css/960.css")
->prependStylesheet("css/text.css")
->prependStylesheet("css/reset.css");
$this->headScript()->prependFile("js/site.js")
->prependFile("http://www.google.com/jsapi");
echo $this->headLink();
echo $this->headScript();
this is output
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/text.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/960.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/prettify.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/site.js"></script>
how can i echo links and scripts the html5 way where i do not need type="text/javascript" and rel="stylesheet" all that

You could create your ouwn helper, and put it in your view/helpers/Headlink.php, exrtend the original Zend Framework ones .. and just override the part you wish to make different.
For sure a better option then editing Framework files ...

Just pass empty or null attribute values to the helper or create your own helper (with the same name, but in different namespace), overloading the default behavior of the standard helper.
Making changes in source files of the framework is not a good solution.

zf/library/Zend/View/Helper/HeadLink.php:
in function createDataStylesheet
try to change this:
$attributes = compact('rel', 'type', 'href', 'media', 'conditionalStylesheet', 'extras');
to this (or anything you want)
$attributes = compact('type', 'href', 'media', 'conditionalStylesheet', 'extras');
If it is working you can make your own helper that inherit Zend default and override this method.
And in case of js try to do:
...->prependFile('yourfile.js', '');

Related

declaration regarding the content variable

I am new playwork. I have been going through the tutorials and samples provided the playframework.
I could successfully render helloworld application provided by playframework samples.
I have few doubts regarding the rendering part of main.scala.html.#
This is the default program which I got from samples/helloworld
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
</head>
<body>
<header>
#title
</header>
<section>
#content
</section>
</body>
</html>
Here when I commented out the #content under section tag , I am not able to see the the fields.
Now my question is, where is #content is mapped to the Form field?
I created another structure for my layout and added the #content to the content section. but it does not fit into that
so now my question is #content where is that defined that it is div container and has got some height and weight and all?
I could not understand. Please help me.
Pleae find my customized code below
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
#content</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</body>
</html>
Introduction
From Template parameters in the Play Template documentation, the meaning of the first line is described. Here, we see that two parameter groups are required.
The two parameter groups are:
a String parameter containing the title
a Html parameter containing some HTML content
Usage
To use this template, two parameter groups have to be supplied. In the context of the helloworld application, it is called from app/views/index.scala.html like this:
#main(title = "The 'helloworld' application") {
<h1>Configure your 'Hello world':</h1>
... more HTML elided
}
This pattern is described in http://www.playframework.com/documentation/2.2.x/ScalaTemplateUseCases, where HTML is injected into a template.
main.scala.html contains the template (content contains the HTML to be injected).
index.scala.html contains an example of injection into this template.
Note that calling #main(...) calls the template that is defined in main.scala.html.Similarly, calling #my_template(...) would call the template defined in my_template.scala.html.
In this case, the HTML for the form is defined inside index.scala.html.
Calling the Template
Finally, the root template is called from a controller. For the helloworld application, the template defined in index.scala.html is invoked by the code
def index = Action {
Ok(html.index(helloForm))
}
This is where the form object is injected into the template.

GWT, RootPanel.get() is null

I'm following a beginner's tutorial at http://www.tutorialspoint.com/gwt/gwt_style_with_css.htm.
The code for the HelloWorld.html file is:
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id="mytext"><h1>Hello, World!</h1></div>
<div id="gwtGreenButton"></div>
<div id="gwtRedButton"></div>
</body>
</html>
In the HelloWorld.java (extending EntryPoint), I have:
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
The 2 lines: RootPanel.get() always result in null. I don't know what happen, what to check? (too bad the site doesn't have a comment/discussion section)
Thanks.
Docs says
RootPanel.get(java.lang.String id)
Gets the root panel associated with a given browser element.
DOM.getElementById(java.lang.String)
Gets the element associated with the given unique id within the entire document.
Try with
com.google.gwt.user.client.DOM.getElementById("gwtGreenButton");
com.google.gwt.user.client.DOM.getElementById("gwtRedButton");

How can i use sass and 960gs system together on sinatra?

As an experiment I'm going to try use sass and 960gs system together on sinatra, but it occurs many trouble with this. Has nobody any idea what can go wrong in my case?
app.rb:
get '/reset.css' do
sass :reset
end
get '/960.css' do
sass :'960gs'
end
get '/main.css' do
sass :main
end
get '/' do
erb :index
end
layout.erb:
<link rel="stylesheet" href="/reset.css" type="text/css" />
<link rel="stylesheet" href="/960gs.css" type="text/css" />
<link rel="stylesheet" href="/main.css" type="text/css" />
960gs.sass, reset.sass, main.sass is in views subdirectory, but only main.sass renders whe I run application.
Thanks for help.
Greetings
Z.
I'm sure I've given this answer before but couldn't find it…
My advice, having used the route you've tried above in the past, is to precompile assets such as these. I use Guard along with Guard-SASS with a line like:
guard 'sass', :input => 'app/views/stylesheets', :output => 'app/public/css', :style => "compressed"
and then use normal stylesheet links in the layout. It's easier to manage and faster.

embed multiple kid template files into a main one

In the main kid template file, I want it to have only div tags, each of which do only call a rendered kid file and paste content inside it. (like "include" function in php) but I don't know how to do this. Does someone have any ideas about it?
If you swap to genshi instead of the default kid you can do this with an include tag:
<xi:include href="menu.html" />
Swapping to genshi is fairly easy, I think its a matter of confuration only. The templates tags works otherwise the same. You should rename the extensions from .kid to .html though.
You can first define a "base_layout.kid" template:
<html xmlns:py="http://purl.org/kid/ns#">
<head>
<title>App Name - ${page_title}</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
${page_specific_css()}
</head>
<body>
<h1>Now viewing: ${page_title} of App Name</h1>
<content>Default content</content>
<div class="footer">Page Footer Text</div>
</body>
</html>
Then replace the "content" tag in "page.kid" with whatever data you want:
<html py:layout="'base_layout.kid'"
xmlns:py="http://purl.org/kid/ns#">
<link py:def="page_specific_css()"
href="layout.css" type="text/css" rel="stylesheet" />
<div py:match="item.tag == 'content'">
<ul>
<li>Content Item 1</li>
<li>Content Item 2</li>
<li>Content Item 3</li>
</ul>
</div>
</html>
You can check whether you get the correct html in python shell (after removing all the identifiers used):
>>> import kid
>>> t = kid.Template("page.kid")
>>> print t.serialize()

I can't find the typo in my syntaxhighlighter code. Can you spot it?

On my Blogger blog I have the following code exactly, but it doesn't work. Can anyone tell me what is wrong?
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js'/>
Here is how I call the PRE tag:
<pre class="brush: powershell">
#echo off
dir C:\temp
</pre>
Aren't you referring to SyntaxHighlighter before you include the script that defines it?
It looks like you need to put the <script src=...> lines at the top.