Xomino

Domino with the new improved X

Speedgeeking at ConnectED – Monday at 6:16pm – XPages and Bluemix

Posted by MarkyRoden on January 23, 2015

Warning – Blatant Self promotion time (“which is different from normal how Marky” – yeah yeah whatever)

Next week I will be at ConnectED in Orlando and for those of you who are going I am doing the aforementioned talk with Mark Leusink and also Speedgeeking.

6:15pm in the TechOasis (free beer) – 5 minutes on XPages and Bluemix – I am going to do a live demo which will either totally rock or fall flat on its face. I know I risk the “help” of “friends” but I think this might be very cool.

For more information go HERE

http://beyondtheeveryday.com/#/sessionsAll

and search for speedgeeking

Come over and say Hi Monday evening – you do not have to speedgeek every table (shhh) just come and say hi

Make sure you have a QR Code reader on your phone as well ;)

#excited

 

Posted in Just Marky | Leave a Comment »

Scrolling to the errors – Making XPages Error Handling more user friendly

Posted by MarkyRoden on January 14, 2015

In this article I will demonstrate how to easily improve the server side form validation process from a user’s perspective.

Introduction

I have to admit that I am not a fan of server side validation. While it suits the developer, it is often not a good user experience. If you complete a large form, hit submit and you have errors returned, it is had to ascertain where the error has occurred. This causes the user to have to scroll up and down the page looking for the error. In an ideal world the form needs to be validated fornt end and back end to provide the optimal experience, while ensure data integrity within the application.

When building the PSC Contest site http://contest.psclistens.com I wanted to make the server side validation as painless as possible for users.

Basic Server side XPages validation

To validate a field on an XPage we use validators and a custom message. In the following example, when the user submits a blank field, an error message will be returned and the JSF validation will prevent the form from saving.

<xp:inputText styleClass="form-control"  disableTheme="true"  value="#{competition.First}"
	id="first1">
	<xp:this.attrs>
		<xp:attr name="placeholder"
			value="Contact First Name">
		</xp:attr>
	</xp:this.attrs>
	<xp:this.validators>
		<xp:validateRequired loaded="true" message="This value is required">
		</xp:validateRequired>
	</xp:this.validators>
</xp:inputText>
<xp:message id="message6" for="first1"
	styleClass="error">
</xp:message>

Here is an example of the failing field. I have assigned a class = “error” to the message and that styles it red and bold.
c1

Scrolling to the error message

Within the onComplete event of the form’s submit button we can add some code to determine if there are any errors. If there are errors we can use some jQuery to “scrollTo()” the message on the screen and it is revealed to the user.

  • The code var temp = $(‘.error:visible’) selects all the error message which are visible to the user.
  • If the length of the selector is greater than 0 there must be an error on the page
  • So determine where it is on the page temp.eq(0).offset().top-250 and then
  • Animate a scroll to the element.
  • http://api.jquery.com/scrolltop/ tells us that we are able to ascertain the scroll bar height of the element and  “Setting the scrollTop positions the vertical scroll of each matched element.”
<xp:button value="Submit" styleClass="btn btn-primary theSubmit" id="button1">
	<xp:eventHandler event="onclick"
		submit="true" refreshMode="partial" immediate="false"
		save="true" refreshId="container">
		<xp:this.onComplete>
			<![CDATA[
				//Check to see if there are any errors
				var temp = $('.error:visible')
				if (temp.length >0){
					$('html, body').animate({scrollTop: temp.eq(0).offset().top-250}, 1000, function(){
					});
				} else {
					alert('Thank you for your submission. PSC will be in touch.')
					location.href="http://www.psclistens.com"
				}
			]]>
		</xp:this.onComplete>
		<xp:this.script><![CDATA[
			//check to see if project sponsor is checked
			if ($('.projectSponsor').is(':checked')){
				console.log('sponsor check')
				app.checkSponsor()
			}
		]]></xp:this.script>
	</xp:eventHandler>
</xp:button>

If there are no errors the user is thanked and redirected to the PSC homepage.

Don’t do a complete submit….

The only way we are able to run an “onComplete” on the button event handler is if we do not submit the entire form. If we do this then all the code will be lost and the page will revert to the top of the page.

Wrap the body of the form in a panel or div which can be refreshed.  Set the button click to partial refresh that section. This way the scroll position on the page will not be lost when the button is clicked.

 

c2

The contest site

Check out the contest site http://contest.psclistens.com before 13 Feb 2015 when PSC will announce the winner

 

Posted in PSC, XPages | Tagged: , | 5 Comments »

BTE102: The Demonstration application – beyondtheeveryday.com

