I Use This!
Activity Not Available


Analyzed about 1 month ago. based on code collected about 1 month ago.
Posted 3 days ago
GeeCON has come to Prague and I had a the pleasure to do an initial keynote talk. It is so great when such conference comes to your home town! Thanks a lot dear, GeeCON organizers! --JaroslavTulach 06:27, 22 October 2016 (UTC)
Posted 4 days ago
NetBeans recently became an Apache project. Some people had been afraid that NetBeans ends up like OpenOffice, whilst others appreciated that step enthusiastic. I don’t know what future brings, but the NetBeans community is still vibrant. And the ... [More] NetBeans Dream Team just incorporated seven new members. The NetBeans Dream Team consists of people who are … Continue reading "New NetBeans Dream Team members" [Less]
Posted 4 days ago
Here's an overview of CSS tools in NetBeans that I've found to be quite useful. Below, in the first example, the value of "class" is set to "foo", which does not exist in any of the available CSS stylesheets. NetBeans offers to create the rule in a ... [More] stylesheet of my choosing and to import that stylesheet into my HTML file: Below, the value of "id" is "foo", which doesn't exist in any of the stylesheets. NetBeans suggests to create it for you and import the related stylesheet: In this case, no stylesheets exist and NetBeans offers to create a new stylesheet in which it will write the currently undefined rule: Below, you can see I am using code completion and am shown all the available rules for the "class" attribute, from all the stylesheets, regardless of whether those stylesheets have been imported: In the scenario below, I hold down the Ctrl key and click on "foo", i.e., the value of "class", because I want to jump to the definition of "foo" in the stylesheet in which it is defined. However, NetBeans tells me that there are two different "foo" rules available. One of those is from a stylesheet that has been imported and the other is from an unrelated stylesheet, i.e., one that has not yet been imported: And here I have imported the previously unrelated stylesheet so that now NetBeans shows me both stylesheets where "foo" is defined and lets me choose which one should be opened. Pretty handy! Earlier articles on this theme: Editor Tools for CSS in NetBeans IDE (Part 1) Editor Tools for CSS in NetBeans IDE (Part 2) [Less]
Posted 5 days ago
After “Web Development with Java and JSF” [1], I wrote a short book about “Java Lambdas and Parallel Streams”. Both books are written by the assistance of NetBeans, which I used to write the code, the book, and which I used to show some examples in ... [More] the book. My second book had been such interesting … Continue reading "Java Lambdas and Parallel Streams" [Less]
Posted 7 days ago
JUG Poznan, 19.10.2016 Slideless Microservices JUG Session There were already 120 registrations a few weeks ago. 22.10.2016, 9:30am CET HighLoad Dev Conf, Minsk, "High Performance Java EE", live streaming: http://www.ustream.tv/channel/adambien ... [More] 24.10.2016, airhacks.com workshop at MUC Airport React For Java (EE) Developers: "Building HTML 5 Applications With React" 25.10.2016, airhacks.com workshop at MUC Airport Angular 2 For Java (EE) Developers: "Building HTML 5 Applications With Angular 2" 7.11.2016, 6pm CET, monthly Questions and Answers live streaming airhacks.tv show. Ask questions now or during the event: https://gist.github.com/AdamBien/592a90abcf98258b93f2f35343f9513c Interestingly, there is one registration more for the React workshop than for Angular 2 (I guessed Angular 2 is going to be far more popular). Real World Java EE Workshops [Airport Munich]> [Less]
Posted 12 days ago
The next feature to be added to your UI component extension is a Drop Dialog, i.e., when the citizen developer drags and drops your component, a small dialog will appear to fill in some of the values in the component to override the defaults the ... [More] component gives you:To achieve the above, do the following. Create the View. In your 'templates' folder, add a new HTML file, with any name, such as "popup.html", with this content: First Name Last Name Add the Business Logic. All the business logic for this scenario is found in the 'Creator.js' file. Rewrite the 'define' block, to load the 'popup.html' file and provide the API you'll be needing: define([ 'com.greeting/js/Constants', 'components.dt/js/api/ComponentFactory', 'components.dt/js/spi/creators/CreatorType', 'components.dt/js/spi/creators/DropPopupController', 'text!com.greeting/templates/popup.html' ], function(Constants, ComponentFactory, CreatorType, DropPopupController, popupMarkup) { Change the return value of "getType" to CreatorType.POPUP. Below 'createView', define 'getDropPopupController': ComponentCreator.prototype.getDropPopupController = function (view) { // right after the view is created, the infrastructure calls this method // to get an instance of DropPopupController, providing the html markup, // view model, and the callback implementation for the popup. var myPopupViewModel = this._createModel(); var customizer = new ComponentCreator.MyDropCustomizer(view, myPopupViewModel); // create an instance of DropPopupController with required popup model and markup. var controller = new DropPopupController(myPopupViewModel, popupMarkup, customizer); // attach a finish handler to your model and dismiss the popup // when the model says so using an API finish method. myPopupViewModel.finishHandler = function (result) { controller.finish(result); }; return controller; }; Below the above, you need all of this: ComponentCreator.prototype._createModel = function () { var model = { text1: ko.observable(), text2: ko.observable(), finishHandler: undefined, finish: function () { this.finishHandler(true); }, cancel: function () { this.finishHandler(false); } }; return model; }; var MyDropCustomizer = function (view, model) { this._view = view; this._model = model; }; MyDropCustomizer.prototype.opened = function () { // you can do something useful here }; MyDropCustomizer.prototype.closed = function (accepted) { if (accepted) { // popup was accepted and closed, let's update view properties this._view.getProperties().setValue('text1', this._model.text1()); this._view.getProperties().setValue('text2', this._model.text2()); } // do not forget to return a promise resolving to the view instance return Promise.resolve(this._view); }; ComponentCreator.MyDropCustomizer = MyDropCustomizer; And now, when you drag and drop, you should see a small dialog for filling in initial values. [Less]
Posted 13 days ago
The next step is to give your citizen developers a Property Inspector for the UI component extension you're creating for them. Let's go through the whole process from start to finish, imagining you've gone through the various dialogs in ... [More] yesterday's blog entry and you now have a UI component extension generated for you from the "blackbox" template. We'll use the "Hello World" scenario from the Knockout site for this example.  Define the UI Component Extension. In 'blackbox.html', replace the content between the 'div' tags with the following: First name: Last name: Hello, ! In 'Initialiser.js', rewrite the 'ko.components.register' expression to the following and note that "text1" and "text2" do not exist yet, we'll create them in the next steps below: ko.components.register(Constants.COMPONENT_ID, { viewModel: function (params) { var self = this; self.firstName = ko.observable(params.text1); self.lastName = ko.observable(params.text2); self.fullName = ko.pureComputed(function () { return self.firstName() + " " + self.lastName(); }, this); }, template: template }); You now have your UI component extension and should be able to reload it into your Page Designer. From there, you can drag and drop it into the canvas. In the Property Inspector, on the right side of the Page Designer, notice the "Initial Value" field, which has its value set to "Hello World!" We're going to rewrite that to a "First Name" property, and connect it to the "First Name" field in the UI component extension, so that your citizen developer can set a default first name whenever they've dragged our UI component extension into the canvas. Reuse the Default PropertyThe template you used to create your extension includes a property that we can use as the basis of our own property, after which we can connect it to our component. To do this, we'll work down the list of files in the "js" folder, one by one and rewrite bits and pieces as needed: Constants.js. Change the name of PROPERTY_ID_TEXT to PROPERTY_ID_FIRST and its value to 'text1'. Change the name of DEFAULT_MESSAGE to DEFAULT_FIRST and its value to 'Planet'. Creator.js. In 'ComponentCreator.prototype.createView', change the property 'text' to 'text1' and DEFAULT_MESSAGE to DEFAULT_FIRST. (Tip: In Creator.js, change the "2" for "minWidth" to a different integer if you want the component, when it is dropped, to have a different width.) PropertyInspectorViewModel. In the function, rewrite 'text' everywhere to 'text1' and PROPERTY_ID_TEXT to PROPERTY_ID_FIRST. ViewGenerator.js. Change 'text' to 'text1'. Change all usages of 'message' to 'text1'. Next, we'll work in the "html" folder: blackboxPI.html. Rewrite 'Initial Value' to 'First Name', rewrite 'text' to 'text1'. blackboxWrapper.html. Change the two usages of 'message' to 'text1'. Use the Property InspectorOn the Extensions page, click "Reload Extensions", go back to the Page Designer, drag-and-drop your component into the canvas and then notice that you're able to fill in and change the default first name in the Property Inspector: Write a Property from ScratchNow that we've rewritten the default property and, essentially, refactored it for our purposes, let's write one ourselves. We'll write a "text2" property so that the Last Name will be customizable from the Property Inspector. Constants.js. Define PROPERTY_ID_LAST and its value to 'text2'. Define DEFAULT_FIRST and set its value to 'World'. Creator.js. In 'ComponentCreator.prototype.createView', add a comma after the definition of 'text1' and add 'text2', with its value set to DEFAULT_LAST. PropertyInspectorViewModel. Copy 'self.text1' and related code, rename everything to 'text2' and PROPERTY_ID_LAST. ViewGenerator.js. Copy the various 'text1' statements and paste them and rename to 'text2'. And then include 'text2' in the 'ViewGeneratorSupport.applyMap' construct, as shown below: var val = ViewGeneratorSupport.applyMap(template, { id: view.getId(), elementName: Constants.COMPONENT_ID, text1: text1, text2: text2 }); Next, we'll work in the "html" folder: blackboxPI.html. Copy the whole "First Name" section, paste it, rename it to "Last Name", and "text1" to "text2". blackboxWrapper.html. Rewrite to include your new parameter: $elementName$> Use the Property Inspector. When you reload extensions, go back to the Page Designer, and drag-and-drop your component again, you'll see that you can now customize both of the properties. Also note that, thanks to your code in ViewGenerator.js, you have error handling built in: What you've learned is how to extend your UI component extension to include support for the Property Inspector. [Less]
Posted 13 days ago
What we have so far, after part 1, is a custom component. What's we'd like to have is an extension to ABCS so that the component can be dragged and dropped into any application created in ABCS. In the left side of ABCS, below, provided by the ... [More] hamburger button in the top left, you see an item called "Extensions": Now you're on the page below where, as you can see in the left side, you can create new UI components: Fill in the details below, which is a dialog that appears after you click the button above: Click Template above and then click "blackbox" below. When you click OK above and wait some seconds, a new UI component will be created for you, as shown below. Use the Sources tab to edit the code in the UI component. The business logic goes into "Initialiser.js", while the view goes into "blackbox.html": The other files provide related support, for example, in "Constants.js", you can tweak the display name of the new UI component. There's also files dealing with the drop dialog and property inspector that can be extended. Back in the Page Designer, you'll see your new UI component, named "Black Box" by default (below you can see I changed it to "Greeting" because I edited the "Constants.js" file), in the "Common" category, from where you can drag and drop it into the canvas. You can drag that new UI component into your canvas, below you can see I have done this twice: There's syntax coloring to help you, when editing your UI component in the browser above. On the other hand, you can also export the extension to a ZIP file and open the source files into an editor, such as NetBeans IDE, edit the files there, ZIP them up again, and upload them in the dialog above. Further reading: UI Extensions in Application Builder Cloud Service [Less]
Posted 14 days ago
Once you're comfortable with Oracle JET, consider taking the next step: Application Builder Cloud Service (ABCS). No, ABCS isn't simply a drag-and-drop development environment for citizen developers. Instead, it's an architecture for software ... [More] developers to establish a drag-and-drop development environment for citizen developers! In other words, you can extend ABCS specifically for your business developers, with components that you define yourself... using Oracle JET. Or, more exactly, by creating Knockout components, which underpin the concepts used in Oracle JET. Below, you see the "Hello World" scenario from the Knockout tutorials. It is part of an application created in ABCS by means of a "Custom Code" component. In the below, look on the left side in the palette, at the end, where you'll see "Custom Code":  Drag that into the canvas and then automatically the editors you see below open up, so that you can define your custom component: Above, you can see that there's an HTML view and business logic in JavaScript, using a "define" block provided by Require.js, with data binding made available by Knockout.js. With your Oracle JET background, or with a generic Knockout background, you should immediately know what to do with the above. I.e., replace the boilerplate code with something like the above, in other words, with the view and viewModel of your custom component, as shown above for the "Hello World" scenario. And above you see the application deployed directly from ABCS. Really neat, the concept of "developing for the Cloud, in the Cloud". Further reading: http://likeahouseafire.com/2016/09/17/custom-code-components-in-abcs/ Continue to part 2. [Less]
Posted 15 days ago
The Internet Mobile World 2016 conference slideless session: "Building Mobile First Services With The Killer Microservice Platform" is available. During this 30 minute session I built "from scratch" and tested a backend service, explained the ... [More] design choices and finally build a "micro" docker image in 1.5s and run it: See you at Java EE Workshops at Munich Airport, Terminal 2 or Virtual Dedicated Workshops / consulting. Is Munich's airport too far? Learn from home: airhacks.io. Interested in microservices only? Checkout: javaeemicro.services. Real World Java EE Workshops [Airport Munich]> [Less]