In our last sessions we created a blank monthly calendar, then put some data on the calendar and last we made it reusable so we can use it in any application. While this is all well and good, we need to be able to see the breakdown of times on a daily and weekly basis. So in this SnTT we will be adding blank day and week views. I'm doing blank views because I can't quite figure out how to place entries so that they span the correct amount of time. If anyone has any ideas about this please speak up as I'm stumped as to where to go next. I was thinking that maybe Dojo could help out here but I haven't had the time to sit down and actually try anything yet. As of this release there is also an OpenNTFproject for this of which I'm looking for people to contribute and be a part of the development of this project. Like I said before, I'm going to need people smarter than myself.
OK, so I started with making a couple of new XPages (day and week) and dragging the required XPages Framework elements onto the page, save and close. I then created a new custom control and called it ccCalDay. This control will have the following features/requirements
Navigate forward/back a day
Be able to configure the hours display (12 or 24)
At a later date, be able to add data to the view
Clicking the Month View sidebar link should take us to the selected month view
Clicking the Week View sidebar link should take us to the selected week view
We've now got our requirements so lets start putting this all together. I added a panel and called it "container". This panel holds the entire day view calendar. I added 2 other panels within the container panel and called those dayNavContainer and dayHoursContainer. Now that we've got our layout we can proceed. In order to display the proper day, we'll need some variables from the Month View calendar. I changed all the viewScope variables in the previous SnTTs to now be sessionScope variables instead of viewScope. This allows us to pass the date back and forth between different views. It also allows us to just manipulate one date at a time to change everything on a page. So, in the ccCalDay custom control, BeforePageLoad event we've got this:
If you recall, in our menu for each day on the monthly calendar we have a function which builds a list and we pass the day in a URL parameter. This is what allows us to define a specific day, we then just use the month and year from the "dispDate" sessionScope variable and then recompute all the other variables even though they aren't needed for the day view. I do this so if you go back to the month view we still have these values to build the monthly calendar, no matter how many days you navigate through on the day view. Also, I've built an array based on a property definition of all the times we want to display.
Now for the navigation, we want to be able to navigate forward or back by 1 day. This should be a fairly simple process but it did give me quite a bit of grief. Per Jeremy Hodge I tried setting the dispDate sessionScope varible like:
sessionScope.put("dispDate", sessionScope.get("dispDate").setDate(3));
but never could get this to work, along with several other methods I tried with using the set???? method of a Javascript Date, so that is one of the reasons why I had such a hard time with the navigation. I was also having some issues with the onClick event of the navigation links, the onClick code was firing at page load and incrementing/decrementing the sessionScope variables. I addressed that in this post. Just as an FYI, don't use the All Properties tab to edit event code, it screws things up. OK, now for the navigation we have a link that goes back 1 day, a computed field which displays the current date we're looking at and then another link to go forward 1 day. The back 1 day link has this onClick event code:
All this does is check the current day date, if it's 1, then we check if the month is 0 (Jan), if it is then we decrement the year by 1 and set the date to 12/31. If the month isn't 0 then we just decrement the month by 1. If the day isn't 1 we just decrement the day by 1. Once all of that is done, we set all the sessionScope variables.
For the date display, it's really simple:
For the day forward link, it's pretty much the same as the back link with the exception that we check if the day is the last day of the month and if it's the last month of the year.
The only thing left here is to build the table which contains all the different times. I defined a property definition for the timeHourFormat to be either 12 or 24. If you set it to 12, the times go from 12:00 AM to 11:59 PM. If you define 24 you get hours from 0 to 24. I also build a 4 row table within each data column which don't really contain anything right now. I'm hoping that by assigning these rows an id that we can place a div and have it span the proper amount of time. But this will probably change as I learn more about placing divs in specific spots on a page. So, at the top of the day view I display the date, week day, month and year, just like on the Notes Mail calendar day view. I use 3 separate computed fields so that we can place them where we want them and control their font sizes independently. The code for these are really straight foward and I'm not going to go into detail about these:
Big Date Number:
Big Week Day:
Big Month Year:
Then the remaining rows which are contained within a computed field which is contained within a repeat object:
All this does is loop through and build each row of the table based on the timeVar. timeVar is defined as the "collectionName" in the repeat control which is set to repeat 24 times. Then in each data column, build a 4 row table (for 0 min, 15 min, 30 min, 45 min).
And that's it for the day view of the calendar. You should end up with something looking like this:
Continue Reading for the week view....
Mobile First Development
Fri, May 10th 2013 9:06a Keith Strickland At Red Pill Development, Peter Presnell has encouraged our development efforts to use a "Mobile First" approach. The process is that you design your mobile interface first, get everything working properly and then move on from there to Tablet and then Web Browser interfaces re-using as much as possible from the previously working mobile implementation. This approach has several advantages:
It forces you to research, gather requirements and only display and write code for the things you [read] Keywords: application
development
interface
mobile
properties
widgets
449
Announcing redpill Mobile
Wed, May 8th 2013 2:48p Keith Strickland Have you ever had a dream that you were so sure was real? Well today is the first step in realizing that dream.
A few months ago I made a post about being one of the co-founders for a new company called Red Pill Development. This company was founded on the controversial belief that modernizing Notes applications one at a time by reproducing all of the existing functionality is a loosing strategy. In order to turn a profit modernizing applications, you have to do so en-masse and only include [read] Keywords: lotus
notes
notes client
applications
bleedyellow
bleedyellow.com
development
mobile
office
148
Dojo Mobile ScrollablePane implementation
Sun, Apr 21st 2013 3:06p Keith Strickland At Red Pill Development we're pushing the envelope a bit on XPages Mobile, we're certainly pushing the mobile controls to their limits. Because of this sometimes we need to take matters into our own hands and override the XPages Mobile controls and kind-of take over how they operate or create our own.
One of the things you're going to encounter when you delve into XPages Mobile development is trying to put a Tab Bar at the bottom of the screen that actually stays at the bottom of [read] Keywords: domino
xpages development
dojo
javascript
mobile
properties
xml
191
XPages and Dojo Mobile Events
Tue, Apr 2nd 2013 12:02p Keith Strickland Here lately, I've been working on getting events to fire within a mobile application in XPages. For example when a page first loads (i.e. is navigated to but not "transitioned" to) or when a transition/navigation to another page within the single page application. No events are published or made available via the domino designer IDE but we still need to be able to do something when a navigation/transition event happens. So, how do we do this and what are the event names? Well the dojo even [read] Keywords: domino
xpages application
applications
dojo
java
javascript
mobile
openntf
server
176
Add unsupported events to an inputText
Mon, Mar 25th 2013 8:42a Keith Strickland So today while looking for a solution to handling an HTML5 event of onSearch I came across this technique, which, probably isn't the best approach but does work. So, if you look at the client side events of an inputText field, you'll notice there isn't an event for onSearch. So, how do you add one? Well, you could of course go pass-thru html and just code the field as you would a Plain Jane HTML field. While this would work, to me it's just not taking advantage of the platform an [read] Keywords: javascript
xml
430
JQuery FullCalendar in XPages
Sun, Feb 17th 2013 4:18p Keith Strickland As you might or might not have known, I've been striving for a calendar in XPages since XPages were introduced. I created the XPages Calendar project which was a poor attempt at building a calendar. When I built it the extensibility API was not available and neither was the Extension Library. So, while it basically worked, it was not a very elegant implementation, especially the data handling.
I recently had a need for a calendar implementation that met a few different criteria:
[read] Keywords: xpages interface
javascript
mobile
454
Wouldn't it be cool if....
Sun, Feb 17th 2013 12:25p Keith Strickland Wouldn't it be cool if we could integrate some off the wall feature into our XPages environment? This is a phrase that gets used quite a bit in the team I work with and I think is a key driver to innovation, discussion and a source of producing excitement about whatever followed that phrase. While the phrase itself isn't very awe inspiring or really doesn't mean that much, I do think it is a key player in driving innovation. Some examples if you please....
Wouldn't it be [read] Keywords: domino
notes
xpages application
applications
development
java
504
A Request to IBM
Tue, Feb 12th 2013 4:36p Keith Strickland I've been doing a lot of development work here lately, I mean a lot. Looking at different technologies and implementing them into XPages or at least attempting to. One of my tasks was trying to learn about OAuth and working with connections. I downloaded and installed the IBM Social Business Toolkit and SDK. I then followed several tutorials out on the web (most of them from IBM) trying to authenticate to GreenHouse with no luck. I ran into issue after issue. I got it all the way to being as [read] Keywords: connections
ibm
xpages development
103
keithstric.com moved back to Prominic
Thu, Jan 3rd 2013 5:54p Keith Strickland I am proud to announce that keithstric.com has been moved back to Prominic. Prominic is an excellent host for all types of domino sites. If you're in the market for a new web host, take a look at Prominic. Their service and support is top notch and second to none.
I've learned my lesson and won't be moving this blog again. Now, I've just got to get all the different aggregators looking at keithstric.com instead of xprentice.gbs.com. [read] Keywords: domino
485
D3.js - Data Driven Documents
Sat, Dec 15th 2012 10:45a Keith Strickland I've recently started playing with a very powerful Javascript library called D3.js. D3 is for visualizing data either in charts, force layout graphs, data plots or whatever you can imagine. I'm not really sure what the point of this post is as I really can't show you yet what we're using it for. But I can show some of the things that it's capable of.
Let's first look at a Force Directed Layout. These are usually used to show hierarchical data and the way D3 handles [read] Keywords: community
facebook
javascript
wiki