Posted by MarkyRoden on January 14, 2015

In the previous post  I described how Mark Leusink and I are going to be speaking about Angular.js in our presentation at ConnectED later this month.

We are very proud to announce the demonstration application upon which the presentation will be based

http://beyondtheeveryday.com

This application was created by Mark Leusink and is an amazing example of how simple an Angular application can be integrated with Domino data. The application is fully responsive and is particularly nice to use on a mobile device. All credit goes to Mark for this, I am very flattered to be talking with such an astute and talented developer. You can find out more about the application from Mark’s blog – http://linqed.eu/2015/01/14/marky-marks-mobile-first-connected-sessions-demo-app/

The application is running on a Domino server.

b1

IMG_0339

During the presentation we will demonstrate how we got the application to work on a node server hosted in Bluemix and also demonstrate the application running on SharePoint, IBM Connections and as a native Mobile application.

If you are still not sure, listen to Pete Janzen talk about his recommendations for the conference ;)

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

Write once – run anywhere………………. !

Posted in Angular in XPages, Angular.js, Bluemix, node.js | Tagged: , , , | 13 Comments »

Win a week of consulting from an IBM Champion

Posted by MarkyRoden on January 6, 2015

IBMChampion
 

PSC is proud to have five people selected as IBM ICS Champions for 2015. This is the second year in a row that PSC has the most ICS Champions of any organization worldwide. In celebration of this achievement, PSC is offering the opportunity to win a free week of consulting (40 hours), including travel costs, from one of our IBM Champions.

To be considered please visit the following site and complete the submission form:

https://contest.psclistens.com

PSC_PrimaryLogo

Posted in PSC | 2 Comments »

Debugging iPad / iPhone web based apps using Firebug lite bookmarklet

Posted by MarkyRoden on January 5, 2015

While the XPages Extension Library contains a control to use the firebug lite control, you might want to use it to debug a production app and or an Angular application which is not residing within XPages. You can do this on Firefox by installing the plugin, but it gets harder when you are testing cross multiple browsers and especially on an iPad where the development tools are limited.

You can install firebug lite as a bookmarklet within your iPad bookmarks by following the instructions on this site:

http://iosbookmarklets.com/tutorials/firebug-lite-bookmarklet-ipad/

Using the link you can then debug (with some difficulty but way better than nothing) your applications by looking at the in and out-going traffic from the page.

firefoxLiteoniPad

 

Posted in FireBug, XPages | Leave a Comment »

Thank you everyone for a great 2014 !!!

Posted by MarkyRoden on December 21, 2014

So my week started off with a question “On a scale of 1 to 10, how would you rate the year professionally?”. It did not take too long to say 10 out of 10. I have achieved pretty much everything I set out to and more. It has been an interesting year personally and professionally. Much change and many new and interesting people to meet.

Having worked for two years at home in Virginia as a remote worked, PSC offered me a new position based out of the main office in Schaumburg IL (just outside of Chicago). The offer was too good to refuse and as soon as school finished in June this summer we moved northwards. My thanks go to John Quirk and the other partners within PSC for having the faith and belief in me that I am worth it.

In Schaumburg I have been able to get closer to “the business” and further away from “core development”. While my day to day role has not significantly changed my outlook on it has. I have happily come to terms with “managing” projects within the Collaboration Practice and after having delivered two year long projects to my main customer, I do not have an significant code contributions to either project. The startling thing is I am perfectly OK with that! I love being a developer and I don’t want to stop. The blogging and research into new areas and fields of interest has kept me happily going throughout the year within project code to work on.

This year, as part of the IBM ICS brand community, I:

  • Presented twice at Connect 2014 in January
    • Worklight (with John Jardin)
    • ExtJS and working with large data in XPages
  • April: Presented a TLCC Webinar – with Jesse and Ulrich –  Speeding up Domino designer and general questions.
  • In August I presented at MWLUG in Grand Rapids, MI
    • Angular.js and XPages
  • In November I found out that my x$ XSnippet was officially incorporated into the latest ExtLib release !!!
  • November I found out that I would be speaking in Orlando again next year with Mark Leusink
  • November I was also very honoured to find out I had been nominated as an IBM ICS Champion for 2015
  • I blogged a total of 78 times (just up from last year) with a hit count of nearly 80,000 (up a full 33% from last year)

Blogging themes

  • The theme for the year I decided was Angular.js. I needed to learn it and understand it as I knew it was going to come into play in our projects.
  • I also wondered into Bluemix in a significant manner and then eventually websockets. With the impending addition of an XPages buildpack into Bluemix I do believe I have a theme for next year (assuming I don’t have a squirrel moment)
  • Along with Bluemix came an excuse to start working with node.js which I had been promising myself for a long time. Websockets is a very good base to start playing with node and its capabilities and there is more of that to come.

