标签: custom-component

带有 f:ajax 的 JSF 2 自定义复合组件

我正在尝试使用这个 jQuery 插件http://www.eyecon.ro/colorpicker/创建一个自定义复合组件 colorPicker 。

我希望能够附加一个 jsf 标签 f:ajax , and when a color is selected, perform an ajax call to the server. 我一直在测试这个功能,看起来一切都是正确的,但显然我错过了一些东西,因为从未调用过监听器。

这是我的组件代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="label" />
<composite:clientBehavior name="customEvent" event="change" targets="#{cc.clientId}"/>
</composite:interface>
<composite:implementation>
    <h:outputStylesheet library="css" name="colorpicker/colorpicker.css" />
      <h:outputStylesheet library="css" name="colorpicker/layout.css" />
      <h:outputScript library="js" name="colorpicker/jquery.js" target="head"/>
      <h:outputScript library="js" name="colorpicker/colorpicker.js" target="head"/>
      <h:outputScript library="js" name="colorpicker/eye.js" target="head"/>
      <h:outputScript library="js" name="colorpicker/utils.js" target="head"/>
      <h:outputScript library="js" name="colorpicker/layout.js" target="head"/>
      <h:outputScript library="js" …
Run Code Online (Sandbox Code Playgroud)

ajax event-handling custom-component composite-component jsf-2

6
推荐指数
1
解决办法
4797
查看次数

在Delphi中使用TOwnedCollection后代

我正在尝试使用集合属性创建自定义组件.但是,如果我在设计时通过单击对象检查器中的"..."按钮尝试打开集合编辑器,则不会发生任何事情.我错过了什么?

这是我的TCollection后代:

  TMyCollection = class(TOwnedCollection)
  private
    function GetItem(Index: Integer): TMyCollectionItem;
    procedure SetItem(Index: Integer; const Value: TMyCollectionItem);
  public
    function Add : TMyCollectionItem;
    property Items[Index: Integer]: TMyCollectionItem read GetItem write SetItem;
  end;
Run Code Online (Sandbox Code Playgroud)

和项目:

 TMyCollectionItem = class(TCollectionItem)
  private
    FValue: integer;
  protected
    function GetDisplayName: string; override;
  public
    procedure Assign(Source: TPersistent); override;
    constructor Create(Collection: TCollection); override;
    destructor Destroy; override;
  published
    property Value : integer read FValue write FValue;
  end;
Run Code Online (Sandbox Code Playgroud)

delphi vcl custom-component townedcollection

5
推荐指数
1
解决办法
4560
查看次数

布局没有在android自定义组件中膨胀

我在自定义视图(从a派生LinearLayout)中得到一个空指针异常,因为它找不到它的子视图.这是代码:

public class MyView extends LinearLayout
{
    public MyView(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);
    }

    public MyView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
    }

    private TextView mText;

    @Override
    protected void onFinishInflate()
    {
        super.onFinishInflate();
        mText = (TextView) findViewById(R.id.text);

        if (isInEditMode())
        {
            mText.setText("Some example text.");
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

这是布局(my_view.xml):

<?xml version="1.0" encoding="utf-8"?>
<com.example.views.MyView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:ellipsize="end"
        android:maxLines="4"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:text="Some text" />

</com.example.views.MyView>
Run Code Online (Sandbox Code Playgroud)

这是我把它放在XML文件中的方式: …

android custom-component android-custom-view layout-inflater

5
推荐指数
1
解决办法
2337
查看次数

joomla提取组件是否可安装?

我正在写一个joomla组件,但它有许多文件夹和SQL表.我不打算手动制作包装.是否有任何已知的扩展,使我能够将我的组件作为zip文件提取,以使其可安装.

joomla components extraction custom-component joomla-extensions

5
推荐指数
1
解决办法
749
查看次数

JSF 最佳实践:自定义组件和 JavaScript

我正在开发一个 JSF 自定义组件,使用我在以下书籍Pro JSF and HTML5 by Apress 中找到的信息。

至此,我成功开发了:

  • 获取要在组件中呈现的数据的java类
  • java组件类
  • Java 渲染器类
  • 标签库文件
  • 呈现 taglib 的示例页面

一切正常,组件已成功呈现。

现在我想向呈现的元素添加 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 …
Run Code Online (Sandbox Code Playgroud)

javascript jsf taglib custom-component

5
推荐指数
1
解决办法
3626
查看次数

角度1.5的组件通信

Angular 1.5组件通信建议通常具有输出绑定以调用根控制器上的方法.

假设我有一个根组件和两个子组件.

<root>
    <child-1></child-1>
    <child-2></child-2>
</root>
Run Code Online (Sandbox Code Playgroud)

它想通过读取组件2上的值然后在根目录中执行某些操作来对组件1上的按钮单击做出反应.

例如,child-1是一个包含绘图库的指令,该绘图库将绘图附加到其DOM节点并具有控制该绘图的变量.

child-2有一个按钮.单击它时,child-1应将变量中的数据传递给root,后者会对其执行某些操作.

特别是,child-1包裹var graph2d = new vis.Graph2d(container, dataset, options);.稍后,我想从中检索一些信息graph2d并将其传递给它root做一些事情.

这归结为:组件如何对其他组件发出的事件做出反应?输入和输出建议似乎不包括这种情况.

javascript custom-component angularjs angularjs-directive

5
推荐指数
1
解决办法
4007
查看次数

需要 Angular 自定义组件

有没有办法可以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; …
Run Code Online (Sandbox Code Playgroud)

custom-component required ionic-framework ionic3 angular

5
推荐指数
1
解决办法
1165
查看次数

Vue.js 带有 v-model 的自定义选择组件

我想在 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'}, …
Run Code Online (Sandbox Code Playgroud)

javascript custom-component vue.js

5
推荐指数
1
解决办法
2万
查看次数

React-leaflet 自定义组件-未传递上下文?

我正在为 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 | }, {
Run Code Online (Sandbox Code Playgroud)

即使我摆脱了那个条款,我也会得到这个:

TypeError: Cannot read property 'openPopup' of undefined


  9226 | // …
Run Code Online (Sandbox Code Playgroud)

custom-component reactjs webpack react-leaflet

5
推荐指数
2
解决办法
3056
查看次数

如何计算需要通过特定于控件的计算规则从各种表单控件元素更新的输出值?

我需要一些帮助,因为我对 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 = …
Run Code Online (Sandbox Code Playgroud)

html javascript dom function custom-component

5
推荐指数
1
解决办法
105
查看次数