web appbuilder 改变样式和添加自定义widget

简介: 一、改变样式 要实现的效果是添加cyan样式 1、将FoldableTheme/style下的cyan copy到TabTheme下的同一目录下; 2、打开TabTheme下的manifest,copy FoldableTheme同意路径下的cyan配置 如下图 3、运行即可看到如...

一、改变样式

要实现的效果是添加cyan样式

clip_image002[4]

1、将FoldableTheme/style下的cyan copy到TabTheme下的同一目录下;

2、打开TabTheme下的manifest,copy FoldableTheme同意路径下的cyan配置

如下图

clip_image004[4]

3、运行即可看到如上效果;

二、添加widget

一、通过app过程添加

1、同样在…/arcgis-web-appbuilder-1.0\client下的stemapp上按住shift+右键,选择在此处打开命令窗口

clip_image006[4]

2、输入yo esri-appbuilder-js:widget

3、然后输入要定义的widget的名字,一路enter即可,

clip_image008[4]

总的效果如下:

clip_image010[4]

二、Widget自定义复制

1、将模板widget复制一份为widget1

clip_image011[4],

2、然后将widget1中所有的widget文字都改为widget1,

3、之后打开appConfig所对应的config,也就是根目录的config

4、在widgetPool下的widgets中如下

clip_image013[4]

5、复制
 
{<BR>
&nbsp; <B>"name"</B>: <B>"Widget"</B>,<BR>
&nbsp; <B>"label"</B>: <B>"</B><B>定点</B><B>"</B>,<BR>
&nbsp; <B>"version"</B>: <B>"0.0.1"</B>,<BR>
&nbsp; <B>"IsController"</B>: <B>false</B>,<BR>
&nbsp; <B>"uri"</B>: <B>"widgets/Widget/Widget"</B>,<BR>
&nbsp; <B>"config"</B>: <B>"configs/Widget/config_</B><B>定点</B><B>.json"</B>,<BR>
&nbsp; <B>"index"</B>: 5,<BR>
&nbsp; <B>"id"</B>: <B>"widgets/Widget/Widget_29"<BR>
</B>}

6、然后将widget改为widget1,最重要的是改变”config“和”index”

,

{<BR><B>"name"</B>: <B>"Widget1"</B>,<BR><B>"label"</B>: 
<B>"</B><B>自定义</B><B>"</B>,<BR><B>"version"</B>: 
<B>"0.0.1"</B>,<BR><B>"IsController"</B>: <B>false</B>,<BR><B>"uri"</B>: 
<B>"widgets/Widget1/Widget"</B>,<BR><B>"config"</B>: 
<B>"widgets/Widget1/config.json"</B>,<BR><B>"index"</B>: 6,<BR><B>"id"</B>: 
<B>"widgets/Widget1/Widget_29"<BR></B>}

7、效果如下:

clip_image014[4]

目录
相关文章
|
5月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
61 0
|
2月前
|
安全 前端开发 API
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
|
21天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
30 11
|
2月前
|
JavaScript PHP 开发者
PHP中的异常处理与自定义错误处理器构建高效Web应用:Node.js与Express框架实战指南
【8月更文挑战第27天】在PHP编程世界中,异常处理和错误管理是代码健壮性的关键。本文将深入探讨PHP的异常处理机制,并指导你如何创建自定义错误处理器,以便优雅地管理运行时错误。我们将一起学习如何使用try-catch块捕获异常,以及如何通过set_error_handler函数定制错误响应。准备好让你的代码变得更加可靠,同时提供更友好的错误信息给最终用户。
|
3月前
|
JavaScript 前端开发
Web Components详解-Shadow DOM样式控制
Web Components详解-Shadow DOM样式控制
75 3
|
5月前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
47 0
|
5月前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?
|
11月前
|
Web App开发 存储 安全
大师学SwiftUI第17章Part1 - Web内容访问及自定义Safari视图控制器
App可以让用户访问网页,但实现的方式有不止一种。我们可以让用户通过链接在浏览器中打开文档、在应用界面中内嵌一个预定义的浏览器或是在后台下载并处理数据。
89 0
|
Web App开发 JavaScript 前端开发
Web组件规范和自定义元素
Web组件规范和自定义元素
132 0
|
搜索推荐 JavaScript 数据可视化
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
数据可视化大屏高德地图javascript webAPI开发的智慧治安物联网管理系统实战解析(web GIS、3D视图、个性化地图、标注、涟漪动画、自定义弹窗、3D控件)
490 0
下一篇
无影云桌面