Skip to content
Uberfire JS Integrations Demo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
angular-poc
bower-distributions
kie-uberfire-js-webapp
uf-js-client-only
.gitignore
LICENSE
README.txt
bower.json
index.html
pom.xml

README.txt

uf-js
=====

Uberfire JS Angular Integrations Demo

Blog post: http://blog.athico.com/2014/11/red-hat-jboss-brms-and-bpms-rich-client.html

Demo video:     https://www.youtube.com/watch?v=jDpmMeFO_q8&feature=youtu.be&list=PLOwIXYCm38DklIzT8E7qKmW1kNQA4N7vN

0. Git clone our project

	git clone git@github.com:ederign/uf-js.git



Uberfire Client Only:
=====================


1. bower install uf-js 

    Note: You probably want to start in an empty directory;




2. cd bower_components/uf-js/



3. Open ../bower_components/uf-js/index.html on Firefox 

    Note: We use firefox here, only because Chrome doesn't allow different protocols requests file:// and http://


4. Try Uberfire Screens:

- Screens hello World

    <!-- Uberfire Component-->
    <uberfirecomponent id="id1" uf-component="welcome"></uberfirecomponent>
    <!-- <uberfireperspective id="id1" uf-component="HomePerspective"></uberfirecomponent> -->

- Passing parameters from angular to uberfire

    <!-- Uberfire Component-->
    <uberfirecomponent id="id1" name="John Connor" uf-component="welcome"></uberfirecomponent>
    <!-- <uberfireperspective id="id1" uf-component="HomePerspective"></uberfirecomponent> -->




5. Try Uberfire Perspectives
   
    <!-- Uberfire Component-->
    <!-- <uberfirecomponent id="id1" name="John Connor" uf-component="welcome"></uberfirecomponent> -->
    <uberfireperspective id="id1" uf-component="HomePerspective"></uberfirecomponent>:
    


Uberfire Full Distribution + Angular:
====================================


Using JBoss:
------------
Demo video: https://www.youtube.com/watch?v=mXMny4AuHIU


1-) Download our compiled War for EAP 7.1 (jboss-as-7.1.1.Final)

https://www.dropbox.com/s/hddyv03ep1su4nm/uberfire.war?dl=0

2-) Install this war in EAP

3-) To make angular routes work, you have to install (map) the directory angular-poc inside some web server (like apache). In my example I map angular-poc inside apache so the url will be:

http://127.0.0.1/angular-poc/indexExternal.html


4-) Create a dynamic screen like this video:

https://www.youtube.com/watch?v=JQvC0CBDFCM

With parameters:
angularTemplateUrl http://127.0.0.1/angular-poc/secondNestedController.html
domElementId template
Place Name ExternalAngularScreen

Note: there is a small bug, that the component only save the value after um click outside the field, so before click on close, please click somewhere in the popup to the component lost focus

Hit close;

Click on save perspective
pespective name: dynamicPerspective


6-) Access menu Nested Controllers

See the nested controllers in action, is a external angular component, with a uberfire perspective that has a angular component inside it. Transparent integration!


Compiling and running in Jetty:
------------------------------

1. Clone and Build Uberfire Fork
    git clone git@github.com:ederign/uberfire.git
    mvn clean install -Dmaven.test.skip=true

2. Build kie-uberfire-js-webapp project
    mvn clean install

    Note:  worth mentioning kie-uberfire-js-webapp is back in the uf-js git repo we cloned in an earlier section (not in the uberfire fork we built)

3. Run it and open the url in Google Chrome 
    mvn gwt:run
	http://127.0.0.1:8888/angular-poc/indexLocal.html?gwt.codesvr=127.0.0.1:9997

4. You can now see the perspective editor, and angular routes working. (right now, only between home and perspective editor)


5-) Create a dynamic screen like this video:

https://www.youtube.com/watch?v=JQvC0CBDFCM

With parameters:
angularTemplateUrl http://127.0.0.1:8888/angular-poc/secondNestedController.html
domElementId template
Place Name ExternalAngularScreen

(there is a small bug, that the component only save the value after um click outside the field, so before click on close, please click somewhere in the popup to the component lost focus)

Hit close;

Click on save perspective
pespective name: dynamicPerspective


6-) Access menu Nested Controllers

See the nested controllers in action, is a external angular component, with a uberfire perspective that has a angular component inside it. Transparent integration!









You can’t perform that action at this time.