Tinyui Component Development Examples

Tinyui is not actually a specific UI presentation component, it's just a UI building system. It can be adapted to a variety of html+css+js architectures. Tinyui mainly solves the following problems:

• The introduction and sequence of JS in UI, the problem of JS merging
• The introduction and order of CSS in UI, the problem of CSS merging
• The extent of the impact of a performance problem in the UI, such as a problem with a tree, to change many of the places used in the tree
• Code duplication problem, the same content in many places, if you want to change will change a lot of places
• Problems with difficulty in overall layout adjustment
• The problem of development efficiency
• Implementation efficiency issues, the front desk response requirements faster
• Problems with clusters
• The question of internationalization
• Wait a minute

So, it's just a system that doesn't provide a specific UI component, but it's easy to wrap and integrate other UI frameworks while solving the various problems that are running in the process.   It also solves the problem of modularization, that is to say, we all build a module according to the specification, and then reuse it, it is not necessary to consider how to introduce the CSS,JS and the related problems of its introduction order. For a systematic explanation, please refer to the ultimate solution for UI development.
The following is an example of integrating jquery and jQueryUI to develop the Tinyui component package.
Development of the JQuery Tinyui component package

• Create a new MAVEN jar type Project
• Create the Jquery/js directory in main/resources/, and then put the Jquery-1.11.0.js file in the/jquery/js/directory
• Create Jquery.ui.xml in the Main/resources directory with the following file contents

1 2 3 4 5

<ui-components> <ui-component name= "jquery" > <js-resource>/jquery/js/jquery-1.11.0.js</js-resource> </ui-component> </ui-components>

The UI component package for Ok,jquery is ready to be developed.
Simple description: In fact, the above file organization, just an example, you can actually according to your own needs to develop their own specifications, to organize the directory, the only thing to note is js-resource in the path of jquery-1.11.0.js, to/ Resources are the root of the beginning to be correctly referenced.

Development of the jQueryUI Tinyui component package

• Create a new MAVEN jar type project and rely on the jquery project created above
• Create the Jqueryui/js directory in main/resources/, and then put the Jquery-1.11.0.js file in the/jqueryui/js/directory
• Create a theme directory in main/resource/jqueryui/with all of the jQueryUI theme folders
• Create Jqueryui.ui.xml in the Main/resources directory with the following file contents

1 2 3 4 5

<UI-COMPONENTS>     <ui-component name= "jQueryUI" dependencies= "jquery";          <js-resource>/jqueryui/js/jquery-ui-1.10.3.custom.js</js-resource>     </ Ui-component> </ui-components>

The UI component package for

Ok,jqueryui Even if the basic development is complete.  
Explain the difference between working with jquery, why rely on the jquery project created above in Pom? The reason is that the jQueryUI operation is required for the jquery runtime.  
Why has the jquery package been relied upon in the Pom and the dependencies= "jquery" attribute to be added to the ui-component line?  
because the problem with pom dependency is that if you want to use jQueryUI, you must have a runtime library of jquery.  
But with the runtime, the introduction of JS is sequential. At this time, the Tinyui framework will not know which JS to introduce in front, but with the dependencies= "jquery" attribute, Tinyui framework know, oh, jQueryUI can only be referenced after jquery.  
Why is there a saying that is basically done? That is, it is now true that it is done, but the programmer still has to learn more about the jQueryUI when writing the code, and then write it with no intrinsic difference, which is certainly not the end point of the Tinyui framework to solve the problem. &NBSP:
There is no way to let people who do not understand jQueryUI can simply use the jQueryUI? Of course, take a look at the section below to create an interface component definition file.  
Tinyui component definition   create/resources directory in component directory of jQueryUI project and create Jquery_ in it ui.component file  

1 2 3 4 5 6 7 8 9 11 + + + + +

##============================================= ===================================== # jQueryUI Dialog ##=============================================== =================================== #* parameter Id:id Title: Title Construct: Build parameters, see jQueryUI Manual in detail *# #macro (jui_dialog $id $title $construct) < div id= "$id" title= "$!title";     $!bodycontent </div> < Script>     $ (function () {         $ ("#$! ID "). dialog ($!construct);    }); </script> #end ##============================================================================= ====

