Clever Geek Handbook

Nous créons une application de réservation avec l'interface utilisateur Webix

Interface utilisateur Webix
Interface utilisateur Webix

Cet article est destiné à ceux qui apprécient leur temps et ne souhaitent pas passer plusieurs mois sur une étude méticuleuse des technologies de développement Web natives. Il est certainement utile de les connaßtre et de les comprendre, mais dans le monde moderne, les technologies se développent si rapidement que suivre toutes les subtilités n'est pas une tùche facile. Afin de ne pas gaspiller sur les talmuds de documents ennuyeux qui changeront demain, vous pouvez utiliser des solutions toutes faites.





L'une des meilleures solutions nous est proposĂ©e par l'Ă©quipe Webix . Nous examinerons leur bibliothĂšque de composants d'interface utilisateur dans cet article. 





Pour plus de clartĂ©, nous crĂ©erons notre propre application de recherche et de rĂ©servation de billets d'avion. La saison des vacances d'Ă©tĂ© approche Ă  grands pas, ce choix est donc plus pertinent que jamais. 





Le code de l'application terminĂ©e peut ĂȘtre trouvĂ© ici .





Un peu sur Webix et ses capacités

Webix UI — JavaScript , . UI , , , Report Manager, . , . , , , , . . .





UI

. , , . .





, , , ( webix-). , zip-. . “license.txt”, “readme.txt” “whatsnew.txt”, , . , “samples” ,   Webix UI.





“codebase”, , : “webix.js” “webix.css”. , Webix- , index.html :





<!DOCTYPE html>
<html>
    <head>
      	<title>Webix Booking</title>
      	<meta charset="utf-8">
      	<link rel="stylesheet" type="text/css" href="codebase/webix.css">
      	<script type="text/javascript" src="codebase/webix.js"></script>
    </head>
    <body>
			<script type="text/javascript">
			...
			</script>
    </body>
</html>

<script>...</script>, .





, . CDN. :





<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>

Webix.





Webix- webix.ui(). , HTML . webix.ready(function(){}). :





webix.ready(function(){
	webix.ui({
	    /* */
	});
});

index.html , Booking . .





Booking

:

















  • .





,   index.html. , . , .





, JSON. .





, rows cols, , . , .





2 . rows:





webix.ui({
    rows: [
        { template:"Row One" },
        { template:"Row Two" }
    ]
});

:





template:"Row One" , HTML-.





. 2 :









  • .





2 . , . cols:





webix.ui({
  rows: [
          { template:"Toolbar", height:50},
          {
              cols:[
                { template:"Search Form" },
                { template:"Data Table" }
              ]
          }
  ]
});

:





, . . , 2 . , , CSS width height.





2 . , . , ? : ,   , . , spacer, . , “ ”, .  





cols. , cols rows . . Webix type:





webix.ui({
  rows: [
    { template:"Toolbar", height:50 },
    {
      type:"clean", // -
      cols:[
        { template:"Order Form" },
        {}
      ]
    }
  ]
});

  :





. . , Webix . multiview .





cells id. , , , , , . 





:





webix.ui({
  rows:[
    { template:"Toolbar", height:50 },
    {
      cells:[
        {	
          id:"flight_search",
          cols:[
            {template:"Search Form"},
            {template:"Data Table"},
          ]
        },
        {
          id:"flight_booking",
          type:"clean",
          cols:[
            {template:"Order Form"},
            {},
          ]
        }
      ]
    }
  ]
});

, . .





— . . .





toolbar.js :





const toolbar = { view:"toolbar" };

, , .





, view. toolbar.  :





{
  view:"toolbar"
  css:"webix_dark", //
  cols:[
    {
      id:"label", // id  
      view:"label",
      label:"Flight Search", //
    }
  ]
}

, rows cols. label cols toolbar.





id . . , . 





. , toolbar.js index.html rows {template:“Toolbar”} :





webix.ui({
	rows: [
    toolbar,
    {
      cells:[
        ...
      ]
    }
	]
});

:





. . 2 :









  • .





.





. , .





<form>, . . .





Webix . . 





search_form.js form:





const search_form = { view:form };

, . elements: 





{
  view:form,
  ...
  elements:[ 
    { /* */ },
    { /* */ },
    ...
  ]
  ...
}

, elements. , json . , Webix .





Webix . , . name . . .





, . , . . . “One Way” “Return”. . . , “Reset” “Search”. :





.









, . radio:





{
  view:"radio",
  label:"Trip",
  name:"trip_type",
  value:1,
  options:[
    { id:1, value:"One-Way" },
    { id:2, value:"Return" }
  ]
}

options. , label, , , name. , value . 









, . combo:





{
    view:"combo",
    id:"from",
    clear:"replace",
    ...
    placeholder:"Select departure point",
    options:cities_data
}

, . placeholder. , . , , , . clear replace. , , , ( ).





. . options . Webix. , URL, .





, , . Webix , DataCollection. URL, . . ./data/cities.json. :





const cities_data = new webix.DataCollection({
  url:"./data/cities.json"
});

