Re: [Architecture] Improving clint-side rendering support in UUF

[SajithAR Ariyarathna]

This is how you access propertise in the 'templateFillingObject' (e.g.
{name: "Saman", age: 10})

In the Handlebars template,

{{@params.name}}

Inside the 'onRequest(env)' function (serverside)

env.params.name

With that in mind, I think your requirement can be done.  Refer following
example.

Lets say we have a fragment called "fragment1".

*fragment1.hbs*



{{#each roles}}

{{name}}

{{/each}}



*fragment1.js*

function onRequest(env) {

var roles = callOSGiService("org.wso2.carbon.usermgt.UserNamager",
"getRoles", [env.params.userId]);

return {roles: roles};

}


In the client-side you can render above fragment with follwoing,

UUFClient.renderFragment("org.wso2.bla.bla.fragment1", {userId: 12345},
"tab2", "OVERWRITE");

So, the fragments runs on the serverside, calls the OSGi service and get
data, then fill the template, and rendered HTML will be pushed to the zone
(tab2).

Thanks.

On Tue, Dec 20, 2016 at 3:17 PM, Indunil Upeksha Rathnayake <
indu...@wso2.com> wrote:

> Hi Sajith,
>
> This will be very useful since currently a fragment can be invoked only
> from a page or another fragment. Need to know what will happen if we
> implemented to get the JSON object (which will be used to fill the
> fragment's template) by calling an OSGI service, in the onRequest() method
> of the fragment. That will replace the "templateFillingObject" passed in
> the UUF.renderFragment() method?
>
> Thanks and Regards
>
> On Wed, Dec 14, 2016 at 1:54 PM, SajithAR Ariyarathna 
> wrote:
>
>> Jo, Lasantha,
>>
>> CSS selectors e.g. div > p won't work if we forcefully insert a div in
>> the middle. Therefore we shouldn't use divs (or spans) to wrap the content
>> of a zone.
>> Also, there is no need to wrap the content of a zone with anything. We
>> just need to know the start and the end of the zone's content. Hence I
>> believe HTML comments are more suitable.
>>
>> Thanks.
>>
>> On Wed, Dec 14, 2016 at 12:31 PM, Lasantha Samarakoon > > wrote:
>>
>>> ​Agreeing with Jo.
>>>
>>> Plus the comments have different meaning rather than marking sections, I
>>> don't think it's a good practice to use comments to replace DIVs and other
>>> block elements. ​If we can go ahead with DIVs other than comments we don't
>>> need to filter nodes in the DOM to identify comment blocks as well. Instead
>>> we can use whatever the available HTML attributes and "data-" attributes.
>>>
>>> Regards,
>>>
>>> *Lasantha Samarakoon* | Software Engineer
>>> WSO2, Inc.
>>> #20, Palm Grove, Colombo 03, Sri Lanka
>>> Mobile: +94 (71) 214 1576 <+94%2071%20214%201576>
>>> Email:  lasant...@wso2.com
>>> Web:www.wso2.com
>>>
>>> lean . enterprise . middleware
>>>
>>> On Wed, Dec 14, 2016 at 10:47 AM, Joseph Fonseka 
>>> wrote:
>>>
 Hi Sajith

 On Wed, Dec 14, 2016 at 8:44 AM, SajithAR Ariyarathna <
 sajit...@wso2.com> wrote:

>
> 2. Why did we use comments to propagate Zones to the client side
>> instead of Divs.
>>
> divs clashes with CSS selectors (same goes for spans). These zone
> markers should be invisible (which means they shouldn't create or affect
> visual elements in the DOM). That's' why we chose HTML comments.
>

 I am not sure if the above claim is correct. If Divs are not
 specifically styled it should not clash with CSS. Divs are meant to
 encapsulate a division or a section in the HTML which I believe what zone
 also represent.

 Thanks
 Jo



>
> Thanks.
>
> On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka 
> wrote:
>
>> Hi
>>
>> +1, few clarifications bellow.
>>
>> 1. I guess the default mode will be OVERWRITE.
>> 2. Why did we use comments to propagate Zones to the client side
>> instead of Divs.
>>
>> Thanks
>> Jo
>>
>>
>>
>> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna <
>> sajit...@wso2.com> wrote:
>>
>>> Hi All,
>>>
>>> To do $subject, we are hoping to give a UUF client JS library. With
>>> the client-side library, webapp developers will be able to render 
>>> fragments
>>> and push to zones similar to the server-side.
>>>
>>> Functions in the library:
>>>
>>> UUF.renderFragment(fragmentFullyQualifedName,
>>> templateFillingObject, zoneName, mode)
>>>
>>> Using this function webapp developers can render a fragment in the
>>> client-side and push the content to a given zone.
>>>
>>> Here,
>>>
>>> *fragmentFullyQualifedName* - Fully qualified name
>>> (.) of the fragment that you want to
>>> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
>>> *templateFillingObject* - JSON object which will be used to fill
>>> the fragment's template. e.g. {name: "My API", version: "1.0.0"}
>>>
>>> *zoneName* - Name of the zone that you want to push the rendered
>>> HTML. e.g. 

Re: [Architecture] Improving clint-side rendering support in UUF

[Indunil Upeksha Rathnayake]

Hi Sajith,

This will be very useful since currently a fragment can be invoked only
from a page or another fragment. Need to know what will happen if we
implemented to get the JSON object (which will be used to fill the
fragment's template) by calling an OSGI service, in the onRequest() method
of the fragment. That will replace the "templateFillingObject" passed in
the UUF.renderFragment() method?

Thanks and Regards

On Wed, Dec 14, 2016 at 1:54 PM, SajithAR Ariyarathna 
wrote:

> Jo, Lasantha,
>
> CSS selectors e.g. div > p won't work if we forcefully insert a div in
> the middle. Therefore we shouldn't use divs (or spans) to wrap the content
> of a zone.
> Also, there is no need to wrap the content of a zone with anything. We
> just need to know the start and the end of the zone's content. Hence I
> believe HTML comments are more suitable.
>
> Thanks.
>
> On Wed, Dec 14, 2016 at 12:31 PM, Lasantha Samarakoon 
> wrote:
>
>> ​Agreeing with Jo.
>>
>> Plus the comments have different meaning rather than marking sections, I
>> don't think it's a good practice to use comments to replace DIVs and other
>> block elements. ​If we can go ahead with DIVs other than comments we don't
>> need to filter nodes in the DOM to identify comment blocks as well. Instead
>> we can use whatever the available HTML attributes and "data-" attributes.
>>
>> Regards,
>>
>> *Lasantha Samarakoon* | Software Engineer
>> WSO2, Inc.
>> #20, Palm Grove, Colombo 03, Sri Lanka
>> Mobile: +94 (71) 214 1576 <+94%2071%20214%201576>
>> Email:  lasant...@wso2.com
>> Web:www.wso2.com
>>
>> lean . enterprise . middleware
>>
>> On Wed, Dec 14, 2016 at 10:47 AM, Joseph Fonseka  wrote:
>>
>>> Hi Sajith
>>>
>>> On Wed, Dec 14, 2016 at 8:44 AM, SajithAR Ariyarathna >> > wrote:
>>>

 2. Why did we use comments to propagate Zones to the client side
> instead of Divs.
>
 divs clashes with CSS selectors (same goes for spans). These zone
 markers should be invisible (which means they shouldn't create or affect
 visual elements in the DOM). That's' why we chose HTML comments.

>>>
>>> I am not sure if the above claim is correct. If Divs are not
>>> specifically styled it should not clash with CSS. Divs are meant to
>>> encapsulate a division or a section in the HTML which I believe what zone
>>> also represent.
>>>
>>> Thanks
>>> Jo
>>>
>>>
>>>

 Thanks.

 On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka 
 wrote:

> Hi
>
> +1, few clarifications bellow.
>
> 1. I guess the default mode will be OVERWRITE.
> 2. Why did we use comments to propagate Zones to the client side
> instead of Divs.
>
> Thanks
> Jo
>
>
>
> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna <
> sajit...@wso2.com> wrote:
>
>> Hi All,
>>
>> To do $subject, we are hoping to give a UUF client JS library. With
>> the client-side library, webapp developers will be able to render 
>> fragments
>> and push to zones similar to the server-side.
>>
>> Functions in the library:
>>
>> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
>> zoneName, mode)
>>
>> Using this function webapp developers can render a fragment in the
>> client-side and push the content to a given zone.
>>
>> Here,
>>
>> *fragmentFullyQualifedName* - Fully qualified name
>> (.) of the fragment that you want to
>> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
>> *templateFillingObject* - JSON object which will be used to fill the
>> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>>
>> *zoneName* - Name of the zone that you want to push the rendered
>> HTML. e.g. "grid"
>>
>> *mode* - Dictates how the pushing content orders with the existing
>> content in the zone. Mode can be "PREPEND" (put the pushing content 
>> before
>> the existing content), "APPEND" (put the pushing content after the 
>> existing
>> content) or "OVERWRITE" (replace the existing content with the pushing
>> content)
>>
>>
>> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName,
>> mode)
>>
>> Using this function webapp devs can render a given Handlebars
>> template and push it to a desired zone.
>>
>> Here,
>>
>> *hbsTemplate* - Handlebars template string
>>
>>
>> Bringing zones to the client-side.
>>
>> When rendering a zone in the server-side, we can mark the start and
>> end of a zone's content with HTML comments.
>>
>> e.g.
>>
>> 
>>  content of zone grid goes here
>>  here is a div
>>  some more stuff
>> 
>>
>> HTML comments can be identified by filtering nodes in the DOM. And
>> further filtering the comments that starts with 

Re: [Architecture] Improving clint-side rendering support in UUF

[SajithAR Ariyarathna]

Jo, Lasantha,

CSS selectors e.g. div > p won't work if we forcefully insert a div in the
middle. Therefore we shouldn't use divs (or spans) to wrap the content of a
zone.
Also, there is no need to wrap the content of a zone with anything. We just
need to know the start and the end of the zone's content. Hence I believe
HTML comments are more suitable.

Thanks.

On Wed, Dec 14, 2016 at 12:31 PM, Lasantha Samarakoon 
wrote:

> ​Agreeing with Jo.
>
> Plus the comments have different meaning rather than marking sections, I
> don't think it's a good practice to use comments to replace DIVs and other
> block elements. ​If we can go ahead with DIVs other than comments we don't
> need to filter nodes in the DOM to identify comment blocks as well. Instead
> we can use whatever the available HTML attributes and "data-" attributes.
>
> Regards,
>
> *Lasantha Samarakoon* | Software Engineer
> WSO2, Inc.
> #20, Palm Grove, Colombo 03, Sri Lanka
> Mobile: +94 (71) 214 1576 <+94%2071%20214%201576>
> Email:  lasant...@wso2.com
> Web:www.wso2.com
>
> lean . enterprise . middleware
>
> On Wed, Dec 14, 2016 at 10:47 AM, Joseph Fonseka  wrote:
>
>> Hi Sajith
>>
>> On Wed, Dec 14, 2016 at 8:44 AM, SajithAR Ariyarathna 
>> wrote:
>>
>>>
>>> 2. Why did we use comments to propagate Zones to the client side instead
 of Divs.

>>> divs clashes with CSS selectors (same goes for spans). These zone
>>> markers should be invisible (which means they shouldn't create or affect
>>> visual elements in the DOM). That's' why we chose HTML comments.
>>>
>>
>> I am not sure if the above claim is correct. If Divs are not specifically
>> styled it should not clash with CSS. Divs are meant to encapsulate
>> a division or a section in the HTML which I believe what zone also
>> represent.
>>
>> Thanks
>> Jo
>>
>>
>>
>>>
>>> Thanks.
>>>
>>> On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka  wrote:
>>>
 Hi

 +1, few clarifications bellow.

 1. I guess the default mode will be OVERWRITE.
 2. Why did we use comments to propagate Zones to the client side
 instead of Divs.

 Thanks
 Jo



 On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna <
 sajit...@wso2.com> wrote:

> Hi All,
>
> To do $subject, we are hoping to give a UUF client JS library. With
> the client-side library, webapp developers will be able to render 
> fragments
> and push to zones similar to the server-side.
>
> Functions in the library:
>
> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
> zoneName, mode)
>
> Using this function webapp developers can render a fragment in the
> client-side and push the content to a given zone.
>
> Here,
>
> *fragmentFullyQualifedName* - Fully qualified name
> (.) of the fragment that you want to
> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
> *templateFillingObject* - JSON object which will be used to fill the
> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>
> *zoneName* - Name of the zone that you want to push the rendered
> HTML. e.g. "grid"
>
> *mode* - Dictates how the pushing content orders with the existing
> content in the zone. Mode can be "PREPEND" (put the pushing content before
> the existing content), "APPEND" (put the pushing content after the 
> existing
> content) or "OVERWRITE" (replace the existing content with the pushing
> content)
>
>
> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName,
> mode)
>
> Using this function webapp devs can render a given Handlebars template
> and push it to a desired zone.
>
> Here,
>
> *hbsTemplate* - Handlebars template string
>
>
> Bringing zones to the client-side.
>
> When rendering a zone in the server-side, we can mark the start and
> end of a zone's content with HTML comments.
>
> e.g.
>
> 
>  content of zone grid goes here
>  here is a div
>  some more stuff
> 
>
> HTML comments can be identified by filtering nodes in the DOM. And
> further filtering the comments that starts with [UUF-ZONE], we can
> identify UUF zone marking comments. Jerad did a POC for this. In that we
> were able to successfully identify zones and push content for all modes.
>
>
> We are hoping to expose this library through the "uuf-client" fragment
> in the common "foundation" component [1].
>
> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
> nents/org.wso2.carbon.uuf.common.foundation
>
> WDYT?
>
> Thanks.
> --
> Sajith Janaprasad Ariyarathna
> Software Engineer; WSO2, Inc.;  http://wso2.com/
> 
>
> ___