As above, defines a macro, named Jui_dialog, which has two parameters, one is the title, and the other is the build parameter.
The syntax used is velocity syntax-because the Velocity template language is integrated internally.
After the development of the people, the use is very simple, just enter the following content:

1 2 3

# @jui_dialog ("window caption") Here to put the content #end

You can use jQueryUI's dialog to display a dialog box directly.
Of course, you can also define more macros, such as:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25

##================================================================================== # # jquery accordion, Parameters: ID, build parameters ##================================================================================== #macro (jui_accordion $id $construct) < div id= "$id" > $!bodycontent </div> < script> $ (function () { $ ("# $id"). Accordion ($construct); }); </script> #end ##================================================================================== ##================================================================================== # #by Rogo jquery accordion section, parameters: Title ##================================================================================== #macro (jui_accordionsection $title) <div> $!bodycontent </div> #end ##==================================================================================

You can then build a drawer effect in the following way when you write the interface:

1 2 3 4 5 6 7 8 9 10 11

# @jui_accordion ("abc") # @jui_accordionSection ("First drawer") The contents of the first drawer #end # @jui_accordionSection ("second drawer") The contents of a second drawer #end # @jui_accordionSection ("second drawer") The contents of a second drawer #end #end

Through the above processing, you can largely block the developer's reliance on the specific UI development framework, but on the basis of other people's research, like calling a function, it can be convenient to build the interface application. development of Tinyui interface Tinyui interface Development, there are two file formats, one end with. page, one ending with. layout
The. page file represents a paging file that is used for presentation, and the. layout file represents a layout file that cannot be used alone for presentation, but can be defined in a layout and affects the presentation of the. Page file. Dull, rather obscure, or use examples to illustrate:

• Create a new JAR-type MAVEN project
• Create the following directory structure directory in the main/resources/directory,

1 2	main/resources/demo/a Main/resources/demo/b

In other words, create a demo directory on Main/resources and create a and B two subdirectories in the demo directory.
Create the Default.layout file in the demo directory with the following contents:

1 2 3

$pageContent < h3> this is footer

Then create a a.page in the A directory with the following content:

1

I'm a.

Create a b.page in the B directory with the following content:

1

I'm a B.

At the time of execution, enter http://localhost:8080/sample1/demo/a.page in the browser
The result of this operation is:

1 2 3

I'm a. < h3> this is footer

At the time of execution, enter http://localhost:8080/sample1/demo/b.page in the browser
The result of this operation is:

1 2 3

I'm a B. < h3> this is footer

It seems that the layout file has really worked.
some special usage 1: personalization, from the example above, you can see that the layout file will work for all the files in the current folder.   But in a special scenario, there are really different scenarios, there are two ways: one is to separate the different from the current directory, and the other is to create a layout file with the same name. For example, in the example above, create a a.layout file in the demo directory with the following content:

1 2 3

$pageContent < H3>this is footer

At the time of execution, enter http://localhost:8080/sample1/demo/a.page in the browser
The result of its operation becomes:

1 2 3

I'm a. < H3>this is footer

Usage 2:ajax Support:
For example, when using AJAX to load the local, do not expect the layout to load, just want to this page file what is what, otherwise it will lead to repeated rendering situation. The Tinyui framework also has a good support for this, as long as the request is done by adding a let behind the page:
Http://localhost:8080/sample1/demo/a.pagelet
This time it comes out with only the following:

1

I'm a.

Usage 3: Internationalization support If I want Chinese to visit, show "I am a", Americans visit, show "I am a", how to do?
Create A.zh_cn.page content is "I am a"
Create A.en_us.page content is "I am a"
Similarly, the layout file supports the same internationalization rule support.
Of course, this is suitable for two page structure and the content of a very different situation.
If you only use international resources for simple, international content support
For example, there is an international resource key value is the title, then simply write #i ("title") can be.
Summary: Tinyui is a UI building system, but it is not a specific UI framework, so it has no JS, no CSS, no HTML, it just provides the ability to integrate various UI presentation frameworks, and provides the organization of UI component packages. and solve the problems of JS,CSS introduction order, merging, compressing, internationalization and so on.
The above only shows some of the features, more please refer to the relevant documentation or download directly after the trial.

Tinyui Component Development Examples