Archive for JavaScript

9 (Brilliant) jQuery Plugins

For the JQuery lovers among us via CSS globe I bumped on the article 9 Brilliant jQuery Plugins and Tutorials. I noticed Supersized is listed here.

I have included this plug-in for the next release of Bildr so you can lay back and what the images that appear in the slider passing by on full screen. Handy for booths and so on…

Leave a Comment

Any recommendation for a good book about object-oriented JavaScript?

After reading Mastering Dojo plus HTML5: Up and Running and still waiting for the arrival of Mastering XPages there is place for a new book on my bedside cabinet.

Yesterday I read this post regarding object oriented JavaScript. So I did a quick search on Amazon (I used the German site since that is the nearest available from where I live (read: good shipping conditions)). The first book in the list (Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries) received not so good reviews, mainly because the code examples were too childish.

So that leaves me with the following question:

Do you have any recommendation for a good book about object-oriented JavaScript?

Comments (6)

Request: Personalize landing pages using GeoTargeting

Today I received a question from a customer if PHP could run on top of a Domino server. In the discussion that followed what the customer wants to achieve it became clear that he is more looking for a script to solve a problem rather than seeking for an integrated solution.

In short,  the customer wants to check the visitor’s IP address and popup a message in case a user from country A is looking at country B’s landing page and ask the visitor if he/she wants to be redirected to country A’s landing page.

A simple case of geotargeting which I did not smash in the face of the customer.

The question remains:

Does anyone have a Domino based solution for this?

A quick search via Google did not resulted in a JS script library containing the country-codes. Thanks in advance for your guidance!

Comments (8)

Mastering Dojo

I have just started with the following book ‘Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences‘ to understand the framework a bit more (I hope I have selected the right book to start with?).

For those who have already read the book which parts are the most interesting for you and why?

Comments (2)

jQuery TreeView Menu from Notes View

I was looking for a way to get a web publishing toolkit in Notes away from displaying documents in a frameset.

The frameset consists of several frames:

  • a header section
  • a leftside navigation section
  • a main or content section

The reason why a frameset is used because the leftside navigation is populated from documents in a Notes View.  This navigator would be collapsed again every time it would be re-loaded again.  It is also build by an agent that generates XML which needs to be transformed in the browser.

Here is how it looks today:

nav_current

Some searching on the web brought me to these documents:

jQuery TreeView Menu and a Show ‘n Tell Thursday blogpost. Combining the 2 topics would solve my problem since the jQuery TreeView allows to re-open the treemenu by the location specified for a menu item!

( I will add the SnTT tag to this document to honour the contributors, even when it is now still Thursday)

I soon discovered that the code for the Tree Convertor from Datatribe works with documents in the same level, meaning that documents with a response hierarchy will not be supported because you do not use categorized columns in your View. Nevertheless a little trial and error and rewriting the original code resulted in the following Notes View presented as a tree:

nav_new

Note: in the example I have already applied some styling.

In this View each ‘Category’ is a document containing one or more response documents. The highlighted (red) item is the currently opened document.

So how do you get there?

  • Create a Notes View that displays your documents as you want them to be presented in the tree. In the Datatribe example this View is called (LUDocs).

nav_notesview

  • Upload all the fields you need for the jQuery TreeView (CSS, Images, JS Libraries) and reference to them in the Head section of your Document Form:

nav_header01

  • Add the fuction that will transform the HTML list into a Tree View structure.

nav_header02

Note:  -the persist: “location”- parameter ensures that the tree will be expanded by the item / document opened by default.

  • On the place where you want to display the TreeView add the following code:

nav_new_code

As you can see a script is here called which uses an Agent to collect the data from a Notes View in an HTML format ( ul and li list format). I had to make come changes to the original code, since I am using a View that support the display of response documents in a hierarchy.

Sub Initialize
‘—This agent is designed to ouput the required javascript to produce a nested HTML list
On Error Goto errorhandler

Dim s As New notessession
Dim db  As NotesDatabase
Dim doc As NotesDocument

‘–Category passed in via URL
Dim inCategory As String

‘—View name passed in via URL
Dim viewName As String

‘—Display Category ?
Dim displaycategory As String

‘—Document in the view
Dim tmpdoc As notesdocument

‘–Category Level
Dim level As Integer
‘—Current Category level
Dim currentLevel As Integer

Dim view As NotesView
Dim i As Integer
Dim JavascriptOutput As String

‘—Due text size limits we need to hold the ouput on 1 or more temporay notes items (never saved)
Dim fieldCounter As Integer
Dim holdingField As Notesitem

