|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
I'm having trouble getting started with the AJAX. I'm reading both the Aurigma documentation and the MS AJAX documentation, but I am not sure how to access my instance of PhotoEditor.
I can see the Sys object and it's children, I can also see an object called PhotoEditor, and this has a child object called PhotoEditorController, but these seem to be types, not instances. I need to add a change method (add_changed) to the controller, but can't get to the actual instance of the object.
If someone can point me in the right direction that would be great.
thanks,
Nate
|
|
Rank: Advanced Member
Groups: Member
Joined: 6/6/2007
Posts: 57
Points: 45
|
Hello, Nate. You can access your instance of PhotoEditor using the following code. You should add it to PhotoEditorSample.ascx. We use add_load because we need to know that PhotoEditor was fully initialized. Code:<script type="text/javascript">
Sys.Application.add_load(function() {
var photoEditor = $find(<% = "\"" + PhotoEditorController1.ClientID + "\"" %>);
...
... do something with photoEditor instance ...
...
});
</script> You can also add similar code to your page ( Default.aspx): Code:<script type="text/javascript">
Sys.Application.add_load(function() {
var photoEditor = $find(<% = "\"" + PhotoEditorSample1.PhotoEditorController.ClientID + "\"" %>);
...
... do something with photoEditor instance ...
...
});
</script> In this case you should add property named PhotoEditorController in PhotoEditorSample.ascx.cs: Code:public Aurigma.PhotoEditor.PhotoEditorController PhotoEditorController
{
get
{
return PhotoEditorController1;
}
}
Sincerely yours, Sergey Peshekhonov. Aurigma Technical Support Team.
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
great, thanks for the tip
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
I'm having trouble with the StatusPanel. How do I make it show up and disappear when an action starts and stops? The PhotoEditor seems to do it automatically, but I want to reuse it for some custom buttons that may take time to execute. What javascript would I use, is there something I can look at?
|
|
Rank: Advanced Member
Groups: Member
Joined: 6/6/2007
Posts: 57
Points: 45
|
Hello, Nate! There is no property for setting status in the StatusPanel, because StatusPanel was developed just for PhotoEditor. We think about adding this functionality to StatusPanel, so it may appear in the future releases. But now, if you want use one StatusPanel both in PhotoEditor and into your code, you may use the following workaround. Just past this code to the end of PhotoEditorSample.ascx file. Code:
<input type="button" id="runButton" value="Run" onclick="click_on()"/>
<input type="button" id="stopButton" value="Stop" onclick="click_off()"/>
<script type="text/javascript">
function click_on() {
var statusPanel = $find(<% = "\"" + StatusPanel1.ClientID + "\"" %>);
statusPanel.set_busyState($get("runButton"), true);
return false;
}
function click_off() {
var statusPanel = $find(<% = "\"" + StatusPanel1.ClientID + "\"" %>);
statusPanel.set_busyState($get("runButton"), false);
return false;
}
Sys.Application.add_load(function(e, t) {
if (t.get_isPartialLoad()) return;
var statusPanel = $find(<% = "\"" + StatusPanel1.ClientID + "\"" %>);
statusPanel.objects = new Array();
statusPanel._onStatusChanged = function() {
var bv = $find(this._bitmapViewerId);
statusPanel.set_busyState(bv, bv.get_status() == GraphicsMill.UpdateStatus.busy);
}
statusPanel.set_busyState = function(obj, state) {
var statusPanel = $find(<% = "\"" + StatusPanel1.ClientID + "\"" %>);
// Add a little method for setting status css class.
statusPanel._setState = function(state) {
this.get_element().className = state ? "StatusPanelBusy" : "StatusPanel";
}
// Add array.
if (!statusPanel.objects) {
statusPanel.objects = new Array();
}
if (state) {
for (var i = 0; i < statusPanel.objects.length; i++) {
if (statusPanel.objects[i] == obj) {
return;
}
}
Array.add(statusPanel.objects, obj);
statusPanel._setState(true);
}
else {
Array.remove(statusPanel.objects, obj);
statusPanel._setState(statusPanel.objects.length != 0);
}
}
});
</script>
If you have some questions about this code please feel free to contact us.
Sincerely yours, Sergey Peshekhonov. Aurigma Technical Support Team.
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
Thanks Sergey,
I'll try to apply this code to mine and let you know how it goes!
Nate
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
Sergey,
I was able to come up with my own "status" for my buttons. However, on the photoeditor statuspanel, I can't seem to get text to appear there so I can tell the user what is happening. All it has is the rotating image.
How do I add text to the "busy" state of the StatusPanel?
Thanks,
Nate
Edit: this post could probably be it's own topic
|
|
Rank: Advanced Member
Groups: Member
Joined: 6/6/2007
Posts: 57
Points: 45
|
If you just want to add text to StatusPanel you may do the following: 1. Let's take code from my previous post and replace the following: Code:
<input id="runButton" type="button" onclick="click_on()" value="Busy" />
<input id="stopButton" type="button" onclick="click_off()" value="Free" />
<script type="text/javascript">
function click_on() {
var statusPanel = $find(<% = "\"" + StatusPanel1.ClientID + "\"" %>);
statusPanel.set_busyState($get("runButton"), true);
var el = statusPanel.get_element();
if (el.childNodes.length)
el.removeChild(el.childNodes[0]);
el.appendChild(document.createTextNode("Busy"));
return false;
}
function click_off() {
var statusPanel = $find(<% = "\"" + StatusPanel1.ClientID + "\"" %>);
statusPanel.set_busyState($get("runButton"), false);
var el = statusPanel.get_element();
if (el.childNodes.length)
el.removeChild(el.childNodes[0]);
return false;
}
...
2. Replace CSS classes (this example works for "Standard" theme): In PhotoEditorSample.css. Code:
.PhotoEditorSampleStatusPanel
{
position: absolute;
top: 4px;
right: 10px;
}
In PhotoEditor.cssCode:
.StatusPanel
{
width: 70px;
height: 16px;
}
.StatusPanelBusy
{
color: #FFFFFF;
font-family: Arial, Tahoma, Geneva, sans-serif;
font-weight:700;
font-size: 9pt;
width: 70px;
height: 16px;
background-image: url(../Images/StatusPanel/Progress.gif);
background-position: right;
background-repeat: no-repeat;
}
If you need for some additional functionality you may, for example, override the whole StatusPanel (server-side and client-side code) implementation.
Sincerely yours, Sergey Peshekhonov. Aurigma Technical Support Team.
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
so I could instead, use my own busy message and just use the js add_change remove_change?
i'll give that a try and see if I can do that, I'm understanding the ajax more now
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
i'm able to add the add_change to get it started, but it never goes away, when I use mine i call BeginBusyState() when i click my buttons, then in add_load of app I'm calling EndBusyState() and it gets rid of it... but after adding BeginBusyState to the add_change of the controller, I'm not sure how to remove it when the call is done
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
I've used all of the Ms.Ajax events that I can think of and ALL of them so far haven't given me access to cancel the busy screen when I press a PhotoEditor button. They all work on my ajax buttons, but when I press the photoeditor buttons and the busy state begins, it never calls any of the functions i've tried to use to stop it tried so far: Code:
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function(){
// EndBusyState();
alert("begin request");
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){
// EndBusyState();
alert("end request");
});
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(function(){
// EndBusyState();
alert("page loading");
});
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(){
// EndBusyState();
alert("page loaded");
});
|
|
Rank: Advanced Member
Groups: Member
Joined: 6/6/2007
Posts: 57
Points: 45
|
Nate, You should use statusChanged event of BitmapViewer to get know whether an image was changed in PhotoEditor. I hope the following example will help you in this task. Just add this code to the end of PhotoEditorSample.ascx: Code:
<script>
Sys.Application.add_load(function(e, t) {
if (t.get_isPartialLoad()) return;
var pe = $find(<% = "\"" + PhotoEditorController1.ClientID + "\"" %>);
var bv = $find(pe.get_bitmapViewerId());
bv.add_statusChanged(function() {
if (bv.get_status() == GraphicsMill.UpdateStatus.busy)
alert("busy state");
else
alert("free state");
});
});
</script>
Sincerely yours, Sergey Peshekhonov. Aurigma Technical Support Team.
|
|
Rank: Member
Groups: Member
Joined: 3/28/2007
Posts: 56
Points: 0
|
Thanks Sergey, this is just what I needed!
|
|
|
Guest |