文档章节

Components

_Eddy
 _Eddy
发布于 2014/09/26 17:51
字数 1406
阅读 94
收藏 0
点赞 0
评论 0

一. Component简介##

  1. 作用: 将JCR数据库中的content呈现在你的网站上的一个功能单元

  2. 特性: 可复用,可以包含其它的component,有一个标准化的用户界面, 使用widget,editConfig来配置所呈现的用户界面

  3. 使用: 通常是找libs/foundation/components下合适的component拷贝至自己的apps下,再进行修改


##二. Component的properties ##

<table> <tr> <td>Name </td> <td>Type </td> <td>Description</td> </tr> <tr> <td>.</td> <td> cq:Component</td> <td>Current component. A component is of node type cq:Component.</td> </tr> <tr> <td> cq:isContainer</td> <td> Boolean</td> <td>Checks if this component is a container component. For example a paragraph system component.</td> </tr> <tr> <td> allowedChildren </td> <td> String[]</td> <td>Path of a component that is allowed to be a child of this component.</td> </tr> <tr> <td> allowedParents</td> <td> String[]</td> <td>Path of a component that is allowed to be a parent of this component.</td> </tr> <tr> <td> componentGroup</td> <td> String</td> <td>Group under which the component can be selected in the Sidekick.</td> </tr> <tr> <td> cq:cellName</td> <td> String</td> <td>If set, this property is taken as Cell Id. For more information, please refer to this article in the Knowledge Base.</td> </tr> <tr> <td> cq:noDecoration</td> <td> Boolean</td> <td>If true, the component is not rendered with automatically generated div and css classes.</td> </tr> <tr> <td> cq:templatePath</td> <td> String</td> <td>Path to a node to use as a content template when the component is added from Sidekick. This must be an absolute path, not relative to the component node.Unless you want to reuse content already available elsewhere, this is not required and cq:template is sufficient (see below)</td> </tr> <tr> <td> dialogPath</td> <td> String</td> <td>Path to a dialog in case that the component does not have a dialog node.</td> </tr> <tr> <td> jcr:created</td> <td> Date</td> <td>Date of creation of the component.</td> </tr> <tr> <td> jcr:description</td> <td> String</td> <td>Description of the component.</td> </tr> <tr> <td> jcr:title</td> <td> String</td> <td>Title of the component.</td> </tr> <tr> <td> sling:resourceSuperType</td> <td> String</td> <td>When set, the component inherits from this component.</td> </tr> </table>

  1. cq:isContainer 规定当前component是否可以包含其它component
  2. allowedParents 定义该component允许的父亲component,与父component的allowedChildren 属性对应,实际效果就是页面上:可以从sidekick中拖动一些component到libs/foundation/components/parsys对应的component的效果;
  3. allowedChildren 为当前component定义可以拖入自己内部的component,即自己的子component

<p> (**note:** cq:isContainer,allowedParents,allowedChild三组属性是结合在一起使用的,以系统component libs/foundation/components/parsys为例,要想让自定义的component拖入parsys内,必须符合以下条件:<br/> \*. parsys component,即所谓的父component设置cq:isContainer,为true<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;设置allowedChildren,值为\*,接受所有component<br/> \*.自定义的component,添加属性allowedParents ,值为*/parsys,这样自定义的component才能拖动入parsys中去)</p> 4. componentGroup 定义该component在sidekick中所处的分组 5. cq:noDecoration 如果设置该属性为true,则当前component不使用系统自定义的div,css样式 效果如下: 为component设置该属性之前:页面除了显示component的html外,自动在`<ul>`下添加了一个div标签,是我所不需要的: ![在此输入图片描述][1] 之后,为component添加属性: `cq:noDecoration value=true`,如图: ![在此输入图片描述][2] 结果: ![在此输入图片描述][3] 系统自动添加的样式去除了。 6. sling:resourceSuperType 设置当前component的父component,当前component会继承父component的内容.


三. Component的child node##