Set doc=s.documentcontext

‘–Set up holding field
fieldCounter=1
Set holdingField=New notesitem(doc,”HoldingField_” & fieldCounter,”")

inCategory=getqueryparam(doc.query_string(0),”category”,”")
viewName=getqueryparam(doc.query_string(0),”viewname”,”")
displaycategory=getqueryparam(doc.query_string(0),”displaycategory”,”")

Set db=s.currentdatabase

level=0
JavascriptOutput=”"

If displaycategory=”false” Then

Else
If inCategory=”" Then
JavascriptOutput=JavascriptOutput & |<h3>All Documents</h3>|
Else
JavascriptOutput=JavascriptOutput & |<h3>| & inCategory & |</h3>|
End If
End If

JavascriptOutput=JavascriptOutput & |<ul id=”tree”>|

‘—-View could be passed in via QueryString to allow a more generic agent
Set view=db.GetView(viewName)

‘—If view is not found handle it – as the view name is passed in this could be missing
If view Is Nothing Then
Print |Content-Type:text/plain|
Print |document.write(‘Error – View not found -| & viewName & |’)|
Goto getout
End If

Dim entry As NotesViewEntry
Dim nav As NotesViewNavigator
If inCategory=”" Then
Set nav = view.CreateViewNav
Else
Set nav = view.CreateViewNav
End If
Set entry=nav.GetFirst

Dim edoc As NotesDocument
Dim childdoc As NotesDocument
Dim coll As notesdocumentcollection

While Not(entry Is Nothing)

Set edoc = entry.Document
Set coll = edoc.responses

If coll.Count > 0 Then
currentLevel=entry.ColumnIndentLevel+1
Select Case (entry.ColumnIndentLevel+1)
Case level
%REM
JavascriptOutput=JavascriptOutput & |</ul></li>|
%END REM
Case Is<level
For i=2 To ((level)-entry.ColumnIndentLevel)
JavascriptOutput=JavascriptOutput & |</ul></li>|
Next
End Select

‘–Update level
level=entry.ColumnIndentLevel+1

‘–Propercase it
JavascriptOutput=JavascriptOutput & |<li><strong><a href=”http://| & returnCommonServer() & |/| & swapchars(db.FilePath,”\”,”/”) & |/0/| & entry.UniversalID & |”>| & edoc.Tx_Document_Title(0) &|</a></strong><ul>|
Else
‘—At document
currentLevel=entry.ColumnIndentLevel+1
Select Case (entry.ColumnIndentLevel+1)
Case level
%REM
JavascriptOutput=JavascriptOutput & |</ul></li>|
%END REM
Case Is<level
For i=2 To ((level)-entry.ColumnIndentLevel)
JavascriptOutput=JavascriptOutput & |</ul></li>|
Next
End Select

‘–Update level
level=entry.ColumnIndentLevel+1

Set tmpdoc=db.GetDocumentByUNID(entry.UniversalID)
Set tmpdoc=entry.Document
If tmpdoc.Tx_Document_Title(0)<>”" Then
JavascriptOutput=JavascriptOutput & |<li><a href=”http://| & returnCommonServer() & |/| & swapchars(db.FilePath,”\”,”/”) & |/0/| & entry.UniversalID & |”>| & fn_escape(Cstr(tmpdoc.Tx_Document_Title(0))) & |</a></li>|
End If
End If

‘–Check for field size
Call holdingfield.appendtotextlist(JavascriptOutput)
Call monitorFieldSize(doc ,fieldCounter,holdingField)
JavascriptOutput=”"
Set entry=nav.GetNext(entry)
Wend

‘–Now we have finished we need to close the remaining tags
For i=1 To (currentLevel-1)
JavascriptOutput=JavascriptOutput & |</ul></li>|
Next

Call holdingfield.appendtotextlist(JavascriptOutput)

‘—-Now output Javascript

Print |Content-Type:text/plain|
Print |document.write(‘\n’+|
If fieldcounter=1 Then
Forall items In doc.GetItemValue(“HoldingField_1″)
Print|’| &  items & |\n’+|
End Forall
Else
For i=2 To fieldcounter
Forall items In doc.GetItemValue(“HoldingField_” & i)
Print|’| & items &  |\n’+|
End Forall
Next
Forall items In doc.GetItemValue(“HoldingField_1″)
Print|’| & items  |\n’+|
End Forall
End If
Print |’\n’)|

getout:
Exit Sub

errorhandler:

‘—As this is an agent that expects to return JavaScript we will return the error message in Javascript
Print |Content-Type:text/plain|
Print |document.write(‘Error – | & Error & | – | & Err & |’)|

Resume getout

End Sub

That is about it! Here is a better look of the result:

nav_result

Comments (11)

Pagination on a View in the Notes client

A problem with Notes Views is that when they contain a lot of documents scrolling becomes inevitable. Even when you apply categorized columns it will become necessary that users click through the Views. An option would be that you just start typing and hopefully Notes will lead you to the nearest corresponding document.

When you apply categorized views the categories are displayed vertically below each other so for travelling users with smaller screens it will become tasly to open and close the categories just to see thse categories and corresponding documents displayed in a properly in the overview.

Maybe XPages in the Notes client will bring us some relief, but we are not there yet.

So how do we cope with the issue for the time being?

On the web it is common practice to have some sort of pagination on top / below lists of documents so you can navigate through the list without the need to scroll up and down or move you mouse across the screen. The pagination can be based on number of available pages or just available short cuts (example: the first letter of an available lastname). I myself have written some articles about pagination on this blog which you may check out yourself.

So this is all about the web, I adress this article to pagination in the Notes client.

The simplest way I found is to create a list of similar shortcuts, containing javascript, and render pass thru HTML in Notes. In this example I explain how I added pagination to a list (a Notes View) of persons. The thought is to show a list of persons form which their lastname start with a certain letter. What I needed to accomplish this:

  • A Form with an Embedded View. This View should be categorized by the first letter of the lastname @LowerCase(@Trim(Tx_LastName);1). SaveOptions are set to zero ofcourse.
  • The Embedded View has the ‘Show single category option’ in use.  As formula write the name of the Field that will acts as a temporary container (Tmp_LastName).
  • Add a Field named TmpLastName on top of the Embedded View. Make it editable. As default value give it the value “a” (you could check if this value is really available or not).
  • On top of the Form add the following JavaScript and CSS code:

<script language=”Javascript”>
var entryNumber = “”;
function showTab(lastName) {
entryNumber = lastName;
document.forms[0].LastName.value = entryNumber;
entryNumber = “”;
document.forms[0].set_field.click()
}
</script>

<style type=”text/css”>
font {
font-family: “Default Sans Serif”, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 8pt;
color: black;
text-decoration: none;
text-align: left;
text-indent: 1ex;
}
A:link {color: blue; text-decoration: none}
A:visited {color: blue; text-decoration: none}
A:active {color: blue; text-decoration: none}
A:hover {color: blue; text-decoration: none}
</style>

  • As final step you need to add a computed text just above the Embedded View. Mark the text as passthru HTML. A Value enter:

varList:=@DbColumn( “”: “NoCache” ; “” : “” ; “PersViewCategorized” ; 1 );
tmpList:=@Implode(“<a href=\”javascript:showTab(‘” + varList + “‘)\”>” + varList+ “</a>” + ” | ” );
@LeftBack(tmpList;”|”)

Here we make a call to first column in the same Embedded View. Around each found category we wrap a JavaScript call which will put the value in the temporary field and finally we call the button to update the UI.

Here is a screendump that shows how it could look like:

paginationNotes

A problem discovered

Well everything  looked shiny untill I tried to load the Form in a Frameset. When pressing on one of the links I got the message:

paginationNotesMessage

Some work to do IBM….

Leave a Comment

Implementing ImageFlow in a Domino app

For my ‘photogallery’ application I got a bit tired of the Smoothgallery implementation. Basically I was looking for sometime more attractive and less ‘busy’. That is when I bumped into ImageFlow a JS image gallery in a iTunes alike way (and probably more Apple software which I do not use).

Here is what it looks like in my app:

imageflow_good1

this is how it looks in my app

Some rules for implementing ImageFlow in your Domino app:

  • ImageFlow is written for PHP applications, so for each image you include the reference gets rewritten in a following format:

<img width=”400″ height=”300″ alt=”Image 4″ longdesc=”img/img1.png” src=”reflect2.php?img=img/img1.png” style=”cursor: default; display: block; left: 351.665px; height: 329.215px; width: 292.635px; top: 118.524px; visibility: visible; z-index: 18;”/>

If you look at the imageflow.packed.js package you get lost since it is packed. Dive in the imageflow.js and search for the following lines:

 

var src = node.getAttribute(‘src’,2);

//src =  ’reflect’+version+’.php?img=’+src+thisObject.reflectionGET;

Change the last line into:

src =  src+thisObject.reflectionGET;

 

Then upload the following files to your database:

  • imageflow.css
  • imageflow.js
  • slider.png (the dot image that is used on the slider)

In the download on the ImageFlow site in the index.html you find the source how to structure your HTML. Modify the references to the images in your Notes app and you are good to go!

Happy coding =)

Comments (5)

Implementing Smoothgallery into a Domino application

It was a while since I opened my Designer client for developing a new project due to other responsibilities. At this time I am prototyping a basic Notes application where users can upload images via the Notes client and browse through them via a Web browser.

So what is the status? Well in a couple of days I have come pretty far:

 

  • a project name for the application (you have to start with something)
  • upload (of multiple ) images via the Notes client and automatically creating thumbnails – checked
  • a nice interface for the Notes client – checked
  • an attractive layout for the Web client – checked
  • a lightbox function for display the high resolution images with a faded application in the background – checked
  • different ways to navigate trhough the application (by categorie, tags, by author, archive, calendar) – checked
  • additional features as RSS, simple search, option to leave comments – checked
  • login function so a user can easily see his/hers contributions – checked

 

In the startpage I have the following features:

 

  • a sliding gallery based upon Smoothgallery more about this later 
  • overview of the last 3 added pictures
  • an overview of the last 3 comments
  • an archive overview
  • a section with some contact information

 

Well I still have something left in my wishlist:

  • XPaginate (is that correct?) the application ofcourse haha
  • add an option to send email to people with a link of the image
  • upload functionality from the Web client
  • improve the search functionality (at this point it searches a view)
  • … some more spice probably

Smoothgallery

Well this post is about the Smoothgallery which was really easy to implement. The gallery has the follwoing functions:

  • a (main) slider for showing medium sized images, with previous and next image function
  • a slider for showing thumbnails, this slider has a mouse-over sliding function
  • some text / description that will be displayed as a layer on top of the current image in the (main) slider

Let me start by showing you some end-result, here is an image of the gallery as it will be presented by default. I marked the 3 sections described above:

 

gallery image

gallery image

 

So how did I get this to work?

Start coping the files under the directories CSS, Images and Scripts in the download to your Shared Resources \ Files section. The gallery uses the  MooTools JS Framework.

To get the files loaded add the following references in your HTML Head Content:

 

html head section

html head section

Add also the following JS function somewhere on your form:

 

JS Function

JS Function

And drop the follwoing code where you want to have the gallery displayed:

 

gallery position

gallery position

The Computed Text is a @DbColumn to a view:

@Implode(@DbColumn(“”:”";”":”";”$v-pixsmoothgallery”;1))

On the view we say we want to have its content to be displayed as HTML and the view has only one column with the following code:

 

formula in column

formula in column

(My upload agent creates 3 kind of images for each upload: 1) the original size 2) a medium size 3) a thumbnail size. You can forget the firstline here in the code)

Is that’s it? Yeah! In practically half an hour job I had the complete gallery up and running.

Here are some screendumps of the app:

bildr06

bildr07

bildr08

Just let me know if you are interested in more code-drops…

Comments (3)

Introduction Dojo Toolkit & IBM Lotus Domino

Currently I am collecting all sorts of information about implementing the DOJO Toolkit in Lotus Domino applications. Basically for preparing myself for a upcoming project to ‘pimp’ an existing web-application using this JS Framework.

Untill now I have been only working with Prototype and Scriptaculous (which I like a lot) but since IBM’s horizon also shines more and more Dojo I am really curious in DOJO’s capabilities. Especially since documentation seems to be getting better and better.

I have found a good presentation about implementing the Dojo Toolkit in Lotus Domino applications on Slideshare. You can find the presentation here.

Introduction Dojo Toolkit & IBM Lotus Domino - presentation

It seems that more and more Notes related people find the time and effort in uploading their presentations on this site, which is ofcourse a very good thing! (HINT)

Comments (3)

Perfect pagination style using CSS

One of the blogs I often read is the one from Antonio Lupetti who is a Web developer, not a Notes developer. Especially his article about pagination caught my attention since it remembered me about the idea to rewrite Bob Obringers ‘ultimate view navigator’.

Bob uses in his approach for the pagination a table to display the page numbers where a list should be more suitable.

As the image below shows with Antonio’s approach it is pretty easy to make the pagination more compatible with examples seen on other well known sites. Here is a Flickr alike pagination for a Domino view:

Flickr alike domino view pagination

Anything new under the sun? Not really, but for the ‘purists’ under us more esthetic solution.

Ofcourse a working example can be found here.

Comments (3)

Older Posts »
Follow

Get every new post delivered to your Inbox.

Join 143 other followers