I'm building a photography site. The user can click on links to various photo album components, e.g. an album of black and white portraits, an album of black and white architecture, etc.
The displayed contents (i.e., image file paths and corresponding image captions) for each album are detailed in a json file that is imported at the top of the album component, e.g. import {images} from './albums/bwportraits.js';, import {images} from './album/bwarchitecture.js';, etc.
Apart from the album-specific imports, the rest of each album component is identical. I would like a generic <Album /> component but be able to pass the json file to import as a prop, i.e. <Album album = "bwportraits" />, <Album album = "bwarchitecture" /> and the import within the <Album /> to be something equivalent to (the non-valid) import {images} from './albums/{album}';.
That is, I would like to dynamically specify which file to import. This does not appear possible - or, at least, I do not know how to do this.
It would, of course, be possible to import every album json file into the <Album /> component; they are reasonably small and the performance hit would be negligible. But this feels a little unclean to me. Is there a 'cleaner' workaround that anyone can suggest?
Related
I have a question about hyperlinks within pdf documents created with itext. Currently, using the following code written in java, I am able to successfully create links. However, when I hover over the link, the link text is displayed. The client does not want the link text to appear upon hover-over. How can I either remove the hover-over, or give it alternate text to display (e.g. "Course Info")? I am using itext version 5.5.9. I have looked at "iText in Action" chapter 7 but was not able to find what I needed. Is there a better way to create the links? Any help and examples will be appreciated. Thanks.
package edu.ucsd.act.academic.studente2t.util;
import com.itextpdf.text.Rectangle;
import com.itextpdf.text.pdf.PdfAction;
import com.itextpdf.text.pdf.PdfAnnotation;
import com.itextpdf.text.pdf.PdfBorderArray;
import com.itextpdf.text.pdf.PdfContentByte;
import com.itextpdf.text.pdf.PdfPCell;
import com.itextpdf.text.pdf.PdfPCellEvent;
import com.itextpdf.text.pdf.PdfWriter;
class LinkInCellEvent implements PdfPCellEvent
{
protected String url;
public LinkInCellEvent(String url)
{
this.url = url;
}
public void cellLayout(PdfPCell cell, Rectangle position,
PdfContentByte[] canvases)
{
PdfWriter writer = canvases[0].getPdfWriter();
PdfAction action = new PdfAction(url);
PdfAnnotation link = PdfAnnotation.createLink(writer, position,
PdfAnnotation.HIGHLIGHT_INVERT, action);
PdfBorderArray border = new PdfBorderArray(0, 0, 0);
link.setBorder(border);
writer.addAnnotation(link);
}
}
This is not an iText problem. It's inherent to PDF. The PDF specification (ISO-32000-1) doesn't say anything about the way viewers should present tool tips for link annotations.
Your client (who probably should also be our client), may be confused by the following concepts:
Additional actions
The only occurrence of the word "tool tip" is in a NOTE when the E (enter) and X (exit) event are described in the section about additional actions. One can use additional actions, for instance on a widget annotation, to have a custom tool tip appear / disappear when someone hovers over a widget annotation.
When you study the PDF standard, you will see that there are several instances where you can define additional action (/AA), but link annotations aren't one of them.
Alternative field name
There's also the /TU entry (formerly known as the user name entry), which is (I quote the spec) an alternative field name that shall be used in place of the actual field name wherever the field shall be identified in the user interface (such as in error or status messages referring to the field). This text is also useful when extracting the document’s contents in support of accessibility to users with disabilities or for other purposes. The value of the /TU entry is often used by viewers as a tool tip, but as you can tell from the description, the /TU entry is specific for fields, not for annotations. It can only be used in a field dictionary, not in an annotation dictionary.
Conclusion:
Whatever is shown when someone hovers over a link annotation is not described in the specification. Every vendor of a PDF viewer may decide what to show (if anything) when a user hovers over a link annotation. There is no way to add something to the PDF that can force the viewer to show something else (or nothing).
We have a requirement wherein a section of a page will be part authorable and part dynamic. What I mean by this is "You have 6 visits left out of 16." The 6 and 16 in the sentence are coming from a REST service call but the text "You have...visits left out of.." has to be authorable through dialog. Also, we are using AEM 6.
Thanks in advance
Maybe this solution will help others looking for simple placeholder text for their dialog textfields (OP not so much). Use an emptyText attribute...
<dialogText fieldLabel="AEM CLassic UI Text" jcr:primaryType="cq:Widget"
name="./nameOfText" emptyText="THIS IS THE PLACEHOLDER" xtype="textfield"/>
Perhaps you can start by extending foundation/components/text, where the user would be expected to enter a valid formatable string (i.e. "You have %d visits left out of %d").
In your component you would be implementing text.jsp therefore overriding the default behavior of foundation/components/text, in which you can do something like
<cq:text property="text" escapeXml="true"
placeholder="<%= Placeholder.getDefaultPlaceholder(slingRequest, component, null)%>"
tagName="span"
tagClass="myformatedmessage" />
You use tagName and tagClass which will wind up putting the formattable text in a <span class="myformatedmessage">...</span>. Then use jQuery to find it and populate the format placeholders after getting the data via ajax. All that jQuery code you can probably put into a clientlib folder within the same component you extended.
Based on your description, I think you are looking for replacement or substitution instead of placeholders.
"placeholder" generally refers to display text inside a form input that is displayed until the user enters data in the field (such as hint data).
You generally have 3 options for replacing parts of the data:
Server-side (prevents page from being cacheable in dispatcher). Requires parsing authored content & replace some kind of tags with desired REST data, such as "You have ${x} visits left out of ${y} total". Other ways of "tagging" substitution data could look like "You have %x% visits left out of %y%"
client-side JavaScript DOM manipulation once REST data returns. ie $el.html(newDomContentString)
client-side JavaScript templates (handlebars, dust, etc). Takes more initial setup in JS, but generally scales better.
I know this has been asked before, but I seem to be going around in circles
Where in the magento file structure is the HTML file that displays amongst other things Anashrias Sandals(as well as Magentos end of summer sale etc...)
Ive installed the sample application to Magento CE V1.7.0.2
I can see the definition in Magento/Admin under CMS->Pages->Home Page->2 Columns with Left Bar, but Ive wondered all through the file system. The PHTML specifies the familiar
echo $this->getChildHtml('content')
But I cant seem to find anything that 'content' could resolve to that display Anashrias graceful feet and sandals
Content.phtml simply states
getPageContent(); ?>
Arghhhhhhh
Even turning debugging on puts dashed red lines around every block EXCEPT the content page
Sadly those wonderfully manicured toes must go
...but how
I was going to just comment, but to explain thoroughly I need more space ;)
To answer your comment directly, the content you see isn't necessarily in a file somewhere, the "content" for CMS pages are within your database. By changing the content field on your CMS Page (Magento Admin -> CMS -> Pages -> select a page from the list), you can change the center content for that page. Magento has many different page "types" (Each Parent of the tags in xml (explained later) is a layout handle signifying a page type), common examples are cms, category, product, checkout, cart, customer account, etc.
So, when you see $this->getChildHtml('content');, what you see is a call to the system to pull the child block named "content" from the XML. This changes depending on what page you are on, as dictated by the XML and Magento Core Code.
Layout Files
Lets take a look at the source of where the name "content" comes from. Our current working directory is /app/design/frontend/base/default/layout/. In this folder you will see a list of .xml files, these are the files that dictate how a page is put together. The block named "content" is originally defined in page.xml at around line 91:
<block type="core/text_list" name="content" as="content" translate="label">
<label>Main Content Area</label>
</block>
Also, note that this section is "nested" in the <default></default> tags. Those tags are the layout handles I was talking about, and this shows that all pages should be loaded with this xml layout by default. So here is our "content" block, in all its glory. It's actually just a namespace. The other layout pages will each load what they need from within the content block.
Now, let's look at another relevant layout file, cms.xml, around line 45:
<cms_page translate="label">
<label>CMS Pages (All)</label>
<reference name="content">
<block type="core/template" name="page_content_heading" template="cms/content_heading.phtml"/>
<block type="page/html_wrapper" name="cms.wrapper" translate="label">
<label>CMS Content Wrapper</label>
<action method="setElementClass"><value>std</value></action>
<block type="cms/page" name="cms_page"/>
</block>
</reference>
</cms_page>
Here, the <reference name="content"> denotes that everything nested here is a child of the "content" block. We don't need to call it like <block name="content"/> because we know it was already defined in page.xml.
From there, they have the "cms.wrapper" block, which basically just sets the div that "wraps" around the rest of the cms content. Nested within the wrapper is our <block type="cms/page" name="cms_page"/>. This is the bad boy that outsources our template job to the cms/page block class, located in app/code/core/Mage/cms/page.php. From there, basically the class will grab our CMS Page detail from the database and present it for all to see.
So, to answer your question in short, there is no file that has the content of the cms pages, it is pulled from the database and generated upon page request.
Block Tag Explained
Blocks have various attributes to it, I'll go over the basics.
type="core/template": The type denotes what kind of block class it is. This refers to the folders nested in the "app/code/core/Mage/" folder (typically, with exceptions*). Here we are referring to app/code/core/Mage/Core/Block/Template.php. The class you set here will be attached to your template. This is responsible for the prolific use of $this->doSomething() in your template files. Basically the template file is calling the class object to do the work. "core/template" is a good general use class to fall back on when adding custom template files, although in certain circumstances you may need to choose something else.
name="content": Here we are giving our block a name. It would be the identifying name of the block, and it's used to reference that block everywhere. The block name is needed for such things as xml references (<reference name="blockName">) and to call blocks from within parent phtml template files (<?php echo $this->getChildHtml('blockName'); ?>). Note that all templates which call it without an argument ($this->getChildHtml('');) means to call ALL child blocks without being explicitly called.
as="content": This signifies an alias identifier. You can use the alias the same as the name above.
template="page/html/callouts.phtml": This sets the template for the block. Magento will look for app/design/frontend/your_package/your_theme/template/page/html/callouts.phtml and use it as the block's layout.
*Exceptions: Third-party extensions typically use either app/code/community or app/code/local folders. If you have to overwrite a core class, copy the directory structure to the local folder and then make your edits to the local version of the class.The classes load in this order: /local/ > /community/ > /core/. If a local version is found it will use that first, followed by community and core, and takes the first class file found with that name.
local.xml
Let me introduce you to the proper way of modifying your layout. Here, create a file called local.xml in your directory app/design/frontend/your_package/your_theme/layout/. This one file will house all your layout updates, to prevent any conflicts that may arise if you start editing the base layouts. Also, it keeps all your custom changes in one tidy file.
We'll remove some things that the demo store puts in that isn't really needed. Your layout should look like this, to start:
<?xml version="1.0"?>
<layout version="0.1.0">
<!-- Layout Handle -->
<default>
<!-- Block Reference -->
<reference name="left">
<!-- Remove by Reference Name -->
<remove name="left.permanent.callout"/>
</reference>
<reference name="right">
<remove name="right.permanent.callout"/>
</reference>
</default>
</layout>
Not a whole lot there, but what this will do is remove the callout ads on the left and right side bars. You'll need to refresh your cache upon making layout xml changes.
Read another one of my answers for some more things you can do with local.xml:
Magento Sidebar Customization
Edit 08/16/13:
I glossed over the Magento Design Guide (I had it once, good resource to start off, but by the first time I read it I already had learned everything it had to offer). The fallback structure it speaks of is in regarding the code/template/layout/skin/translation files.
The packages to use are partially set by you, in System->Configuration->Design. If it is not found, then it falls back to default. If default doesn't have what it's looking for, it grabs the base file. Magento does this inherently by design.
Unfortunately I don't see any built in mechanism for falling back database content. The cms content is made up of 4 tables, cms_block, cms_block_store, cms_page and cms_page_store. cms_block_store and cms_page_store each only contain the page/block id and the store id. both ids are primary keys. This is to relate the page/block id to which store it belongs to.
I suppose you could try to instigate a fallback for cms content by having it search for that page with store id, and if not, fall back to the same page ID from a different store. Or perhaps make a "base" store record that is only used as the fallback store id. I wouldn't be sure exactly how to implement either one though.
For your reference these are the cms_block and cms_page tables:
cms_block Table
[block_id] //Internal Id, Auto Increments and is Primary Key
[title] //Block Title as User Defined
[identifier] //Block Identifier, also User Defined
[content] //Block Content Stored Here
[creation_time] //Date-Time the Block was Created (ex. 2013-07-22 17:21:18)
[update_time] //Date-Time the Block was Last Updated
[is_active] //Show(1) or Hide(0) Block.
cms_page Table
[page_id] //Internal Id, Auto Increment, Primary Key
[title] //Page Title
[root_template] //Template Layout (one_column, two_columns_left, etc)
[meta_keywords] //Meta Keywords
[meta_description] //Meta Description
[identifier] //User Defined Page Identifier
[content_heading] //Content Heading to be Displayed
[content] //Page Content
[creation_time] //Date-Time Page Created
[update_time] //Date-Time Page Last Updated
[is_active] //Show(1) or Hide(0) Page (0 = 404 error)
[sort_order] //Legacy(?) Page Sorting Order**
[layout_update_xml] //XML Layout Changes***
[custom_theme] //Override Page w/ Different Theme
[custom_root_template] //Override Page w/ Different Layout than Set Above
[custom_layout_update_xml] //Override Page Layout w/ Different XML***
[custom_theme_from] //Set Date to Start Overriding Page w/ Custom Layout
[custom_theme_to] //Set Date to End Overriding Page w/ Custom Layout
/*
/**I don't see anywhere to set via Admin Back-End. All mine are set to (0),
/ my best guess is it was used to sort page link order in a menu. Either
/ they removed this feature somewhere along the way or I somehow removed
/ it and forgot.
/
/***Think local.xml without the need to use the layout handle. In other words:
/ You can modify specific pages with the same xml styling as used between
/ the <default></default> tags above. Don't actually put <?xml>, <layout>
/ or <default> (the update handle) tags.
*/
So that's all that is in the cms portion of the database.
Fallback
When properly configured, Magento will fall back in this order:
<!-- Front End Package/Theme Template and Layout Files -->
app/design/frontend/yourPackage/yourTheme/
app/design/frontend/yourPackage/default/
app/design/frontend/default/default/
app/design/frontend/base/default/
<!-- Admin Package/Theme Template and Layout Files -->
app/design/adminhtml/yourPackage/yourTheme/
app/design/adminhtml/yourPackage/default/
app/design/adminhtml/default/default/
<!-- Front End Package/Theme Skin (JS/CSS/Images) Files -->
skin/frontend/yourPackage/yourTheme/
skin/frontend/yourPackage/default/
skin/frontend/default/default/
skin/frontend/base/default/
<!-- Admin Package/Theme Skin (JS/CSS/Images) Files -->
skin/adminhtml/yourPackage/yourTheme/
skin/adminhtml/yourPackage/default/
skin/adminhtml/default/default/
<!-- Magento Code Pool -->
app/code/local/**
app/code/community/***
app/code/core/
/*
/**Magento will, by default, only look within local folders that currently
/ exist in the core directory, community directory*** OR if an active
/ module has codePool*** set to local.
/
/***Third-Party modules have to set which codePool they are using, which
/ specifies the default working directory for that module's code.
/ This is defined in the xml located at /app/etc/modules/*. If a module
/ has its codepool set to community, you can override the extension's
/ code by copying it to local.
/*
The "community" codePool is said to be there for legacy reasons, and that new extensions should be made to use the "local" only. I personally don't agree, it would make much more sense for every Third-Party extension to use the community codePool and retain the ability to override the original extension code from "local" without modifying the original.
Okay, I think I'm done with this question, as any more information here would be overload. If I missed anything, start a new question and link me to it ;D.
I'm starting out with Lift and been reading a few tutorials and books that are available online. Coming from a JSP (or GWT) background, it's a huge leap, especially since I'm still learning Scala too.
Anyway... I've created the basic site by downloading the lift tar.gz stuff from their site, copied the lift_blank" directory and renamed it to "test". Did the whole "sbt update ~jetty-run" thing etc etc.
What I want to do is modify the "index.html" page to simply have a text field for input, and a button that says "search". Basic idea, you type your firstname, hit "Search", a database query is executed for finding records with a firstname of "what-you-entered-in-the-text-field", and then the results are formatted and displayed on the web page; after the page has refreshed, the text field needs to contain the name that was entered as well.. You type in a different name, hit "search", and new results are displayed on the page. Initially (first time visiting the page), the results are of course empty. Simple stuff...
However, the examples I've all seen use html forms and POST backs etc; I really dislike this, for example users get all flustered when refreshing the page and they get a firefox popup "To display this page, Iceweasel must send information that will repeat any action (such as a search or order confirmation) that was performed earlier."... the page is also refreshed which is something I'd like to avoid.
Previously when I would build this in JSP, I would use all javascript; no "form" tags or anything, just a simple field with javascript events for hitting enter or hitting a "button"... events thaen get channeled to a main javascript function "onQuery" which then creates an AJAX request; when the result comes back from the server, javascript would modify a wrapper "div" element by changing the "innerHTML" value etc. The nice thing here is that the page doesn't refresh, just a tiny subsection of it does, the "table" (actually a div) which holds the results.
How would I re-create a very similar thing in Lift? I'm kind of lost here. I've followed a few examples in the past few days, but again they all use POST / forms. I can handle the scala database querying, and I understand how Lift's templates works, it's just the snippet / comet stuff that I could use a few pointers on.
You can try to use the SHtml.ajaxText function to get the input and to use Wiring on server's side to deal with the request and change automatically the result.
However, with this solution, you no longer need the submit button, but as you don't want a form it should not matter much.
Here is what I think about for the HTML file :
<div id="myHtml" class="lift:surround?with=default;at=content">
<form class="lift:form.ajax">
<input class="lift:SearchForm.name"/>
</form>
Value searched : <span class="lift:SearchForm.display">
</div>
Now on server's side it is a little bit more complicated
class SearchForm{
val name = SHtml.ajaxText("", s=>{ SearchWiring.name.set(s); Noop})
def display = {
WiringUI.apply(SearchWiring.name)(name:String => {"*" #> name} )
}
}
object SearchWiring{
val name = ValueCell("All")
}
I don't know if this is totally rigorous but it is my best thought for your problem. You will find more details about wiring on the official liftweb demo and on Seven Things blog. I hope it will help!
Below is what I ended up using. The one thing I dislike about Lift is all the "magic" that needs to be inserted at various points. I can understand most of this, but the whole " ++ hidden" thing could use some explaining...
The "index.html" page, everything including the "body" tag:
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=page">
<lift:Search.search>
Search Query: <query:text/> <query:button/><br/>
<div id="results">
</div>
</lift:Search.search>
</div>
</body>
The "Snippet" code, in a class called "Search.scala" (some of the import statements are unused, a leftover result of attempting different approaches):
package code
package snippet
import scala.xml.{NodeSeq, Text}
import net.liftweb.util._
import net.liftweb.common._
import java.util.Date
import code.lib._
import Helpers._
import common.Main
import common.solr.{Hitlist, Solr}
import net.liftweb.http.{S, StatefulSnippet, SHtml}
import net.liftweb.http.js.JsCmds.SetHtml
import _root_.net.liftweb.http.SHtml._
import _root_.net.liftweb.util.Log
import net.liftweb.http.js.JsCmd
import net.liftweb.http.js.JE.JsRaw
object Search {
def search(xhtml:NodeSeq):NodeSeq = {
var queryText = "(initial)"
def runQuery() = {
println("\n\nQuery: " + queryText)
SetHtml("results", <span>Query: {queryText}</span>)
}//runQuery
ajaxForm(
bind("query", xhtml,
"text" -> text(queryText, queryText = _),
"button" -> submit("Post", runQuery)
) ++ hidden(runQuery _)
)
}//search
}//Search
I have an xml sheet with some data and some images that i want to collect only a part using xslt.
However, there is one image with a particular classname that i would like to collect especially.
For example, the XML says:
<img class="itemImage" height="130" src="image.png" width="195"/>
How do I get the src attribute of this image by selecting it by classname with XPath?
This should work : //img[#class="itemImage"]/#src
This XPath will return the src of the first img node which has a src and has the specified class
(//img[#class="itemImage"]/#src)[1]
However, if you know anything at all about the structure of the xml, you can and should avoid the use of //, which requires the entire document to be scanned.