My Yii application has a particular section called 'Edit Profile' . It's a pretty data heavy section in the way a lot of data is pulled from db for this one .
However the problem is that I have tab pagination in this section . Because only this section uses tabs on the website I did not include the related CSS/Javascript files in the main layout header .These have been referenced in the view file itself . Because of this the tabs takes time to show up and the tab titles appear as a list first (for a second or two) and then get distributed into tabs with the correct UI . This is of course unacceptable behaviour . Is there any way to selectively include related js/css files into the header tag for this particular view or should I include it in main layhout file even though it won't be used in a lot of other places on the website thus possibly slowing down other pages .
Just specify the position for the file.
In your view where you are including the js or css :
// for js
Yii::app()->clientScript->registerScriptFile('url_of_file',CClientScript::POS_HEAD);
// for css
Yii::app()->clientScript->registerCssFile('url_of_file');
Recommended documentation: registerScriptFile() , and registerCssFile()
You can create your own layout in the layouts folder , where u can include all the required jquery scripts and css. U can then call your layout in the controller.
public function actionDoSomething(){
$this->layout = 'mylayout';
$this->render('myview');
}
Related
We are using template editor in AEM 6.2 to create templates , and we have followed below steps to create a template-
1.Created page template as done in we-retail site.
2.Create empty page template using above page template.
3.Created template using empty page template.
Did following modifications on top of we retail page component as per our requirement-
As we need to have header and footer as full width parsys i.e 1340 width and body as 940 width-
.site-wrapper {
width:1340px;
}
.container {
width:940px;
}
So we did following modifications in /apps//components/structure/page/partials/body.html -
<div class="site-wrapper">
<div data-sly-resource="${ # path='header', resourceType='/apps/<projectname>/components/structure/header'}"
data-sly-unwrap>
</div>
</div>
<div class="container"
data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer">
<sly data-sly-repeat="${templatedContainer.structureResources}"
data-sly-resource="${item.path # resourceType=item.resourceType, decorationTagName='div'}" />
</div>
<div class="site-wrapper">
<div data-sly-resource="${ # path='footer', resourceType='/apps/<projectname>/components/structure/footer'}" data-sly-unwrap></div>
</div>
Also we have few more components which will take full width on the page so i have added responsivegrid component under full width div.
But i am not able to edit the header and footer component in template as they are not under templateresource.
Also even if i add design dialog under header and footer i am not able to edit those components directly on the page in design mode even if they are unlocked.
Please let me know if i am doing anything wrong here or we cant customize body.html as in we-retail site.
I thought of using different parsys for full width and for body.
And i don't want to control using css as i have multiple components which are full width.
Regards
Ankur
First, the objective of the Template Editor is precisely to not do any static includes like what you edited on your page component, because the Template Editor now provides a UI to include such components on the page level, allowing to define which included components can be edited or not by authors on the resultant pages. That way, if some page suddenly requires another header or footer, this can be edited through the UI of the Template Editor and doesn't require a development cycle.
So I'd recommend to remove your edits of the body.html, and rather make sure that your Header and Footer components are editable: meaning that the cq:Component node must have a title (jcr:title), a group (componentGroup), as well as an cq:editConfig, a classic dialog or a classic design dialog (in 6.2 and before, the classic dialogs were still needed to make a component editable, but this won't be the case anymore for future versions, where touch dialogs can be provided instead).
Once you're there, here are detailed instructions for setting up your site with the Template Editor UI in AEM 6.2:
Create the template
For now, we'll create the template in the global folder, later however you'll have to make sure that the chosen folder is specific to your site.
Go to the Template Editor (in AEM's global nav, select General > Templates).
Pick the global folder (or your site-specific folder).
Hit the "Create" button and choose "HTML5 Page", hit "Next" and give your template a name, like "Simple Page", then hit "Create" and choose "Open".
Add Client Libraries
Let's configure the page component to load the CSS and JS client libraries that are needed for our site.
In "Structure" mode of the Template Editor, select the second icon from the top-left ("Page Information") and choose "Page Policy". A policy is basically a reusable design configuration that can be shared and reused across multiple templates if desired. What we'll do is duplicate that policy and then edit it to instruct the page to load additional client libraries.
In the "Policy" dialog, duplicate the "Default Page" policy with the double-arrow icon and rename it for instance to " Config". Then click the checkmark at the top-right of the dialog to save.
Again in the top-left ("Page Information") menu, choose this time "Page Design" to edit the actual design configuration.
Edit the list to include all client libraries required by the components that you plan to use. If the template author isn't a developer, this is typically where the developer must instruct the template author what clientlibs must be loaded on the pages of a specific site. In case you have We.Retail installed, you can add a field and paste we-retail.base into it. Save by clicking the top-right checkmark.
Add Structure Components
Structure components are those that were usually hard-coded through static includes on the page components. We typically don't want the structure components to be editable by our page authors later on, unless explicitly defined.
On the page, select the empty parsys and in its toolbar, choose the 1st icon ("Policy") to edit policy.
In the "Policy" dialog, duplicate the "Default Layout Container" policy and rename it for instance to "Template Config". This will be the name of the configuration that tells what components are available in the template for that page-level layout container. Save.
As the page reloads, select the empty parsys again, and this time choose the 2nd icon ("Design") to edit the design configuration.
In the design dialog that opens, select all the components that you want to have available in the template editor (for example, in addition to the few General components already selected, also select the "We.Retail" and the "We.Retail.Structure" component groups at the bottom of the list, or the group name you assigned to your components with the componentGroup property). Make sure to have also the "Layout Container" component selected, as this is the paragraph system (aka parsys) that we'll require later to make the page editable. Save.
You should now see your components showing up in the left "Components" rail, which allows to drag & drop your header and footer components to the page (for We.Retail the header is named "We.Retail Page Header" and is at the very bottom of the component list, and it is similar for the footer).
Also drag a "Layout Container" component between your header and footer components, which is the actual parsys that we'll make editable for our page authors. So on your page, you should now at least have following components: your header (e.g. "We.Retail Page Header"), a "Layout Container", and your footer (e.g. "We.Retail Page Footer").
Make the template editable
We now have to specify which of the components added we want page authors to be able to edit.
Select the parsys placeholder that appears between the header and the footer, and click the last icon of the toolbar ("Unlock structure component").
Once this is done, the placeholder says "No allowed components for Layout Container", the reason is that this parsys has no policy yet assigned to define the list of allowed components for the page authors. Therefore, select this parsys placeholder again and from the toolbar select the second icon ("Policy").
To base our policy on the one previously edited, select the "Template Config", and the hit the duplicate icon and rename it to "Page Config". Save.
The list of allowed components now appear below the parsys placeholder, which looks good, except that we want to remove the components that we want available in for the template structure only. Therefore, let's select the placeholder once more and select the 3rd icon ("Design") from the toolbar.
In the design dialog, uncheck the structure-specific components and groups (for e.g. uncheck the "We.Retail.Structure" group). Save.
Use the template
That's it, we can now enable the template and use it on a site.
On the template admin (which should be still open in a previous browser tab), select your newly created template and hit "Enable" and confirm "Enable".
For pages to be able to be created from templates of the folder we used, one will need to put a cq:allowedTemplates property on a parent page (typically, this property will be set to the root page of the site). However, to create the very first root page, we'll initially just add that property to the /content node by using CRXDE Lite. So go to http://localhost:4502/crx/de/index.jsp#/content and on the root content node set cq:allowedTemplates multi-String property that equals to "/conf/global/settings/wcm/templates/.*" (or whatever folder you created your template in).
Save.
Back in AEM open the global menu and go to Sites and on the root folder, click "Create" and choose "Page".
Choose our "Simple Page" template, hit "Next", give the page a title, like "My Site" and click "Create" and "Open".
You should now see the page with the defined header and footer, but only the parsys in between that is editable. Also the desired components should show up in the left rail under the second "Components" tab.
Create a Template Type
In order to avoid having to repeat all these steps (mainly 1-18) each time one wants to create a new template, we can create a template type out of the template that we created.
In CRXDE Lite, go to the folder where you've created your template, like /conf/global/settings/wcm/templates and copy the template that should become a template type, like the simple-page node in our case.
Move to the template-types folder (e.g. /conf/global/settings/wcm/template-types in our case) and paste there the copied node.
Save.
Now, when creating a template in the global folder, one can choose the "Simple Page" as a starting point.
As you can see, the Template Editor introduces a very big change, not only technically, but also in the process: what required development steps can now be achieved through configuration. I'd therefore recommend to edit the page component only to adapt the technical HTML headers, but not to hard-code any visual items that should be displayed on the page, because surely enough in a few months/years the visual items will change and multiple variations of them will be required, for which you want to lighten the development need to allow faster changes.
Also helpful are following links:
https://docs.adobe.com/docs/en/aem/6-2/develop/templates/page-templates-editable.html
http://fr.slideshare.net/PatrickFauchre/empower-template-authors
https://github.com/Adobe-Marketing-Cloud/aem-sites-example-custom-template-type
If you will check the resources included in template using calls such as <div data-sly-resource="${ # path='footer', resourceType='/apps/<projectname>/components/structure/footer'}" data-sly-unwrap></div> tends to be problematic when it comes to editing, reason so far I have figured out it that if the nodes for the resources don't exist, these resources are not editable. Refer to an article around it here.
What we did was to create a scripts to create nodes on page load (EmbeddedComponent.js) -
"use strict";
/**
* Creates a component node with name, if node does not yet exist.
*/
use([], function () {
var newResourceName = this.name;
var newResourceType = this.type;
var resourceResolver = resource.getResourceResolver();
var newNodePath = resource.path + "/" + newResourceName;
var existingComponentResource = resourceResolver.getResource(newNodePath);
if (existingComponentResource == null) {
var properties = {
"jcr:primaryType": "nt:unstructured",
"sling:resourceType": newResourceType
};
resourceResolver.create(resource, newResourceName, properties);
resourceResolver.commit();
}
});
And in you HTML script you could do something like -
<div data-sly-use="${'Path to script/EmbeddedComponent.js' # name='header', type=resTypHeader}"
data-sly-resource="<header resource type>">
have you tried the data-sly-unwrap="${!wcmmode.edit}" on the header and footer include script?
I have a query regarding the data rendering of the different page at one place. As every page is build using many components and all the components data gets stored under jcr location of page ie. /jcr:content/par/{components list}. The data is properly rendering on this page.
Now I have a situation where I need to create a component to search the page(i.e unique product), if this product page is available in the repository, I need to render its data just under the search box. For this I am creating json which I will use to render the content after search found.
But if there is any other way i can include this component from the /par location of the page to just display the data as it is, rather than building json(of all the components data) and then reading it at the time of display.
I am wondering if we have any method to display all the components data by just including the /par/{components} on a page. This way I can speed up the development, and it looks faster way to display the content as well.
thanks in advance....
If you have static page, then you can go through list of search results (product resources) and include component, which renders product, for each of them. Like:
<c:forEach items="${productsList}" var="productPath">
<cq:include path="${productPath}" resourceType="/apps/you-project/components/product-component-name"/>
</c:forEach>
If you show results dynamically - then you can do ajax requests for product resources. Something like this:
var productHtml = CQ.shared.HTTP.get(productPath + ".html");
Or the same using JQuery. Then you can add html to your page.
However, with second approach you should add clientlibs from component /apps/you-project/components/product-component-name to search results page yourself, because they will not be loaded with ajax request.
I am trying to build a universal header file that I can include in each .html file on my site. My header contains several dropdown tabs, and one of the tabs is always highlighted (depending on which page the user is on). So I want to do something like a server side include for the header, but I also want to give it a variable so that it knows which tab to highlight, something like this:
<div class="topmenu">
<ul>
<someScript>
if (variable=="home") {
print "<li class='current'>";
} else {
print "<li>";
}
</someScript>
...
My server is IIS 7 and doesn't support PHP, and I don't want to rename all my files to *.asp so that I can use ASP. How could I go about this?
By the extension I guess you would use Classic ASP. Then something like this should work:
<!--#include file="header.asp"-->
You can put this in each file you want to have a header.
Of couse, you should create that "header.asp" page first ;)
For highligthing the tab of the page you're in, there're several methods.
IMHO, I suggest a clientside script to do that. JS or jQuery of course.
You could check the file name of the URL you are in and give the proper class to the tab so it will be highligthed.
Example ( jQuery needed ):
var currentPage = window.location.pathname.substring(url.lastIndexOf('/')+1);
if(currentPage == 'default.asp') $('li.homepage a').addClass('current');
This simple code retrives the file name and, by it, add a class to the corresponding element in your navigation.
Of course this is a conceptual script, you'd better adapt it to your page.
I have a website in which I finished with the basic layout, design, fonts, styles, css etc.
For almost whole of the website, the layout i.e the sidebar, the footer, the background etc. will remain the same. There are custom embedded fonts used as well.
Since this basic layout will remain the same all across the website, I wanted to ask how can I prevent downloading of this content (like side-bar, fonts, or javascript etc.) again for the user, so that the other pages after the start do not take as much time as the start page.
I am sure there would be some mechanism since most of the websites have header/footer/sidebar in common across the pages. My website is in plain html/css, and there's no backend being used. Any ideas?
Your images, fonts, css and other contents will most likely be cached by the client's browser on the first hit, so it will be downloaded just once.
For the html page itself, since you use static html content, the only way I can think of is using AJAX request.
You probably want to use includes. So on each page you'd have a header include, a footer include, a sidebar include and even an include containing links to your css/js files.
Simplest way to do this would be to change your pages to be .php pages and use php includes to pull in the header file, footer file etc.
You can static-site generator like Jekyll.
You may design a basic layout first.
Avoid inline and embedded CSS maximum and add a class (can assign to multiple) or id (can assign to single) to common selectors.
Make a master stylesheet like master.css and attach this to every page.
Hope this helps.
You can do this in two way. You say you don't have a backend, however the server where your website is hosted can be the backend.
Without any backend interaction:
If you really prefer not to use the backend at all, you can make this a single page website, with some javascript to switch the content you have in there. The idea is you have your website structure, and your default data available the way you normally have it right. But you also have the html for your other pages in hidden divs. Then when you want to switch to say the about link you use javascript to get the content from the hidden div with that content and you place that content in the main div.
<!--First lets use jquery thought it can use some other framework-->
<script src="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery"></script>
<script>
$('a[href=#myAboutPage]').on('click',function(){//Whenever link that points to #myAboutPage is clicked
var getHTMLFROM = document.getElementById('myAboutPageHiddenContent').innerHTML;
//And place it on main div
document.getElementById('mainDivContent').innerHTML = getHTMLFROM
});
</script>
If you wanted to use some ajax interactions:
The process would be the same with the exception that the getHTMLFROM content, would actually be an html file that you request from the server.
Both of this javascript oriented methods will work, but would NOT recommend if you want your information to be SEO friendly. With that said reuse an external piece of css, to minimize redownloading the styling of your interface every single time.
There are definitely many ways to do this. I am a fan of dynamic inclusion. Here is a link to a great tutorial which explains how to set it up for your own page very simply. Dynamic Inclusion Tutorial NOTE: Don't be afaid of PHP, or having to change your file extension to PHP. It won't change your coding experience at all. It will just enhance your abilities.
I also have used the Javascript feature to hide certain elements. Depending on the size of your website, it may be just as easy to reload your CSS and navigation elements. However, if you really don't want your menu and logo to blink momentarily while it is reloading, you can just hide/reveal elements very simply with a bit of JS.
Here is an example function from my website:
function toggleVisible(e){
var i = e.id;
if(e.className == 'collapsed')
{
e.className = 'expanded';
e.innerHTML = 'Hide'
var hiddenArray = document.getElementsByClassName('hidden' + i);
hiddenArray[0].setAttribute('class', 'expanded' + i);
}
else if (e.className == 'expanded')
{
e.className = 'collapsed';
e.innerHTML = 'Show More';
var expandedArray = document.getElementsByClassName('expanded' + i);
expandedArray[0].setAttribute('class', 'hidden' + i);
}
}
The above code will run when the following link is clicked:
ANYWEBSITE.com || <a onClick="toggleVisible(this)" id="4" class="collapsed">Show More</a> || View PDF
Also, another user mentioned caching. Caching appears to be unreliable. Check out the following links for more info:
AJAX cache
HTML5 Application cache
2009 article about browser caching from stackoverflow.com question
I'm sure this topic comes up all the time,
But I can't seem to fine a concise answer.
I've got a vertical menu bar that I want to reuse in webpages (>20).
The Menu Bar is coded in HTML and uses uses: UL, LI, A, <Div> tags, and CSS. We need this:
Reusable
Maintainable
Scalable
So we don't have to modify all pages every time we add a page.
We'd rather avoid a coding approach if possible. We could live with just one master file that we edit as needed. Since we're using CSS and <div>s, I don't think frames scale for us. What can we do?
Server side includes are the way to go if you don't want to use a programming language.
They take this form:
<!--#include virtual="menu.html" -->
and will be inserted in the page wherever you put that tag in your HTML. It requires server side parsing, so your web server must have server side includes enabled. You can try it out, and if it doesn't work, contact your server host to see if you can get them enabled. If it's Apache, there's a method of enabling them via .htaccess files as well.
In order to do this, you'll have to use some server side technology. For instance you could...
include them in php
put them in the master page in .net
put this in a partial or a layout page in rails
Some reading:
http://us.php.net/manual/en/function.include.php
http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
Another solution would be to create all this using Javascript, but please don't do it like that :)
html:
<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>
hack.js:
function createMenu(){
$("#mymenu").html("all the html of your menu");
}
Without any server side script or Javascript you can use object or iframe tags.
http://www.w3schools.com/tags/tag_object.asp
http://www.w3schools.com/tags/tag_iframe.asp
The only thing to care is to indicate target="parent" in links.
Hope it helps
Using a w3 script..
index.html
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="header.html"></div>
<div w3-include-html="nav.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
header.html
<h1>Title</h1>
nav.html
<h2>Your nav</h2>
See also: http://www.w3schools.com/howto/howto_html_include.asp
And don't forget to test this code on your localhost.
I've done this two separate ways - one using server side (PHP) and one using Javascript includes (for demos that need to be able to run without any internet connection or server capabilities).
For PHP includes your pages will have to end with .php rather than .htm or .html, and these are very ideal to replace your header, footer, navigation, etc. Anything that is repeated on multiple pages.
Basically you would create your normal code then copy and paste the code you want to break out - in this example, your navigation - and save it in another file called (for example) inc_navigation.htm (this page can be called .htm).
Then in your actual pages you'd use the following code:
<?php include('inc_navigation.htm') ?>
That would insert your navigation at that point, if you had a change to make you'd make it to the .htm file and it would propagate to any page with that included.
For javascript includes you will have to include the following line at the top of every document where you want to include your navigation:
<script type="text/javascript" src="includes.js"></script>
Then you'll create a document called includes.js.
At the top of this document you'll declare your navigation variable:
var navigation = new Array(); // This is for the navigation.
Then a little ways down in that same document you need to actually outline your navigation code (the line numbers in the square brackets are crucial - keep them in order and start with 0 - you cannot have line breaks in this code so every line of code has to be a new line):
// ==================== Navigation ==================== //
navigation[0] = '<div id="tab_navigation">';
navigation[1] = '<ul id="dropline">';
navigation[2] = '<li><b>Home</b></li>';
navigation[3] = '<li><b>About Us</b></li>';
navigation[4] = '</ul>';
navigation[5] = '</div><!-- Close TAB NAVIGATION -->';
Then a little ways after that you'll actually insert the javascript that will put that code into your page (it doesn't actually put it there but rather makes it accessible in the page without actually altering the code of the .htm page - so if you view source you'll see the reference to the code not the code itself).
function show(i)
{
for (x in i)
{
document.write(i[x]+'\n')
}
}
Finally - in your .htm document, say for your index.htm page, you'll replace your navigation code (that you put in the above block called navigation) with this:
<script type="text/javascript">show(navigation);</script>
Where that name after SHOW and in the parenthesis is the name of your variable (declared earlier).
I have sites showing both methods in use if you'd like to see them just send me a message.
I was facing the same thing. Then, I created a new file for storing the html of the navigation bar.
I created a file navbar.html which had all my navigation bar code.
Then, in your main html file where you want navigation bar, just include this file by using jquery.
$(document).ready(function() {
$('#navigation').load('navbar.html');
});
Then at the place where you want navigation bar, just add this line:
<div id="navigation"></div>
As a modern answer to a six year old question: Web Components are specifically reusable HTML components, and Polymer is possibly the most popular implementation of it at the moment. Currently virtually no browser has native support for Web Components, so at the very least a Javascript polyfill is required.
If you would use PHP, all you have to do is use the include command, no coding beyond this one command.
Also, check out server side includes
So far one of the best solutions I have found is to model the menus after the Son of Suckerfish XHTML/CSS solution that is pretty well documented on the internet now combined with some logic on the server to render the unordered list. By using unordered lists you have a couple different options on how to output the results, but as long as the menu has some basic hierarchy you can generate it. Then for the actual page all you need to do is include a reference to the menu generating function.
I was searching for a way to write a reusable navigation menu that toggled(show/hide) when clicking a button. I want to share a solution that worked for me in case anyone else is looking to do the same. This solution uses jQuery, html, and css.
Add this line of code to your head tag in your main index.html file:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Add div for your nav in body tag:
<div id="mySidenav" class="sidenav"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#mySidenav").load("nav.html").toggle().width("400pt");
});
});
</script>
Create a html file that will be where your navigation menu resides. My file is called nav.html and inside the file the contents look like this:
have you found your one true musubi?`
item2
item3