I want to embed a variable amount of text files (AngularJs templates) at a specific point of a given text file (./WEB-INF/app.html) but except modifying the file saving it as another file (./index.html?.
The files I want to embed all have file names ending with *.ng.html and are all in a subfolder of ./assets/templates/.
Also I want to write text before and after the embed file (To make AngularJS recognise that they are templates). This text should consist of both static text and the file names relative to the working directory.
This is a possible structure of a working directory:
(index.html) (generated after building)
--assets
--templates
--general
about.ng.html
contact.ng.html
home.ng.html
--users
userlist.ng.html
--WEB-INF
app.html
Can this be done using Ant? If not, how could I do this at build-time in Eclipse?
To further illustrate my intentions, here are examples:
./WEB-INF/app.html
<!doctype html>
<html><head>
#INSERTION_POINT#
</head><body></body></html>
./assets/templates/general/about.ng.html
This is a test.
./assets/templates/general/contact.ng.html
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
./assets/templates/general/home.ng.html
Welcome.<br>
Click a link to explore.
./assets/templates/users/userlist.ng.html
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
After building, I want ./index.html to look like:
<!doctype html>
<html><head>
<script type="text/ng-template" id="/assets/templates/general/about.ng.html">
This is a test.
</script>
<script type="text/ng-template" id="/assets/templates/general/contact.ng.html">
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
</script>
<script type="text/ng-template" id="/assets/templates/general/home.ng.html">
Welcome.<br>
Click a link to explore.
</script>
<script type="text/ng-template" id="/assets/templates/users/userlist.ng.html">
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
</script>
</head><body></body></html>
I figured out that I can get a list of the files I want to embed using:
<fileset dir="war/assets/templates">
<include name="**/*.ng.html"/>
</fileset>
When I have the final string, I could replace my placeholder and save the output to a new file probably like this:
<copy file="WEB-INF/app.html" tofile="index.html">
<filterset>
<filter token="INSERTION_POINT" value="??foo??"/>
</filterset>
</copy>
But how do I get the string I want to have to pass as a value?
definitely not what you're looking for... sorry... but might look into a Javascript oriented build tool (Grunt) and integrate that with eclipse (or even run it from ant if you're trying to keep your builds the same in java and javascript.)
Though this may not be exactly what you're looking for, you're guaranteed lots of community support if you stick to the standards.
Related
Created a simple search component in AEM and added following code in its JSP.
Also added autocomplete plugin and jquery plyugin file in clientlib node. But getting error "autocomplete is not a function" every time I try to run the page with this component. Is it not compatible to be used with AEM?
Using AEM 6.0 SP2
<% #include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>
<head>
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Boostrap",
"C",
"C++",
];
$( "#searchInput" ).autocomplete({
source: availableTutorials
});
});
</script>
</head>
<body>
<div class="formDiv">
<form id="form" >
<input type="text" id="searchInput" name="searchbox">
<div id="searchResults"/>
</form>
</div>
</body>
</html>
I recommend understanding how browsers parse HTML documents. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#HTML_Parser is an introductory resource.
You have a JS script tag inside the head of your document. (this is immediate parse & execute)
there is a cq:includeClientLib outside of the document. I don't believe HTML5 behavior defines how this should behave.
no jQuery document onLoad is defined, so the browser attempts to run JavaScript before any DOM has been built.
I recommend:
Try moving the cq:includeClientLib inside the head.
Use the HTML5 doctype <!doctype html>. This should "kick" browsers into a consistent parsing mode (especially avoiding IE's myriad of quirks modes).
Move your script block to just inside the end of by body. Even better, wrap the JS with an onload handler to cause the JS to run AFTER the HTML has been parsed & the DOM has been built.
I got the solution. It was not binding the jquery-ui plugin. I added dependency of "cq:includeClientLib" for plugin folder to the js file I was using for autocomplete. It is working like a charm now.
I've followed below mentioned Youtube link for creation of Personalization . Once I've created the demo page in geometrixx site and put the content, I don't see the option to target the content on the right click of the content. Please let me know how can I do that?
https://www.youtube.com/watch?v=HWXMAQcRmEU
Just FYI - I am AEM 6.1
Also, I have followed the below mentioned Adobe documentation. In the teaser creation section, they create a new page using the "Teaser page template" but I don't see that template in the local. I can see the "Experience template". Let me know how can I've this template.
https://docs.adobe.com/docs/en/aem/6-1/author/personalization/campaigns/teasers-and-strategies.html
As you mentioned you are using AEM6.1, I am making the assumption that you are using Sightly markup (not jsp) and also TouchUI interface rather than ClassicUI. If not...you should be!! :)
In your head include data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" to pick up your target cloud service configuration.
inside the top of your body include data-sly-resource="${ #path='clientcontext', resourceType='cq/personalization/components/clientcontext'}" to add Targeting mode to the client context menu
and before your closing body tag include data-sly-resource="${ #path='cloudservices', resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" to close your cloud services config
<html lang="en" data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">>
<head data-sly-use.head="head.js"
data-sly-use.headlibRenderer="headlibs.html"
data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">
<!-- your other client libs/css etc -->
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" />
</head>
<body>
<sly data-sly-resource="${ #path='clientcontext', resourceType='cq/personalization/components/clientcontext'}" />
<!-- BODY CONTENTS -->
<sly data-sly-resource="${ #path='cloudservices', resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" />
</body>
</html>
Just an FYI....teasers are old terminology (pre 6.1) ...use the experience template.
I have a bunch of pages with the following structure:
<html>
<body>
<div id="summary">
</div>
<div id="promotions">
</div>
</body>
</html>
I want these pages to be accessible by both:
/items/one
/items/two
/items/three
And:
/promotional-offers/2014/february/one
/promotional-offers/2014/february/two
/promotional-offers/2014/february/three
/items/... should just open the page. /promotional-offers/2014/february/... should open the page /items/... and go to the anchor #promotions (scroll down to the appropriate div).
/items/one/#promotions
/items/two/#promotions
/items/three/#promotions
I'm not sure though how to set up rewrite rules in web.config to help search engines with indexing my pages and avoid having 'duplicate content'.
I would add a Canonical tag to completely avoid duplicate content, so It won't matter from which page you are showing the same content.
<!--url /promotional-offers/2014/february/one-->
<link rel="canonical" href="http://www.example.com/items/one" />
I'm trying to get this script to work on the test post. The goal is to have the links below the video jump to certain spots in the video. It works fine in the jsfiddle demo, but not on my post.
In my header.php, I load that script and the script it refers to:
<head>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript" src="http://wcportal.acbaldwin.info/js/vimeochapters.js"></script>
</head>
In the post that I want to use, I inserted this markup in text-only view:
<iframe width="540" height="304" frameborder="0" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" id="player_1">
</iframe>
<h2>Chapters</h2>
<ul class="chapterLinks">
<li><a class="seek" href="#" name="15">Seek to 15</a></li>
<li><a class="seek" href="#" name="30">Seek to 30</a></li>
<li><a class="seek" href="#" name="60">Seek to 60</a></li>
</ul>
Here's the test page
I'm sure I'm calling something incorrectly, but I don't know where. I'm not sure I saved the .js file correctly or if there need to be additional tags within the .js file.
I know there are more optimized and wordpress friendly ways to integrate JS, but I just need quick, dirty, and functioning for a demo. Thanks for any help!
Got the solution here from a redditor:
http://www.reddit.com/r/webdev/comments/1dn0j6/im_having_a_hard_time_getting_javascript_to_work/c9rwy85
Turns out the script needed to be in the footer. (Either that or I had a lucky coincidence while fixing an ajax issue!)
It looks like you are missing an ending } on the vimeofunction(); in the vimeochapters.js file.
I'm touching an old WebForms project but I'm long gone from it and I'm now to used to MVC. I'm trying to refractor the project and come up with a simple issue that is making me crazy...
What would be the best way to include an .aspx file within another?
I don't want to end up having a lot of Master Files just for this, all I'm after is something like #Html.RenderPartial("MyFileName") kind'a thingy or
it's that hard to include a file in some existing files?
Use UserControl Tutorial on UserControl. They are files with .ascx extension and you can include them in your pages
//UserControl1.ascx
<% # Control Language="C#" ClassName="UserControl1" %>
<div>
My Custom Control: I can use any Server controls, html tags etc
</div>
Include it in your .aspx page
<%# Page Language="C#" %>
<%# Register TagPrefix="uc" TagName="MyCustomControl" Src="~/Controls/UserControl1.ascx" %>
<html>
<body>
<form runat="server">
<uc:MyCustomControl id="MyPartialView"
runat="server" />
</form>
</body>