ZK dos and donts part2"

From Documentation
Line 77: Line 77:
  
 
[[Image:Dndsmalltalk-cross-icon.png]] '''Don’t:'''
 
[[Image:Dndsmalltalk-cross-icon.png]] '''Don’t:'''
−
*Include /zkau/** from your SSO filters.
+
*Include /zkau/** in your SSO filters.
 
*Redirect /zkau/** requests to a login page.
 
*Redirect /zkau/** requests to a login page.
  

Revision as of 09:43, 20 April 2016

Documentationatthieu
atthieu
Author
Matthieu Duchemin, Engineer, Potix Corporation
Date
April 2016
Version
ZK 8

ZK Do's and Don'ts Part 2

ZK Framework offers a lot of features to simplify the creation of Java-based web applications. Some of these features are not always well known. From time to time, we come across suboptimal implementation. Usually, it only takes a few simple steps to turn them simpler and easier. Those aren't necessarily broken or damaging, but improving them can have very positive effects with few changes or efforts. You will find here a few cases where ZK efficiency can be maximized. For more ZK do's and don'ts, check out [ZK_Dos_and_Donts part1].

Example project available here

Choosing the most appropriate way to add external code to a page

Creating a page by inserting code fragments from external files is a very efficient way to create a dynamic page while avoiding code repetition and sometime you may need to include a completely different document in your layout. To that effect, ZK offers three different ways to add external code to your layout:

Iframe Creates and HTML iframe. Delegate a portion of the display to another URL, loaded by the browser by sending a request to the specified URL.

Include Insert the output of another document in the current page. While the included content is not available during the initial page rendering, it is served in the following AU requests and doesn’t triggers a separate page request by the browser. Include mode will cause different behavior and DOM structure in instant or defer mode, for example a new page instance is create for the content in defer mode.

Apply with templateUri (ZK 8 PE/EE only) Resolve a zul template and insert its content directly in the current page structure. The zul template will behave as if directly written in the current zul structure. Additional information here.
Dndsmalltalk-check-icon.png Do:

  • Use Iframe to insert external references or full pages in your layout.
  • Use Iframe to insert a full html page (with an <html> element) in a zuml document.
  • Use include to insert zuml pages or zul fragments in a zuml document.
  • Use apply to dynamically change the content of a document based on conditions and zul fragments.
  • Use apply to re-use code fragments in multiple locations.


Dndsmalltalk-cross-icon.png Don’t:

  • Use Iframe if you want your page to communicate easily with the inserted content.
  • Use include to insert a full document, such as a full html page.


Resolving the “Component definition not found: [shadow element]” exception

ZK 8 introduced shadow elements to help developers create dynamic pages based on templates. These shadow elements are introduced here When using one of these shadow elements, you may encounter one of the following exceptions:

  • Component definition not found: apply in [LanguageDefinition: xul/html]
  • Component definition not found: choose in [LanguageDefinition: xul/html]
  • Component definition not found: forEach in [LanguageDefinition: xul/html]
  • Component definition not found: if in [LanguageDefinition: xul/html]
  • Component definition not found: otherwise in [LanguageDefinition: xul/html]
  • Component definition not found: when in [LanguageDefinition: xul/html]

Shadow elements requires the zuti.jar, so this would likely be caused by a missing zuti dependency. If you are using maven, make sure that the zuti dependency is declared in your Pom.xml file: 

		<dependency>
			<groupId>org.zkoss.zk</groupId>
			<artifactId>zuti</artifactId>
			<version>${zk.version}</version>
		</dependency>

If you are manually managing your dependencies, make sure to add the zuti jar to your project. See the example project pom.xml file for an example on how maven dependencies can be used to resolve this package.[link to pom.xml file]


Dndsmalltalk-check-icon.png Do:

  • Use shadow elements to easily create dynamic layouts when appropriate for your project.

Dndsmalltalk-cross-icon.png Don’t:

  • Forget to include the zuti jar in your dependencies.

Using ZK with a SSO or Security architecture

ZK clients communicate with their ZK server without refreshing the pages by sending AU requests, and receiving AU responses. These exchanges target the ZK update servlet at webapp/zkau/** When using a SSO or a security architecture as Spring security, page requests are intercepted and processed by the authentication framework. If a user session expires during browsing, AU requests sent by this page to the ZK server will be captured by the authentication framework and will not reach their destination. This will result in errors such as “server unavailable” or k"Server temporarily unavailable (0)”. To avoid these errors, the authentication server should be configured to let requests on /zkau/* pass through. The syntax depends on the authentication framework, but for example, this can be achieved in Spring security with: <security:http pattern="/zkau/**" security="none"/> [1]


Dndsmalltalk-check-icon.png Do:

  • Use authentication frameworks with ZK if relevant to your project.

Dndsmalltalk-cross-icon.png Don’t:

  • Include /zkau/** in your SSO filters.
  • Redirect /zkau/** requests to a login page.

Using multiple sizing mechanisms on the same components

ZK offers multiple options to specify sizes on components when creating a layout. While some of these options can be used in conjunction, it is generally easier to avoid using multiple sizing methods on the same components. Some sizing mechanisms can also give unexpected results when used in conjunction, when the result isn’t logical. When using flex min on a container, you instruct it to size up to host all of its content. If you give flex true to the content, it will try to size up to fill its container. In that case, the end result will depend on which component calculate its size first. Width and Height Hflex and Vflex Other methods: rows, sized by content, etc


Dndsmalltalk-check-icon.png Do:

  • Use the most appropriate sizing mechanism for your control.
  • Swap sizing mechanisms anytime you need.

Dndsmalltalk-cross-icon.png Don’t: Use multiple sizing mechanisms on the same component at the same time when a simpler solution is available.

CRUD operations on ListModels using MVVM

When updating a ListModel in MVVM, calling NotifyChange on the whole ListModel is the simplest way to update the view. However, this will cause the whole ListModel to be resent to the client. When performing CRUD operations on a ListModel, you can take it one step further and only send an incremental update for the right entries. On large or very complicated ListModels, this can make a significant difference in response size, and in client-side processing. You will find some example of such operations here. This example illustrate a few ways to optimize exchanges between the View Model and the View for CRUD operations, but specific implementations can vary depending on the requirements.


Dndsmalltalk-check-icon.png Do:

  • try to keep updates as light as possible by using targeted update mechanisms.

Dndsmalltalk-cross-icon.png Don’t:

  • Update a whole ListModel when changing a single or a few entries.
  • Use @load() on your ListModel when @init is enough. (see ZK Do’s and Don’ts part 1[Link to part1#init]).


References


Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=User:Matthieu/ZK_dos_and_donts_part2&oldid=44827"