响应式设计

元件自动侦测改变外观

现在网页应用程序越来越朝向「mobile first」设计,代表网站都要能支援不同装置下的浏览器浏览。ZK 框架本身能侦测浏览器是否为行动装置浏览器而自动改变元件的外观,这个行为不需要任何额外的程序与设定。

例如以 <colorbox> 元件来说,桌面浏览器会显示一个小 popup:

https://ithelp.ithome.com.tw/upload/images/20211014/20050621W8lJbEUpk8.jpg

手机上会显示则会显示在底部成一大片色盘可供点选:

https://ithelp.ithome.com.tw/upload/images/20211014/20050621DIl6caT016.jpg

所以就元件本身来说,大部分可以倚靠这个自动变更外观的能力,减少你需要额外设计给手机浏览器的成本。

响应式设计需要设计

也许有人梦想用了某个框架或工具就能自动把你的网页程序变成响应式设计,但这是不可能的!例如说,你在画面上设计了一支长蛇,当小装置浏览时,到底是要变成「短短的蛇」还是「弯弯曲曲的蛇」,没有程序可以帮你自动决定。这不是从技术角度来订,而是一种设计上的决定。因此响应式设计,首先要有人先「设计」,再由工程师实作出来。

https://ithelp.ithome.com.tw/upload/images/20211014/20050621GMnah79Yqv.png

因此 ZK 框架提供各项功能让你能实作出各种响应式设计,本文提供一个概略的介绍。

ZK Flex

先前文章曾提过每个元件都支援的 hflex/vflex 属性,可用来设定元件的尺寸比例分配,不需指定固定尺寸,就很适合用来实作响应式设计。不管宽度多少的萤幕,都能维持相同比例的排列。

https://ithelp.ithome.com.tw/upload/images/20211014/20050621rAKMezK9Mv.png

<div id="menuitem1" hflex="1" sclass="box content1">
	MenuItem 1
</div><div id="menuitem2" hflex="2" sclass="box content2">
	MenuItem 2
</div>

CSS flexbox

如果 ZK flex 不够用,你可以直接使用 flexbox 语法来做最细节的尺寸控制。

<div class="panel">
	<div style="flex:2;" width="200px">MenuItem 1</div>
	<div style="flex:1;" width="200px">MenuItem 2</div>
	<div style="flex:0;" width="200px">MenuItem 3</div>
</div>

Bootstrap Grid System

Bootstrap 是套广泛流行、简单易用的前端框架,它内含一套「12 栏位格状排版」系统,只要指定特定的 css class 在 <div> 上,就能够使用它内建的响应式设计,可以大大简化实作响应式设计的过程与成本。因为它的用法只是在 <div> 上加上 css class,所以可轻易跟 ZK 整合,我非常推荐使用。例如以下这种流行的 admin template 就是整合 Bootstrap 做成。

https://ithelp.ithome.com.tw/upload/images/20211014/20050621c4Oc0YBeSs.png

基本设计原则就是要把画面切成一个一个 row,然後决定每个 row 中,每个区域要占多少 column 宽(每 row 共 12 columns),因此通常你会把页面做如下排版设计:

https://ithelp.ithome.com.tw/upload/images/20211014/20050621lm0grdsyby.png

一个 column 中可以再巢状切分为多个 row,例如以下就是再分为2个 row,并各自切成不同的 column 数:

https://ithelp.ithome.com.tw/upload/images/20211014/20050621gPR85Ggq8i.png

以上这个整合范例程序码请看 https://github.com/zkoss-demo/admin-template

Client Info event

不过有时不只是尺寸变化,元件可能得改变功能、消失、换成别的元件,例如侧边栏要变成小汉堡选单时,这就不是单纯 css 能做到。

例如以下是宽萤幕画面:

https://ithelp.ithome.com.tw/upload/images/20211014/200506217FfpauBBQj.png

窄萤幕画面要把侧边栏变成只有小图示,而且 Admin (使用者名称)要消失:

https://ithelp.ithome.com.tw/upload/images/20211014/20050621lUPUxKZdz5.png

这就牵涉要呼叫元件(navbar) API 来改变元件功能,以及移除 Label 元件。

ZK 让你能注册 ClientInfoEvent 倾听器,当画面载入时,或浏览器状态改变,例如手机本来直向变成横向,ZK client 就会将浏览器端资讯如宽度、高度、画面旋转方向透过 onClientInfo 事件发到服务器,你就可以在你的倾听器来实作要怎麽处理。例如根据宽度来决定是否要增加/移除某些元件等,或是显示某些资讯等,因此你可以再倾听器中实作各种变化。

comp.addEventListener(Events.ON_CLIENT_INFO,new EventListener<ClientInfoEvent>() {
public void onEvent(ClientInfoEvent event)throws Exception {
	...
});

利用以上功能与 <template> 就能在一个页面上实作出符合多种装置的设计。


<<:  [Day29]ISO 27001 附录 A.17 营运持续管理之资讯安全层面

>>:  [Day 30] 终於结束了OMG

[Day23]Virtual Service

上一篇的Bookinfo这个服务中,我们有使用samples/bookinfo/networking...

[铁人赛 Day07] 为何不该使用 index 当作 Key 值 ?——React render 更新机制解释

前言 你可能听过以下这个错误案例(或者说 anti-pattern 的案例):在一个会不断新增、排序...

NNI安装後的验证02

前回提及,在浏览器网址,输入 127.0.0.1:8085,进入WebUI管理介面。此时,您将会看到...

成员 16 人:明白「客情」和「爱情」的道理

客户,是不是真的好烦? 「如果假日突然感觉到烦,那就真的会很烦。」 因为到了 16 人了,经常性地会...

EP18 - 欢迎来到容器管理工具的 EKS

昨天我们把 Django 专案容器化, 最後推送上 AWS ECR, 部署上仍旧仰赖 Code De...