Re: [Architecture] Improving clint-side rendering support in UUF

[Lasantha Samarakoon]

​Agreeing with Jo.

Plus the comments have different meaning rather than marking sections, I
don't think it's a good practice to use comments to replace DIVs and other
block elements. ​If we can go ahead with DIVs other than comments we don't
need to filter nodes in the DOM to identify comment blocks as well. Instead
we can use whatever the available HTML attributes and "data-" attributes.

Regards,

*Lasantha Samarakoon* | Software Engineer
WSO2, Inc.
#20, Palm Grove, Colombo 03, Sri Lanka
Mobile: +94 (71) 214 1576
Email:  lasant...@wso2.com
Web:www.wso2.com

lean . enterprise . middleware

On Wed, Dec 14, 2016 at 10:47 AM, Joseph Fonseka  wrote:

> Hi Sajith
>
> On Wed, Dec 14, 2016 at 8:44 AM, SajithAR Ariyarathna 
> wrote:
>
>>
>> 2. Why did we use comments to propagate Zones to the client side instead
>>> of Divs.
>>>
>> divs clashes with CSS selectors (same goes for spans). These zone markers
>> should be invisible (which means they shouldn't create or affect visual
>> elements in the DOM). That's' why we chose HTML comments.
>>
>
> I am not sure if the above claim is correct. If Divs are not specifically
> styled it should not clash with CSS. Divs are meant to encapsulate
> a division or a section in the HTML which I believe what zone also
> represent.
>
> Thanks
> Jo
>
>
>
>>
>> Thanks.
>>
>> On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka  wrote:
>>
>>> Hi
>>>
>>> +1, few clarifications bellow.
>>>
>>> 1. I guess the default mode will be OVERWRITE.
>>> 2. Why did we use comments to propagate Zones to the client side instead
>>> of Divs.
>>>
>>> Thanks
>>> Jo
>>>
>>>
>>>
>>> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna <
>>> sajit...@wso2.com> wrote:
>>>
 Hi All,

 To do $subject, we are hoping to give a UUF client JS library. With the
 client-side library, webapp developers will be able to render fragments and
 push to zones similar to the server-side.

 Functions in the library:

 UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
 zoneName, mode)

 Using this function webapp developers can render a fragment in the
 client-side and push the content to a given zone.

 Here,

 *fragmentFullyQualifedName* - Fully qualified name
 (.) of the fragment that you want to
 render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
 *templateFillingObject* - JSON object which will be used to fill the
 fragment's template. e.g. {name: "My API", version: "1.0.0"}

 *zoneName* - Name of the zone that you want to push the rendered HTML.
 e.g. "grid"

 *mode* - Dictates how the pushing content orders with the existing
 content in the zone. Mode can be "PREPEND" (put the pushing content before
 the existing content), "APPEND" (put the pushing content after the existing
 content) or "OVERWRITE" (replace the existing content with the pushing
 content)


 UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)

 Using this function webapp devs can render a given Handlebars template
 and push it to a desired zone.

 Here,

 *hbsTemplate* - Handlebars template string


 Bringing zones to the client-side.

 When rendering a zone in the server-side, we can mark the start and end
 of a zone's content with HTML comments.

 e.g.

 
  content of zone grid goes here
  here is a div
  some more stuff
 

 HTML comments can be identified by filtering nodes in the DOM. And
 further filtering the comments that starts with [UUF-ZONE], we can
 identify UUF zone marking comments. Jerad did a POC for this. In that we
 were able to successfully identify zones and push content for all modes.


 We are hoping to expose this library through the "uuf-client" fragment
 in the common "foundation" component [1].

 [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
 nents/org.wso2.carbon.uuf.common.foundation

 WDYT?

 Thanks.
 --
 Sajith Janaprasad Ariyarathna
 Software Engineer; WSO2, Inc.;  http://wso2.com/
 

 ___
 Architecture mailing list
 Architecture@wso2.org
 https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture


>>>
>>>
>>> --
>>>
>>> --
>>> *Joseph Fonseka*
>>> WSO2 Inc.; http://wso2.com
>>> lean.enterprise.middleware
>>>
>>> mobile: +94 772 512 430
>>> skype: jpfonseka
>>>
>>> * *
>>>
>>>
>>> ___
>>> Architecture mailing list
>>> Architecture@wso2.org
>>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>>>
>>>
>>
>>
>> --
>> Sajith Janaprasad Ariyarathna
>> Software Engineer; WSO2, Inc.;  http://wso2.com/
>> 

Re: [Architecture] Improving clint-side rendering support in UUF

[Joseph Fonseka]

Hi Sajith

On Wed, Dec 14, 2016 at 8:44 AM, SajithAR Ariyarathna 
wrote:

>
> 2. Why did we use comments to propagate Zones to the client side instead
>> of Divs.
>>
> divs clashes with CSS selectors (same goes for spans). These zone markers
> should be invisible (which means they shouldn't create or affect visual
> elements in the DOM). That's' why we chose HTML comments.
>

I am not sure if the above claim is correct. If Divs are not specifically
styled it should not clash with CSS. Divs are meant to encapsulate
a division or a section in the HTML which I believe what zone also
represent.

Thanks
Jo



>
> Thanks.
>
> On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka  wrote:
>
>> Hi
>>
>> +1, few clarifications bellow.
>>
>> 1. I guess the default mode will be OVERWRITE.
>> 2. Why did we use comments to propagate Zones to the client side instead
>> of Divs.
>>
>> Thanks
>> Jo
>>
>>
>>
>> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna > > wrote:
>>
>>> Hi All,
>>>
>>> To do $subject, we are hoping to give a UUF client JS library. With the
>>> client-side library, webapp developers will be able to render fragments and
>>> push to zones similar to the server-side.
>>>
>>> Functions in the library:
>>>
>>> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
>>> zoneName, mode)
>>>
>>> Using this function webapp developers can render a fragment in the
>>> client-side and push the content to a given zone.
>>>
>>> Here,
>>>
>>> *fragmentFullyQualifedName* - Fully qualified name
>>> (.) of the fragment that you want to
>>> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
>>> *templateFillingObject* - JSON object which will be used to fill the
>>> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>>>
>>> *zoneName* - Name of the zone that you want to push the rendered HTML.
>>> e.g. "grid"
>>>
>>> *mode* - Dictates how the pushing content orders with the existing
>>> content in the zone. Mode can be "PREPEND" (put the pushing content before
>>> the existing content), "APPEND" (put the pushing content after the existing
>>> content) or "OVERWRITE" (replace the existing content with the pushing
>>> content)
>>>
>>>
>>> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)
>>>
>>> Using this function webapp devs can render a given Handlebars template
>>> and push it to a desired zone.
>>>
>>> Here,
>>>
>>> *hbsTemplate* - Handlebars template string
>>>
>>>
>>> Bringing zones to the client-side.
>>>
>>> When rendering a zone in the server-side, we can mark the start and end
>>> of a zone's content with HTML comments.
>>>
>>> e.g.
>>>
>>> 
>>>  content of zone grid goes here
>>>  here is a div
>>>  some more stuff
>>> 
>>>
>>> HTML comments can be identified by filtering nodes in the DOM. And
>>> further filtering the comments that starts with [UUF-ZONE], we can
>>> identify UUF zone marking comments. Jerad did a POC for this. In that we
>>> were able to successfully identify zones and push content for all modes.
>>>
>>>
>>> We are hoping to expose this library through the "uuf-client" fragment
>>> in the common "foundation" component [1].
>>>
>>> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
>>> nents/org.wso2.carbon.uuf.common.foundation
>>>
>>> WDYT?
>>>
>>> Thanks.
>>> --
>>> Sajith Janaprasad Ariyarathna
>>> Software Engineer; WSO2, Inc.;  http://wso2.com/
>>> 
>>>
>>> ___
>>> Architecture mailing list
>>> Architecture@wso2.org
>>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>>>
>>>
>>
>>
>> --
>>
>> --
>> *Joseph Fonseka*
>> WSO2 Inc.; http://wso2.com
>> lean.enterprise.middleware
>>
>> mobile: +94 772 512 430
>> skype: jpfonseka
>>
>> * *
>>
>>
>> ___
>> Architecture mailing list
>> Architecture@wso2.org
>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>>
>>
>
>
> --
> Sajith Janaprasad Ariyarathna
> Software Engineer; WSO2, Inc.;  http://wso2.com/
> 
>
> ___
> Architecture mailing list
> Architecture@wso2.org
> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>
>


