您好、欢迎来到现金彩票网!
当前位置:88彩票 > 服务器控件 >

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

发布时间:2019-05-02 00:20 来源:未知 编辑:admin

  WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Designer允许用户创建控件实例,指定

  ,并生成可以合并到应用程序中的相应HTML 和 Java。WijmoJS 在线Web设计器对于开发网格和图表等复杂对象特别有用。

  除了这款在线设计器,如果您正在使用Angular进行开发,还可以尝试使用Visual Studio Code的WijmoJS Designer扩展,它为VS Code 提供了一个可视界面,用于创建和编辑表示WijmoJS 纯前端控件的Angular标记。

  工具箱”命令打开一个可折叠的WijmoJS前端控件面板,按模块名称(网格,图表,输入,仪表,导航,OLAP)分组。 展开输入组并单击“日历”以添加名为calendar1的新控件。

  要折叠主菜单,请再次单击WijmoJS 徽标,或单击设计图面内部的任何位置(“编辑”工具栏下方的区域)。

  注意:设计图面上的所有纯前端控件均以设计模式显示,这意味着您无法直接对其进行滚动,调整大小或以其他方式的操作,而是使用页面右侧的“属性”窗格来操作控件的对象模型。每个可用属性都显示相应类型的编辑器,您在此处所做的任何更改都会立即应用于所选控件。例如:将monthView属性设置为False,将formatMonths属性设置为MMMM。

  设计表面支持具有顺序布局的多个纯前端控件。用户可通过打开工具箱并将InputDateTime控件添加到设计图面,单击“编辑”工具栏上的“上移”按钮以交换两个控件的位置。

  此外,您还可以使用WijmoJS设计器查看并选择不同WijmoJS 主题效果。 单击WijmoJS 徽标以关闭工具箱,单击主题以显示可用主题列表,然后单击其他值,例如Cerulean。

  使用左侧的“保存”图标将HTML写入文件或选择所需的片段并使用浏览器的UI将其复制到剪贴板。生成的代码包含以下元素:

  head标签,引用主要WijmoJS 的CSS文件和所选主题文件。

  标签,自动生成用于WijmoJS设计器支持的任何纯前端控件组合的标签。您可以省略大量不需要的模块引用。

  在“属性”窗格中,请注意图表上有四个表示复杂对象的属性:axisX,axisY,dataLabel和legend。 单击axisY属性的齿轮图标,然后将format属性设置为字符串c0,表示零小数位的货币值。 设计表面现在看起来像这样:

  请注意Y轴中显示的货币符号。 单击“属性”窗格中的“后退”按钮以返回FlexChart的设置。 接下来,单击图例属性的齿轮图标,并将其位置设置更改为“底部”。

  像以前一样单击后退按钮返回FlexChart设置。 通过将其标题属性设置为Most Active,为图表添加标题。 找到palette属性,单击编辑器中的Show Colors按钮,然后选择一个预定义的值,例如dark。 现在图表看起来像这样:

  WijmoJS Designer对于操作图表系列等集合特别有用。 例如,您可以通过添加适当类型的新系列元素,轻松地将趋势线添加到图表。 在我们这样做之前,让我们看看设计师生成的默认系列集合。 在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。

  将鼠标悬停在最新价格上,然后单击出现的链接。 请注意,它具有latestPrice的绑定值,对应于数据源中的实际字段名称。 name属性(在图表图例中显示)具有适当的大小写和单词之间的空格。

  单击后退按钮返回FlexChart设置,然后像以前一样展开系列属性。 现在单击“添加项目”链接以将新图表系列添加到集合的末尾。 单击新添加项目右边缘的向下箭头,然后从可用系列类型列表中选择TrendLine。

  新添加的项目现在显示为[趋势线]。 将鼠标悬停在括号内的文本上,然后单击出现的链接。 现在,“属性”窗格显示特定于TrendLine类的属性。 设置绑定到latestPrice,fitType设置为Logarithmic,以及对Plot的可见性。 您不需要为name属性提供值,因为图例中将省略此系列。 随着趋势线添加到图表中,设计器现在看起来像这样:

  在源视图中,生成的代码以对FlexChart构造函数的调用开始。 请注意axisY和legend的子对象参数。

  var flexchart1 = new wijmo.chart.FlexChart(#flexchart1, {

  借助WijmoJS 在线Web Designer,您可以通过可视化设计界面来轻松构建具有WijmoJS纯前端控件的应用程序,该界面可让您轻松操作控件属性,子对象和集合。并且自动生成可以添加到项目中的纯Java代码和HTML,节省开发人员的项目设计和开发时间,最大限度地减少编码错误和拼写错误。

  赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。

  声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。

http://wendevick.net/fuwuqikongjian/111.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有