<table> <tr> <td>Name </td> <td>Type </td> <td>Description</td> </tr> <tr> <td> design_dialog</td> <td> cq:Dialog </td> <td>Definition of the design dialog.</td> </tr> <tr> <td> cq:childEditConfig</td> <td> cq:EditConfig</td> <td>When the component is a container, as for example a paragraph system, this drives the edit configuration of the child nodes.</td> </tr> <tr> <td> cq:editConfig</td> <td> cq:EditConfig</td> <td>Edit configuration of the component.</td> </tr> <tr> <td> cq:htmlTag</td> <td> nt:unstructured </td> <td>Returns additional tag attributes that are added to the surrounding html tag. Enables addition of attributes to the automatically generated divs. See Modify the auto-generated DIVs using cq:htmlTag blog post.</td> </tr> <tr> <td> cq:template</td> <td> nt:unstructured</td> <td>If found, this node will be used as a content template when the component is added from Sidekick.</td> </tr> <tr> <td> dialog</td> <td> nt:unstructured</td> <td>Definition of the edit dialog.</td> </tr> <tr> <td> icon.png</td> <td> nt:file</td> <td>Icon of the component, appears next to the Title in Sidekick.</td> </tr> <tr> <td> thumbnail.png</td> <td> nt:file </td> <td>Optional thumbnail that is shown while the component is dragged into place from Sidekick.</td> </tr> <tr> <td> \*</td> <td>cq:ClientLibraryFolder</td> <td>define the component's js and css style</td> </tr> <tr> <td> virtual</td> <td>sling:Folder </td> <td>Enables creation of virtual components. To see an example, please look at the contact component at /libs/foundation/components/profile/form/contact.</td> </tr> </table>

<h3>三.1 dialog & design_dialog</h3> component下的dialog和design_dialog是页面的两种维护模式,dialog是在edit mode下编辑的,而design_dialog是在design模式下编辑的;

功能点: 禁用图片的上传功能,只能由content finder里拖动资源,禁用前禁用后

设置component下.../dialog.../items/image(jcr:primaryType为cq:Widget),为该image widget添加属性allowUpload : Name: allowUpload <br/>  Type: String <br/>  Value: false <br/> 即可。

<h3>三.2 global.jsp</h3> component下的每个jsp文件头部引入global.jsp文件<%@include file="/libs/foundation/global.jsp"%> 引入该文件后相当于默认初始化了一些jsp标签和类: e.g slingRequest ,slingResponse ,resource,resourceResolver,currentNode ,log ,sling ,properties ,pageProperties ,pageManager ,component ,designer ,currentDesign ,currentStyle

<h3>三.3 三种方法来从content数据库中取值</h3> properties, currentPage, currentNode

<h3> 三.4 标签库</h3> JSP标签库,cq标签库以及Sling标签库。

<h3>三.5 node cq:EditConfig的properties介绍:</h3> **editConfig's properties:** <br/> **properties1**-cq:actions (String array): 定义该component呈现的操作,<br/> **properties2**-cq:layout (String): : 定义该component修改,删除等功能的呈现方式,值有:rollover,editbar,auto三种,默认rollover点击弹出修改对话框,上图中edit等操作的触发方式是点击edit等的按钮,这就是layout设置为editbar的效果<br/> **properties3**-cq:dialogMode (String): 可设置的值有: floating,inline,auto默认inline,嵌入页面的方式进行编辑,设置为floating时是以页面的弹出框的方式编辑,见下图,第一个是嵌入页面的方式,其二个是以弹出对话框的方式呈现的<br/> ![cq:dialogMode值为inline][6] ![cq:dialogMode值为floating][7] **properties4**-cq:emptyText (String): defines text that is displayed when no visual content is present.<br/> **properties5**-cq:inherit (Boolean): defines if missing values are inherited from the component that it inherits from.<br/> <br/><br/><br/> <h3>三.6 node cq:EditConfig的child node介绍:</h3> <h4>三.6_1 cq:dropTargets node </h4> cq:dropTargets node (node type nt:unstructured) <br/> 定义该component可从content finder接受的资源的类型,组等<br/> <h4>三.6_2 cq:actionConfigs node </h4>cq:actionConfigs (node type nt:unstructured)<br/>定义该component和edit,delete同级别的操作,如下图的my Text操作即是该node定义的,也可以定义在点击my Text操作时触发的事件: ![cq:actionConfigs][8]<br/> <h4>三.6_3 cq:listeners node </h4> (node type cq:EditListenersConfig) <br/> 为该component添加监听器,如(before/after)(edit/copy/insert/move/childinsert/delete), 规定执行这些操作之前\/之后执行的事件.如图 ![cq:listeners][9]<br/> <h4>三.6_4 cq:inplaceEditing node </h4>cq:inplaceEditing node (node type cq:InplaceEditingConfig) <br/> <h4>三.6_5 cq:formParameters node </h4>cq:formParameters node (node type nt:unstructured) <br/>

第一次用markdown,搞得好累!!!

© 著作权归作者所有

共有 人打赏支持
_Eddy
粉丝 5
博文 38
码字总数 16825
作品 0
杭州
程序员
iOS 时间

// 得到年月上一个月的时间 func getYearMonth(dateFormatter:String) -> String { let calendar = NSCalendar(calendarIdentifier: NSCalendarIdentifierGregorian) let adcomps = NSDateC......

梅_95
2016/08/17
6
0
Framework7 3.0.0 beta9 发布,全功能 HTML 框架