-- 

-- 
*Joseph Fonseka*
WSO2 Inc.; http://wso2.com
lean.enterprise.middleware

mobile: +94 772 512 430
skype: jpfonseka

* *
___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Improving clint-side rendering support in UUF

[SajithAR Ariyarathna]

Hi Chanaka,

What will be the location of these fragments? If it's the same as server
> side fragments it will give control over different UUF components IMO.

These are normal fragments that you use in the server-side.  Its not like
giving control to a different component, instead we are re-using the same
template in the client-side.

On Wed, Dec 14, 2016 at 10:47 AM, Chanaka Jayasena  wrote:

> Hi Sajith,
>
> This will be very useful for the developers. Now we are maintaining client
> side templates in public folder and doing ajax calls to fetch them and
> render.
>
> What will be the location of these fragments? If it's the same as server
> side fragments it will give control over different UUF components IMO.
>
> thanks,
> Chanaka
>
> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna 
> wrote:
>
>> Hi All,
>>
>> To do $subject, we are hoping to give a UUF client JS library. With the
>> client-side library, webapp developers will be able to render fragments and
>> push to zones similar to the server-side.
>>
>> Functions in the library:
>>
>> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
>> zoneName, mode)
>>
>> Using this function webapp developers can render a fragment in the
>> client-side and push the content to a given zone.
>>
>> Here,
>>
>> *fragmentFullyQualifedName* - Fully qualified name
>> (.) of the fragment that you want to
>> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
>> *templateFillingObject* - JSON object which will be used to fill the
>> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>>
>> *zoneName* - Name of the zone that you want to push the rendered HTML.
>> e.g. "grid"
>>
>> *mode* - Dictates how the pushing content orders with the existing
>> content in the zone. Mode can be "PREPEND" (put the pushing content before
>> the existing content), "APPEND" (put the pushing content after the existing
>> content) or "OVERWRITE" (replace the existing content with the pushing
>> content)
>>
>>
>> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)
>>
>> Using this function webapp devs can render a given Handlebars template
>> and push it to a desired zone.
>>
>> Here,
>>
>> *hbsTemplate* - Handlebars template string
>>
>>
>> Bringing zones to the client-side.
>>
>> When rendering a zone in the server-side, we can mark the start and end
>> of a zone's content with HTML comments.
>>
>> e.g.
>>
>> 
>>  content of zone grid goes here
>>  here is a div
>>  some more stuff
>> 
>>
>> HTML comments can be identified by filtering nodes in the DOM. And
>> further filtering the comments that starts with [UUF-ZONE], we can
>> identify UUF zone marking comments. Jerad did a POC for this. In that we
>> were able to successfully identify zones and push content for all modes.
>>
>>
>> We are hoping to expose this library through the "uuf-client" fragment in
>> the common "foundation" component [1].
>>
>> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
>> nents/org.wso2.carbon.uuf.common.foundation
>>
>> WDYT?
>>
>> Thanks.
>> --
>> Sajith Janaprasad Ariyarathna
>> Software Engineer; WSO2, Inc.;  http://wso2.com/
>> 
>>
>
>
>
> --
> Chanaka Jayasena
> Associate Tech Lead,
> email: chan...@wso2.com; cell: +94 77 4464006 <+94%2077%20446%204006>
> blog: http://chanaka3d.blogspot.com
>



