Posts

Showing posts with the label Twitter Bootstrap

Creating Bootstrap Widgets Using Dojo at ATLUG

Thanks to Lisa and Darren Duke, I will be presenting at ATLUG on May 19, 2016 on combining my two favorite open source frameworks, Twitter Bootstrap and Dojo, to create widgets that your can use in your web-based application. This presentation is not XPages specific. The presentation will be held at the IBM Technical Exploration Center in Atlanta. So if you are a web developer using or thinking about using Dojo and Bootstrap come join me or to just listen to me rant and rave. IBM Corp  (Building A) 6303  Barfield Rd.,  NE Atlanta ,  GA   30328 Technical   Exploration   Center Creating Bootstrap Widgets Using Dojo Twitter Bootstrap is one of the most popular responsive CSS frameworks available. Dojo is one of the most comprehensive and powerful JavaScript framework available. However, Bootstrap only comes with jQuery-based widgets by default. But if you can only combine Bootstrap and Dojo together, you as designers and develo pers w...

More Fun Creating Dojo widgets and MVC

Here is another article in my "Fun with Dojo" series. Dojo traditionally has been considered slow.  One reason is that Dojo loads alot of modules before it instantiates the page.  Dojo with AMD helps reduce the number of modules when it first loads but not the number of modules.  This is great.  However, one thing that I really dislike are Dojo Dijit widgets.  They are heavy, slow, and require a lot of modules to be loaded. We like the Bootstrap widgets because they are lightweight. So instead of using Dijits that are built into XPages we created our own lightweight Dojo Bootstrap widgets that utilized the most minimal amount of required Dijit modules and dependencies. One of the things that we had to figured out was what bare bone modules that we needed beside dijit._Widget in order to create our own widgets and include them in the loading process.  When we were using Dojo 1.53, we created a custom loader with all the re...

The Good, Bad, and Ugly about AMD in Dojo

Image
We were testing iPhora Touch 2 with the attendees of MWLUG 2014 in the MWLUG portal and as usual, the interface had issues even after having outside users provide feedback before we rolled it out.  When you are so focused on the creation process it hard to see issues until it is seen by fresh pair of eyes.  So we are working on a new faster and improved interface for iPhora Touch. This is the evolution of any product. Since we are using a JavaScript/JSON Restful API approach most of the changes will be on the front end and only minor changes to the back end which is great.  In theory we can swap out different interfaces with little impact on the back end.  This is where the newer AMD approach for Dojo comes into play. The use of AMD in Dojo allows us to modularize the UI components even more than what we had.  Therefore, we have been upgrading all the iPhora widgets from Dojo 1.53 to Dojo 1.10.0 and at the same time upgrading from Bootstrap 2.32 to 3.2 an...

Why an Ideal MVC Framework Fails

One of the "Next Big Things" these days is the use an MVC framework for developing Web applications. There are a number of MVC frameworks out there including Backbone, Ember, and the rapidly growing Angular.  Ideally these MVC frameworks are great, hook things together and any changes to the model (data) and all the views are updated based on the controller code. If there is changes to the model, the data is automatically updated on the server. This is the ideal case. However, it assumes one critical thing, you have the access rights to CRUD data on the server. This is an extremely dangerous assumption. In our iPhora security model, we assume the opposite and you do not have access rights to any data on the server. We do not trust anything and any request. We assume that you are trying to hack and inject. Your authorization is checked during each request. We looked at using Angular since it is the hot ...

Open Source Impact on the ICS Community

I am a big user of open source technologies including, Linux, Twitter Bootstrap, Dojo, and many other open source tools.  Open source technology has had a huge impact on the ICS Community in general.  We are fortunate enough to have a number of sessions this year at MWLUG 2014 that includes open source technology as part of their presentation. So come join us in these sessions.   Open Source Technologies: Nginx, OpenSSL, Apache HTTP Server Load Balancing, Failover, and More With Nginx,  Jesse Gallagher,  CTO,  I Know Some Guys, LLC Putting an alternative web server in front of your Domino installation gives you a tremendous amount of flexibility and new abilities. This session will discuss using nginx on Ubuntu server to sit in front of several Domino servers and provide load balancing, automatic failover, multiple SSL certificates, and other tricks. The same concepts will apply to Apache and IBM HTTP Server.   Open Source Technologies: An...

When This is This and What is This, but What is not This, Dojo Event and Objects

In the past couple of years, I have been building Dojo Bootstrap widgets from stratch rather than using standard Dojo widgets and styling using a Bootstrap theme.  Why in the world would you do that might you ask.  Sometimes I also ask myself that question. There are many advantages, including adding security features that are not founded normally. Since we RESTFul JSON services, the widgets are optimized for our format.  In addition, the widgets are automatically binded with the RESTFul JSON services when the web page is instantiated.  So as part of my Dojo adventures, I had to learn and relearn Dojo again and again. There is so many different ways to do things, but the right way is sometimes elusive.  One advantage of Dojo over JQuery is that Dojo forces you to use a pattern for creating widgets which I really like.  It is hard enough for me to follow what I did 2 months ago.  Imagine if another developer had to follow my code years later. One pr...

Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together

Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together Note:  With a customer deadline coming up and with all the work that MWLUG 2013 requires, I haven't had the time to devote to writing this series.  So I took most of today to complete this part. As I was writing this part of the series, I realized that I should talk about creating widgets using Dojo in general. So I split this part into part A and B because it was getting way too long. Welcome to part three of my five part series "Creating Twitter Bootstrap Widgets". In the first two parts, we talked about how Bootstrap widgets can be assembled using a consistent framework of standard HTML elements with CSS3 styling.  In part three, we will connect together our combo box widget using Dojo and make it functional.   As XPages developer you should be famil...

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble

Image
Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com. Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a select...

Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget

Image
Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together Twitter Bootstrap currently is the most popular open source responsive CSS framework. If you are using Bootstrap strictly as a responsive framework, you are missing out.  It is also a great framework for creating UI widgets and UI components. Bootstrap normally comes with JQuery plug-ins widgets like buttons, inputs, and drop-down menus.  You can use these plugins as a basis in creating more complexity widgets. In this five part series, I will walk you through the process of creating a Bootstrap widget by first understanding how Bootstrap widgets are structured, how to layout a widget, tie it together using Dojo, turn it into a responsive widget, and how to create it as a XPages custom control for you XPagers out there. There are three prerequisites to con...