So THANK YOU is owed to many people who have made this year such a great one for me.

  • Every person who submitted my nomination as an IBM Champion – I know of at least 6 people who did. I am very flattered and humbled for you to think of me. It is good to have a voice, but encouragement to continue always helps :)
  • PSC Group
    • Troy Reimer, Mark Scherer and Toby Samples who have for the most part up with me the entire year on one project or another
    • Kathy Brown and Brad Balassaitis who are just the best Agony Aunts a dont-wanna-be manager could possibly hope to call his friends :)
    • Andrew Barickman, who’s mentoring and leadership have taught me a lot this year.
    • John Head who continues to surprise me with his knowledge and understanding. (and bought me the most expensive dinner of the year ;) )
    • All the new faces I have met at PSC but never really interacted with before, Norm, Dan, Steve, John, Steve, Ken, Shil, Tim, and others.
    • John Bigenwald, for repeatedly reminding me that there are larger egos than mine at the company.
  • David Leedy
    • As much of a pompous fool that man can be, he is still instrumental in me being able to do what I want to socially. I hope it is clear to everyone who knows both of us that David is a very good friend ;)
  • Russ Maher
    • Russ has always been a community supporter and friend, but this year he went above and beyond by inviting my family and I over for July 4th at his house with family. We had only been in the area a few weeks and knew virtually no-one in the area. We didn;t even know where to go for fireworks. His whole family was very welcoming and we were very fortunate to be invited. We regularly drive past his street and my kids go “that’s Mr Russ’ street”. Very significant for them in feeling welcome in a new place. Thank you !!
  • Richard Moy who organized MWLUG and everyone else in the community who organizes a user group
  • Multiple random community members ( I know I will forget some ) who have been fun to interact with and I have learned from this year:
    • Oliver Busse, Nathan Freeman, Jesse Gallagher, Declan (thanks for the drinks) Lynch, Eric (smiley) McCormick, Mark Leusink, John Jardin, Per Lausten, Ryan Baxter, Steve Zavocki, Paul Withers, Brice Elgort, Sven Hasselbach….et al
  • I know developers in at least the following countries – and that makes this all so cool
    • USA, Canada, Brazil, Argentina, England, Ireland, Scotland, France, Germany, Holland, Poland, Switzerland, Belgium, Turkey, Italy, South Africa, Australia, Japan, Denmark, Sweden, Norway and others I am sure

Finally to everyone reading this – I have to admit that a readership of zero would be pretty discouraging and would make me want to find something else to talk about. Thanks for reading and considering this relevant to your day. I hope you enjoy the time with families this New Year and here’s to 2015 !!

 

THANK YOU :)

 

Posted in Just Marky | 5 Comments »

Practice what you preach – be fast and look sexy

Posted by MarkyRoden on December 16, 2014

As people who know me well may have heard once or twice, user experience is everything. When designing a custom web based application for a customer, there is always an unwritten requirement of “look sexy” and be fast.

This week my team and I at PSC successfully rolled out a new global application to a customer and here are some examples of the feedback we received within the first day or so:

  • I tried the new site only this morning and I have only one word: fantastic! It is very user friendly and fast.
  • …not to mention, based on the feedback from partners in the US and leaders across the world, it is the best system they have seen in the company.
  • …thanks for all your efforts! Looks “sexy” so (sponsor) is definitely pleased.

Not a single mention of how the functionality will meet their business needs. Not a thought for how well we have met their requirements. We have done that, but that would be irrelevant if we had delivered a poor looking, slow, but highly functional website.

To achieve the speed we were looking for the application is built primarily on Angular.js and Domino Data. Minimizing the amount of server processing for any given user interaction and minimizing the network traffic necessary to provide the expected response time, was a prime consideration in designing the architecture. Working with the talented design team at PSC and the customer we were able to create a visual user experience which adhered to the company’s strict style guides but looked “sexy”.

Be fast, look sexy, and make users want to tell their friends.

Posted in Angular.js, Just Marky, PSC | 8 Comments »

BTE 102: The Future of Web Development Write Once, Run Everywhere with AngularJS and Domino

Posted by MarkyRoden on December 16, 2014

Mark Leusink and I are very excited to be presenting a session at ConnectED this coming January. This is a great opportunity to come and find out about something a little different from the normal XPages run of the mill development. Mark and I will provide an introduction to the concepts and structure behind Angular.js, and then demonstrate how to build a very simple yet useful application using Angular.js and a Domino data store.