-- 
Sajith Janaprasad Ariyarathna
Software Engineer; WSO2, Inc.;  http://wso2.com/

___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Improving clint-side rendering support in UUF

[SajithAR Ariyarathna]

On Wed, Dec 14, 2016 at 9:01 AM, Irunika Weeraratne 
wrote:

> Hi,
> Can't we use standard JS libraries approach for this one?
> Here we have used zone names.
> eg : UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
> *zoneName*, mode)
>
> But AFAIK in standard JS this is done using Classes or IDs of elements.
>
> For an example can't we have something similar to
> *var zone = document.getElementById(zoneName);*
> *UFF.renderFragment(par1, par2, par3, zone);*
>
> This won't work as zone is not an element in the DOM. Zone is a
placeholder which will be filled with some HTML content when the page is
rendering (in the server-side).

IMHO I think that it would be better if we can find an approach which JS
> developers are more often familiar with.
>
> Also, IMHO I think we can use something similar to Jinja2 [1] kind of
> approach from Python Flask for server-side template rendering.
> [1]  http://jinja.pocoo.org/docs/dev/
>
> Thanks and Best Regards,
> Irunika
>
> *Irunika Weeraratne*
> *Software Engineer | WSO2, Inc. *
> *Email : irun...@wso2.com *
> *LinkedIn : https://lk.linkedin.com/in/irunika
> *
> *Mobile : +94712403314 <+94%2071%20240%203314>*
> *Lean . Enterprise . Middleware*
>
>
> On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka  wrote:
>
>> Hi
>>
>> +1, few clarifications bellow.
>>
>> 1. I guess the default mode will be OVERWRITE.
>> 2. Why did we use comments to propagate Zones to the client side instead
>> of Divs.
>>
>> Thanks
>> Jo
>>
>>
>>
>> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna > > wrote:
>>
>>> Hi All,
>>>
>>> To do $subject, we are hoping to give a UUF client JS library. With the
>>> client-side library, webapp developers will be able to render fragments and
>>> push to zones similar to the server-side.
>>>
>>> Functions in the library:
>>>
>>> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
>>> zoneName, mode)
>>>
>>> Using this function webapp developers can render a fragment in the
>>> client-side and push the content to a given zone.
>>>
>>> Here,
>>>
>>> *fragmentFullyQualifedName* - Fully qualified name
>>> (.) of the fragment that you want to
>>> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
>>> *templateFillingObject* - JSON object which will be used to fill the
>>> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>>>
>>> *zoneName* - Name of the zone that you want to push the rendered HTML.
>>> e.g. "grid"
>>>
>>> *mode* - Dictates how the pushing content orders with the existing
>>> content in the zone. Mode can be "PREPEND" (put the pushing content before
>>> the existing content), "APPEND" (put the pushing content after the existing
>>> content) or "OVERWRITE" (replace the existing content with the pushing
>>> content)
>>>
>>>
>>> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)
>>>
>>> Using this function webapp devs can render a given Handlebars template
>>> and push it to a desired zone.
>>>
>>> Here,
>>>
>>> *hbsTemplate* - Handlebars template string
>>>
>>>
>>> Bringing zones to the client-side.
>>>
>>> When rendering a zone in the server-side, we can mark the start and end
>>> of a zone's content with HTML comments.
>>>
>>> e.g.
>>>
>>> 
>>>  content of zone grid goes here
>>>  here is a div
>>>  some more stuff
>>> 
>>>
>>> HTML comments can be identified by filtering nodes in the DOM. And
>>> further filtering the comments that starts with [UUF-ZONE], we can
>>> identify UUF zone marking comments. Jerad did a POC for this. In that we
>>> were able to successfully identify zones and push content for all modes.
>>>
>>>
>>> We are hoping to expose this library through the "uuf-client" fragment
>>> in the common "foundation" component [1].
>>>
>>> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
>>> nents/org.wso2.carbon.uuf.common.foundation
>>>
>>> WDYT?
>>>
>>> Thanks.
>>> --
>>> Sajith Janaprasad Ariyarathna
>>> Software Engineer; WSO2, Inc.;  http://wso2.com/
>>> 
>>>
>>> ___
>>> Architecture mailing list
>>> Architecture@wso2.org
>>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>>>
>>>
>>
>>
>> --
>>
>> --
>> *Joseph Fonseka*
>> WSO2 Inc.; http://wso2.com
>> lean.enterprise.middleware
>>
>> mobile: +94 772 512 430
>> skype: jpfonseka
>>
>> * *
>>
>>
>> ___
>> Architecture mailing list
>> Architecture@wso2.org
>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>>
>>
>


