怎样创建一个页面向导

 
向导是引导用户经过一系列页面的方法。当数据可以分成多组,同时不想在一个页面显示很多的数据,在每个页面只包含一个数据分组。那么向导是非常好的选择。
       使用Struts实现页面向导功能:
(1).整体结构如struts-config.xml文件:
<? xml version="1.0" encoding="UTF-8" ?>
<! DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd" >

< struts-config >
  
< data-sources  />
  
< form-beans  >
    
< form-bean  name ="sampleForm"  type ="com.heart.struts.form.SampleForm"   />

  
</ form-beans >

  
< global-exceptions  />
  
< global-forwards  >
      
< forward  name ="sample"  path ="/clearForm.do"   />
  
</ global-forwards >
  
  
< action-mappings  >
  
       
< action
      
attribute ="sampleForm"
      name
="sampleForm"
      path
="/clearForm"
      scope
="session"
      type
="com.heart.struts.action.ClearForm" >
      
< forward  name ="next"  path ="/page1.jsp"   />
    
</ action >
  
    
< action
      
name ="sampleForm"
      path
="/sampleAction1"
      scope
="session"
      forward
="/page2.jsp" />
      
    
< action
      
name ="sampleForm"
      path
="/sampleAction2"
      scope
="session"
      forward
="/page3.jsp" />
      
    
< action
      
attribute ="sampleForm"
      name
="sampleForm"
      path
="/sampleAction3"
      type
="com.heart.struts.action.Submit" >
      
< forward  name ="next"  path ="/clearForm.do"   />
    
</ action >
      
    
  
</ action-mappings >

  
< message-resources  parameter ="com.heart.struts.ApplicationResources"   />
</ struts-config >
  
整个程序中,index.jsp把用户传送到全局的sample转送点,该sample转送点把请求引导至clearForm.do清除表单属性并显示页面page1.jsp.
Page1.jsp提交到sampleAction1.do将页面转送到page2.jsp
同样page2.jsp通过sampleAction2.do将页面转送到page3.jsp
最后page3.jsp提交给sampleAction3.do使用Submit Action处理数据,并把用户转送回clearForm.do继续进行数据收集工作。
 

以上代码清单,index.jsp转送到sample全局转发:

<% @ page language="java" pageEncoding="UTF-8" %>

<% @ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"  %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
  
< head >
    
< title > My JSP 'index.jsp' starting page </ title >
    
  
</ head >
  
  
< body >
    
< logic:forward  name ="sample" />
  
</ body >
</ html >
 
clearFormAction清除表单属性:
/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 
*/

package  com.heart.struts.action;

import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;
import  org.apache.struts.action.Action;
import  org.apache.struts.action.ActionForm;
import  org.apache.struts.action.ActionForward;
import  org.apache.struts.action.ActionMapping;
import  com.heart.struts.form.SampleForm;

/** 
 * MyEclipse Struts
 * Creation date: 09-20-2007
 * 
 * XDoclet definition:
 * @struts.action path="/clearForm" name="sampleForm" validate="true"
 
*/

public   class  ClearForm  extends  Action  {
    
/*
     * Generated Methods
     
*/


    
/** 
     * Method execute
     * 
@param mapping
     * 
@param form
     * 
@param request
     * 
@param response
     * 
@return ActionForward
     
*/

    
public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) 
{
        SampleForm sampleForm 
= (SampleForm) form;
        
        sampleForm.clear();
        
        
return mapping.findForward("next");
    }

}

 
用到表单SampleForm收集数据:
/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 
*/

package  com.heart.struts.form;

import  org.apache.struts.action.ActionForm;

/** 
 * MyEclipse Struts
 * Creation date: 09-20-2007
 * 
 * XDoclet definition:
 * @struts.form name="sampleForm"
 
*/

public   class  SampleForm  extends  ActionForm  {
    
/*
     * Generated fields
     
*/


    
/**
     * 
     
*/

    
private static final long serialVersionUID = 1L;

    
/** productNumber property */
    
private String productNumber;

    
/** comment property */
    
private String comment;

    
/** quantity property */
    
private String quantity;

    
/** firstName property */
    
private String firstName;

    
/** lastName property */
    
private String lastName;

    
/*
     * Generated Methods
     
*/


    
/** 
     * Returns the productNumber.
     * 
@return String
     
*/

    
public String getProductNumber() {
        
return productNumber;
    }


    
/** 
     * Set the productNumber.
     * 
@param productNumber The productNumber to set
     
*/

    
public void setProductNumber(String productNumber) {
        
this.productNumber = productNumber;
    }


    
/** 
     * Returns the comment.
     * 
@return String
     
*/

    
public String getComment() {
        
return comment;
    }


    
/** 
     * Set the comment.
     * 
@param comment The comment to set
     
*/

    
public void setComment(String comment) {
        
this.comment = comment;
    }


    
/** 
     * Returns the quantity.
     * 
@return String
     
*/

    
public String getQuantity() {
        
return quantity;
    }


    
/** 
     * Set the quantity.
     * 
@param quantity The quantity to set
     
*/

    
public void setQuantity(String quantity) {
        
this.quantity = quantity;
    }


    
/** 
     * Returns the firstName.
     * 
@return String
     
*/

    
public String getFirstName() {
        
return firstName;
    }


    
/** 
     * Set the firstName.
     * 
@param firstName The firstName to set
     
*/

    
public void setFirstName(String firstName) {
        
this.firstName = firstName;
    }


    
/** 
     * Returns the lastName.
     * 
@return String
     
*/

    
public String getLastName() {
        
return lastName;
    }


    
/** 
     * Set the lastName.
     * 
@param lastName The lastName to set
     
*/

    
public void setLastName(String lastName) {
        
this.lastName = lastName;
    }

    
    
public void clear() 
        setComment(
"");
        setFirstName(
"");
        setLastName(
"");
        setProductNumber(
"");
        setQuantity(
"");
    }

}

 
 
