标签: components

我想构建一个用户界面,由于历史原因,它有很多"列"信息.其中许多在所有情况下都与所有用户无关,所以我想我会看到停靠面板,以允许用户根据他们的工作场景隐藏或重新排列列.

这是.NET 3.5中的Winforms.

因此,我想要以下内容:

• 在主窗体中有标签页
• 每个标签页都可以有停靠在其中的停靠面板
• 坞站面板应该可以从一个标签页移动到另一个标签页

示例样机http://images.vkarlsen.no/so/2902953/dock-test.png

到目前为止,我已经尝试了以下组件包,没有运气:

Telerik的

允许我停靠在标签页内,但停靠面板无法从一个标签页移动到另一个标签页.当尝试将浮动面板拖放到与其来源不同的选项卡页面上时,它会显示停靠栏将成功,但是当它被丢弃时,它将停靠在其所有者容器上.

Divelements SandDoc

与Telerik相同的问题.

DevExpress XtraBars

与Telerik相同的问题.

http://sourceforge.net/projects/dockpanelsuite/

同样的问题,停靠站内容窗口只能属于一个停靠面板,这意味着它无法从一个选项卡迁移到另一个选项卡.

基本上,有没有人知道任何这样的组件(包)可以让我做我想要的？

编辑:好的,我试过让Sourceforge控件在上面工作,但我看不出如何使这个工作.

基本上,这就是我需要做的事情:

1. 我需要有多个标签页(我不需要取消它们,它们可以是静态的)
2. 我需要能够将内容停靠到标签页
3. 我需要能够将内容从一个标签页移动到另一个标签页

如果我理解下面的答案提到这个控件,我应该使用DockPanel而不是TabControl,而DockPane而不是TabPage,但据我所知,这只能让我能够停靠和取消选项卡页面,而这不是我想要的是.

无论如何,这是一个程序文件,只需创建一个Winforms项目,从sourceforge项目添加对.dll的引用,并在Program.cs中粘贴此代码:

using System;
using System.Windows.Forms;
using WeifenLuo.WinFormsUI.Docking;

namespace DockTest
{
    public class DockWindow1 : DockContent
    {
        public DockWindow1()
        {
            TabText = "Dock-window #1";

            DockPanel panel = new DockPanel();
            panel.Dock = DockStyle.Fill;
            Controls.Add(panel);

            // tried this related to the exceptions
            // this.DockPanel = panel;
        }
    }

    public class DockWindow2 : DockContent
    {
        public DockWindow2() …

我正在尝试向我的应用添加一个按钮,将其从设备管理员中删除,并使用下面的代码,但我的应用程序崩溃了.

码:-

按钮点击: -

{
    ComponentName devAdminReceiver = new ComponentName(this, DemoDeviceAdminReceiver.class);
    DevicePolicyManager dpm = (DevicePolicyManager) getSystemService(Context.DEVICE_POLICY_SERVICE);
    dpm.removeActiveAdmin(devAdminReceiver);
}

在上面的代码中,DemoDeviceAdminReceiver是一个扩展DeviceAdminReceiver的类.

错误日志: -

10-28 15:26:09.295: E/AndroidRuntime(26101): FATAL EXCEPTION: main
10-28 15:26:09.295: E/AndroidRuntime(26101): java.lang.IllegalArgumentException: Unknown admin: ComponentInfo{com.dragonnis.intellicover/com.dragonnis.intellicover.DemoDeviceAdminReceiver}
10-28 15:26:09.295: E/AndroidRuntime(26101):    at android.os.Parcel.readException(Parcel.java:1331)
10-28 15:26:09.295: E/AndroidRuntime(26101):    at android.os.Parcel.readException(Parcel.java:1281)
10-28 15:26:09.295: E/AndroidRuntime(26101):    at android.app.admin.IDevicePolicyManager$Stub$Proxy.removeActiveAdmin(IDevicePolicyManager.java:2940)
10-28 15:26:09.295: E/AndroidRuntime(26101):    at android.app.admin.DevicePolicyManager.removeActiveAdmin(DevicePolicyManager.java:183)

我创建了一组嵌套组件.

代码在这里:http://emberjs.jsbin.com/hasehija/2/edit.

HTML:

{{#level-1}}
    {{#level-2}}
      {{#level-3}}
        <button {{action 'handleAction'}}>
          Click me (yielded)
        </button>
      {{/level-3}}
    {{/level-2}}
 {{/level-1}}

JS:

App.ApplicationController = Ember.Controller.extend({
  actions: {
    handleAction: function() {
      alert('Handled in ApplicationController');
    }
  }
});

App.Level1Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 1');
    }
  }
});

App.Level2Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 2');
    }
  }
});