-- 
Sajith Janaprasad Ariyarathna
Software Engineer; WSO2, Inc.;  http://wso2.com/

___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Improving clint-side rendering support in UUF

[Chanaka Jayasena]

Hi Sajith,

This will be very useful for the developers. Now we are maintaining client
side templates in public folder and doing ajax calls to fetch them and
render.

What will be the location of these fragments? If it's the same as server
side fragments it will give control over different UUF components IMO.

thanks,
Chanaka

On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna 
wrote:

> Hi All,
>
> To do $subject, we are hoping to give a UUF client JS library. With the
> client-side library, webapp developers will be able to render fragments and
> push to zones similar to the server-side.
>
> Functions in the library:
>
> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
> zoneName, mode)
>
> Using this function webapp developers can render a fragment in the
> client-side and push the content to a given zone.
>
> Here,
>
> *fragmentFullyQualifedName* - Fully qualified name
> (.) of the fragment that you want to
> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
> *templateFillingObject* - JSON object which will be used to fill the
> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>
> *zoneName* - Name of the zone that you want to push the rendered HTML.
> e.g. "grid"
>
> *mode* - Dictates how the pushing content orders with the existing
> content in the zone. Mode can be "PREPEND" (put the pushing content before
> the existing content), "APPEND" (put the pushing content after the existing
> content) or "OVERWRITE" (replace the existing content with the pushing
> content)
>
>
> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)
>
> Using this function webapp devs can render a given Handlebars template and
> push it to a desired zone.
>
> Here,
>
> *hbsTemplate* - Handlebars template string
>
>
> Bringing zones to the client-side.
>
> When rendering a zone in the server-side, we can mark the start and end of
> a zone's content with HTML comments.
>
> e.g.
>
> 
>  content of zone grid goes here
>  here is a div
>  some more stuff
> 
>
> HTML comments can be identified by filtering nodes in the DOM. And further
> filtering the comments that starts with [UUF-ZONE], we can identify UUF
> zone marking comments. Jerad did a POC for this. In that we were able to
> successfully identify zones and push content for all modes.
>
>
> We are hoping to expose this library through the "uuf-client" fragment in
> the common "foundation" component [1].
>
> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/
> components/org.wso2.carbon.uuf.common.foundation
>
> WDYT?
>
> Thanks.
> --
> Sajith Janaprasad Ariyarathna
> Software Engineer; WSO2, Inc.;  http://wso2.com/
> 
>