.





. , , , .









— ­­ - . . . , datepicker:





{
  view:"datepicker",
  name:"departure_date",
  ...
  format:"%d %M %Y"
}

, . , , . format.





, hidden. “Return”, .









, , . , . . counter. . , . min, 1 (, ). :





{ view:"counter", name:"tickets", label:"Tickets", min:1 }





. , .





“Search” “Reset”. button.  value,   css. , . "webix_primary" “Search”. .





:





{
  cols:[
    { view:"button", value:"Reset" },
    { view:"button", value:"Search", css:"webix_primary" }
  ]
}

. - ? , , search_form.js index.html. search_form, :





[
  toolbar,
  {
    cells:[
      {
        id:"flight_search",
        cols:[
          search_form,
          { template:"Data Table" }
        ]
      }, ...
    ]
  },
]

:





, “Search” . , . 





Webix . , , PDF Excel. , , , .





datatable.js datatable:





const flight_table = { 
  view:"datatable",
  url:flights_data
};

. ./data/flights_data.json. Webix , , , . .





url. flights_data . 





, . , Webix autoConfig. true, .





, . , . . 





  columns:





columns:[
  { /* */ },
  { /* */ },
  ...
]

, id, , . 





, - — “”. header.





, , . , Webix . format. 





, . , . . 





.





, "2021-03-26". , — ( ). , JS Date . scheme ( id) Date :





scheme:{
  $init:function(obj){
    obj.date = webix.Date.strToDate("%Y-%m-%d")(obj.date);
  }
}

“Date” , . . . . format webix.i18n.longDateFormatStr. Date format 26 March 2021. .





, , . , . — ? . id - value, id . id, collection. 





, , cities_data. , 1 .





, collection cities_data id, . - . .





. , , “Search” ( , ). ? , . ?





, . . , .





, .





.





(10, 100 ), . . , - , . 





search:





const search_bar = { view:"search" };

“”.





, . :





[
   toolbar,
   {
     cells:[
       {
         id:"flight_search",
         cols:[
           search_form,
           { 
             rows:{
               search_bar,
               flight_table
             }
           }
         ]
       }, ...
     ]
   },
]

-. :





. . . “Book” . :





, , form :





const order_form = {
  view:"form",
  elements:[
    ...
  ]
};

.









. , .





text :





elements:[
  { view:"text", name:"first_name", 
, invalidMessage:"First Name can not be empty" },
  { view:"text", name:"last_name", 
, invalidMessage:"Last Name can not be empty" },
  { view:"text", name:"email", 
, invalidMessage:"Incorrect email address" },
  ...
]

.   — , , . , . ? , . 





Webix rules . , , , , , , . , , ( name) rules:





{
  elements:[ 
 ],
  rules:{
    first_name:webix.rules.isNotEmpty, //    
    last_name:webix.rules.isNotEmpty, 
    email:webix.rules.isEmail //     email
  }
}

, . , . . , , , . 





Webix invalidMessage. , :





{ ..., invalidMessage:"First Name can not be empty", ... }

, Webix . , UI , - .









“Book” . , . 2 ( ), . . 





counter. , , . . , :





{ view:"counter", id:"tickets_counter", name:"tickets", label:"Tickets", min:1 }





, , , . , , . , .





2 “Checked-in Baggage” “Food” , , . checkbox:





[
  { view:"checkbox", name:"baggage", label:"Checked-in Baggage", checkValue:15 },
  { view:"checkbox", name:"food", label:"Food", checkValue:10 }
]

checkValue . 15 10 .









.  “Economy” “Business”. radio:





{ 
  view:"radio", name:"class", label:"Class",
  options:[
    { id:1, value:"Economy" },
    { id:2, value:"Business" }
  ]
}

“Economy” , “Business” . , .









— . . . label: 





{ view:"label", id:"order_price" }

“Book” . . . 





“Go Back” “Make Order”





- . . “Go Back” “Make Order” button:





{ 
  cols:[
    { view:"button", value:"Go Back" },
    { view:"button", value:"Make Order" }
  ] 
}

. , : 





[
  toolbar,
  {
    cells:[
      {...},
      {
        id:"flight_booking",
        type:"clean",								
        cols:[
           order_form, 
           {}
        ]
  		}
		]
	}
]

:





. .





Webix UI. . . , , . , Webix .









, “One-Way”, , “Return”, . ? , . . on, . :





{
  view:"radio",
  ...
  on:{
    onChange:function(newv){
      if(newv == 2){
        $$("return_date").show(); //   
      }else{
        $$("return_date").hide(); //   
      }
    }
  }
}

. show() hide(), . $$(id) , id .









. , . ? , . , . .





, , , . :





...
{
  options:cities_data,
  on:{
    onShow:function(v){
      optionsData("from","to");
    }
  }
}

on, . onShow. optionsData(), , . : 





function optionsData(first_id, second_id){
  const options = $$(first_id).getList(); //   
  const exception = $$(second_id).getValue(); //  
  options.filter(obj => obj.id != exception); // 
}

