Accessing ComponentOne iPhone controls through jQuery

March 22 2011

jQuery is one of the coolest and latest functions of the web. ComponentOne iPhone controls can also be accessed using jQuery. This makes controls more powerful, enhances, their feel-good factor, and incorporates different animations etc., with less of coding required. I'll demonstrate this using C1NavigationList as an example and will implement a "PhoneBook" like Search feature. The meaning of a "PhoneBook" like Search feature will eventually be made clear as you read this blog.

Brief Introduction to jQuery

Before I explain the implementation, let us first understand jQuery in brief. jQuery is basically a library of Javascript functions which allows users to select and manipulate different HTML elements and css elements. It also supports traversing through HTML DOM elements and customizing them according to the requirement by applying a wide range of Javascript Effects and animation. You might be thinking all the above mentioned features can also be applied through Javascript. However, the beauty of jQuery is that the user does not have to write a lot of code and purpose can be met using the predefined methods and events mentioned in Javascript Library. For more information one can browse through - http://docs.jquery.com/Main_Page

PhoneBook Search Feature

Now by "PhoneBook" Search feature we mean that the user is able to filter out C1NavagationList Items according to the input entered. For instance if C1NavigationList has 10 items starting with "A", then upon entering "A" as input value all 10, ListItems should get listed filtering the ones which do not start with "A".

Implementation

Step1 - Selecting the required tag for ListItems To implement the "PhoneBook" feature using jQuery, one needs to understand how C1NavigationList gets rendered in a browser. C1NavigationList gets rendered as "ul" tags in a browser with "C1List" css class applied. Thus, we can traverse up to C1NavigationList by using the "ul" as "TargetSelector", and then play with it accordingly. Here is how it looks when we view the html source:

Using the source above, we will be able to access C1NavigationList. But our objective is to compare the "text" of ListItem with "text", which user inputs. So, for this reason we need to dig deeper to the level of the text of "ListItems". Let us see how "ListItems" of C1NavigationList gets rendered:

        ListItem01    // Text of Child Item        ?

The preceding html source code makes it clear that the inner text of "ListItems" can be accessed using "span.C1TextNode" as a tag selector. Step 2 - Searching for matched ListItems The process will not be any easier considering the next step-- how to return "ListItems" whose inner text starts with the input that the user entered. For finding "ListItems" we will use the "Find" method of 'jQuery". This method is defined in "jquery-1.4.1.js", which gets added to the website as soon as C1iPhone controls are dropped on the WebPage. $("ul.C1List").find("span.C1TextNode").each(function () { if (this.innerText.toUpperCase().startsWith(filter.toUpperCase())) { $(this).parent().parent().parent().parent().parent().slideDown(); } else { $(this).parent().parent().parent().parent().parent().slideUp(); } ? }); .find () method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. In our code it returns search results for descendants "span.C1TextNode" elements. Inner Text of returned elements is then compared with the user input, and if it matches, then the required ones are displayed using the "SlideDown" method. Meanwhile, other ones can be hid using "SlideUp" method. Please note that "SildeUp" and "SlideDown" methods will be applied to the "ListItem" and not the "C1TextNode", so for that one access the listItem.* lies 5 span tags above "span.C1TextNode", thus one has to reach upto that tag using - (this).parent().parent().parent().parent().parent() I've attached a sample along with this blog. Upon running the sample TextBox it is visible where the user can enter the "Search" string and where corresponding "ListItems" are returned. Here is the complete code required for the implementation along with the comments: $(document).ready(function () { $("input#Search_Input").keyup(function () { // to extract the value entered by the user on key-up event var filter = $(this).val(); // extracted value is assigned to a variable // If "Filter" has a value then required "ListItems" will be displayed else it will display the whole "NavigationList" ? if (filter) { $("ul.C1List").find("span.C1TextNode").each(function () { //Find the "Text" of ListItems to be compared if (this.innerText.toUpperCase().startsWith(filter.toUpperCase())) { $(this).parent().parent().parent().parent().parent().slideDown(); ? //displays the matched "ListItems" } else { $(this).parent().parent().parent().parent().parent().slideUp(); ? //hides the non-matching "ListItems" } }); } else { $("ul.C1List").find("li").slideDown(); } }); }); Here is what it looks like: The mission is completed with few lines of code. In same way basics of jQuery can be applied to other iPhone controls, you need to know how the control is being rendered in the browser.

MESCIUS inc.