-- 
Chanaka Jayasena
Associate Tech Lead,
email: chan...@wso2.com; cell: +94 77 4464006
blog: http://chanaka3d.blogspot.com
___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Improving clint-side rendering support in UUF

[Irunika Weeraratne]

Hi,
Can't we use standard JS libraries approach for this one?
Here we have used zone names.
eg : UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
*zoneName*, mode)

But AFAIK in standard JS this is done using Classes or IDs of elements.

For an example can't we have something similar to
*var zone = document.getElementById(zoneName);*
*UFF.renderFragment(par1, par2, par3, zone);*

IMHO I think that it would be better if we can find an approach which JS
developers are more often familiar with.

Also, IMHO I think we can use something similar to Jinja2 [1] kind of
approach from Python Flask for server-side template rendering.
[1]  http://jinja.pocoo.org/docs/dev/

Thanks and Best Regards,
Irunika

*Irunika Weeraratne*
*Software Engineer | WSO2, Inc. *
*Email : irun...@wso2.com *
*LinkedIn : https://lk.linkedin.com/in/irunika
*
*Mobile : +94712403314*
*Lean . Enterprise . Middleware*


On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka  wrote:

> Hi
>
> +1, few clarifications bellow.
>
> 1. I guess the default mode will be OVERWRITE.
> 2. Why did we use comments to propagate Zones to the client side instead
> of Divs.
>
> Thanks
> Jo
>
>
>
> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna 
> wrote:
>
>> Hi All,
>>
>> To do $subject, we are hoping to give a UUF client JS library. With the
>> client-side library, webapp developers will be able to render fragments and
>> push to zones similar to the server-side.
>>
>> Functions in the library:
>>
>> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
>> zoneName, mode)
>>
>> Using this function webapp developers can render a fragment in the
>> client-side and push the content to a given zone.
>>
>> Here,
>>
>> *fragmentFullyQualifedName* - Fully qualified name
>> (.) of the fragment that you want to
>> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
>> *templateFillingObject* - JSON object which will be used to fill the
>> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>>
>> *zoneName* - Name of the zone that you want to push the rendered HTML.
>> e.g. "grid"
>>
>> *mode* - Dictates how the pushing content orders with the existing
>> content in the zone. Mode can be "PREPEND" (put the pushing content before
>> the existing content), "APPEND" (put the pushing content after the existing
>> content) or "OVERWRITE" (replace the existing content with the pushing
>> content)
>>
>>
>> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)
>>
>> Using this function webapp devs can render a given Handlebars template
>> and push it to a desired zone.
>>
>> Here,
>>
>> *hbsTemplate* - Handlebars template string
>>
>>
>> Bringing zones to the client-side.
>>
>> When rendering a zone in the server-side, we can mark the start and end
>> of a zone's content with HTML comments.
>>
>> e.g.
>>
>> 
>>  content of zone grid goes here
>>  here is a div
>>  some more stuff
>> 
>>
>> HTML comments can be identified by filtering nodes in the DOM. And
>> further filtering the comments that starts with [UUF-ZONE], we can
>> identify UUF zone marking comments. Jerad did a POC for this. In that we
>> were able to successfully identify zones and push content for all modes.
>>
>>
>> We are hoping to expose this library through the "uuf-client" fragment in
>> the common "foundation" component [1].
>>
>> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
>> nents/org.wso2.carbon.uuf.common.foundation
>>
>> WDYT?
>>
>> Thanks.
>> --
>> Sajith Janaprasad Ariyarathna
>> Software Engineer; WSO2, Inc.;  http://wso2.com/
>> 
>>
>> ___
>> Architecture mailing list
>> Architecture@wso2.org
>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>>
>>
>
>
> --
>
> --
> *Joseph Fonseka*
> WSO2 Inc.; http://wso2.com
> lean.enterprise.middleware
>
> mobile: +94 772 512 430
> skype: jpfonseka
>
> * *
>
>
> ___
> Architecture mailing list
> Architecture@wso2.org
> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>
>
___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Improving clint-side rendering support in UUF

