Tacos 一种 Tapestry 的局部刷新组件

   Tacos 是一个为Tapestry4 编写的 AJAX 框架,借助于dojo的特点和 Tapestry 集中式控制的组件技术特别是它的代码生成,它为Tapestry所编写的页面提供了一个良好的 AJAX 调用的支持——页面的局部刷新。

     在编写异步调用的页面时程序员不再需要考虑各种 AJAX 调用的细节,不再需要考虑如何根据返回结果更新页面显示。要做的只是使用异步调用组件并给出需要刷新的组建 ID。它的魔力便在于,一旦这些组建被用户或系统本身触发,框架便会自动的调用相应页面和组件,生成显示结果,并最终更新客户端页面内容。对程序员来说,编写的似乎就是普通 Tapestry 页面,而对用户来说更新的只是页面局部的内容。

    在客户端 Tacos 吸纳了 dojo 开发包,即减轻了script 开发的复杂度,又提高了系统的表现能力。在服务器端主要利用了 Tapestry 的代码生成技术和框架自身良好的扩充能力。下面就简单讨论一下服务器端的实现。

    Tacos的设计思想是“ 局部更新 ”。也就是说,对于大部分相同的页面内容保持不变,只更新局部变化内容。这点看似和大多数使用 AJAX  的框架没有什么差别,但是实现的实质是完全不同的。对Tacos来说,服务器每次都会调用整个完整的页面,但是只保留和返回需要更新的局部内容,这样既和普通HTTP请求保持一致的处理方式也达到了局部更新页面的效果。形象地说就是先 画一幅和原来差不多的画,然后剪一部分和先前不同的内容贴回去

    这种处理的优势就在于它为 AJAX 调用和普通的 HTTP 请求提供了一个几乎相同的编程环境,屏蔽了所有底层细节。使快速开发维护性高的页面成为可能。

    为了达到这个目的,需要服务(service)和组件(component)两方面的支持。服务用来处理所有的异步请求,返回需要更新的现实内容。各个组件会注入一些代码来判断是否需要更新该组件的代码。这样,对于需要跟新的组件会使用一个实际的 writer 来输出结果,而对于不需要等新的组件使用空的 writer,产生的结果立即被抛弃。

    当然也不是说完全没有缺点。一方面,这种编程方式完全不同于普遍使用的 AJAX 编程方式,需要一点时间适应。特别是当需要达到某些特殊效果是更需要对扩展有比较深入的理解。另一方面,为了得到局部内容而生成整个页面有些浪费服务器资源,加重了一些服务器负担。不过由于非显示内容会被框架抛弃,如果再加上精心一点的设计也不会有太多的影响。

    总的来说,这种是现实还是很好的。当然,如果再有类似于远程调用的支持,在不同的场合使用不同的技术效果会更好。现在,Tapestry 4.1 再这方面正在做着很大的改进。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的问答页面示例: ```html <template> <div class="app"> <h1>{{title}}</h1> <div class="question"> <h3>{{currentQuestion.question}}</h3> <div v-if="currentQuestion.type === 'single'"> <div v-for="(option, index) in currentQuestion.options" :key="index"> <input type="radio" :id="option" :value="option" v-model="selectedOption"> <label :for="option">{{option}}</label> </div> </div> <div v-else-if="currentQuestion.type === 'multiple'"> <div v-for="(option, index) in currentQuestion.options" :key="index"> <input type="checkbox" :id="option" :value="option" v-model="selectedOptions"> <label :for="option">{{option}}</label> </div> </div> <button @click="nextQuestion">Next</button> </div> <div v-else> <h3>Thank you for answering the questions!</h3> <ul> <li v-for="(answer, index) in answers" :key="index"> {{answer.question}} - {{answer.answer}} </li> </ul> </div> </div> </template> <script> export default { data() { return { title: 'Questionnaire', questions: [ { question: 'What is your favorite color?', type: 'single', options: ['Red', 'Blue', 'Green', 'Yellow'] }, { question: 'What is your favorite food?', type: 'multiple', options: ['Pizza', 'Burgers', 'Tacos', 'Sushi'] }, { question: 'What is your favorite hobby?', type: 'single', options: ['Reading', 'Sports', 'Music', 'Traveling'] } ], currentQuestionIndex: 0, currentQuestion: {}, selectedOption: '', selectedOptions: [], answers: [] } }, mounted() { this.currentQuestion = this.questions[this.currentQuestionIndex] }, methods: { nextQuestion() { this.answers.push({ question: this.currentQuestion.question, answer: this.currentQuestion.type === 'single' ? this.selectedOption : this.selectedOptions }) this.selectedOption = '' this.selectedOptions = [] this.currentQuestionIndex++ if (this.currentQuestionIndex === this.questions.length) { this.currentQuestion = null } else { this.currentQuestion = this.questions[this.currentQuestionIndex] } } } } </script> <style> .app { margin: 0 auto; max-width: 600px; padding: 20px; } .question { margin-bottom: 20px; } </style> ``` 这个示例包含了三个问题,第一个问题是单选,第二个问题是多选,第三个问题是单选。当用户回答完所有问题后,会显示用户所有的答案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值