I've asked a few questions as of recent on this topic, and whether answered or not, I've been learning a fair amount about the tech involved. In any case;
I've been reworking a templating engine I had created previously, moving the parsing engine from being regular expression driven, to node (XML) driven. For comparison's sake here are the two:
Regex driven:
<body>
<!-- {{ region:myRegion }} -->
<div class="myClass">
<h1>{{ var:myHeading format:trim[200] }}</h1>
</div>
<!-- {{ region:myRegion }} -->
</body>
Node driven:
<body>
<zuq:region name="myRegion">
<div class="myClass">
<h1>
<zuq:data name="myHeading">
<zuq:format type="trim">
<zuq:param name="length" value="200" />
</zuq:format>
</zuq:data>
</h1>
</div>
</zuq:region>
</body>
Now while much more verbose, I figure the node driven approach here is preferred, giving much more flexibility for situations like formatting, where multiple format nodes can be inserted and processed in order of appearance.
Anyways, my problem lies in attributes. With the regex driven approach, if I want to have a template generated value in an attribute, it's as simple as:
Link
I'm trying to figure out how to incorporate a clean implementation of generating attribute values, while keeping the documents well formed. Something to consider is again, the formatting options, among other possible elements that the parser would read as modifiers to data.
Any ideas?
<a>
<zug:attr name="href">page.php?param=<zug:data name="myParam" /></zug:attr>
Link
</a>
Related
According to the documentation of F6 we can use the accordion container with something else than a ul tag. Or, I can't get it to work with an article tag.
The problem seems to be caused by the fact that .accordion-title isn't the direct child of .accordion-item. Unfortunately, in my use case, I need to wrap the a tag with the .accordion-title class inside an heading tag.
Does anyone would know how to solve that issue?
Thanks,
Here's an example of my use case :
<div class="accordion" enter code here
data-multi-expand="true"
data-allow-all-closed="true"
data-accordion>
<article class="accordion-item" data-accordion-item>
<header>
<h3>
Group Name
</h3>
</header>
<div class="accordion-content" data-tab-content>
<p>Hello World</p>
</div>
</article>
</div>
As you figured out, it doesn't have to do with the <article> tag but rather that a direct child click trigger is needed.
Example of it working with <article>
https://codepen.io/rafibomb/pen/pGKZYg
Without JS modification, it may not work the way you want it to.
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.
How would I insert my navigation into my html file as following. (sort of wordpress style)
home.html:
<html>
<body>
(I dont know what to put here for nav)
<div main>
</div>
</body>
<html>
nav.html
<nav>
<img scr="logo.png">
<ul>
<li>home</li>
</ul>
</nav>
And then how do I implement the template on the with plates?
Note:
I'm using flatiron,plates,director
Plates doesn't support a way to inject html into another string.
It's used to bind DATA to your markup.
The easiest solution would be using files which can be concatenated in a sequence to form the page you want.
Example:
header.html
disclaimer.html
page1.html
page2.html
page3.html
footer.html
After choosing which components you need (let's say header.html, page2.html and footer.html) you can use plates to bind your data to the page markup and send everything back to the client.
Plates does support partials, see https://github.com/flatiron/plates#partials.
And here's another method (probably from before Plates had explicit support for partials):
https://stackoverflow.com/a/10076623/263447
I have html that looks like so:
<ul style="list-style-type: square;">
<br />
<li margin-left="80px">
<br />first line
<br />
<br />second line
</li>
<br />
<li margin-left="80px">
<br />text line 1
</li>
<br />
<li margin-left="80px">
<br />text line 2
</li>
<br />
</ul>
I want to match contents of the ul, but I don't want to match contents of the li elements
The end goal is to get rid of the <br /> tags that are directly under the <ul></ul> and not under the <li></li>
Note:For clarity of the example I did formate the above html, but in my real world scenario it comes as a single giant string without any /r/n's
here:
<p margin-left="40px"><br /> <b>[What is the nature of the Services?]</b></p><br /><p><br /> [What are the overarching goals, objectives and outcomes you want to achieve?]</p><br /><p margin-left="80px"><br /> <b><i><u>[How should the Services be delivered?]</u></i></b></p><br /><ul style="list-style-type: square;"><br /> <li margin-left="80px"><br /> gfhsdfsdf<br /><br /> some line here</li><br /> <li margin-left="80px"><br /> sfdsfsdfsdf</li><br /> <li margin-left="80px"><br /> sdfsdfsdf</li><br /></ul><br /><p><br /> [Is the appointment of this Supplier exclusive?]</p><br /><p><br /> [Refer to any proposal prepared by the Supplier if this helps describes any aspects of the Service]</p><br />
Anyway the first thing in my mind was to
use this to extract the contents of the <ul>
<ul[^>]*>(.*)</ul>
and then maybe do a subsequent one to select all the li
<li[^>]*>.*</li>
and then somehow get rid of anything else that's left over
but that's kind of lame and then again
<li[^>]*>.*</li>
matches whole bunch of li's
this entrie string gets captured:
<li margin-left="80px"><br />\t\tgfhsdfsdf<br /><br />\t\tsome line here</li><br />\t<li margin-left="80px"><br />\t\tsfdsfsdfsdf</li><br />\t<li margin-left="80px"><br />\t\tsdfsdfsdf</li>
i know it's because dot is greedy, but not sure how to avoid it
something like [^</li>]* wouldn't work cuz it treats it like list of characters not a string
any help much appreciated
So I have 2 problems
1) i don't like the way I'm approaching this - better ideas needed (I'm considering using set operations of linq to xml to achieve this) - still hope to do this with regex, but if anyone knows exactly how to do this then please share
2) how do I capture separate groups of lis instead of capturing entire first opening <li> and last closing </li>?
I think you should go look at this...
RegEx match open tags except XHTML self-contained tags
Then recognize that parsing html with a regex is not quite that easy. personally I would load the html in to an html dom object then crawl the document... you might look at this project for some help.
http://htmlagilitypack.codeplex.com/
Since you don't say which regex flavor you're using, here's a JavaScript-compatible regex to match a <br /> that's inside a <ul> element but not inside a <li> element:
<br\s*/>(?=[^<]*(?:<(?!/?ul\b)[^<]*)*</ul>)(?![^<]*(?:<(?!/?li\b)[^<]*)*</li>)
Breaking that down,
<br\s*/> matches the BR tag, of course.
(?=[^<]*(?:<(?!/?ul\b)[^<]*)*</ul>) looks ahead for the next occurrence of </ul>, but only if it doesn't encounter a <ul> tag first.
(?![^<]*(?:<(?!/?li\b)[^<]*)*</li>) does the same thing with </li> and <li> tags, but this time negating the result.
Being JS compatible, this should work in Dreamweaver as well as in editors with solid regex support, like EditPad and TextMate. It's also compatible with most Perl-derived flavors (Python, .NET, Java, etc.), though some syntactic tweaking will probably be needed.
currently I'm using a JSP templating system which uses this example's lib ("/WEB-INF/tlds/template.tld").
I'm not even sure how it's called.
Anyway it seems like it's not too developed, it makes problems with form POST method, I have no idea who made it (just found it) and I've heard about Apache's Struts & Tiles.
I'm not even sure that Struts does what I'm talking about.
Down to business:
A page in my site has this JSP content, that utilizes the template:
<%# taglib uri="/WEB-INF/tlds/template.tld" prefix="template"%>
<template:insert template="/WEB-INF/main_template_page/template.jsp">
<template:put name="title" content="Title here" direct="true" />
<template:put name="content" content="/content.jsp" />
</template:insert>
The template is:
<%# taglib uri='/WEB-INF/tlds/template.tld' prefix='template'%>
<html>
<head>
<title>
<template:get name='title' />
</title>
<link type="text/css" rel="stylesheet" href="/styles.css" />
</head>
<body>
<div id="div_header">
<div class="content">
<%#include file='header.html'%>
</div>
</div>
<div id="div_content">
<template:get name='content' />
</div>
<div id="div_footer">
<%#include file='footer.html'%>
</div>
</body>
</html>
So as you see each page gives the template some parameters and it all works nice.
Is there a "well-established" system that does that? I'm sure there is; What its name? Which would you use for pretty much simple pages, but, has to support dynamic ones with code (JSP).
Quaternion is right that Tiles and SiteMesh are both pretty popular decoration frameworks. You can also use JSP .tag files to achieve this, as shown in this answer.
I've never used SiteMesh, but I've worked on several projects at work that use Tiles and I don't care for it -- to me it's just an extra layer that doesn't add enough bang-for-my-buck. Tag files have the added bonus of being a built-in part of JSP.
Apache Tiles and Sitemesh are the two most popular systems. Tiles is more in keeping with what you demonstrated.