Framework7 3.0.0 beta9 已发布。更新内容如下: Core Better parsing in and helpers All new Tooltip component Template7 update to latest 1.3.6 Phenome Now and are passed as props ......

达尔文
06/13
0
0
How to Create an Reusable Components for Your Project

In our daily work, we always write the same code and do it again and again, but how can we create the reusable components for our project and make our code more clearly? In this......

sgyyz
2013/09/14
0
0
有懂前端的在么,require

一个脚本里面还有require应该怎么获取,里面的对象? 大概是这个样子的 exports = { mine: { P1h2: require('./components/mine/P1h2.js'), P1h1: require('./components/mine/P1h1.js'), P1......

sidney9111
2017/01/30
253
1
登录失败,始终提示公司名称不存在

根据前端的输出错误应该是后端的服务接口没有启动,可是不知道怎么解决! 前端控制器输出错误如下: Load defined data api failed: Account.LoginAPI Error: [$injector:unpr] Unknown pro...

gread_369
2016/08/24
278
1
vue2.0移动端音乐app(1)

从0开始用vue2.0模仿做一个移动端音乐app 源码地址https://github.com/Aaron0525/Vue-music 一、环境搭建 cd vue-music npm install package.json "stylus": "^0.54.5", "stylus-loader": "^......

再这么说就哭了呦!
2017/12/05
0
0
组件化必杀技:styled-components 简明教程【附视频下载】

课程目标 23 分钟带你学会现代化的组件样式书写方法:styled-components。 课程简介 通过将 ES6 中的模板字符串(template literals)特性创造性的运用到 CSS 编码上,styled-components 成了...

王仕军
2017/11/07
0
0
03、另类中的异类 styled components

版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处 作者: TigerChain 地址: www.jianshu.com/p/dd2a5b1b9… 本文出自 TigerChain 简书 ReactNative 系列 教程简介 1、...

TigerChain
2017/12/15
0
0
关于firefox extension 中无法读写本地文件,怎么修改权限的问题

function getURL() { if ( window.content.document.location.href != "http://epub.cnki.net/kns/brief/default_result.aspx") { alert("Worng address"); } else { var myWin = window.con......

猜猜我是吧
2014/09/13
607
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
22分钟前
0
0
RxJava2的错误处理方案

最近使用retrofit2 + rxKotlin2写接口访问,想尽量平铺代码,于是就想到当借口返回的状态码为「不成功」时(比如:code != 200),就连同网络错误一起,统一在onError方法中处理。想法总是好的...

猴亮屏
30分钟前
0
0
程序的调试信息

调试二进制程序时,经常要借助GDB工具,跟踪程序的执行流程,获取程序执行时变量的值,以发现问题所在。GDB能得到这些信息,是因为编译程序时,编译器保存了相应的信息。Linux下的可执行程序...

qlee
52分钟前
0
0
应用级缓存

缓存命中率 从缓存中读取数据的次数与总读取次数的比例,命中率越高越好 java缓存类型 堆缓存 guavaCache Ehcache3.x 没有序列化和反序列化 堆外缓存ehcache3.x 磁盘缓存 存储在磁盘上 分布式...

writeademo
今天
0
0
python爬虫日志(3)find(),find_all()函数

1.一般来说,为了找到BeautifulSoup对象内任何第一个标签入口,使用find()方法。 以上代码是一个生态金字塔的简单展示,为了找到第一生产者,第一消费者或第二消费者,可以使用Beautiful Sou...

茫羽行
今天
0
0
java:thread:顺序执行多条线程

实现方案: 1.调用线程的join方法:阻塞主线程 2.线程池 package com.java.thread.test;public class MyThread01 implements Runnable {@Overridepublic void run() {Syste...

人觉非常君
今天
0
0
ElasticSearch 重写IK分词器源码设置mysql热词更新词库

常用热词词库的配置方式 1.采用IK 内置词库 优点:部署方便,不用额外指定其他词库位置 缺点:分词单一化,不能指定想分词的词条 2.IK 外置静态词库 优点:部署相对方便,可以通过编辑指定文...

键走偏锋
今天
19
0
Git 2.18版本发布:支持Git协议v2,提升性能

Git 2.18版本发布:支持Git协议v2,提升性能Git 2.18版本发布:支持Git协议v2,提升性能 新版本协议的主要驱动力是使 Git 服务端能够对各种 ref(分支与 tag)进行过滤操作。 这就意味着,G...

linux-tao
今天
0
0
python浏览器自动化测试库【2018/7/22-更新】

64位py2.7版本 更新 document_GetResources 枚举页面资源 document_GetresourceText 获取指定url的内容 包括页面图片 下载地址下载地址 密码:upr47x...

开飞色
今天
42
0
关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部