O form Index A tabela Fotos
A query Q_seleção_de_fotos Vide figura 46.
Figura 46
O próximo passo é criar um form que permita ao usuário fazer os uploads das fotos.
Para entendermos o código a ser utilizado neste form, precisamos antes detalharmos a mecânica utilizada pelos Morfik.
As aplicações Morfik se baseiam na existência de dois códigos distintos ; 1. Um código para execução no Browser
2. Um código para execução no servidor
O código para execução no Browser é o responsável pela interface com o usuário final, e pela comunicação com o servidor da aplicação sempre que requerido (básicamente no formato Javascript), embora a linguagem utilizada pelo programador seja Pascal, C# ou Basic..
O código para execução no servidor é sempre transformado em código binário, o controle de acesso a banco de dados via instruções SQL consequentemente e feito a partir deste código.
Assim sendo vamos começar a criação nosso “form” de upload de fotos, gerando a interface com o usuário final, vide figuras 47,48, onde iniciamos a criação do form com o nome de Inclui_Fotos
Figura 47
Figura 48
Nosso form conterá um campo para o usuário digitar a descrição da foto que será objeto de upload, vide figura 49 e a seguir buscaremos o custom control “fileUploader”, como mostrado no destaque da figura no canto superior direito da tela.
Após baixar o controle FileUploader, localizaremos a sua propriedade, “show Submit Button” (ou seja não vamos querer que o botão de submit apareça no controle para upload) e a desabilitaremos, como mostrado na figura 50.
A figura 50 mostra também como será o form que fará a nossa interface de upload de arquivos de fotos com o usuário de nossa aplicação.
Vamos agora iniciar o código da nossa aplicação, para tanto vamos nos posicionar na paleta Home, a seguir clicamos na opção View, e podemos então identificar as opções ( vide figura 51):
“Browser Code” , que utilizaremos para poder escrever o código a ser executado pelo “browser”
“Server Code” , que utilizaremos para poder escrever o código a ser executado pelo Servidor
Figura 51
O código a ser escrito para ser executado no “Browser Side”, ou seja no Browser ,pode ser visto nas figuras
Na Interface
item 1 – deve-se acrescentar a unit SystemWebMethod à clausula uses
item 2 – cria-se uma variável “private” tipo string, para acomodar a chave “MFK$GUID”, no nosso exemplo o ela se denomina chave_MFK_GUID
item 3 – em public:
define-se a função GetFieldValueByName(Fieldname : string) : string ;override; define-se também a procedure Handle_Post(Method : webmethod);
Na implementation
item 4 – deve-se acrescentar a unit SystemInternalServices à cláusula uses.
Function Inclui_fotos.GetFieldValueByName(FieldName : string): string; Begin
IF FieldName= 'MFK$GUID' then result:=Chave_MFK_GUID else
result:= Nil; end;
Esta função quando recebe o nome de um campo da tabela chave “MFK$GUID” , devolve o valor do respectivo campo chave do registro processado.
item 6 – vamos criar o código de nossa procedure
Function Inclui_fotos.Handle_Post(Method : Webmethod); Begin Chave_MFK_GUID := TWebMethod_Faz_upload(method).Chave_MFK_GUID; Fileuploader1.addparam('MFK$TABLE_NAME','FOTOS');// Fileuploader1.addparam('MFK$FIELD_NAME','NOME_ARQUIVO_FOTO'); Fileuploader1.submit; end; Observe que :
WebMethod_Faz_upload é um webmethod que criaremos posteriormente.
Para que o control Fileuploader faça o upload, passamos a ele dois parâmetros :
◦ O primeiro associa ao campo “MFK$TABLE_NAME” o nome da tabela onde o
upload será registrado (no nosso exemplo a tabela FOTOS)
◦ O segundo associa ao campo “MFK$FIELD_NAME” o nome do campo onde será
feito o registro do campo objeto de upload.
◦ Lembre-se que os nomes campos de “MFK$TABLE_NAME” e
“MFK$FIELD_NAME” são nomes reservados do Morfik e não mudam.
Existe ainda um último código a ser escrito para processamento no browser.
Item 7 – é o código correspondente a ser executado quando for pressionado o botão para confirmar a operação de upload, vide figura 54.
Procedure Inclui_fotos.Button2Click(Event: TDOMEvent); var method : TWebMethod_Faz_upload; Begin method:= TWebMethod_Faz_upload.create; method.descricao_da_foto :=TextEdit1.text; method.onwebmethodreturn :=@handle_Post; method.execute; // closeForm('inclui_fotos'); openForm('index','','openMode=refresh'); End;
Figura 54
A seguir vamos escrever o código a ser processado do lado do servidor, notadamente o webmethod que instanciamos no nosso código a ser executado no browser.
Para tanto selecionamos a paleta Home e a seguir a opção View e a opção Server Code.
Agora posicionados no editor de código a ser processado no servidor, vamos então escrever as instruções :
item 1 – Acrescentamos a cláusula uses SystemWebMethod;
item 2 – Definimos os parâmetros a serem utilizados pelo nosso webmethod de nominado WebMethod_Faz_Upload. Vide figura 56.
O primeiro parâmetro que denominamos de Descricao_da_foto, é um campo tipo string que como o próprio nome indica será utilizado para receber (dai o atributo de seu “WSFieldKind” ser “in” (entrada)) a descrição da foto que iremos uploadar.
OBS- dependendo do número de campos a serem inseridos existirão uma ou mais instruções semelhantes com as acima (uma para cada campo a ser inserido na tabela)
O segundo parâmetro que denominamos de Chave_MFK_GUID, e como o nome indica será utilizado para fornecer o valor da chave “MKF$GUID” obtida após o insert do registro (dai o atributo de seu “WSFieldKind” ser “out” (saída).
Obs- Na prática sempre deverá existir uma única linha de instrução como a acima.
WebMethod_Faz_upload = Class(WebMethod)
Chave_MFK_GUID : string; ['WSPublished=true','WSfieldKind=out']; Private
Public
Procedure execute; override; end;
['"WSPublished=true"'];
Figura 56
Vamos a seguir escrever o código de nosso webmethod propriamente dito, vide figura 57. Item 3 - O webmethod que denominamos de WebMethod_Faz_upload, consiste basicamente de instruções SQL para inserir a descrição da foto a ser uploadada, retornando após a inserção do novo registro ao conteúdo do campo chave “MFK$GUID”.
Importante lembrar que o campo “MFK$GUID” é criado pelo Morfik, indicando a localização do registro.
Este valor será posteriormente utilizado pelo controle Fileuploader1.
Procedure WebMethod_Faz_upload.execute;
BEGIN
// instrução sql padrão que retorna o valor do campo chave "MFK$GUID" // o campo "MFK$GUID" serve para posterior localização do registro // que acaba de ser incluído
Instrucao_SQL := DefaultDBConnection.CreateSQLCommand(
'INSERT INTO "FOTOS" ("DESCRICAO_DA_FOTO") VALUES (:"DESCRICAO_FOTO") RETURNING "MFK$GUID"');
TRY
Instrucao_SQL.prepare;
Instrucao_SQL.parambyname('DESCRICAO_FOTO').asstring:=Descricao_da_foto; Instrucao_SQL.execute;
// recupera o valor do campo "MFK$GUID" do registro incluido // pela instrução SQL Chave_MFK_GUID:=Instrucao_SQL.fieldbyname('MFK$GUID').asstring; FINALLY DefaultDBconnection.destroySQLCommand(Instrucao_SQL); END; END; Figura 57 Terminamos assim o código básico de nossa aplicação.
figura 58.
Vamos então digitar a descrição da foto (1) e depois pressionar o botão Browse (2).
Figura 58
Deverá então ser exibida uma tela semelhante à mostrada na figura 59, onde deveremos localizar a foto que desejamos uploadar, e a seguir pressionar o botão abrir.
Figura 59
Pressiona-se então o botão confirmar. (2)
Figura 60
Será então exibida uma mensagem semelhante a mostrada na tela 61, onde basta pressionar o botão continue.
A nossa aplicação nos remete então a tela de exibição da figuras que foram previamente uploadadas.
Figura 62
INTERESSANTE SABER 1 - Na página 7, comentamos o o funcionamento da propriedade “Field Class” pode ser “Linked” e da propriedade “URL”, quando definimos campos de uma tabela para finalidade de upload.
Na figura 63 podemos ver na prática que o Morfik de forma inteligente, cria o respectivo diretório referenciado pela propriedade URL, e dentro dele automaticamente vai salvando os arquivos que são objeto de upload pela nossa aplicação.
Figura 64
INTERESSANTE SABER 2 - se após abrirmos a nossa tabela, utilizada para controlar o upload de nossas fotos, vide figura 65.
mostrada ba figura 65, onde poderemos ver o conteúdo do arquivo que foi objeto de uplload.
Figura 65
Finalizando, esperamos que as nossas explicações passo a passo ajudem aos que estão se iniciando no fabuloso mundo do desenvolvimento de aplicações com Morfik.
Agradecemos a todo pessoal do Morfik Forum em especial a Dmitry Medvedev,Ivailo
Burov,Constantine Ischencko,John Atchison e tantos outros sempre presentes e dispostos a ajudar.
