|
|
| Line 1: |
Line 1: |
| − | {{Template:Smalltalk_Author| | + | {{ZKComponentReferencePageHeader}} |
| − | |author=Hawk Chen, Engineer, Potix Corporation
| |
| − | |date=2018
| |
| − | |version=ZK 8.6.0}}
| |
| | | | |
| − | __TOC__
| + | = Signature = |
| | + | [ since 8.6.0 ] |
| | + | *Java API: <javadoc>org.zkoss.zkmax.wgt.Signature</javadoc> |
| | + | *JavaScript API: <javadoc directory="jsdoc">org.zkoss.zkmax.wgt.Signature</javadoc> |
| | | | |
| − |
| |
| − | = Introduction =
| |
| − | Rich and reusable components are the main reason that people adopt ZK. In 8.6 release, we focus on making components more powerful, we create several new components for multimedia and enhance some components to support more features.
| |
| − |
| |
| − | Highlighted features:
| |
| − | * 8 new components
| |
| − | * Compact theme
| |
| − |
| |
| − | == Download and Demo ==
| |
| − | <br />
| |
| − | <div style="float: left;"><imagelink link="http://www.zkoss.org/download/zk" image="/_w/images/0/00/Download-zk-7.png" /></div>
| |
| − | <div style="float: left"><imagelink link="http://www.zkoss.org/zkdemo/" image="/_w/images/6/68/Demo-zk-7.png" /></div>
| |
| − | <br />
| |
| − | <br />
| |
| − | <br />
| |
| − | <br />
| |
| − | <br />
| |
| − | <div style="height:70px; border-radius:5px;font-family: 'Didact Gothic', sans-serif; text-align:center; padding:5px; background-color: #0093f9;">
| |
| − | <h1 style="margin: 5px;padding-bottom: 15px;border:2px dashed #F7EEEE;color:#fff;">Highlighted Features</h1>
| |
| − | </div>
| |
| − |
| |
| − | = Refresh Theme without Change - Compact Theme =
| |
| − | {{ZK All}}
| |
| − | The new default theme iceblue is great. But we also hear from some users' voice, we now build a compact theme to let you refresh your application's looking without modification.
| |
| − |
| |
| − | [[Image:compact-theme.png | center]]
| |
| − |
| |
| − | Please check them at [https://www.zkoss.org/zk85themedemo/ Theme Demo]
| |
| − |
| |
| − |
| |
| − | = [[ZK_Component_Reference/Multimedia_and_Miscellaneous/Video|Video Player]] =
| |
| − | {{ZK All}}
| |
| − |
| |
| − | [[Image:video-player.gif | center]]
| |
| − |
| |
| − | With this component, you can build your own youtube or a online school.
| |
| − |
| |
| − | = [[ZK_Component_Reference/Input/Checkbox#Mold| Ios Style Switch and Toggle]] =
| |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3958 -->
| |
| − | {{ZK All}}
| |
| − | Checkbox supports 2 new molds:
| |
| − | == Ios Style Switch ==
| |
| − | [[File:checkbox-ios-style-switch.gif | center]]
| |
| − |
| |
| − | == Toggle ==
| |
| − | [[File:checkbox-toggle.gif | center]]
| |
| − |
| |
| − | Check [[ZK%20Component%20Reference/Input/Checkbox| Component Reference]].
| |
| − |
| |
| − | = [[ZK_Component_Reference/Input/Checkbox| 3 States Checkbox]] =
| |
| − | <!-- http://tracker.zkoss.org/browse/ZK-136 -->
| |
| − | {{ZK All}}
| |
| − | Checkbox supports intermediate states:
| |
| − | [[File:checkbox-3states.png | center]]
| |
| − |
| |
| − |
| |
| − | = [[ZK_Component_Reference/Input/Slider| Knob-like Slider]] =
| |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3961 -->
| |
| − | {{ZK All}}
| |
| − | Set the mold attribute with <tt>knob</tt> will enable knob slider. So the slider can act as a normal knob. You can controll by wheel, drag, click and enter a value to the textbox in the center.
| |
| − |
| |
| − | [[File:knob-slider.gif | center]]
| |
| − |
| |
| − |
| |
| − | = [[ZK%20Component%20Reference/Essential%20Components/Toolbar| Toolbar Accommodates More Buttons]] =
| |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3179 -->
| |
| − | {{ZK All}}
| |
| − | When <tt>overflowPopup="true"</tt>, a toolbar will have a <tt>...</tt> symbol that shows a popup which contains those buttons weren't able to fit in the toolbar.
| |
| − |
| |
| − | [[File:Toolbar-overflowPopup.gif | center]]
| |
| − |
| |
| − |
| |
| − | = Page Navigation Helper=
| |
| − | <!-- http://tracker.zkoss.org/browse/ZK-4028 -->
| |
| − | {{ZK All}}
| |
| − |
| |
| − | = [[ZK%20Component%20Reference/Layouts/GoldenLayout| Multi-Screen Layout - Goldenlayout]] =
| |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3954 -->
| |
| | {{ZK EE}} | | {{ZK EE}} |
| | | | |
| − | GoldenLayout is a layout container which layouts panels as docker type. You can drag a panel to dock at 4 regions (north, east, south, west) or to stack on another panel. This component is suitable for building a workspace like interface.
| + | = Employment/Purpose = |
| | + | Signature components supports signature pad on the desktop and mobile browsers. User can customize pen size, pen color, background color etc., it also provides undo, save and clear methods. |
| | | | |
| − | [[File:goldenlayout.gif | center]] | + | = Example = |
| | + | [[File:Signature.png]] |
| | | | |
| | + | <source lang="xml" > |
| | + | <signature width="600px" height="300px" penColor="white" backgroundColor="#AED6F1" penSize="6"/> |
| | + | </source> |
| | | | |
| | + | = Methods = |
| | | | |
| − | = [[ZK_Component_Reference/Multimedia_and_Miscellaneous/Camera| Take a Photo - Camera]] =
| + | The following are some methods to control the Signature: |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3930 -->
| |
| − | {{ZK EE}}
| |
| | | | |
| − | [[File:camera-snapshot.gif | center]]
| + | 1. undo: to remove the last step that was drawn on the signature pad. |
| | | | |
| − | = [[ZK_Component_Reference/Multimedia_and_Miscellaneous/Camera|Record a Clip]] =
| + | 2. save: to save the signature image to the server, user can get the image by listening onSave event. |
| − | {{ZK EE}}
| |
| | | | |
| − | [[File:camera-record.gif | center]]
| + | 3. clear: to clear signature pad. |
| | | | |
| | + | = Toolbar = |
| | | | |
| − | = [[ZK%20Component%20Reference/Layouts/Organigram| Show Your Organization - Organigram]] =
| + | The toolbar contain three buttons: undo button, clear button and save button, it is enabled by default. If you don't want to show the toolbar, please use the following setting to hide it. |
| − | {{ZK EE}}
| |
| | | | |
| − | The component can render a organizational chart upon a <tt>TreeModel</tt>.
| + | <source language="xml"> |
| | + | <signature toolbarVisible="false"/> |
| | + | </source> |
| | | | |
| − | [[Image:organigram.gif | center]]
| + | The toolbar button only contains icon by default. If you want to show message after icons on the button, we provide three attributes: undoLabel, clearLabel, saveLabel. |
| | | | |
| − | = [[ZK%20Component%20Reference/Input/Signature| Sign Here, Please]] =
| + | Default: |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3959 -->
| |
| − | {{ZK EE}}
| |
| | | | |
| − | [[File:sinature.gif | center]] | + | [[File:Signature toolbar.png]] |
| | | | |
| − | [[ZK_Component_Reference/Input/Signature| Signature]] supports singature pad on the desktop and mobile browsers. Developers can setup pen size, pen color, and background color etc. Users can undo, save and clear their signatres.
| + | Customized: |
| | | | |
| − | = [[ZK%20Component%20Reference/Essential%20Components/Rating| Give Me a Rating]] =
| + | [[File:Signature toolbar2.png]] |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3960 --> | + | <source language="xml"> |
| − | {{ZK EE}}
| + | <signature undoLabel="Undo" clearLabel="Clear" saveLabel="Save"/> |
| | + | </source> |
| | | | |
| − | [[File:rating.gif | center]]
| + | = Style = |
| | | | |
| | + | There are some attributes to adjust the signature style: |
| | | | |
| − | = [[ZK%20Component%20Reference/Multimedia%20and%20Miscellaneous/Cropper| Crop a Uploaded Image]] =
| + | 1. penSize, the width of a line on signature, defaults to 1. |
| − | <!-- http://tracker.zkoss.org/browse/ZK-3962 -->
| |
| − | {{ZK EE}}
| |
| | | | |
| − | [[File:cropper.gif | center]]
| + | 2. penColor, can be any color format accepted by context.fillStyle(canvas), defaults to black. |
| − | | |
| − | = [[ZK%20Component%20Reference/Multimedia%20and%20Miscellaneous/Barcode| Display]] and Scan a Barcode =
| |
| − | {{ZK EE}}
| |
| − | | |
| − | [[File:barcode scanner.gif | center]]
| |
| − | | |
| − | | |
| − | <br/>
| |
| − | <div style="height:70px; border-radius:5px;font-family: 'Didact Gothic', sans-serif; text-align:center; padding:5px; background-color: #0093f9;">
| |
| − | <h1 style="margin: 5px;padding-bottom: 15px;border:2px dashed #F7EEEE;color:#fff;">Other Enhancements</h1>
| |
| − | </div>
| |
| | | | |
| | + | 3. backgroundColor, can be any color format accepted by context.fillStyle(canvas), defaults to white. |
| | | | |
| − | == [[ZK%20Component%20Reference/Essential%20Components/Menu/Menupopup| Guide Users with a Pop-up Menuitem]] == | + | = Upload = |
| − | {{ZK All}}
| |
| | | | |
| − | If you want to guide new users to click a menuitem or open a menupopup for them, ZK provide a method to pop up the menuitem in front of users.
| + | After calling save method, the signature will be uploaded to server. You can listen onSave to get the uploaded image and integrate with [https://www.zkoss.org/wiki/ZK_Component_Reference/Essential_Components/Image Image]. |
| | | | |
| − | [[File:menuitem-setactive.gif | center]]
| + | For example: |
| | | | |
| − | <source lang='java'> | + | <source language="xml"> |
| − | menu.getMenupopup().setActive(i);
| + | <signature onSave="image.setContent(event.getMedia())"/> |
| | + | <image id="image"/> |
| | </source> | | </source> |
| | | | |
| − | == Web Fragment == | + | =Supported Events= |
| − | {{ZK All}}
| |
| − | We now separate ZK web fragment support into [http://mavensync.zkoss.org/eval/org/zkoss/zk/zkwebfragment/| another artifact], so that you can decide to include it or not according to your requirement.
| |
| − | | |
| − | <!-- http://tracker.zkoss.org/browse/ZK-4022 -->
| |
| − | | |
| − | | |
| − | == Improved Rendering Speed ==
| |
| − | We improve the rendering speed when opening a tree node and a model change of a chosenbox.
| |
| − | <!--
| |
| − | http://tracker.zkoss.org/browse/ZK-3978
| |
| − | http://tracker.zkoss.org/browse/ZK-3986
| |
| − | -->
| |
| − | | |
| − | = Summary =
| |
| − | ZK is made by Java developers for Java developers; continue bringing technology innovations to enterprise Java web development has always been our top priority. ZK 8.5 provides a great balance between the required server-side simplicity, security, and integrity and the client-side usability, look, and feel. <br/>Join us this fall and harvest Javascript from Java roots!
| |
| − | <br />
| |
| − | <br/>
| |
| − | | |
| − | <div style="float: left;"><imagelink link="http://www.zkoss.org/download/zk" image="/_w/images/0/00/Download-zk-7.png" /></div>
| |
| | | | |
| − | <br /> | + | {| border="1" | width="100%" |
| − | <br/> | + | ! <center>Name</center> |
| − | <br/> | + | ! <center>Event Type</center> |
| | + | |- |
| | + | | <center>onSave</center> |
| | + | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.UploadEvent</javadoc> |
| | + | When user invoke the save method, the event would be triggered. |
| | + | |- |
| | + | | <center>onClear</center> |
| | + | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc> |
| | + | When user invoke the clear method, the event would be triggered. |
| | + | |} |
| | | | |
| − | ZK grows with you. Feel free to [https://www.zkoss.org/support/about/contact share with us] your feedback or suggestion.
| + | =Version History= |
| | + | {{LastUpdated}} |
| | + | {| border='1px' | width="100%" |
| | + | ! Version !! Date !! Content |
| | + | |- |
| | + | | 8.6.0 |
| | + | | August 2018 |
| | + | | |
| | + | |} |
| | | | |
| − | {{Template:CommentedSmalltalk_Footer_new| | + | {{ZKComponentReferencePageFooter}} |
| − | |name=Potix Corporation
| |
| − | }} | |
Signature
[ since 8.6.0 ]
Employment/Purpose
Signature components supports signature pad on the desktop and mobile browsers. User can customize pen size, pen color, background color etc., it also provides undo, save and clear methods.
Example
<signature width="600px" height="300px" penColor="white" backgroundColor="#AED6F1" penSize="6"/>
Methods
The following are some methods to control the Signature:
1. undo: to remove the last step that was drawn on the signature pad.
2. save: to save the signature image to the server, user can get the image by listening onSave event.
3. clear: to clear signature pad.
Toolbar
The toolbar contain three buttons: undo button, clear button and save button, it is enabled by default. If you don't want to show the toolbar, please use the following setting to hide it.
<signature toolbarVisible="false"/>
The toolbar button only contains icon by default. If you want to show message after icons on the button, we provide three attributes: undoLabel, clearLabel, saveLabel.
Default:
Customized:
<signature undoLabel="Undo" clearLabel="Clear" saveLabel="Save"/>
Style
There are some attributes to adjust the signature style:
1. penSize, the width of a line on signature, defaults to 1.
2. penColor, can be any color format accepted by context.fillStyle(canvas), defaults to black.
3. backgroundColor, can be any color format accepted by context.fillStyle(canvas), defaults to white.
Upload
After calling save method, the signature will be uploaded to server. You can listen onSave to get the uploaded image and integrate with Image.
For example:
<signature onSave="image.setContent(event.getMedia())"/>
<image id="image"/>
Supported Events
| Name
|
Event Type
|
| onSave
|
Event: UploadEvent
When user invoke the save method, the event would be triggered.
|
| onClear
|
Event: Event
When user invoke the clear method, the event would be triggered.
|
Version History
| Version |
Date |
Content
|
| 8.6.0
|
August 2018
|
|