We are also going to blow some minds by showing the same application running on non-Domino platforms. If architected correctly, this transformation can be made with almost no code refactoring at all.

Come and see us in Orlando !

http://www.ibm.com/software/collaboration/events/connected/

Marky, Mark

 

Track: Beyond the Everyday

Abstract

AngularJS is currently the most popular JavaScript MVC framework. It’s driving more adoption and interest in the MVC/ REST API application architecture model. The ease of use, portability and re-usability of the code makes it an ideal solution for modern web developer needs. We’ll show you how to use AngularJS to modernize your existing Domino apps, while leveraging Domino’s best features. The speakers will also demonstrate how the power of architecting a solution based on AngularJS allows your Domino application to be made available through other platform interfaces. Taking “Write once, run everywhere” in the literal sense, you will see the same Angular/ Domino based app running natively in XPages, IBM Connections, Bluemix, IBM Worklight and more. Client-side JavaScript frameworks such as AngularJS are the future of web development – come and see it in action. 

Posted in Angular in XPages, Angular.js, IBMConnect | 6 Comments »

Angular in XPages: Formatting Domino Data Services Date values with app.filter

Posted by MarkyRoden on December 14, 2014

In this article I will show how we can use the core angular date filter capabilities to format Date format, Domino data into an Angular.js based application

Introduction

In previous articles I have shown how to create a simple Angular.js application using a notes Domino Data Services feed from a notes database. If we want to add “date” information then we need a way to nicely format it. Using the Angular.js documentation page as reference I will show you how we can do this with Domino data.

Adding dates to our view

When we add a date field to a Domino Data Services feed we get something which is to the human eye pretty “ugly”

a1

And when we add lastModified into our template, it is well, less than appealing….

a2

 

Adding a formatting function to the template

We can modify the template to use a formatting function by changing up the template slightly and then adding a formatting filter to the application.

In the app.js we add the following

personApp.filter("formatDate", function () {
    return function (x) {
        return new Date(x);
    };
});

And then we reformat the template as such:

    <tr ng-repeat="person in people"  on-last-repeat>
        <td>{{person.firstname}}</td>
        <td>{{person.lastname}}</td>
        <td class="zipCode">{{person.zip}}</td>
        <td class="user">{{person.username}}</td>
        <td class="user">{{person.lastModified | formatDate | date:"dd MMM yyyy" }}</td>
        <td><a class="btn btn-info" href="#/person/{{person['@unid']}}">Edit</a></td>
        <td><a class="btn btn-warning" href="#/person/{{person['@unid']}}/delete">Delete</a></td>
    </tr>

The critical part is {{person.lastModified | formatDate | date:”dd MMM yyyy” }}.

The documentation unfortunately is not clear on this and I found this Stackoverflow example which worked perfectly. http://stackoverflow.com/a/25856275/1171653

The resulting page now looks formatted and much easier to read

a3

Conclusion

I spent which a lot of time failing to achieve this date formatting without doing it the angular way. One quick google (or three) and I had the answer. Do it the angular way and oo look that that nice and simple formatting.

Posted in Angular in XPages, Angular.js, XPages | Tagged: , | 2 Comments »

Looking forward to IBM ConnectED – AD201: IBM Domino Applications in Bluemix

Posted by MarkyRoden on December 11, 2014

The session preview tool for ConnectED 2015 has been announced.

https://www-950.ibm.com/events/global/ibmced/agenda/preview.html

Looking through it I found the following abstract – which unsurprisingly has me really excited !!!

AD201: IBM Domino Applications in Bluemix

This session will show how Bluemix enables you to deploy Domino applications to the cloud in a matter of minutes. We will demonstrate how to leverage Bluemix buildpacks like XPages and Node.js both to modernize Domino applications and to give them a new home on a highly scalable and resilient PaaS. You will learn how to mix and match Bluemix runtimes and services to create Domino cloud apps rapidly, stage them privately and put them into production. You’ll see how to use cutting edge tooling to monitor and manage your apps. This is the future.

Presented by the XPages boys themselves – Martin Donnelly and Tony McGuckin

From Martin on Twitter –  “@MarkyRoden: it will be both me and @tonymcguckin presenting. Glad it’s caught your interest – should be lots of new stuff to see here :-)”

This is what I have been hoping for since it was announced that IBM were “investigating it” at MWLUG back in August 2014.

XPages buildpacks, mix and match run times – I might just be in developer heaven if this is as good as it sounds !!!

Save me a front seat I will be there !!!!

Posted in Bluemix, IBMConnect, XPages | 4 Comments »