Timtailieu.net 
Phân tích tư tưởng của nhân dân qua đoạn thơ: Những người vợ nhớ chồng… Những cuộc đời đã hóa sông núi ta trong Đất nước của Nguyễn Khoa Điềm
3403
1
0
9 trang
PHP and script.aculo.us Web 2.0 Application Interfaces- P5: script.aculo.us là một thư viện JavaScript cung cấp các hiệu ứng thị giác năng động, điều khiển giao diện người dùng, và các tính năng mạnh mẽ AJAX. Đó là những gì phụ-client PHP là phía máy chủ - mạnh mẽ, đơn giản, vui vẻ hoàn tất, và trên tất cả, PHẢI một! Theo các nhà phát triển, chúng tôi tất cả ước mơ xây dựng các ứng dụng mà người sử dụng ngay lập tức có thể rơi vào tình yêu với và nhận được hiệu quả. Đơn giản và các...
Nội dung trích xuất từ tài liệu:
PHP and script.aculo.us Web 2.0 Application Interfaces- P5
Chapter 6
Let's go straight into making an in-place editing module. We are not going to write
the module from scratch, but we will be extending the above example. In the story so
far, we have added a simple element to the page, initiated the InPlaceEditor
constructor, and added a few options to it. We have clubbed together the above
pieces of code and the complete code is given here:
In-Place Editing Example
Body
{
color:black;
}
#myDiv
{
background-color:#BCE6D6;
width:400px;
height:30px;
text-align:center;
}
window.onload = function() {
new Ajax.InPlaceEditor(
'myDiv',
'URL',
{
okText: 'Update',
cancelText: 'Cancel',
highlightColor:'#E2F1B1',
clickToEditText: 'Click me to edit',
loadingText: 'Loading..',
savingText: 'Saving..'
}
);
}
[ 109 ]
In-place Editing using script.aculo.us
First move the mouse over me and then click on ME :)
Let's look closely into the constructor definition.
new Ajax.InPlaceEditor(
'myDiv',
'URL',
{
okText: 'Update',
cancelText: 'Cancel',
highlightColor:'#E2F1B1',
clickToEditText: 'Click me to edit',
loadingText: 'Loading..',
savingText: 'Saving..'
}
);
Here, we have given a proxy URL in the option. We now need to create a script at
the server side to handle the request sent through this constructor. Let's name it
readValue.php.
That's it! It takes just these two lines to read the value. This is because, by default,
it uses REQUEST to send the value. We can also overwrite it by passing our own
ajaxOptions. We can also replace $_REQUEST with $_POST and it will still work.
Try it out to believe me. Just replace the URL with readValue.php. The new
definition of the constructor now looks like this:
new Ajax.InPlaceEditor(
'myDiv',
'readValue.php',
{
okText: 'Update',
cancelText: 'Cancel',
highlightColor:'#E2F1B1',
clickToEditText: 'Click me to edit',
loadingText: 'Loading..',
savingText: 'Saving..'
}
);
[ 110 ]
Chapter 6
Open the file in a browser. Click on the element and add some new content. It
should show you the following result:
After we edit the text, check out the resulting output:
We were able to read the value at the server-side script. We can do a lot of things
with the value such as edit it, add it to a database, or print it back.
[ 111 ]
In-place Editing using script.aculo.us
Hands-on example:
InPlaceCollectionEditor
We have covered the InPlaceEditor up to now. There is one more nice feature we
need to learn while we are at in-place editing—InPlaceCollectionEditor.
After clicking on the editable element, the user sees a text box or a text area. In
some cases, we need to provide the user with fixed values, which they will have
to choose between.
A simple example can be—being asked what your favourite programming language
is. Instead of entering any value, you would be prompted with fixed values in a
drop-down menu.
Firstly, we have to define the element to initiate the InPlaceCollectionEditor
constructor.
new Ajax.InPlaceCollectionEditor(
'myDIV',
'URL',
{
okText: 'Update',
cancelText: 'Cancel',
collection: ['php','mysql','Javascript','C++']
}
);
If you look closely at the code snippet, the syntax is similar to the InPlaceEditor
syntax. The only major difference is the new option—collection. The collection
option takes multiple values in the form of an array and prompts them in a
drop-down menu for the user. We can use the above server-side code as it is.
Leave this as a part of a hands-on exercise, and try it out! You will be provided the
complete code in the next chapter. In the following screenshot, check out how it
should behave when you convert InPlaceEditor to InPlaceCollectionEditor:
[ 112 ]
Chapter 6
After selecting the JavaScript option and clicking on ok, we get:
In short, InPlaceCollectionEditor is an extension to InPlaceEditor providing
the user with a set of fixed, predefined values. These values are shown in the form
of a drop-down menu.
[ 113 ]
In-place Editing using script.aculo.us
Summary
We have almost edited everything on the page using InPlaceEditor and
InPlaceCollectionEditor. So far we have:
• Learned about InPlaceEditor
• Seen the explanation and code usage for InPlaceEditor
• Learned some tips and tricks with in-place editing
• Seen hands-on modules for InPlaceEditor at the server-side handling
• Learned about InPlaceCollectionEditor
In the next chapter, we will be learning about autocompletion using script.aculo.us.
We call this feature a must for the Web 2.0 applications. It makes the applications
sleek and robust. You have possibly used it in the Yahoo! homepage, or in a Gmail
contact list.
[ 114 ]
Cre ...
