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
JavaScript / JQuery Experts, how do we do this???
-
- Posts: 7525
- Joined: Sun Apr 24, 2005 12:36 am
- Contact:
Re: JavaScript / JQuery Experts, how do we do this???
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.
(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
Re: JavaScript / JQuery Experts, how do we do this???
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
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
-
- Posts: 7525
- Joined: Sun Apr 24, 2005 12:36 am
- Contact:
Re: JavaScript / JQuery Experts, how do we do this???
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 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