Combo, getList() getValue(). , — . filter() ( getValue).





“Reset” “Search”.





“Search”





, “Search” . , . . :





function lookForFlights(){
	const vals = $$("search_form").getValues(); //     
	const table = $$("flight_table"); //    
	table.filter(function(obj){ /*  */ });
}

Webix , . getValues(), . filter(), .   , , , . , JS.





, , . click:





{ view:"button", value:"Search", ... click: lookForFlights }

“Reset”





, , , . , “Reset”.





:





function resetForm(){
	const form = $$("search_form"); 
	form.clear(); // 
	form.setValues({trip_type:1}); //    
	$$("flight_table").filter(); //    
}

clear(), . ( ) . setValues(). , . 





filter() , . , , . . . . , , :





{ view:"button", value:"Reset", ... click:resetForm }

. .





, , . 





, , . :





function searchFlight(){
  //   
	const value = $$("search").getValue().toLowerCase(); 
	const table = $$("flight_table");
  //   
	const res = table.find(function(obj){ /* */ }); 
	table.clearCss("marker", true);  //  
	for(let i = 0; i < res.length; i++){
		table.addCss(res[i].id, "marker", true); //  css  marker
	}
	table.refresh(); // 
}

getValue() . find(), . , , css “marker” ( css ). , refresh(), css . 





onTimedKeyPress, . on. :





{
  view:"search",
  id:"search",
  ...
  on:{
    onTimedKeyPress:function(){ //   
      searchFlight(); //     
    },
    onChange:function(){ //     “”
      if(!this.getValue()){
        $$("flight_table").clearCss("marker"); // 
      }
    }
  }
}

, onChange. “”, clear, .





, . 





, “Book”, . , .





. 





“Book” . , , multiview. cells, id:





cells:[
  {	
    id:"flight_search", ...
  },
  {
    id:"flight_booking", ...
  }
]

multiview show() , . $$(id). id : 





$$("flight_booking").show(); //

. : 





function bookFlight(id){
	

	//   
	const required_tickets = $$("search_form").getValues().tickets;
	//   
	const available_places = flight_table.getItem(id).places;
	//    	
	$$("tickets_counter").define("max", available_places); 
	//      
	$$("flight_booking_form").setValues({
		//        
		tickets:required_tickets <= available_places ? required_tickets : available_places,
		//      
		price:flight_table.getItem(id).price,
		// ""   
		class:1
	});
	$$("flight_booking").show(); //  
	...
}

, , . 





, getItem(). , “Book”. . id .





, , . . define() refresh(). 





define() , refresh() :





$$("label").define("label", "Flight Booking"); //   
$$("label").refresh(); //

“Book”. , “webix_button” . Webix onClick, , css : 





{
  columns:[ 
 ],
  onClick:{
    "webix_button":function(e,id){
      bookFlight(id);
    }
  }
}

.





“Book” . , . , . .





“Book” . . . , on, onChange ( ) onValues ( “Book”):





on:{
	onChange:function(){
		orderPrice(this.getValues());
	},
	onValues:function(){
		orderPrice(this.getValues());
	}
}

: 





function orderPrice(vals){
	//  
	const tickets = vals.tickets; 
	//       
	const price = vals.price*1*vals.class*tickets; 
	//   
	const baggage = vals.baggage * tickets;
	//   
	const food = vals.food * tickets; 
	//  
	const total = price+baggage+food; 
	//  
	$$("order_price").setValue(total+"$"); 
}

- getValues(),   “Price”   setValue(). setValues(), , setValue() , .





. , . 





, “Make Order”. , , :





function makeOrder(){
	const order_form = $$("flight_booking_form"); //   
	if(order_form.validate()){ //  
		webix.alert({ //       
			title: "Order",
			text: "We will send you an information to confirm your Order"
		}).then(function(){
			goBack(); //      
		});
	}
}

validate(). , rules. , true. false, , . , invalidMessage.





. , Webix . webix.alert(), , “OK” ( goBack()): 





webix.alert({
  title: "Order is successfull",
  text: "We will send you an information to confirm your Order"
}).then(function(){
  goBack();
});

goBack() “Go Back”. clearValidation(), , : 





function goBack(){
	const order_form = $$("flight_booking_form"); //   
	const label = $$("label"); //     

	order_form.clearValidation(); // 

	label.define("label", "Flight Search"); //  
	label.refresh(); // 

	$$("flight_search").show(); //       
}

.





Dans cet article, nous avons détaillé comment créer une application à l'aide de Webix. Nous avons appris à créer des mises en page et à décrire les composants de l'interface utilisateur à l'aide de la syntaxe json. Nous avons indirectement abordé certaines des méthodes qui vous permettent de travailler avec des données. Comme vous pouvez le voir, les composants et les méthodes sont intuitifs et faciles à utiliser. En fait, ce n'est qu'une petite fraction de tout ce que la bibliothÚque a à nous offrir. Pour une connaissance plus détaillée, vous pouvez aller à la documentation , qui contient une description détaillée de toutes les possibilités avec des exemples illustratifs.







More articles:


All Articles