广州知名网站建设后台管理便捷,PHP关于简单企业网站开发过程简介,网站空间托管,濮阳网页设计在参加会议时#xff0c;我们总是会见到高素质的决策者#xff0c;他们经常问同样的问题#xff1a; 您的框架有多可扩展性#xff1f;如果我需要比您开箱即用的功能更多的东西怎么办#xff1f; 。 这个问题是非常合理的#xff0c;因为他们只是不想被卡在开发曲线的中间… 在参加会议时我们总是会见到高素质的决策者他们经常问同样的问题 您的框架有多可扩展性如果我需要比您开箱即用的功能更多的东西怎么办 。 这个问题是非常合理的因为他们只是不想被卡在开发曲线的中间然后意识到框架只是不允许实现某些功能或者如果您使用开源产品那么它可能会实现。需要花费很长的时间才能深入探究框架中记录较差的部分。 通常会特别注意用户界面部分该框架有多少个组件 是否可以集成第三方小部件 最后将它们集成到您的应用程序中有多么容易。 即使框架为您提供了许多现成的组件有时您可能仍需要具有非常特定的通常不使用的内容因此未在框架中实现。 在本文中我将说明如何将第三方视觉组件集成到CUBA平台中 。 CUBA平台中的通用用户界面 为了让您简要了解CUBA平台提供的现成的视觉组件请查看以下图片 如您所见有一个现成的扩展组件集但是所有组件都是非常通用的广泛用于企业应用程序。 现在假设我们需要集成更具体的内容。 从CUBA Studio的2.1版开始此过程已针对VaadinJavaScript和GWT组件进行了大幅简化因为Studio脚手架存根并添加了新组件的所有必需定义。 新组件到平台的集成分为三个级别 由于框架的通用UI是在Vaadin之上构建的因此新组件可以作为本机Vaadin组件使用。 开发人员已经可以在CUBA应用程序中使用此组件并将其添加到未包装的CUBA容器中。 新组件已集成到CUBA通用UI中。 在这种情况下从应用程序开发人员的角度来看它看起来与可视组件库中的标准组件相同。 开发人员可以在屏幕XML描述符中定义组件也可以通过控制器中的ComponentsFactory创建组件 。 新组件在Studio组件面板上可用并且可以在所见即所得布局编辑器中使用如下图所示。 在本文中我们将研究Vaadin组件的第一级集成并创建一个示例应用程序以了解在现阶段如何在您的CUBA应用程序中使用它。 整合Vaadin组件 如前所述CUBA平台中的通用UI是基于Vaadin框架构建的将其组件集成到CUBA应用程序中非常容易 向第三方Vaadin附加工件添加依赖项。 在您的项目中创建Web-toolkit模块。 此模块包含GWT小部件集文件并允许您创建视觉组件的客户端部分。 只需将附加控件集添加到项目的控件集即可。 如果组件的外观不适合应用程序主题请创建主题扩展并为新组件定义一些CSS。 让我们以Stepper组件为例看看它在CUBA Studio中是如何工作的 第一步我们单击Create web toolkit module 以集成Vaadin组件然后单击Create new UI组件 现在距CUBA中新的Vaadin组件大约10分钟的路程 在“ 组件类型”组框中选择“ Vaadin附加 组件 ”。 要定义Add-on Maven依赖关系值请转到stepper插件页面 按Install绿色按钮从出现的文本框中复制它然后粘贴到CUBA Studio的Add-on Maven依赖项字段中。 最棘手最令人困惑的部分是Inherited Widgetset 对于那些初次使用Vaadin的用户而言 您可以在此处了解有关Vaadin WidgetSets的更多信息但是您并不需要真正了解它就可以继续进行此操作文章。 在stepper附加页面的Related links部分中有一个Source code链接单击它。 该链接将引导您到该组件的GitHub存储库 。 要定义Vaadin组件的小部件集您需要在源代码中找到* .gwt.xml文件。 继续至addon / src / main / resources文件夹。 在这里您将看到包含StepperWidgetset.gwt.xml文件的org / vaadin / risto / stepper /小 部件 集 。 这足以构造我们的Inherited widgetset值 org.vaadin.risto.stepper.widgetset.StepperWidgetset 。 简而言之它是在Java中作为导入类编写的* .gwt.xml文件的路径。 现在取消选中“ 集成到通用UI”框然后说“ 确定” 。 Studio将显示通知“ Component created ”并重新构建项目因为它需要向gradle构建脚本添加新的依赖关系下载所需的库并重新编译widgetset。 因此我们只需要等待几分钟直到该过程完成。 最后我们调整组件以适合我们的应用主题。 如果看一下源代码 我们可以看到该组件是SCSS样式的因此我们需要将其样式添加到项目依赖项中。 为此请转到“ 项目属性”部分单击“ IDE” 。 IDE将显示build.gradle 在其中应将主题“ org.vaadin.addonsstepper2.3.0”行添加到configurewebModule任务的依赖项子句中如下图所示。 现在我们可以应用所需的样式。 转到“ 项目属性”部分然后单击“ 创建主题扩展名” 。 选择halo作为默认值然后单击Create 。 Studio将在应用程序的Web模块中添加themes / halo / halo-ext.scss文件您可以在其中为新组件指定样式或修改现有组件的样式。 它还将在构建脚本中进行必要的更改并为您的IDE重新创建项目文件。 在您的IDE中打开halo-ext.scss文件并粘贴以下CSS如下图所示 …
import ../VAADIN/addons/stepper/stepper;
…include stepper;/* Basic styles for stepper inner textbox */.stepper input[typetext] {include box-defaults;include valo-textfield-style;:focus {include valo-textfield-focus-style;}}
… 而已 现在我们已经可以在CUBA应用程序中使用该组件了 在您的CUBA应用程序中使用3rd Party Vaadin组件 最后让我们用步进器创建一个屏幕。 由于我们仅完成了第一级集成因此它仍然不是通用CUBA UI的一部分因此无法直接在xml屏幕描述符中使用它但是已经可以通过编程方式创建。 让我们开始吧 从我们的网站下载 CUBA Studio进行安装启动CUBA Studio服务器然后在浏览器中打开Studio。 如果您在此阶段遇到任何麻烦请按照视频指南 “快速入门”页面的第1部分进行操作。 创建一个名为vaadin-component的项目。 Studio会自动命名项目名称空间和根包。 请遵循整合Vaadin组件中的步骤 由于步骤3已完成请转到Studio左侧面板中的屏幕部分将重点放在Web模块项上然后单击新建 。 Studio会提示您选择是要从头创建新屏幕还是扩展现有屏幕例如用户编辑器或“文件上传”对话框。 我们将从头开始尝试新的屏幕。 现在我们直接进入“ 布局”选项卡在此处可以直观地设计屏幕。 我们需要使用一些容器该容器将用作步进器的占位符。 在组件搜索字段中输入“ hbox ”Studio会按名称过滤UI组件。 将HBox组件拖放到窗体或层次结构中 右键单击位于可视表单布局中的组件表示形式 或在“ 层次结构”部分中选择组件然后切换到“ 属性”选项卡在“组件面板”旁边。 我们将需要使用屏幕控制器上的Hbox以便能够通过控制器访问CUBA组件我们需要定义其id 。 只需在ID字段中按右按钮Studio就会自动生成一个ID。 另外我们希望步进器的宽度为250px因此我们为其容器指定此尺寸。 应用我们所做的所有更改。 启动您的IDE转到屏幕设计的控制器选项卡然后按IDE的Studio将生成的项目文件并在IDE中打开屏幕控制器。 移至IDEStudio已经在其中安装了屏幕控制器。 让我们编码一下。 您需要添加的所有行均带有详细注释 package com.company.vaadincomponent.web.screens;import com.haulmont.cuba.gui.vaadincomponent.AbstractWindow;
import com.haulmont.cuba.gui.vaadincomponent.HBoxLayout;
import com.vaadin.ui.Layout;
import org.vaadin.risto.stepper.DateStepper;import javax.inject.Inject;
import java.util.Map;public class Screen extends AbstractWindow {/* Getting access to the hbox component, using CUBA mechanism for UI components injection */Injectprivate HBoxLayout hbox;/* Create stepper to be placed into the prepared hbox container */private DateStepper stepper new DateStepper();/* Overriding init method, which will be called by the framework after creation of all components and before showing the screen */Overridepublic void init(MapString, Object params) {super.init(params);/* Unwrapping hbox to get access to the native Vaadin layout to place stepper */Layout box hbox.unwrap(Layout.class);/* Placing stepper component into the unwrapped hbox container */box.addComponent(stepper);/* Defining stepper size to fit 100% of the parent hbox component width */stepper.setWidth(100%);/* Adding listener to show notification when stepper value is changed */stepper.addValueChangeListener(event - showNotification(Value has been changed to stepper.getValue(), NotificationType.HUMANIZED));}
} 要从应用程序的主菜单访问我们的屏幕请转到Studio右侧面板的Main Menu主菜单部分单击Edit编辑将焦点放在应用程序项上然后按New新建 。 默认情况下我们保留了步进器屏幕ID因此在下拉列表中找到屏幕值然后按添加 。 现在是启动应用程序并查看其全部工作方式的时候了。 按“ 播放 ”按钮该按钮位于Studio主菜单的“ 构建”项目下方。 Studio会征得您的许可更新数据库并同意。 当应用程序启动并运行时您将在左下角看到localhost8080 / app链接单击它。 CUBA应用程序将在登录屏幕上与您会面默认用户为admin 您猜密码是多少 只需按Submit 。 单击主菜单的“ 应用程序”-“屏幕”项然后开始 您可以在此处找到工作的步进器示例项目的源代码。 结论 最初我将写一篇文章介绍VaadinGWT和JavaScript组件的所有集成级别但是正如您所看到的那样一篇文章太过复杂了。 因此下一次我将介绍JavaScript组件。 另外我想承认该过程的某些部分可以大大简化甚至完全消除但这是第一步可以立即帮助用户使用很少使用但有时非常有用的小部件使我们的通用用户界面饱和。 因此如果您有关于如何改进它的建议或想法请在我们的论坛上与我们分享。 翻译自: https://www.javacodegeeks.com/2016/07/how-extensible-is-your-framework.html
