Podemos agora ver no IDE do Morfik os objetos que já incorporamos ao nosso projeto : 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 MB Softmaster Ltda falecom@mbsoftmaster.com.br página 31
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. MB Softmaster Ltda falecom@mbsoftmaster.com.br página 32
Figura 49 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. Figura 50 MB Softmaster Ltda falecom@mbsoftmaster.com.br página 33
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 MB Softmaster Ltda falecom@mbsoftmaster.com.br página 34
Figura 52 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. Item 5 vamos criar o código de nossa função : MB Softmaster Ltda falecom@mbsoftmaster.com.br página 35
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. MB Softmaster Ltda falecom@mbsoftmaster.com.br página 36
Figura 53 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; MB Softmaster Ltda falecom@mbsoftmaster.com.br página 37
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. MB Softmaster Ltda falecom@mbsoftmaster.com.br página 38
Figura 55 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) Descricao_da_foto : string; ['WSPublished=true','WSFieldKind=in']; MB Softmaster Ltda falecom@mbsoftmaster.com.br página 39
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; MB Softmaster Ltda falecom@mbsoftmaster.com.br página 40
var // variavel para acomodar instruções SQL Instrucao_SQL : Tsqlcommand; 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. Basta executar a mesma e se tudo estiver certo será exibida uma tela semelhante a mostrada na MB Softmaster Ltda falecom@mbsoftmaster.com.br página 41
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 MB Softmaster Ltda falecom@mbsoftmaster.com.br página 42
Será então exibida uma tela semelhante à mostrada n figura 60, onde podemos ver que o componente Fileuploader1, exibe o local de onde a foto a ser uploadada será buscada. (1). 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. Figura 61 MB Softmaster Ltda falecom@mbsoftmaster.com.br página 43
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. MB Softmaster Ltda falecom@mbsoftmaster.com.br página 44
Figura 63 Figura 64 INTERESSANTE SABER 2 - se após abrirmos a nossa tabela, utilizada para controlar o upload de nossas fotos, vide figura 65. Clicarmos campo Nome_arquivo_foto (1), será exibida pelo Morfik, uma tela semelhante à MB Softmaster Ltda falecom@mbsoftmaster.com.br página 45
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. MB Softmaster Ltda falecom@mbsoftmaster.com.br página 46