注意,去掉了reset方法,Struts默认要在填充FormBean之前调用reset方法,每次页面提交时,所有输入的数据都将被清楚。
 
Page1.jsp:
<% @ page language="java" pageEncoding="UTF-8" %>
<% @ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"  %>
<% @ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"  %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
  
< head >     
    
< title > My JSP 'page1.jsp' starting page </ title >
    
< html:base />
  
</ head >
  
  
< body >
    
< h1 > wizard - page 1 </ h1 >
    
    
< html:form  action ="/sampleAction1" >
        first name
< html:text  property ="firstName"   />
        
< br >
        last name
< html:text  property ="lastName"   />
        
< p >
        
< html:submit  value ="next" />
    
</ html:form >
  
</ body >
</ html >
 
Page2.jsp
<% @ page language="java" pageEncoding="UTF-8" %>
<% @ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"  %>
<% @ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"  %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
  
< head >     
    
< title > My JSP 'page2.jsp' starting page </ title >
    
< html:base />
  
</ head >
  
  
< body >
    
< h1 > wizard - page 2 </ h1 >
    
    
< html:form  action ="/sampleAction2" >
        ProductNumber
< html:text  property ="productNumber"   />
        
< br >
        Quantity
< html:text  property ="quantity"   />
        
< p >
        
< html:submit  value ="next" />
    
</ html:form >
  
</ body >
</ html >
 
Page3.jsp:
<% @ page language="java" pageEncoding="UTF-8" %>
<% @ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"  %>
<% @ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"  %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
  
< head >     
    
< title > My JSP 'page3.jsp' starting page </ title >
    
< html:base />
  
</ head >
  
  
< body >
    
< h1 > wizard - page 3 </ h1 >
    
    
< html:form  action ="/sampleAction3" >
        comment
< html:text  property ="comment"   />
        
< p >
        
< html:submit  value ="next" />
    
</ html:form >
  
</ body >
</ html >
 
Page3.jsp把请求转送到SubmitAction进行SampleForm表单数据的最后处理。
Submit:
/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 
*/

package  com.heart.struts.action;

import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;

import  org.apache.struts.action.Action;
import  org.apache.struts.action.ActionForm;
import  org.apache.struts.action.ActionForward;
import  org.apache.struts.action.ActionMapping;
import  com.heart.struts.form.SampleForm;

/** 
 * MyEclipse Struts
 * Creation date: 09-20-2007
 * 
 * XDoclet definition:
 * @struts.action path="/sampleAction3" name="sampleForm" validate="true"
 
*/

public   class  Submit  extends  Action  {
    
/*
     * Generated Methods
     
*/


    
/** 
     * Method execute
     * 
@param mapping
     * 
@param form
     * 
@param request
     * 
@param response
     * 
@return ActionForward
     
*/

    
public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) 
{
        SampleForm sampleForm 
= (SampleForm) form;
        
        System.out.println(sampleForm.getFirstName());
        System.out.println(sampleForm.getLastName());
        System.out.println(sampleForm.getProductNumber());
        System.out.println(sampleForm.getQuantity());
        System.out.println(sampleForm.getComment());
        
        sampleForm.clear();
        
        
return mapping.findForward("next");
    }

}

 
 
此示例中只把收集到的表单数据输出,同样的,可以在此调用业务层逻辑进行数据处理。
最后调用sampleForm.clear()清空属性,并把请求转至另一个页面。
好的,下面是一个简单的Flutter向导页面的demo,主要使用了PageView和Stepper组件。 ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: WizardPage(), ); } } class WizardPage extends StatefulWidget { @override _WizardPageState createState() => _WizardPageState(); } class _WizardPageState extends State<WizardPage> { int _currentStep = 0; PageController _pageController = PageController(); List<Step> _steps = [ Step( title: Text('Step 1'), content: Center( child: Text('This is step 1'), ), ), Step( title: Text('Step 2'), content: Center( child: Text('This is step 2'), ), ), Step( title: Text('Step 3'), content: Center( child: Text('This is step 3'), ), ), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Wizard Page'), ), body: PageView.builder( controller: _pageController, itemCount: _steps.length, itemBuilder: (BuildContext context, int index) { return _steps[index].content; }, onPageChanged: (int index) { setState(() { _currentStep = index; }); }, ), bottomNavigationBar: BottomAppBar( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ FlatButton( onPressed: _currentStep == 0 ? null : () { setState(() { _pageController.previousPage( duration: Duration(milliseconds: 250), curve: Curves.easeInOut); }); }, child: Text('Back'), ), Stepper( steps: _steps, currentStep: _currentStep, onStepTapped: (int index) { setState(() { _pageController.jumpToPage(index); _currentStep = index; }); }, controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) { return Row( children: <Widget>[ FlatButton( onPressed: onStepCancel, child: Text('Cancel'), ), FlatButton( onPressed: onStepContinue, child: Text(_currentStep == _steps.length - 1 ? 'Finish' : 'Next'), ), ], ); }, ), ], ), ), ); } } ``` 该demo中使用了PageView来呈现不同的步骤内容。在底部,使用了Stepper来显示当前步骤和导航到其他步骤。在点击下一步或完成时,可以使用PageController来滑动到下一步或完成向导
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值