[SajithAR Ariyarathna]

Hi Jo,

1. I guess the default mode will be OVERWRITE.
>
Yes, we decided to add other modes for completeness.

> 2. Why did we use comments to propagate Zones to the client side instead
> of Divs.
>
divs clashes with CSS selectors (same goes for spans). These zone markers
should be invisible (which means they shouldn't create or affect visual
elements in the DOM). That's' why we chose HTML comments.

Thanks.

On Wed, Dec 14, 2016 at 8:05 AM, Joseph Fonseka  wrote:

> Hi
>
> +1, few clarifications bellow.
>
> 1. I guess the default mode will be OVERWRITE.
> 2. Why did we use comments to propagate Zones to the client side instead
> of Divs.
>
> Thanks
> Jo
>
>
>
> On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna 
> wrote:
>
>> Hi All,
>>
>> To do $subject, we are hoping to give a UUF client JS library. With the
>> client-side library, webapp developers will be able to render fragments and
>> push to zones similar to the server-side.
>>
>> Functions in the library:
>>
>> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
>> zoneName, mode)
>>
>> Using this function webapp developers can render a fragment in the
>> client-side and push the content to a given zone.
>>
>> Here,
>>
>> *fragmentFullyQualifedName* - Fully qualified name
>> (.) of the fragment that you want to
>> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
>> *templateFillingObject* - JSON object which will be used to fill the
>> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>>
>> *zoneName* - Name of the zone that you want to push the rendered HTML.
>> e.g. "grid"
>>
>> *mode* - Dictates how the pushing content orders with the existing
>> content in the zone. Mode can be "PREPEND" (put the pushing content before
>> the existing content), "APPEND" (put the pushing content after the existing
>> content) or "OVERWRITE" (replace the existing content with the pushing
>> content)
>>
>>
>> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)
>>
>> Using this function webapp devs can render a given Handlebars template
>> and push it to a desired zone.
>>
>> Here,
>>
>> *hbsTemplate* - Handlebars template string
>>
>>
>> Bringing zones to the client-side.
>>
>> When rendering a zone in the server-side, we can mark the start and end
>> of a zone's content with HTML comments.
>>
>> e.g.
>>
>> 
>>  content of zone grid goes here
>>  here is a div
>>  some more stuff
>> 
>>
>> HTML comments can be identified by filtering nodes in the DOM. And
>> further filtering the comments that starts with [UUF-ZONE], we can
>> identify UUF zone marking comments. Jerad did a POC for this. In that we
>> were able to successfully identify zones and push content for all modes.
>>
>>
>> We are hoping to expose this library through the "uuf-client" fragment in
>> the common "foundation" component [1].
>>
>> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
>> nents/org.wso2.carbon.uuf.common.foundation
>>
>> WDYT?
>>
>> Thanks.
>> --
>> Sajith Janaprasad Ariyarathna
>> Software Engineer; WSO2, Inc.;  http://wso2.com/
>> 
>>
>> ___
>> Architecture mailing list
>> Architecture@wso2.org
>> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>>
>>
>
>
> --
>
> --
> *Joseph Fonseka*
> WSO2 Inc.; http://wso2.com
> lean.enterprise.middleware
>
> mobile: +94 772 512 430
> skype: jpfonseka
>
> * *
>
>
> ___
> Architecture mailing list
> Architecture@wso2.org
> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>
>


