我正在开发一个 JSF 自定义组件，使用我在以下书籍Pro JSF and HTML5 by Apress 中找到的信息。
至此，我成功开发了：
一切正常，组件已成功呈现。
现在我想向呈现的元素添加 javascript 事件和行为，更具体地说，我的自定义组件的目的是在网页上呈现菜单，我想向菜单项添加下拉效果。我知道如何用 JavaScript 编写整个代码，但我不知道的是：
将 javascript 事件和行为添加到自定义组件中呈现的元素的最佳实践是什么？
JS文件应该放在哪里？如何将事件绑定到元素？它是在渲染类中完成的，还是在网页上完成的？
谢谢，如果需要，我愿意提供有关我的代码的更多具体信息。
Java 组件类
注意： CosmoMenu 类只是一个 bean。它基本上存储一个菜单树（一个标签、一个 id 和一组子项，如果有的话）。
package components;
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonParser;
import domain.CosmoMenu;
import javax.faces.component.FacesComponent;
import javax.faces.component.UIComponentBase;
@FacesComponent(CosmoMenuComponent.COMPONENT_TYPE)
public class CosmoMenuComponent extends UIComponentBase{
/** Component family of {@link CosmoMenuComponent}. */
public static final String COMPONENT_FAMILY = "CosmoMenu";
/** Component type of {@link …有没有办法可以required在我的自定义组件上使用该属性？我的组件如下所示：
import { Component, Input, forwardRef } from '@angular/core';
import { Platform } from 'ionic-angular';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
};
@Component({
selector: 'date-picker',
templateUrl: 'date-picker.html',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class DatePickerComponent implements ControlValueAccessor {
@Input("label") label: string;
@Input("pickerFormat") pickerFormat: string;
@Input("displayFormat") displayFormat: string;
@Input("max") max: string;
@Input("min") min: string;
@Input("cancelText") cancel: string;
@Input("doneText") done: string;
@Input("valid") valid: boolean;
@Input("disabled") disabled: boolean; …我想在 Vue.js 中创建一个自定义选择组件。由于我需要特定的选项样式，因此我需要创建由 div 等组成的“选择”，其外观和行为就像真正的 html 选择。
目前我有这样的事情：
Vue.component('child', {
template: `<div class="component-container" @click="showOptions = !showOptions">
<div class="component__select">
<span class="component__select--name">Select Fruit</span>
<span class="c-arrow-down" v-if="!showOptions"></span>
<span class="c-arrow-up" v-if="showOptions"></span>
</div>
<ul class="component__select-options" v-if="showOptions" >
<li class="select--option" v-for="option in options">
<label> <input type="checkbox" :value="option"/> {{option.name}}</label>
</li>
</ul>
</div>`,
methods: {
selectOption(option) {
this.$emit('option', option)
}
},
data: () => ({
showOptions: false,
}),
props: ['options']
});
var vm = new Vue({
el: '#app',
data: () => ({
options: [
{id: 0, name: 'Apple'}, …我正在为 react-leaflet 编写一个自定义组件。它是一个可编辑的弹出窗口，还有一些其他功能。 这里是一个例子的代码和框。组件的源代码在这里。这个例子只是做了一个import EditablePopup from 'my-react-leaflet-popup-plugin'，它是我项目中的一个 .js 文件。效果很好。
我正在尝试使用 webpack 将其打包为一个节点模块，以便其他人可以使用它。它编译没有问题。你可以在这里看到我的 webpack.config.js 。然后我使用npm link将这个模块链接到我本地机器上的一个测试项目。当我这样做时，我收到错误消息：
TypeError: Cannot read property 'leafletElement' of null
460 | value: function value() {
461 | var e = this;
462 | this.props.open && setTimeout(function () {
> 463 | e.thePopup.leafletElement._source.openPopup();
| ^ 464 | }, .001);
465 | }
466 | }, {
即使我摆脱了那个条款，我也会得到这个：
TypeError: Cannot read property 'openPopup' of undefined
9226 | // …我需要一些帮助，因为我对 JavaScript 还很陌生。
我想创建一个计算会员费的函数
我尝试在 JavaScript 中创建一个函数来检查是否只选择了一个选项，但我不知道如何制作它以便我可以在用户有资格获得一个以上或所有折扣的情况下计算费用。目前还没有针对年龄条件的 JS（60 到 80 岁之间），因为我不确定如何去做。
function feeCalc() {
var ans = document.getElementById("answer");
if (document.getElementById('medicalCond-yes').checked) {
ans.value = calculate('medicalCond-yes');
}
if (document.getElementById('empstatus-yes').checked) {
ans.value = calculate('empstatus-yes');
}
if (document.getElementById('empstatus-no').checked) {
ans.value = calculate('empstatus-no');
}
if (document.getElementById('medicalCond-no').checked) {
ans.value = calculate('medicalCond-no');
}
}
function calculate(action) {
var standardRate = 10;
var ageRate = 0.1;
var medicalRate = 0.4;
var unemployedRate = 0.3;
var result;
switch (action) {
case 'medicalcond-yes':
discount = (standardRate * studentRate);
result = …我正在制作一个派生TPanel的自定义Panel组件.
我希望我的新组件在OnMouseEnter和OnMouseLeave事件上执行一些代码,但是,我不知道如何实现它.
我看到TPanel发布了OnMouseEnter,OnMouseLeave属性.
我如何覆盖这些并添加一些我自己的代码？
我的想法的例子:TMyPanel的
默认行为应该在组件本身.
on event OnMouseEnter do: Color := NewColor;
on event OnMouseLeave do: Color := OldColor;
然后,我希望能够在运行时为这些事件分配一些功能.此分配在应用程序中完成.
.. TButton1.Click ..
begin
MyPanel1.OnMouseEnter := DoSomethingMore;
MyPanel1.OnMouseLeave := DoSomethingElse;
end;
所以最后,当鼠标在新面板上时,它应该改变颜色并执行在DoSomethingMore过程中编写的其他一些操作.
谢谢
我正在尝试使用Flex组件框架创建自定义Flex组件:
http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html.
所有好的组件都允许您使用百分比值来定义它们的尺寸:
MXML:
TextInput width ="100%"
要么
运行时的Actionscript:
textinp.percentWidth = 100;
我的问题是如何在自定义组件的measure()方法中实现百分比宽度/高度？更具体地说,这些百分比在某个阶段转换为像素值,这是如何完成的？
这是一个后续问题.
我之前的问题:
我的问题:
TComponent没有像TWinControl这样的窗口句柄.我不想依赖外部的.
这是我的自定义组件的片段
type
TMyClipBoardListener = class(TComponent)
private
FInnerWindowHandle: HWnd;
FNextHWnd: HWnd;
//...
protected
procedure Loaded; override;
procedure WndProc(var Msg: TMessage); // <<< This is my wouldbe Window to handle messages
public
constructor Create(AOwner: TComponent); override;
destructor Destroy; override;
// ...
published
// ...
end;
我的自定义组件的实现摘录
constructor TMyClipBoardListener .Create(AOwner: TComponent);
begin
inherited;
//
FInnerWindowHandle := ...; // <<< What to do here ? Should I pass it to a function/procedure I missed?
end;
destructor TMyClipBoardListener .Destroy; …我正在尝试创建一个继承自RelativeLayout的自定义组件.
在我的xml布局文件中,我有:
<Mycomponent
android:src="@drawable/my_test_image">
<TestView>
</Mycomponent>
我的问题是如何在Mycomponent的构造函数中创建一个Drawable类？
我试图阅读ImageView的源代码,但似乎尝试了一些android Internal.R.
无论如何我在我的代码中可以做到这一点.
谢谢.
我尝试编写自己的树组件.树节点呈现为包含树组件的子组件的div,例如:
<my:tree id="extendedTree"
value="#{controller.rootNode}"
var="node">
<h:outputText id="xxx" value="#{node.name}" />
<h:commandLink value="Test" actionListener="#{controller.nodeSelectionActionListener}" />
</my:tree>
到目前为止,这么好 - 一切都按预期工作,但h:outputText重复获得相同的id.
所以我有我的组件工具javax.faces.NamingController,覆盖getContainerClientId():
@Override
public String getContainerClientId(FacesContext context) {
String clientId = super.getClientId(context);
String containerClientId = clientId + ":" + index;
return containerClientId;
}
index在迭代过程中设置和更新节点.但getContainerClientId()每个孩子只会被召唤一次(不是每次迭代和每个孩子,正如我所期望的那样).这会导致每个子ID都以相同的容器ID作为前缀:
form:treeid:0:xxx
覆盖也是一样的getClientId().
我错过了什么？