App.Level3Component = Ember.Component.extend({
  actions: {
    handleAction: function() {
      alert('Handled in Level 3');
      this.set('action', 'handleAction');
      this.sendAction(); …

是否可以将函数传递给组件并在传递参数的组件内调用此函数？

例:

帖子列表

<post-list posts="blog.posts"
           loading="blog.loadingPosts"
           get-post-url="blog.getPostUrl" 
           is-user-authenticate="blog.user">
</post-list>

getPostUrl是一个函数(在容器控制器内):

const getPostUrl = (postId) => {
    const protocol = $location.protocol();
    const host = $location.host();
    const port = $location.port();

    return protocol + "://" + host + "" + (port !== 80 ? ":" + port : "") + "/blog/post/" + postId;
};

帖子列表:组件

const PostList = {
  "bindings": {
    "posts": "<",
    "loading": "<",
    "getPostUrl": "&", //Function getPostUrl
    "isUserAuthenticate": "<"
  },
  "template": `<div>
                <div class="col-md-9 text-center" data-ng-if="$ctrl.loading">
                  <i class="fa …

我一直在线使用这些教程并创建了一个'ok'SPA数据输入应用程序.

我把它连接到我的WEB API很好,但只构建了一个模型,我的AppModule已经安静了几行.

我正在考虑使用当前的方法,我认为一旦我完成它,AppModule将是一个疯狂的大小,难以阅读,甚至可能更难调试.

我是否可能错过了如何构建Angular2更大应用程序的观点？

我正在努力寻找一个大于1个组件的在线教程/项目供参考.

下面是我的app.module.ts文件夹结构.

我分开我CashMovement,ListComponent并且DataService我会认为这是很好的做法,但再添10个不同的数据服务,并列出与app.module将是漫长的.

在我继续进行任何进一步的工作之前,任何人都应该阅读一些他们可以指向我的建议,或者我理解的建议对个人意见是主观的.

app.module

import './rxjs-operators';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { PaginationModule, DatepickerModule, Ng2BootstrapModule, ModalModule, ProgressbarModule, TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap';

import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim-loading-bar';


import { AppComponent }   from './app.component';
import { DateFormatPipe } from './shared/pipes/date-format.pipe';
import { HighlightDirective } from './shared/directives/highlight.directive'; …

关于道具和功能组件,我有一个看似微不足道的问题.基本上,我有一个容器组件,它在状态改变时呈现Modal组件,这是由用户单击按钮触发的.模态是一个无状态功能组件,它包含一些输入字段,这些输入字段需要连接到容器组件内部的函数.

我的问题:当用户与无状态Modal组件中的表单字段交互时,如何使用父组件内部的函数来更改状态？我错误地传递道具吗？提前致谢.

容器

export default class LookupForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showModal: false
        };
    }
    render() {
        let close = () => this.setState({ showModal: false });

        return (
            ... // other JSX syntax
            <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} />
        );
    }

    firstNameChange(e) {
      Actions.firstNameChange(e.target.value);
    }
};

功能(模态)组件

const CreateProfile = ({ fields }) => {
  console.log(fields);
  return (
      ... // other JSX syntax

      <Modal.Body>
        <Panel>
          <div className="entry-form">
            <FormGroup>
              <ControlLabel>First Name</ControlLabel>
              <FormControl type="text"
                onChange={fields.firstNameChange} placeholder="Jane"
                />
            </FormGroup> …

我正在寻找一个好的Angular4图像滑块组件的建议,我尝试过ngx-bootstrap和ng2-owl-carousel,但是它们没有像他们说的那样好用,如果你知道的话,关于它们的文档也不多关于Angular4的一个记录良好的组件,我将不胜感激!

我想知道如何使用props和检索将对象传递给子组件.我理解如何将其作为属性,但如何传递对象并从子组件中检索对象？当我从子组件使用this.props时,我得到未定义或错误消息.

父组件

 <template>
        <div>
        <child-component :v-bind="props"></child-component>     
        </div>
    </template>

<script>
import ChildComponent from "ChildComponent.vue";

export default {
    name: 'ParentComponent',
    mounted() {

    },
     props: {
       firstname: 'UserFirstName',
       lastname: 'UserLastName'
       foo:'bar'
    },
    components: {
    ChildComponent
    },
    methods: {

      }
}
</script>

<style scoped>
</style>

儿童组件

<script>
<template>
   <div>
   </div>
</template>
export default {
    name: 'ChildComponent',
    mounted() {
    console.log(this.props)
  }  
}
</script>

我正在阅读这个很棒的教程,解释了@Component.BuilderDagger 2中的工作方式.作者做得很好,文章很简单,但我仍需要澄清一些令人困惑的事情:Dagger 2的默认实现看起来像这样:

组件:

@Singleton
@Component(modules = {AppModule.class})
public interface AppComponent {

  void inject(MainActivity mainActivity);
  SharedPreferences getSharedPrefs();
}

模块:

@Module
 public class AppModule {

    Application application;

    public AppModule(Application application) {
       this.application = application;
    }

    @Provides
    Application providesApplication() {
       return application;
    }
    @Provides
    @Singleton
    public SharedPreferences providePreferences() {
        return application.getSharedPreferences(DATA_STORE,
                              Context.MODE_PRIVATE);
    }
}

组件实例化:

DaggerAppComponent appComponent = DaggerAppComponent.builder()
         .appModule(new AppModule(this)) //this : application 
         .build();

根据文章,我们可以通过避免使用@Component.Builder和@BindsInstance注释向模块构造函数传递参数来进一步简化此代码,然后代码将如下所示:

组件:

@Singleton
@Component(modules = {AppModule.class})
public interface AppComponent …

我正在编写一个Delphi包，该包提供了一个新的自定义TGraphic对象，从而允许在VCL组件（如TImage）中读取新的图像格式。

我最初使用RAD Studio XE7开发了此程序包，并且运行良好。但是，我最近迁移到了RAD Studio编译器的较新版本，尽管我的软件包在该新版本上仍能正常工作，但我注意到一个从未出现过的奇怪错误。

我有一个包含多个组件的表单，其中一些是TImage组件。打开IDE之后，我在设计时第一次打开项目时，所有包含我的自定义TGraphic组件的TImage组件都会立即释放其内容。如果我关闭然后重新打开该项目，图像将重新出现，并且在我关闭并重新打开IDE之前该错误不再发生。

我挖了我的代码以了解可能导致此问题的原因。要注册我的自定义TGraphic组件，我使用类初始化部分，在其中编写了以下代码：

initialization
begin
    Vcl.Graphics.TPicture.RegisterFileFormat('svg', 'Scalable Vector Graphics', TWSVGGraphic);
end;

但是我发现，从XE8编译器版本开始，在初始化部分之前就调用了TImage构造函数，因此显然引起了上述问题。自XE8以来的所有编译器版本均会受到影响，但是此错误从未在XE7或更早版本上发生。自XE8以来，情况发生了变化。

这是我的问题：

• 我用来注册自定义图形类的方法是否正确？
• 如果没有，正确的方法是什么？
• 自XE8以来似乎有所不同，注册图形组件的新正确方式是什么？
• 还有其他人遇到过同样的问题吗？他是如何解决的？
• 这可能是RAD Studio的新错误，还是这个问题就在我这边？