stingray 页面布局与设计
前言
前面我们已经了解了系统中的HTML组件，现在我们就可以开始用这些组件来设计页面了，他们就像是一块块小积木，我们要盖起高楼大厦。
两种页面容器组件
我们将关联性较强的多个HTML组件放到一个容器组件中便于统一处理，这就行成了一个区块。多个区块顺序放到一个页面中，变组成了一个页面。基本上就是这个样子：
区块的设计重在熟练掌握这两个容器组件：
- Dynamic Container - 相对定位，高度自适应
- Static Container - 绝对定位，需要指定高度
使用WebEditor制作页面
通过DevToolBar创建新页面或者编辑已有的页面。DevToolBar不显示的问题 - 使用Developer模式运行。使用Applist页面讲解基本使用。
使用Sublime Text开发页面
同样这里使用Applist页面进行讲解基本使用，我们有个基本的对比。开发过程演示讲解。
两种方式的对比
- 直观性，所见即所得
- 操作难易程度
- 调试，问题排查
- 代码格式化
- 开发速度
未来页面设计系统构想
使用Angularjs重新构建前端部分，没错，就是重构我们的系统。
- VRM - 只负责ajax请求的处理，只返回json数据
- html - 视图部分将独立出来
- javascript - JS也将独立出来
- BootStrap - 引入css框架，简化布局
- 通用模块组件化
后端开发培训
下一节我们将介绍后端开发：stingray后端开发
stingray 页面布局与设计的更多相关文章
- APP界面设计之页面布局的22条基本原则
移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...
- APP界面设计与页面布局的23条基本原则
一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...
- TMS WEB CORE直接从HTML&CSS设计的页面布局
TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...
- UI设计，使用 线框图（页面示意图或页面布局图）
在进行页面框架设计的时候,尝试画个 线框图(页面示意图或页面布局图)吧.
- Xamarin+Prism开发详解五：页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
随机推荐
- Java编解码分析
一.为什么要编解码? 网络或磁盘传输的单位都是字节,平常我们使用的单位都是字符,所以数据需要在字节和字符之间进行转换. 二.编解码概念 1.编码:字符转换成字节 2.解码:字节转换成字符 三.常用字符 ...
- Java实现用汉明距离进行图片相似度检测的
Google.Baidu 等搜索引擎相继推出了以图搜图的功能,测试了下效果还不错~ 那这种技术的原理是什么呢?计算机怎么知道两张图片相似呢? 根据Neal Krawetz博士的解释,原理非常简单易懂. ...
- 通过Selector来设置按钮enable/unable状态的样式
我们可以用selector来配置button可用或者不可用时的背景,也可以用它来配置button不同状态下的文字颜色.下面左图是可用状态,右图是不可用状态. 一.配置按钮不同状态的背景 首先我们 ...
- EditText的监听器和自定义回车事件
我们一般是监听EditText的状态,看EditText中是不是有文字,根据有无进行不同的操作. // 给editText添加监听器 editText.addTextChangedListener(n ...
- 让Java和JavaScript进行交互
本篇博文参考自:http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/ 我们在使 ...
- 《嵌入式Linux开发实用教程》
<嵌入式Linux开发实用教程> 基本信息 作者: 朱兆祺 李强 袁晋蓉 出版社:人民邮电出版社 ISBN:9787115334831 上架时间:2014-2-13 出版日期: ...
- FinalizableReference, FinalizablePhantomReference, FinalizableReferenceQueue
FinalizableReference /* * Copyright (C) 2007 The Guava Authors * * Licensed under the Apache License ...
- Chart/Report资源目录
ylbtech-Chart:Chart/Report资源目录 1.Chart.js返回顶部 1-0.官网 http://www.chartjs.org 1-1.实例 http://www.chartj ...
- 创建SQL作业错误的解决方法（不能将值 NULL 插入列 'owner_sid'，表 'msdb.dbo.sysjobs'；列不允许有空值。）
在用SQL语句创建SQL Server作业时有时出现如下错误: 消息 515,级别 16,状态 2,过程 sp_add_job,第 137 行 不能将值 NULL 插入列 'owner_sid',表 ...
- js获取当前域名、Url、相对路径和参数
用 Javascript 可以单独获取当前域名.Url.相对路径和参数,所谓单独攻取,即域名不包括网页文件的路径和参数.参数不包括域名和网页文件路径,下面分别介绍. 一.js获取当前域名有2种方法 1 ...