-- 
Sajith Janaprasad Ariyarathna
Software Engineer; WSO2, Inc.;  http://wso2.com/

___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Improving clint-side rendering support in UUF

[Joseph Fonseka]

Hi

+1, few clarifications bellow.

1. I guess the default mode will be OVERWRITE.
2. Why did we use comments to propagate Zones to the client side instead of
Divs.

Thanks
Jo



On Tue, Dec 13, 2016 at 10:37 PM, SajithAR Ariyarathna 
wrote:

> Hi All,
>
> To do $subject, we are hoping to give a UUF client JS library. With the
> client-side library, webapp developers will be able to render fragments and
> push to zones similar to the server-side.
>
> Functions in the library:
>
> UUF.renderFragment(fragmentFullyQualifedName, templateFillingObject,
> zoneName, mode)
>
> Using this function webapp developers can render a fragment in the
> client-side and push the content to a given zone.
>
> Here,
>
> *fragmentFullyQualifedName* - Fully qualified name
> (.) of the fragment that you want to
> render. e.g. "org.wso2.carbon.apimgt.store.api-grid"
> *templateFillingObject* - JSON object which will be used to fill the
> fragment's template. e.g. {name: "My API", version: "1.0.0"}
>
> *zoneName* - Name of the zone that you want to push the rendered HTML.
> e.g. "grid"
>
> *mode* - Dictates how the pushing content orders with the existing
> content in the zone. Mode can be "PREPEND" (put the pushing content before
> the existing content), "APPEND" (put the pushing content after the existing
> content) or "OVERWRITE" (replace the existing content with the pushing
> content)
>
>
> UUF.renderTemplate(hbsTemplate,  templateFillingObject, zoneName, mode)
>
> Using this function webapp devs can render a given Handlebars template and
> push it to a desired zone.
>
> Here,
>
> *hbsTemplate* - Handlebars template string
>
>
> Bringing zones to the client-side.
>
> When rendering a zone in the server-side, we can mark the start and end of
> a zone's content with HTML comments.
>
> e.g.
>
> 
>  content of zone grid goes here
>  here is a div
>  some more stuff
> 
>
> HTML comments can be identified by filtering nodes in the DOM. And further
> filtering the comments that starts with [UUF-ZONE], we can identify UUF
> zone marking comments. Jerad did a POC for this. In that we were able to
> successfully identify zones and push content for all modes.
>
>
> We are hoping to expose this library through the "uuf-client" fragment in
> the common "foundation" component [1].
>
> [1]  https://github.com/wso2/carbon-uuf-common/tree/master/compo
> nents/org.wso2.carbon.uuf.common.foundation
>
> WDYT?
>
> Thanks.
> --
> Sajith Janaprasad Ariyarathna
> Software Engineer; WSO2, Inc.;  http://wso2.com/
> 
>
> ___
> Architecture mailing list
> Architecture@wso2.org
> https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
>
>


-- 

-- 
*Joseph Fonseka*
WSO2 Inc.; http://wso2.com
lean.enterprise.middleware

mobile: +94 772 512 430
skype: jpfonseka

* *
___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture