JavaScript / JQuery Experts, how do we do this???

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
BLOMASKY
Posts: 1473
Joined: Wed Sep 30, 2015 10:08 pm
Location: Ocala FL

JavaScript / JQuery Experts, how do we do this???

Post by BLOMASKY »

Besides all of the places we can now insert Javascript in apps, we now have the shiny new EXEC_SCRIPT function. Thinking of my needs (and yes, it is ALL about me!), I can see the need for the following. and I am breaking it down to Searching and Actions on the results of the search

Searching:
Find a Tab,
Find a Panel on a Tab,
Find a Field on a form,
Find a button on a form or query

Actions (on whatever has been found above)
Move cursor to the object (set focus),
Delete (or close) the object
Change the CSS (Style, color, font, etc.) of the object
Update the value in the object (assuming it is a field)

Now, since we can call JS from a process, and since a rule can call a process, this gives me the granularity to really control the UI very well. My question is, since I can not even spell JQuery, can one of the experts out there, either guide me where to look, or, better still, show an example of these that my little brain can copy and paste into my applications

Thank you

Bruce
aware_support
Posts: 7525
Joined: Sun Apr 24, 2005 12:36 am
Contact:

Re: JavaScript / JQuery Experts, how do we do this???

Post by aware_support »

First of all make sure you read the Programmers Reference Guide that explains a number of things that are important to understand when you write JS for Aware IM. Second of all you need to be proficient in JS.

(It would also benefit you to go through the Aware IM client-side code using a debugger. To do this you need to rename AwareIM/Tomcat/webapps/AwareIM/aware_kendo/aware.js to some other name and rename aware_full.js in the same directory to aware.js. Then clear the browser cache and refresh the browser. Set a breakpoint at the method AwareApp.renderToPanel and see what happens in Aware IM when a new widget is rendered onto the screen.)

Some specifics regarding your questions:
About tabs. "Dynamic" tabs (those opened by the user are created using a method AwareApp.renderToNewTab. In this method you will see the following:

this.m_dynamicTabs[id] = {
widgetInfo: widgetInfo,
openedOnce: false,
settings: newTabSettings,
ctx: (procAction && procAction.getContextForStartProcess ? procAction.getContextForStartProcess() : null)
};

where id is the AwareIM-generated unique id identifying the tab. The ID that the developer assigns to a tab is in newTabSettings.id. So if you want to find a tab with a particular developer id you do it like this:

for (var awareId in AwareApp.m_dynamicTabs)
{
var tab = AwareApp.m_dynamicTabs[awareId];
if (tab.settings && tab.settings.id == "my_id")
{
return tab;
}
}

tab.widgetInfo contains information about widgets and "parsers" generated for the tab. Its contents depends on the contents of the tab. If a tab displays a form of the object, for example, the widgetInfo will contain the return of the parse method of the AwareApp_FormParser object. This info will have the unique Aware IM-generated id that you can use in jQuery to get to the form markup. It will also have the "parser" object that contains many useful methods (some of them are described in the Programmers Reference). And it will also have a list of Kendo UI widgets generated for the form.

This just aims to nudge you into the right direction. It's impossible to describe how everything works, but if you spend some time with the Aware IM code and the debugger and understands how it works, only sky will be the limit.
Aware IM Support Team
BLOMASKY
Posts: 1473
Joined: Wed Sep 30, 2015 10:08 pm
Location: Ocala FL

Re: JavaScript / JQuery Experts, how do we do this???

Post by BLOMASKY »

Thanks for the very detailed response. Some questions though. I DO know JS fairly well since I have been using it for years with Sencha EXTJS. Of course, Sencha has their own library, and they have their own ComponentQuery methods, so I have very little experience with JQuery, however, after reading the posts from other users, I figure I can muck my way around it.

Now, I know that each framework has it's own way to manipulate its objects. So let me ask a specific questions:

1). Once I find an object, (either a tab, or a control on a form), how can I set focus. Also, is there an option when setting focus, (assuming this is an editable field) to have all of the text selected.

Thanks
Bruce
aware_support
Posts: 7525
Joined: Sun Apr 24, 2005 12:36 am
Contact:

Re: JavaScript / JQuery Experts, how do we do this???

Post by aware_support »

Code: Select all

1). Once I find an object, (either a tab, or a control on a form), how can I set focus. Also, is there an option when setting focus, (assuming this is an editable field) to have all of the text selected. 
Setting a focus to a tab is very different to setting a focus to a form control. Setting focus to a tab is equivalent to "selecting" a tab and it has to be done using the API of the Kendo UI library, which implements tabs. The script to do this is available in the Rule Language Guide (see EXEC_SCRIPT description).

Setting a focus to a form control can be done using the focus method of the corresponding input element: input.focus()

This method is part of the JS API for the input element (and probably also jQuery). Selecting text of the element - not sure. Take a look at the JS and jQuery API - it must be there somewhere.
Aware IM Support Team
Post Reply