Gọi hàm javascript từ trang JSF

• Cameron McKenzie, TechTarget

Đã xuất bản. 04 tháng 5 năm 2015

Một trong những khía cạnh khó chịu nhất khi sử dụng khung web như Wicket, Spring MVC hoặc JavaServer Faces (JSF) là thực tế là đôi khi các nhiệm vụ đơn giản trở nên cực kỳ khó khăn và các giải pháp cho vấn đề dễ giải quyết lại có những bước ngoặt không rõ ràng một cách đáng lo ngại. Một người bạn gần đây đã đặt ra cho tôi một vấn đề phát triển có giải pháp hai nhánh, với nhánh đầu tiên là gọi một bean hỗ trợ JSF thông qua lệnh gọi JavaScript. Bạn sẽ nghĩ rằng ngạnh đầu tiên này sẽ tương đối thẳng về phía trước, nhưng thật đáng thất vọng, nó không phải vậy

Gọi một tài nguyên phụ trợ tiêu chuẩn như Servlet hoặc JSP là một nhiệm vụ khá đơn giản. Xét cho cùng, mọi JSP và Servlet đều có một tên đủ điều kiện để có thể tham chiếu. Mặt khác, các phương thức của các bean được quản lý JSF không được gọi theo cùng một cách truyền thống. Các phương thức của các bean được quản lý bởi JSF cần được gọi thông qua các thành phần giao diện người dùng của JSF chẳng hạn như commandLink hoặc commandButton. Và bạn không thể làm cho các thành phần đó xuất hiện một cách kỳ diệu bên trong một phương thức JavaScript

Mã hóa hướng đầu tiên. trang xhtml

Để giải quyết vấn đề nhỏ này, điều đầu tiên bạn cần làm là đặt một thành phần lệnh JSF trên trang của mình và bọc nó bằng tất cả các câu lệnh thích hợp. phần tử biểu mẫu và tham chiếu thẻ JSF. Sau đây là mã cho prong đầu tiên. trang xhtml

Mã hóa bean được quản lý

Quay trở lại vấn đề cơ bản, phần quan trọng của toàn bộ điều này là commandLink với tên của liên kết và thuộc tính hành động gọi phương thức doS Something của ManagedBean. Theo đó, chúng ta sẽ cần tạo một JavaBean có tên là ManagedBean và một phương thức tương ứng có tên là doS Something. Đây là giao diện của nó

package com.mcnz.jsf;
import javax.faces.bean.*;

@ManagedBean @ViewScoped
public class MyManagedBean {

  public void doSomething() {
    System.out.println("doSomething method called.");
  }

}

Tại thời điểm này, bạn chỉ nên chạy mã và đảm bảo mọi thứ được dán lại với nhau đúng cách. Nếu bạn không thể gọi thành công phương thức doS Something của mình bằng cách sử dụng các thẻ JSF tiêu chuẩn và các bean được quản lý, thì bạn chắc chắn sẽ không thành công khi gọi bean đó bằng JavaScript. Khi bạn chạy chương trình, không có chuyển trang hay bất cứ điều gì. Tất cả những gì bạn sẽ thấy là một thông báo nhỏ vui vẻ trong cửa sổ đầu ra của IDE nêu rõ. "phương thức doSomething được gọi là. "

Vậy làm thế nào bạn có thể gọi phương thức doS Something của myManagedBean thông qua JavaScript? . Việc đặt tên tiêu chuẩn chỉ đơn giản là nối chuỗi tên biểu mẫu với commandLink, đặt cho thành phần tên biểu mẫu. liên kết. Tất nhiên, nếu bạn đã chôn liên kết trong PanelGroups hoặc các thành phần DOM khác, độ sâu của chuỗi kết nối có thể sâu hơn nhiều. Hoặc, bạn đã thiết lập ứng dụng JSF của mình hoàn toàn không xâu chuỗi các tên thành phần lại với nhau, làm cho tên đơn giản là id của commandLink. Chỉ cần chắc chắn bằng cách thực hiện nguồn xem trên nhánh đầu tiên. xhtml khi nó hiển thị trong trình duyệt để xác minh rằng bạn có tên thành phần chính xác

Rải rác trong một số JavaScript

Với các thành phần JSF cơ bản đang hoạt động, đã đến lúc kết nối một số JavaScript để gọi commandLink đó, từ đó sẽ gọi bean được quản lý. Điều kỳ diệu thực sự không gì khác hơn là đi qua DOM của trang web, lấy nút lệnh JSF và gọi phương thức nhấp chuột trên đó

Đó là kịch bản. Bây giờ chúng ta cần một cái gì đó để gọi tập lệnh, có thể là bất cứ thứ gì, nhưng chúng ta sẽ chỉ sử dụng một liên kết neo HTMLM cũ, đơn giản với phương thức onclick của nó trỏ đến phương thức JavaScript invokeCommandLink

Liên kết cố định

Bean được quản lý hoàn toàn không thay đổi, vì vậy không có gì phải lo lắng về mã Java. Trang xhtml hoàn chỉnh trông như sau

  
   
     
   
   Anchor Link
  

   

Đi không đồng bộ

Khi mã được triển khai lại và kiểm tra, liên kết neo hiện gọi bean được quản lý bằng cách đi qua nút lệnh JSF. Nó có một chút chói mắt, nhưng nó hoạt động khá đáng tin cậy và đó thực sự là tất cả những gì chúng tôi mong đợi từ phần mềm của mình

Nhân tiện, chúng tôi có thể thực hiện hai điều chỉnh nhỏ để làm cho mọi thứ tốt hơn một chút trong ứng dụng của chúng tôi. Đầu tiên, chúng ta có thể thêm một kiểu để ẩn hoàn toàn commandLink, đồng thời xóa thuộc tính giá trị. Rốt cuộc, thực sự không có lý do gì để thể hiện nó

Thứ hai, chúng ta có thể thực hiện cuộc gọi phương thức diễn ra không đồng bộ bằng cách sử dụng nút lệnh thay vì lệnhLInke và sử dụng hàm f. thẻ ajax

commandButton style="display:none" id="link" 
    action="#{myManagedBean.doSomething}">
  
commandButton>

Và đó là tất cả để có nó. Nó không hoàn toàn trực quan, nhưng nó có chức năng và hoạt động tốt

Làm cách nào để gọi hàm JavaScript trong JSF?

JSF có sử dụng JavaScript không?

Làm cách nào để gọi một hàm JavaScript trong Xhtml?

Chúng ta có thể gọi hàm JavaScript từ CSS không?