khamsat khamsat khamsat

Components

now after jsH you should have skills with Components because by the end
it's up to Components to create Advanced Applications and Dynamic Contents let's know more About Components . after all any Element inside Document is a Component haxcv dealing with all as a Component .
let's say you have chat Application It consists of several parts and we can define each part as a Component and also there is a Component contained within an Component . If you control all of these components accurately, the work will certainly be laborious and will require more time and efficiency . And here lies the idea of the framework is to allow you create components and merge with each other in a flexible way The components are divided into several types and this is what you can deal with professionally .

Component with jsH

as we said before jsH is the Core , so jsH can be used with Components and that make the works better .

How to Create a Component

you can create a Component with <script> Tag or any Element but when you use script you must set type attr equal to

type="application/jsH"

and when you use any Element (DIV , etc...) you should set
hidden
attr equal to true
hidden='true'
and never use fn-init attr.


<script type="application/jsH" myComponent >		
 {%

  {{
     <div>I'm first Component</div>
  }}

%}		
</script>
    

<div  myComponent2 hidden >		
 {%

  {{
     <div>I'm second Component</div>
  }}

%}		
</div>
    

render Components :


<div  fn-init >		
 {%

  {{
    {{+haxcv.require('*[myComponent]')+}}
    {{+haxcv.require('*[myComponent2]')+}}
  }}

%}		
</div>
    

result :

{% {{ {{+haxcv.require('*[myComponent0909]')+}} {{+haxcv.require('*[myComponent20909]')+}} }} %}

<div  fn-init >		
 {%
     var myApp1 = haxcv.require('*[myComponent]');
     var myApp2 = haxcv.require('*[myComponent2]');
        
     jsH.print(myApp1);	  
     jsH.print(myApp2);	  

%}		
</div>  
    

create Component with jsH :


<script type="application/jsH" rootComponent >		
 {%
  var myApp1 = jsH.createComponent({
	       name:"Item",
	       html:"I'm App1 Component",
	       attr:{
	          id:"myId",
	          'fn-click':"",
	          myComponent:""
	       }
 	});
     
        
     {{
     	<div>{{+myApp1+}}</div>
     }}     

%}		
</script>  
    

Warning :(

you can't call jsH.createComponent() without jsH because jsH.createComponent() is not callable with Javascript

with fn-module


<div fn-module="myModule" ></div>  
<script type="application/jsH" Component >
 {%
   for(var k in myModule){
    {{
      <h1>{{+k+}} : {{+myModule[k]+}} </h1>
    }}
  }
%}
</script>

<script type="text/javascript">
  haxcv.module("myModule" , ($xes) => {
   
     myModule.item    = "haxcv eBook";
     myModule.price   = "5.00 $";
     myModule.desc    = "learn haxcv framework ......";
     myModule.title   = "haxcv Framework";
     myModule.founder = "Manassa Joseph";
    
     $xes.render({source:"*[Component]"});
});
</script>
    

Component with Events :

you can render Component with Events attr , only by calling Component Name with Event

fn-click="target" fn-copy="myComponent"
    

Example

let's create Post Simple Component


<div class="postBar _body" post-menu></div>
<div class="_bar_ _body">
  <div>    
     <input  fn-keypress fn-keyup v-define="name=js://me.value" >
  </div>
  <div>    
     <textarea  fn-keypress fn-keyup v-define="post=js://me.value"></textarea>
  </div>
  <div class="trybtn" style="width: 40%; margin: 0px;">
       <button fn-click="post-menu" fn-append fn-copy="post">render post</button>
  </div>
</div>

<script type="application/jsH" post >
{%
if(!empty(post)){
{{
  <div class="mypost">
     <img src="http://web.com/files/img/a.jpg" alt="img">
     <h3 class="name">{{+(name || "Guest")+}}</h3>
     <p  class="date">{{+new Date()+}}</p>
     <p class="post_text">{{+post+}}</p>
</div>
}}
}else{
  alert("post is Required");
}
%}
</script>
    

Application result

render From Server

to render data from Server With Ajax you can use XMLHttpRequest or Obj.Ajax({}); to make it real Time App use setInterval but don't forget to set reference number for each time you append post to avoid repeating the same post now you need to create new Component with Vum.createApp({});
you need to define vectorName as a Controller Object .


<script type="application/jsH" interValComponent >
{%
if(!empty(data.post)){
{{
  <div class="mypost">
     <img src="{{+data.img+}}" alt="img">
     <h3 class="name">{{+data.name+}}</h3>
     <p class="date">{{+data.time+}}</p>
     <p class="post_text">{{+data.post+}}</p>
</div>
}}
}
%}
</script>
    

<script type="text/javascript" >
  Obj.Ajax({
    url:'post.php',
    method:"GET",
    info(response){
      var jsn = JSON.parse(response);
      Vum.createApp({
           vectorName:'data',
           name:jsn.name,
           post:jsn.post,
           time:jsn.time,
           action:'append',
           vector:function(){
            return 'post-menu';
           },source:function(){
            return _('*[interValComponent]').el[0];
           }
        });
     }
  });   
</script>
    
khamsat khamsat khamsat khamsat